/*
 * Aidem Scroll Circle Stats widget — base structural CSS.
 *
 * Colours, sizing and typography all come from the widget's own Style
 * tab controls (Elementor outputs those as per-instance inline CSS).
 * This file only supplies the structural rules those controls don't
 * cover: flex plumbing, the circle shape, and the active-state fill
 * transition.
 *
 * The fill itself replicates the original Blunor hover effect exactly
 * (a circular wipe that slides fully in from the left) but as a
 * transform instead of `left`, which is GPU-composited and doesn't
 * trigger layout - important here because, unlike the original's
 * mouse-hover trigger, the active circle can change frequently while
 * the user scrolls.
 */

/* The widget's own Elementor wrapper. By default Elementor sizes a widget
   to its own content when it sits inside a flex row (shrink-to-fit) - which
   means .ascc-wrap's own `width: 100%` below is 100% of that shrunk box,
   i.e. 100% of itself, leaving no spare room for the "Row Alignment"
   (Left/Center/Right) Style control to actually position the circles with.
   Forcing the wrapper to fill its row makes that control work regardless
   of whatever Layout/Justify Content setting the surrounding Elementor
   Container happens to have. */
.elementor-widget-aidem_scroll_circle_stats,
.elementor-widget-aidem_scroll_circle_stats > .elementor-widget-container {
	width: 100%;
}

.ascc-wrap {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Whatever Elementor container this widget sits inside of can end up
	   giving it a fixed/stretched height (e.g. a flex container with its
	   own "Height" set in px for other, shorter content, or Elementor's
	   own widget-wrapper stretch behaviour cascading a height:100% down
	   from a flex ancestor) - confirmed live on /our-services, where an
	   ancestor's fixed height forced .ascc-wrap down to exactly 500px
	   and our own overflow:hidden above (needed to contain the glow)
	   then sliced the bottom off every circle. height:auto overrides
	   that cascade so the widget always sizes to its own content - a
	   compact strip at its natural height, same as any other Elementor
	   widget - and the flex properties stop a flex-row ancestor from
	   stretching or shrinking it on the cross axis either. (No JS ever
	   sets an inline height/min-height on this element any more - the
	   widget no longer pins/locks on scroll, see
	   scroll-circle-stats-widget.js for why that was dropped.) */
	height: auto !important;
	flex: 0 0 auto;
	align-self: flex-start;
}

.ascc-track {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	width: 100%;
	/* Breathing room between each circle's glow and `.ascc-wrap`'s own
	   overflow:hidden (needed to stop the glow/trail causing horizontal
	   scroll) - without this the halo and edge-ring on the first/last
	   circle, and on the top/bottom of a stacked mobile column, get
	   clipped flush against that boundary instead of fading out. */
	padding: 20px;
}

.ascc-item {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	text-align: center;
}

/* ---- Active-circle glow -------------------------------------------------
   Three parts, all keyed off `.is-active` (added/removed in JS) and all
   sharing one colour via --ascc-glow-color (set by the "Active Circle Glow
   Color" Style control). Deliberately understated - this should read as a
   gentle ambient cue, not a lighting effect:

   1. `.ascc-item::before` - a soft blurred halo sitting BEHIND the circle.
      Lives on `.ascc-item` rather than `.ascc-circle` because `.ascc-circle`
      has `overflow: hidden` (needed for the fill-wipe below), which would
      clip the halo's blur. `.ascc-item` has no other children so it shares
      the circle's exact box - the halo lines up automatically at every
      diameter/breakpoint.

   2. An animated `box-shadow` on `.ascc-circle` itself - a faint ring that
      pulses right along the border/edge. box-shadow is drawn outside the
      border box and is NOT clipped by the element's own overflow:hidden,
      so this is the one part of the effect that can live directly on
      `.ascc-circle`.

   3. `.ascc-item::after` - a separate, elongated glow used only transiently
      (via the `.ascc-trail-fwd` / `.ascc-trail-rev` classes JS adds for a
      moment on activation change) to bridge toward whichever circle is
      next in the direction of travel, then fades out again. See the JS
      file for exactly when these classes are toggled.

   Everything here only animates `opacity`/`transform`/`box-shadow` - no
   layout-triggering properties - and is completely inert until `.is-active`
   or a `.ascc-trail-*` class is present, so it costs nothing on scroll. */

