/**
 * wow-lap.css — STREAM B (narrative spine): lap progress rail + sector transitions.
 *
 * Enhancement only: never hides or delays content. All motion lives inside
 * @supports (animation-timeline: view()) so unsupported browsers keep the
 * static design. prefers-reduced-motion gets the full static experience.
 * html.wow-off is the kill switch for the whole layer.
 *
 * Volt #D9FF00 appears here ONLY on telemetry accents (car dot, active
 * marker, price underline draw) per the volt discipline rule.
 *
 * Text domain: onmethod-2027. No emojis.
 *
 * @package onmethod-2027
 */

/* ------------------------------------------------------------------
 * 1. LAP PROGRESS RAIL — fixed mini track map (desktop) / slim top bar (mobile)
 * ------------------------------------------------------------------ */

.wow-rail {
	position: fixed;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 6px;
	opacity: 0.45;
	transition: opacity 0.3s ease;
	pointer-events: auto;
}

.wow-rail:hover,
.wow-rail:focus-within {
	opacity: 1;
}

.wow-rail__label {
	margin: 0;
	writing-mode: vertical-rl;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
	max-height: 40vh;
	overflow: hidden;
}

.wow-rail__map svg {
	display: block;
	width: 64px;
	height: auto;
	overflow: visible;
}

.wow-rail__track {
	stroke: rgba(140, 148, 156, 0.55);
	stroke-width: 3;
	stroke-linecap: round;
}

.wow-rail__start {
	stroke: rgba(140, 148, 156, 0.8);
	stroke-width: 2;
}

.wow-rail__car {
	fill: #D9FF00; /* telemetry accent */
	filter: drop-shadow(0 0 6px rgba(217, 255, 0, 0.8));
}

.wow-rail__marker {
	cursor: pointer;
	outline: none;
}

.wow-rail__marker:focus-visible .wow-rail__dot {
	stroke: #D9FF00;
	stroke-width: 2;
}

.wow-rail__hit {
	fill: transparent;
}

.wow-rail__dot {
	fill: rgba(140, 148, 156, 0.9);
	transition: fill 0.25s ease, r 0.25s ease;
}

.wow-rail__marker:hover .wow-rail__dot {
	fill: #ffffff;
}

.wow-rail__marker.is-active .wow-rail__dot {
	fill: #D9FF00; /* telemetry accent */
}

/* Mobile: slim top bar with progress fill + label (track map hidden). */
.wow-rail__bar {
	display: none;
}

/* Hairline progress bar below 1400px: the fixed side rail would sit on top
   of the content column at laptop widths, so it collapses to a 3px volt
   hairline pinned above the sticky header. No label — the header must
   never be covered. */
@media (max-width: 1399.98px) {
	.wow-rail {
		top: 0;
		right: 0;
		left: 0;
		transform: none;
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 0;
		opacity: 1;
		background: transparent;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		pointer-events: none;
		z-index: 60;
	}

	.wow-rail__map,
	.wow-rail__label {
		display: none;
	}

	.wow-rail__bar {
		display: block;
		flex: 1 1 auto;
		height: 3px;
		border-radius: 0;
		background: transparent;
		overflow: hidden;
	}

	.wow-rail__fill {
		display: block;
		height: 100%;
		width: 100%;
		background: #D9FF00; /* telemetry accent */
		transform: scaleX(0);
		transform-origin: left center;
	}
}

/* ------------------------------------------------------------------
 * 2. SECTOR TRANSITIONS — scroll-driven, one signature moment per section.
 *    Gated: unsupported browsers get the static design.
 *    Note: selectors are intentionally more specific than the theme's
 *    .reveal so they win the cascade; keyframes replicate the reveal's
 *    opacity rise so nothing is lost.
 * ------------------------------------------------------------------ */

