/* R15 motion: native timelines first, IO/WAAPI fallback second. */

[data-erdi-r15-motion] {
	opacity: 1;
	transform: none;
}

/* JS opts the below-fold reveal layer in; without JS every section remains readable. */
html.r15-js [data-erdi-r15-motion] {
	opacity: 0;
	transform: translateY(16px);
}

/*
 * The first viewport is content, not a loading state.  Keep the hero and the
 * immediate 905 nm readout paintable before DOMContentLoaded/Intersection-
 * Observer; only the below-fold sections participate in the reveal system.
 * This also preserves the R14 no-JS contract and prevents LCP render delay.
 */
.erdi-r15-home .erdi-r15-hero [data-erdi-r15-motion],
.erdi-r15-home .erdi-r15-readout [data-erdi-r15-motion] {
	animation: none !important;
	opacity: 1;
	transform: none;
}

html.r15-js [data-erdi-r15-motion].is-revealed {
	animation: erdi-r15-reveal var(--erdi-r15-t-section) var(--erdi-r15-ease-out) both;
}

@supports (animation-timeline: view()) {
	html.r15-js [data-erdi-r15-motion] {
		animation: erdi-r15-reveal linear both;
		animation-range: entry 0% cover 28%;
		animation-timeline: view();
	}

	.erdi-r15-home .erdi-r15-hero [data-erdi-r15-motion],
	.erdi-r15-home .erdi-r15-readout [data-erdi-r15-motion] {
		animation: none !important;
	}
}

[data-erdi-r15-calibrate] {
	font-variant-numeric: tabular-nums;
}

[data-erdi-r15-calibrate].is-calibrated {
	animation: erdi-r15-calibrate var(--erdi-r15-t-calibrate) var(--erdi-r15-ease-out) both;
}

.erdi-r15-hero.is-active .erdi-r15-range-ring--outer {
	animation: erdi-r15-ring-in var(--erdi-r15-t-hero) var(--erdi-r15-ease-out) both;
}

.erdi-r15-hero.is-active .erdi-r15-range-ring--inner {
	animation: erdi-r15-ring-in var(--erdi-r15-t-panel) var(--erdi-r15-ease-out) .12s both;
}

.erdi-r15-hero.is-active .erdi-r15-hud-line {
	animation: erdi-r15-signal-draw var(--erdi-r15-t-panel) var(--erdi-r15-ease-out) .2s both;
}

.erdi-r15-hero.is-active .erdi-r15-hud-ticks {
	animation: erdi-r15-tick-in var(--erdi-r15-t-reveal) var(--erdi-r15-ease-out) .25s both;
}

.erdi-r15-stage-canvas {
	opacity: 0;
	transition: opacity var(--erdi-r15-t-panel) var(--erdi-r15-ease-standard);
}

.erdi-r15-stage-canvas.is-ready {
	opacity: 1;
}

.erdi-r15-stage-canvas.is-error {
	display: none;
}

.erdi-r15-hero-status[data-state='ready'] {
	color: var(--erdi-r15-telemetry-a);
}

.erdi-r15-hero-status[data-state='error'] {
	color: var(--erdi-r15-signal);
}

@keyframes erdi-r15-reveal {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes erdi-r15-calibrate {
	0% {
		opacity: .35;
		transform: translateY(5px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes erdi-r15-ring-in {
	from {
		opacity: 0;
		transform: translate(-50%, -50%) scale(.86);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes erdi-r15-signal-draw {
	from {
		opacity: 0;
		transform: rotate(-11deg) scaleX(0);
		transform-origin: left center;
	}
	to {
		opacity: 1;
		transform: rotate(-11deg) scaleX(1);
		transform-origin: left center;
	}
}

@keyframes erdi-r15-tick-in {
	from {
		opacity: 0;
		transform: translateX(-12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 1ms !important;
	}

	[data-erdi-r15-motion],
	[data-erdi-r15-motion].is-revealed {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.erdi-r15-stage-canvas {
		display: none !important;
	}
}