.ascc-item::before {
	content: '';
	position: absolute;
	inset: -14px;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(circle, var(--ascc-glow-color, #D7FF2F) 0%, transparent 70%);
	filter: blur(14px);
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform;
	transition: opacity 320ms ease;
}

.ascc-item.is-active::before {
	opacity: 0.32;
	animation: ascc-glow-pulse 2.6s ease-in-out infinite;
}

@keyframes ascc-glow-pulse {
	0%, 100% { transform: scale(1); opacity: 0.32; }
	50%      { transform: scale(1.05); opacity: 0.2; }
}

/* Trail glow - bridges to the next/previous circle for a moment right as
   the active circle changes. Wide, short, blurred ellipse, centred on the
   item and nudged left/right by `transform` depending on direction and
   whether this item is the one being left or the one being arrived at. */
.ascc-item::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 130%;
	height: 50%;
	z-index: 0;
	border-radius: 50%;
	background: radial-gradient(ellipse, var(--ascc-glow-color, #D7FF2F) 0%, transparent 72%);
	filter: blur(18px);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scaleX(0.4);
	transition: opacity 280ms ease, transform 280ms ease;
}

/* Forward (scrolling further into the sequence): the glow leaves the old
   circle heading right, toward the next one, and arrives at the new circle
   sliding in from the left. */
.ascc-item.ascc-trail-fwd:not(.is-active)::after {
	opacity: 0.18;
	transform: translate(12%, -50%) scaleX(1);
}

.ascc-item.ascc-trail-fwd.is-active::after {
	opacity: 0.18;
	transform: translate(-12%, -50%) scaleX(1);
}

/* Reverse (scrolling back up the sequence): mirrored. */
.ascc-item.ascc-trail-rev:not(.is-active)::after {
	opacity: 0.18;
	transform: translate(-12%, -50%) scaleX(1);
}

.ascc-item.ascc-trail-rev.is-active::after {
	opacity: 0.18;
	transform: translate(12%, -50%) scaleX(1);
}

/* Overlap/gap between circles - driven by the "Circle Overlap / Gap" Style
   control, which sets --ascc-overlap on .ascc-wrap (a negative value
   overlaps the circles like a Venn diagram; positive spaces them apart).
   Uses margin rather than the track's `gap` property because `gap` can't
   go negative. Later items paint over earlier ones automatically (normal
   DOM stacking order), which is what gives the overlapping circles their
   Venn-diagram look since inactive circles are just an outline - and lets
   the trail glow above bleed through that same overlap seam between two
   circles. Row direction uses margin-left; the vertical (Tablet/Mobile)
   breakpoint below switches the same variable over to margin-top so
   circles lap bottom-to-top instead. */
.ascc-item + .ascc-item {
	margin-left: var(--ascc-overlap, 0px);
}

/* ---- The circle itself ------------------------------------------------ */

.ascc-circle {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-style: solid;
	border-radius: 50%;
	transition: box-shadow 320ms ease;
}

.ascc-item.is-active .ascc-circle {
	animation: ascc-edge-pulse 2.6s ease-in-out infinite;
}

@keyframes ascc-edge-pulse {
	0%, 100% {
		box-shadow: 0 0 8px 0 var(--ascc-glow-color, #D7FF2F);
	}
	50% {
		box-shadow: 0 0 16px 2px var(--ascc-glow-color, #D7FF2F);
	}
}

/* The fill "wipe" - starts fully off to the left of the circle (so it's
   entirely hidden by .ascc-circle's own overflow:hidden) and slides to
   cover it. Toggled purely by the .is-active class added/removed in JS;
   the transition duration itself comes from the widget's own "Fill
   Transition (ms)" Style control via transition-duration below. */
.ascc-circle-fill {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	transform: translateX(-100%);
	opacity: 0;
	transition-property: transform, opacity;
	transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	transition-duration: 420ms; /* fallback - overridden by the Style control */
	will-change: transform, opacity;
}

.ascc-item.is-active .ascc-circle-fill {
	transform: translateX(0);
	opacity: 1;
}

/* ---- Content inside the circle (number/icon + label) ------------------ */

.ascc-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 74%;
	gap: 8px;
	text-align: center;
}

.ascc-number-group {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	white-space: nowrap;
}

.ascc-number,
.ascc-prefix,
.ascc-suffix {
	margin: 0;
	line-height: 1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition-property: color;
	transition-timing-function: ease;
	transition-duration: 420ms; /* fallback - overridden by the Style control */
}

.ascc-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	transition-property: color;
	transition-timing-function: ease;
	transition-duration: 420ms; /* fallback - overridden by the Style control */
}

.ascc-icon i,
.ascc-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ascc-icon svg {
	fill: currentColor;
}

.ascc-label {
	margin: 0;
	line-height: 1.3;
	transition-property: color;
	transition-timing-function: ease;
	transition-duration: 420ms; /* fallback - overridden by the Style control */
}

/* ---- Active-state flourishes -------------------------------------------
   Driven purely by class add/remove in JS (see the widget's own JS file).
   Because these are @keyframes animations tied to a class, they replay
   automatically every time the class goes from absent -> present - no
   "restart" logic needed in JS beyond toggling the class itself. */

/* Number "jackpot" scramble - .ascc-jackpot is held on the parent .ascc-item
   for the scramble duration (digits are swapped in via JS), then swapped
   for .ascc-jackpot-settle for one short settle-bounce once the final
   value lands. */
.ascc-item.ascc-jackpot .ascc-number {
	filter: blur(0.5px);
}

@keyframes ascc-settle {
	0%   { transform: scale(1.14); }
	55%  { transform: scale(0.97); }
	100% { transform: scale(1); }
}

.ascc-item.ascc-jackpot-settle .ascc-number {
	display: inline-block;
	animation: ascc-settle 280ms ease;
}

/* Icon/SVG "glitch" reveal - plays once whenever .is-active is freshly
   added to an item whose content type is Icon/SVG. */
@keyframes ascc-icon-glitch {
	0%   { clip-path: inset(0 0 85% 0); transform: translate(-4px, -2px); opacity: 0; }
	12%  { clip-path: inset(10% 0 55% 0); transform: translate(3px, 1px); opacity: .7; }
	24%  { clip-path: inset(45% 0 25% 0); transform: translate(-3px, 2px); opacity: .85; }
	36%  { clip-path: inset(65% 0 5% 0); transform: translate(2px, -2px); opacity: 1; }
	50%  { clip-path: inset(5% 0 70% 0); transform: translate(-2px, 0); }
	65%  { clip-path: inset(0 0 0 0); transform: translate(2px, 1px); }
	80%  { transform: translate(-1px, 0); }
	100% { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 1; }
}

.ascc-item.is-active .ascc-icon {
	animation: ascc-icon-glitch 480ms steps(1, end) both;
}

/* Label fade-in - replays every time the circle becomes active again,
   for both content types. */
@keyframes ascc-label-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ascc-item.is-active .ascc-label {
	animation: ascc-label-fade 420ms ease both;
}

/* ---- Mobile + Tablet: circles stack vertically, no pin (see JS) -------- */
/* 1024px matches this site's configured Tablet breakpoint - circles now
   stack vertically from Tablet down, same as every other widget in this
   plugin that branches at this width for the "no pin" layout. The trail
   glow switches from a left/right nudge to an up/down one so it still
   bridges toward the physically-next circle in the stack. */
@media (max-width: 1024px) {
	.ascc-track {
		flex-direction: column;
		align-items: center;
	}

	.ascc-item {
		width: 100%;
	}

	.ascc-item + .ascc-item {
		margin-left: 0;
		margin-top: var(--ascc-overlap, 0px);
	}

	.ascc-item::after {
		width: 50%;
		height: 130%;
		transform: translate(-50%, -50%) scaleY(0.4);
	}

	.ascc-item.ascc-trail-fwd:not(.is-active)::after {
		transform: translate(-50%, 12%) scaleY(1);
	}

	.ascc-item.ascc-trail-fwd.is-active::after {
		transform: translate(-50%, -12%) scaleY(1);
	}

	.ascc-item.ascc-trail-rev:not(.is-active)::after {
		transform: translate(-50%, -12%) scaleY(1);
	}

	.ascc-item.ascc-trail-rev.is-active::after {
		transform: translate(-50%, 12%) scaleY(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ascc-circle-fill,
	.ascc-number,
	.ascc-prefix,
	.ascc-suffix,
	.ascc-icon,
	.ascc-label {
		transition: none !important;
	}

	.ascc-item.is-active .ascc-icon,
	.ascc-item.is-active .ascc-label,
	.ascc-item.ascc-jackpot-settle .ascc-number {
		animation: none !important;
	}

	.ascc-item.ascc-jackpot .ascc-number {
		filter: none !important;
	}

	.ascc-item::before,
	.ascc-item::after {
		transition: none !important;
	}

	.ascc-item.is-active::before {
		animation: none !important;
		opacity: 0.24;
	}

	.ascc-item.is-active .ascc-circle {
		animation: none !important;
		box-shadow: 0 0 10px 1px var(--ascc-glow-color, #D7FF2F);
	}

	.ascc-item.ascc-trail-fwd::after,
	.ascc-item.ascc-trail-rev::after {
		opacity: 0 !important;
	}
}