@supports (animation-timeline: view()) {

	/* S1 — Problem: pain cards slide in like sector boards lighting up. */
	[data-sector="s1"] .grid-3 > *,
	[data-sector="s1"] [class*="pain"] > * {
		animation-name: wow-board-in;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-fill-mode: backwards;
		animation-timeline: view();
		animation-range: entry 5% entry 65%;
	}

	[data-sector="s1"] .grid-3 > *:nth-child(2),
	[data-sector="s1"] [class*="pain"] > *:nth-child(2) {
		animation-range: entry 15% entry 75%;
	}

	[data-sector="s1"] .grid-3 > *:nth-child(3),
	[data-sector="s1"] [class*="pain"] > *:nth-child(3) {
		animation-range: entry 25% entry 85%;
	}

	@keyframes wow-board-in {
		from {
			opacity: 0;
			transform: translateY(28px);
			filter: brightness(0.55);
		}
		to {
			opacity: 1;
			transform: translateY(0);
			filter: brightness(1);
		}
	}

	/* S2 — Offer: the $2,500 price slams in with a volt underline draw. */
	[data-sector="s2"] .price,
	[data-sector="s2"] [class*="price"] {
		position: relative;
		animation-name: wow-slam;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-fill-mode: backwards;
		animation-timeline: view();
		animation-range: entry 20% entry 55%;
	}

	@keyframes wow-slam {
		from {
			opacity: 0;
			transform: scale(1.6);
		}
		60% {
			opacity: 1;
			transform: scale(0.96);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	[data-sector="s2"] .price::after,
	[data-sector="s2"] [class*="price"]::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -0.15em;
		height: 3px;
		width: 100%;
		background: #D9FF00; /* telemetry accent — allowed by volt discipline */
		transform-origin: left center;
		animation-name: wow-volt-draw;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-fill-mode: backwards;
		animation-timeline: view();
		animation-range: entry 45% entry 80%;
	}

	@keyframes wow-volt-draw {
		from {
			transform: scaleX(0);
		}
		to {
			transform: scaleX(1);
		}
	}

	/* S3 — Proof: demo windows tilt into 3D perspective on entry. */
	[data-sector="s3"] .grid-3 > *,
	.demo-window {
		animation-name: wow-tilt;
		animation-duration: 1s;
		animation-timing-function: linear;
		animation-fill-mode: backwards;
		animation-timeline: view();
		animation-range: entry 0% entry 60%;
	}

	@keyframes wow-tilt {
		from {
			opacity: 0;
			transform: perspective(900px) rotateX(7deg) translateY(28px);
		}
		to {
			opacity: 1;
			transform: perspective(900px) rotateX(0deg) translateY(0);
		}
	}

	/* Finish — CTA band: subtle slow checkered-flag wave. */
	.cta-band {
		position: relative;
		overflow: hidden;
	}

	.cta-band::before {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		opacity: 0.07;
		background: repeating-conic-gradient(#ffffff 0% 25%, transparent 0% 50%);
		background-size: 44px 44px;
		animation: wow-flag-drift 24s linear infinite;
	}

	@keyframes wow-flag-drift {
		to {
			background-position: 88px 44px;
		}
	}
}

/* ------------------------------------------------------------------
 * 3. KILL SWITCH — html.wow-off disables the whole layer.
 * ------------------------------------------------------------------ */

html.wow-off .wow-rail {
	display: none !important;
}

html.wow-off [data-sector="s1"] .grid-3 > *,
html.wow-off [data-sector="s1"] [class*="pain"] > *,
html.wow-off [data-sector="s2"] .price,
html.wow-off [data-sector="s2"] [class*="price"],
html.wow-off [data-sector="s2"] .price::after,
html.wow-off [data-sector="s2"] [class*="price"]::after,
html.wow-off [data-sector="s3"] .grid-3 > *,
html.wow-off .demo-window,
html.wow-off .cta-band::before {
	animation: none !important;
}

/* ------------------------------------------------------------------
 * 4. REDUCED MOTION — full static experience. Rail stays (low-key),
 *    but the dot jumps with scroll instead of animating, and every
 *    transition is disabled.
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wow-rail {
		transition: none;
	}

	.wow-rail__dot {
		transition: none;
	}

	[data-sector="s1"] .grid-3 > *,
	[data-sector="s1"] [class*="pain"] > *,
	[data-sector="s2"] .price,
	[data-sector="s2"] [class*="price"],
	[data-sector="s2"] .price::after,
	[data-sector="s2"] [class*="price"]::after,
	[data-sector="s3"] .grid-3 > *,
	.demo-window,
	.cta-band::before {
		animation: none !important;
	}
}