/* ==========================================================================
   YOPROFX / 05 — MOTION
   --------------------------------------------------------------------------
   Three effects, named, and nothing else:

     RAKING     hover — low-angle light. Lives in 04-components.
     SPOTLIGHT  focus/selection — radial territory wash. Lives in 02-base.
     EXPOSURE   scroll entry — arrive at final position, 8px at most.

   Nothing bounces. Nothing overshoots. Nothing slides more than --reveal-shift.
   Reduced motion is a designed path, not a fallback: it should look
   deliberate, not broken.
   ========================================================================== */


/* ==========================================================================
   EXPOSURE — scroll-triggered entrances
   Guarded behind html.js so that with JavaScript disabled every element is
   simply present and visible. Progressive enhancement, not decoration.
   ========================================================================== */

html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-dolly) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-dolly) var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* A hairline that draws itself as its section arrives. */
html.js [data-reveal="rule"] {
  opacity: 1;
  transform: none;
  transform-origin: left center;
  scale: 0 1;
  transition: scale var(--dur-reveal) var(--ease-gate) var(--reveal-delay, 0ms);
}

html.js [data-reveal="rule"].is-revealed { scale: 1 1; }

/* Stagger: children arrive in sequence, 70ms apart, capped at eight so a
   long catalogue never turns into a slow queue. */
[data-stagger] > * { --reveal-delay: 0ms; }
[data-stagger] > *:nth-child(2) { --reveal-delay:  70ms; }
[data-stagger] > *:nth-child(3) { --reveal-delay: 140ms; }
[data-stagger] > *:nth-child(4) { --reveal-delay: 210ms; }
[data-stagger] > *:nth-child(5) { --reveal-delay: 280ms; }
[data-stagger] > *:nth-child(6) { --reveal-delay: 350ms; }
[data-stagger] > *:nth-child(7) { --reveal-delay: 420ms; }
[data-stagger] > *:nth-child(n + 8) { --reveal-delay: 490ms; }


/* ==========================================================================
   COLD OPEN
   The opening sequence — a point of light, then the wordmark etched — lives
   in 07-opening.css, with the wordmark it draws.
   ========================================================================== */

/* The status lamp in the readout strip: a slow breath, not a blink. */
@keyframes ypx-lamp {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.instrument__lamp { animation: ypx-lamp 4.5s var(--ease-dimmer) infinite; }


/* ==========================================================================
   LINK TRANSITIONS
   Same-origin navigations cross-fade instead of cutting to white. Native,
   progressive, and free — browsers without support simply navigate.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: ypx-fade-out var(--dur-base) var(--ease-dimmer) both;
}

::view-transition-new(root) {
  animation: ypx-fade-in var(--dur-slow) var(--ease-dolly) both;
}

@keyframes ypx-fade-out { to { opacity: 0; } }
@keyframes ypx-fade-in  { from { opacity: 0; } }


/* ==========================================================================
   REDUCED MOTION
   The lights are already on. Content is at final position, at full opacity,
   with hairlines drawn. State changes still register — instantly.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal].is-revealed,
  html.js [data-reveal="rule"] {
    opacity: 1;
    transform: none;
    scale: 1 1;
    transition: none;
  }

  .instrument__lamp { animation: none; }

  @view-transition { navigation: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

}