/* motion.css — reveal hidden state. Applies ONLY when JS marks motion active
   (html.motion-ready is added by index.js when reduced-motion is not preferred).
   Without this class (no-JS, SSR, reduced-motion) elements are fully visible — no flash. */

/* ── Load overture ──────────────────────────────────────────────────────────────────────────
   Pre-paint: html.overture-pending::before covers the viewport in the canvas colour (added by
   App.razor's inline script BEFORE first paint; removed by overture.js, or by the failsafe).
   The JS-built .ame-overture layer then draws the brand and lifts. */
html.overture-pending::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--c-canvas);
}

.ame-overture {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ame-overture-inner { text-align: center; }

.ame-overture-word {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-text);
}

.ame-overture-rule {
  display: block;
  height: 2px;
  margin: .8rem auto;
  width: min(260px, 40vw);
  background: var(--c-blue);
  transform-origin: left center;
}

.ame-overture-sub {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .5em;
  text-indent: .5em; /* visually recenters the tracked-out text */
  color: var(--c-brand-green-text);
}

html.motion-ready [data-rv] {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

/* Directional variants (wow wave 2026-07-31): reveal.js tweens x/y/scale to neutral, so the
   choreography direction is declared entirely in markup. */
html.motion-ready [data-rv="left"]  { transform: translateX(-36px); }
html.motion-ready [data-rv="right"] { transform: translateX(36px); }
html.motion-ready [data-rv="zoom"]  { transform: scale(.94) translateY(24px); }

/* Micro-variance (wave 2): opacity-only reveal — no translate, just a fade. reveal.js tweens
   x/y/scale/opacity to neutral as-is, so the variant is declared entirely here. */
html.motion-ready [data-rv="fade"] { transform: none; }

html.motion-ready [data-rv].is-in {
  opacity: 1;
  transform: none;
}

/* ── Stat accent flash (wave 2) ─────────────────────────────────────────────────────────────
   count-up.js adds .count-done to a [data-count] stat when its tween lands and removes it
   ~600 ms later; the transition carries the colour up to the flash tint and eases it back.
   Gated on motion-ready — reduced-motion / no-JS get no transition and never see the class. */
html.motion-ready [data-count] { transition: color .45s ease; }
html.motion-ready [data-count].count-done { color: var(--c-blue-text); }

/* ── Accent section wipe (wave 2) ───────────────────────────────────────────────────────────
   section-wipe.js builds a .wipe-line hairline at the top edge of any SECTION carrying
   data-wipe="red"|"green" and wipes it in (accent tint set inline by the module, mirroring
   atmosphere.js). The line is JS-created and motion-only, so its collapsed start-state needs
   no motion-ready scoping — no-JS / reduced-motion have no line at all and the section renders
   exactly as authored. `span.wipe-line` (0,2,1) deliberately outweighs global.css's
   `[data-atmo] > :not(.atmo-canvas)` (0,2,0), which would otherwise force position:relative
   and push the line into the section's flex flow. */
[data-wipe]:not(.section-wipe) { position: relative; }
[data-wipe] > span.wipe-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}

/* ── Scroll-velocity hint (wave 2) ──────────────────────────────────────────────────────────
   velocity-skew.js shears [data-skew] by up to 1.2° while scrolling fast (spring-back at rest).
   The transform itself is GSAP-owned — quickSetter composes the skew with reveal.js's x/y on
   the same element — so this rule only pre-warms the compositor layer. */
html.motion-ready [data-skew] { will-change: transform; }

/* Custom cursor: hide the native pointer on EVERY element while the reticle is active.
   Global (not component-scoped) because it must reach all descendants of <body>, which
   a scoped rule cannot target. cursor.js toggles body.has-custom-cursor (fine pointer +
   motion allowed); the reticle's own styling is scoped in Components/Layout/Cursor.razor.css. */
body.has-custom-cursor, body.has-custom-cursor * { cursor: none !important; }