/**
 * wow-v-motion.css — WORKER 1 ("Motion + velocity"): 2026 browser-wow pass.
 *
 * CSS-only enhancement layer. Every rule is @supports-guarded: browsers
 * without support render the exact static design. prefers-reduced-motion
 * gets the full static experience (main.css section 12 kills every
 * animation/transition globally). html.wow-off (section 8 below) disables
 * everything this file adds — the single-point total rollback.
 *
 * Volt #D9FF00 appears in this file NOWHERE — the accent stays reserved
 * for its existing conversion moments only.
 *
 * Integrator notes:
 *  - Enqueue AFTER main.css so the section 3 .reveal override wins.
 *  - Velocity streaks need markup: <div class="v-streaks" aria-hidden="true">
 *    with six <span class="v-streak"></span> children, as the first child
 *    of .hero--record and of .cta-band.
 *
 * Text domain: onmethod-2027. No emojis.
 *
 * @package onmethod-2027
 */

/* ------------------------------------------------------------------
 * 1. SPEED SLANT — a -4deg forward lean on the big type.
 *    Applied to the h1 element itself; the animated .kt-w spans inside
 *    are never touched, so their translateY keyframes compose cleanly.
 * ------------------------------------------------------------------ */
@supports (transform: skewX(-4deg)) {
	.hero--kinetic h1.kinetic,
	section h2 {
		transform: skewX(-4deg);
	}
}

/* ------------------------------------------------------------------
 * 2. VELOCITY STREAKS — thin horizontal gradient bands drifting
 *    across the dark hero and the CTA band. GPU-cheap: transform-only
 *    keyframes on composited layers, pointer-events none, low opacity.
 *    No volt — neutral white at low alpha on the dark surfaces.
 * ------------------------------------------------------------------ */
@supports (transform: translateX(0)) {
	.v-streaks {
		position: absolute;
		inset: 0;
		overflow: hidden;
		pointer-events: none;
		z-index: 0;
	}

	/* Keep CTA copy above the streak layer (hero grid already sits at z-index 1). */
	.cta-band > :not(.v-streaks) {
		position: relative;
		z-index: 1;
	}

	.v-streak {
		position: absolute;
		top: var(--v-top, 20%);
		left: 0;
		width: 100%;
		height: var(--v-h, 2px);
		background: linear-gradient(90deg,
			transparent 38%,
			rgba(255, 255, 255, 0.16) 50%,
			transparent 62%);
		opacity: var(--v-op, 0.45);
		transform: translateX(-115%);
		animation: v-streak-drift var(--v-dur, 10s) linear infinite;
		animation-delay: var(--v-delay, 0s);
		will-change: transform;
	}

	/* Six lanes: varied height, speed, phase, and opacity for depth. */
	.v-streak:nth-child(1) { --v-top: 12%; --v-h: 2px; --v-dur: 11s; --v-delay: -2s;   --v-op: 0.55; }
	.v-streak:nth-child(2) { --v-top: 28%; --v-h: 1px; --v-dur: 7s;  --v-delay: -5s;   --v-op: 0.35; }
	.v-streak:nth-child(3) { --v-top: 47%; --v-h: 3px; --v-dur: 13s; --v-delay: -8s;   --v-op: 0.45; }
	.v-streak:nth-child(4) { --v-top: 63%; --v-h: 1px; --v-dur: 9s;  --v-delay: -1s;   --v-op: 0.30; }
	.v-streak:nth-child(5) { --v-top: 79%; --v-h: 2px; --v-dur: 15s; --v-delay: -11s;  --v-op: 0.50; }
	.v-streak:nth-child(6) { --v-top: 91%; --v-h: 2px; --v-dur: 8s;  --v-delay: -6.5s; --v-op: 0.38; }

	@keyframes v-streak-drift {
		from { transform: translateX(-115%); }
		to   { transform: translateX(115%); }
	}
}

