/*
 * AD Animated Mark — reusable Experience Optimization Agent processing/resolution indicator.
 *
 * Pure CSS stroke-draw animation (no Lottie, no runtime library, no canvas, no JSON payload).
 * The mark's single continuous <path> uses pathLength="1" (see ad-mark.js MARK_MARKUP) so
 * stroke-dasharray/stroke-dashoffset can be expressed in normalized 0-1 units regardless of the
 * path's real geometric length.
 *
 * 6 locked states, one continuous 2.4s ease-in-out loop:
 *   initiate  (0%   - red origin, draw begins)
 *   flow      (20%  - red -> blue, drawing)
 *   transition(45%  - blue, mid-draw)
 *   build     (70%  - blue -> green, nearing full draw)
 *   complete  (85%  - fully drawn, orange dot forms + pulses)
 *   reset     (100% == 0% - fades back to origin, seamless loop)
 *
 * The gradient itself (red -> blue -> green) is fixed in the SVG's <linearGradient>; the
 * animation drives draw progress (stroke-dashoffset), overall glow (drop-shadow), and the
 * completion dot (opacity + scale pulse) in sync with that gradient.
 */

.ad-mark {
	--ad-mark-size: 96px;
	display: inline-block;
	width: var(--ad-mark-size);
	height: calc(var(--ad-mark-size) * 150 / 240);
	line-height: 0;
}

.ad-mark__svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ad-mark__path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: ad-mark-draw 2.4s ease-in-out infinite;
	transform-origin: center;
}

.ad-mark__dot {
	opacity: 0;
	transform-origin: center;
	animation: ad-mark-dot 2.4s ease-in-out infinite;
}

/* Soft glow — tuned per background so it reads on both light and dark surfaces. */
.ad-mark--on-light .ad-mark__path {
	filter: drop-shadow(0 0 0 rgba(35, 83, 212, 0));
	animation-name: ad-mark-draw, ad-mark-glow-light;
	animation-duration: 2.4s, 2.4s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: infinite, infinite;
}

.ad-mark--on-dark .ad-mark__path {
	animation-name: ad-mark-draw, ad-mark-glow-dark;
	animation-duration: 2.4s, 2.4s;
	animation-timing-function: ease-in-out, ease-in-out;
	animation-iteration-count: infinite, infinite;
}

@keyframes ad-mark-draw {
	0% { stroke-dashoffset: 1; }
	20% { stroke-dashoffset: 0.78; }
	45% { stroke-dashoffset: 0.48; }
	70% { stroke-dashoffset: 0.14; }
	85%, 92% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 1; }
}

@keyframes ad-mark-glow-light {
	0% { filter: drop-shadow(0 0 0 rgba(229, 83, 75, 0)); }
	20% { filter: drop-shadow(0 0 3px rgba(229, 83, 75, 0.35)); }
	45% { filter: drop-shadow(0 0 4px rgba(35, 83, 212, 0.35)); }
	70% { filter: drop-shadow(0 0 4px rgba(14, 156, 132, 0.35)); }
	85%, 92% { filter: drop-shadow(0 0 6px rgba(14, 156, 132, 0.45)); }
	100% { filter: drop-shadow(0 0 0 rgba(229, 83, 75, 0)); }
}

@keyframes ad-mark-glow-dark {
	0% { filter: drop-shadow(0 0 0 rgba(229, 83, 75, 0)); }
	20% { filter: drop-shadow(0 0 4px rgba(229, 83, 75, 0.55)); }
	45% { filter: drop-shadow(0 0 6px rgba(35, 83, 212, 0.55)); }
	70% { filter: drop-shadow(0 0 6px rgba(14, 156, 132, 0.55)); }
	85%, 92% { filter: drop-shadow(0 0 9px rgba(14, 156, 132, 0.65)); }
	100% { filter: drop-shadow(0 0 0 rgba(229, 83, 75, 0)); }
}

@keyframes ad-mark-dot {
	0%, 78% { opacity: 0; transform: scale(0.6); }
	85% { opacity: 1; transform: scale(1); }
	88% { opacity: 1; transform: scale(1.18); }
	92% { opacity: 1; transform: scale(1); }
	97% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.6); }
}

/* Overlay mode (AlexDesignsAdMark.overlay()) — centers the mark over its host container. */
.ad-mark-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.ad-mark-overlay.ad-mark-overlay--on-dark-host {
	background: rgba(11, 18, 32, 0.72);
}

.ad-mark-overlay:not(.ad-mark-overlay--on-dark-host) {
	background: rgba(255, 255, 255, 0.85);
}

/* Reduced motion: show the fully resolved static mark (same meaning — "complete"), no motion. */
@media (prefers-reduced-motion: reduce) {
	.ad-mark__path {
		animation: none !important;
		stroke-dashoffset: 0;
	}
	.ad-mark--on-light .ad-mark__path,
	.ad-mark--on-dark .ad-mark__path {
		animation: none !important;
		filter: drop-shadow(0 0 4px rgba(14, 156, 132, 0.4));
	}
	.ad-mark__dot {
		animation: none !important;
		opacity: 1;
		transform: scale(1);
	}
}