/* ------------------------------------------------------------------
 * 3. SNAP REVEALS — blur-to-sharp settle layered over the existing
 *    rise-in. Same selector weight class and same animation-range as
 *    main.css section 11, so the rise-in remains the exact fallback:
 *    unsupported browsers skip both, and html.wow-off restores
 *    rise-in with a single animation-name swap (see section 8).
 *    The blur clears in the first ~55% of the range for a snap feel.
 * ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
	body .reveal {
		animation: v-reveal-snap linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 45%;
	}
	@keyframes v-reveal-snap {
		from {
			opacity: 0;
			filter: blur(6px);
			transform: translateY(18px);
		}
		55% {
			opacity: 1;
			filter: blur(0);
			transform: translateY(0);
		}
		to {
			opacity: 1;
			filter: blur(0);
			transform: translateY(0);
		}
	}
}

/* ------------------------------------------------------------------
 * 4. ENTRY FOR JS-INJECTED DOM — @starting-style fade/slide on first
 *    paint. Browsers without @starting-style ignore the at-rule and
 *    render the modules statically; no JS required. .wow-rail keeps its
 *    own centering transform, so it fades only (no transform fight).
 * ------------------------------------------------------------------ */
@supports (transition: opacity 0.45s ease) {
	.wow-roi,
	.founding-ticker {
		transition: opacity 0.45s ease, transform 0.45s ease;
	}
	@starting-style {
		.wow-roi,
		.founding-ticker {
			opacity: 0;
			transform: translateY(14px);
		}
		.wow-rail {
			opacity: 0;
		}
	}
}

/* ------------------------------------------------------------------
 * 5. NAMED VIEW TRANSITIONS — hero kicker, hero title, and wordmark
 *    persist across navigations instead of crossfading with the root.
 *    The root crossfade itself stays in main.css.
 * ------------------------------------------------------------------ */
@supports (view-transition-name: hero-kicker) {
	.hero .kicker {
		view-transition-name: hero-kicker;
	}
	.hero--kinetic h1.kinetic {
		view-transition-name: hero-title;
	}
	.wordmark {
		view-transition-name: site-wordmark;
	}
}

/* ------------------------------------------------------------------
 * 6. SQUIRCLE CORNERS — superellipse corner shape on cards and the
 *    volt CTA. border-radius stays untouched as the fallback shape.
 * ------------------------------------------------------------------ */
@supports (corner-shape: superellipse) {
	.card,
	.btn--volt {
		corner-shape: superellipse;
	}
}

/* ------------------------------------------------------------------
 * 7. SCROLL PARALLAX — subtle translateY drift on the dyno offer
 *    image and the record hero, driven by the view timeline.
 * ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
	.hero--record {
		animation: v-hero-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 110%;
	}
	@keyframes v-hero-parallax {
		from { transform: translateY(16px); }
		to   { transform: translateY(-16px); }
	}

	.offer-dyno {
		animation: v-dyno-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes v-dyno-parallax {
		from { transform: translateY(10px); }
		to   { transform: translateY(-10px); }
	}
}

/* ------------------------------------------------------------------
 * 8. KILL SWITCH — html.wow-off disables everything this file adds.
 * ------------------------------------------------------------------ */
html.wow-off .v-streaks {
	display: none !important;
}
html.wow-off .hero--kinetic h1.kinetic,
html.wow-off section h2 {
	transform: none !important;
}
html.wow-off body .reveal {
	animation-name: rise-in !important; /* restore main.css section 11 exactly */
}
html.wow-off .wow-roi,
html.wow-off .founding-ticker,
html.wow-off .wow-rail {
	transition: none !important;
}
html.wow-off .hero .kicker,
html.wow-off .hero--kinetic h1.kinetic,
html.wow-off .wordmark {
	view-transition-name: none !important;
}
html.wow-off .card,
html.wow-off .btn--volt {
	corner-shape: round; /* initial value: static shape, no motion */
}
html.wow-off .offer-dyno,
html.wow-off .hero--record {
	animation: none !important;
}

/* ------------------------------------------------------------------
 * 9. REDUCED MOTION — full static experience.
 *    main.css section 12 already forces animation: none and
 *    transition: none on every element and pseudo-element, which
 *    covers all motion in sections 2, 3, 4, and 7 above. The remaining
 *    rules in this file are static by design: the speed slant (a fixed
 *    tilt, not motion), the squircle shape, and the view-transition
 *    names (whose root animation main.css already disables here).
 * ------------------------------------------------------------------ */