/* ============================================
   ORBITAL CREATIVE NEXUS — motion system (fx.css)
   OVERHAUL-BRIEF.md Phase 2. Recipes measured on the AI X+ template
   (claude/effects-library.md, Source 7): reveals are a 10 px rise + fade
   over 500 ms ease, staggered 80–100 ms; feature rows light up as they
   cross the middle of the screen. fx.js (loaded in <head>) sets .js on
   <html> and arms everything below. With JS off, or with reduced motion,
   every page is complete and still.

   Rules (brief §3): transform + opacity only; no reveal over 900 ms; the
   LCP heading is never hidden (cascade exempts h1); hidden states exist
   only under .js.
   ============================================ */
:root {
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --fx-rise: 10px;
  --fx-reveal: 500ms;
}

/* ---------- data-fx="rise": the element itself ---------- */
.js [data-fx="rise"] {
  opacity: 0;
  transform: translateY(var(--fx-rise));
  transition: opacity var(--fx-reveal) ease, transform var(--fx-reveal) ease;
  transition-delay: var(--fx-delay, 0ms);
}
.js [data-fx="rise"].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- data-fx="cascade": a header's children, 100 ms apart (FX-12) ----------
   eyebrow → heading → lede. An h1 is never part of it: it is the LCP element and stays put. */
.js [data-fx="cascade"] > :not(h1) {
  opacity: 0;
  transform: translateY(var(--fx-rise));
  transition: opacity var(--fx-reveal) ease, transform var(--fx-reveal) ease;
}
.js [data-fx="cascade"].is-in > :not(h1) {
  opacity: 1;
  transform: none;
}
.js [data-fx="cascade"] > :nth-child(2) { transition-delay: 100ms; }
.js [data-fx="cascade"] > :nth-child(3) { transition-delay: 200ms; }
.js [data-fx="cascade"] > :nth-child(4) { transition-delay: 300ms; }
.js [data-fx="cascade"] > :nth-child(n + 5) { transition-delay: 400ms; }

/* ---------- data-fx="stagger": a grid's children, 70 ms apart, six at most (FX-04) ---------- */
.js [data-fx="stagger"] > * {
  opacity: 0;
  transform: translateY(var(--fx-rise));
  transition: opacity var(--fx-reveal) ease, transform var(--fx-reveal) ease;
}
.js [data-fx="stagger"].is-in > * {
  opacity: 1;
  transform: none;
}
.js [data-fx="stagger"] > :nth-child(2) { transition-delay: 70ms; }
.js [data-fx="stagger"] > :nth-child(3) { transition-delay: 140ms; }
.js [data-fx="stagger"] > :nth-child(4) { transition-delay: 210ms; }
.js [data-fx="stagger"] > :nth-child(5) { transition-delay: 280ms; }
.js [data-fx="stagger"] > :nth-child(n + 6) { transition-delay: 350ms; }

/* ---------- data-fx-lit="<selector>": rows light up as they cross the middle of the screen ----------
   The item nearest the centre is lit; the others sit at 72%. Nothing dims until the first item has
   been lit (so a page never loads dimmed), and a dimmed item lights up under the pointer or when it
   holds focus. */
.js [data-fx-lit] .fx-lit-item {
  transition: opacity var(--fx-reveal) ease;
}
.js [data-fx-lit].has-lit .fx-lit-item:not(.is-lit):not(:hover):not(:focus-within) {
  opacity: 0.72;
}

/* ---------- Entrance (FX-01): the fixed backdrop (glow + floor) fades in after the heading ---------- */
.js .backdrop {
  opacity: 0;
  transition: opacity var(--dur-3) ease 300ms;
}
.js.is-loaded .backdrop { opacity: 1; }

/* ---------- Reduced motion: end states, no movement, no dimming ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-fx="rise"],
  .js [data-fx="cascade"] > :not(h1),
  .js [data-fx="stagger"] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js [data-fx-lit] .fx-lit-item { opacity: 1 !important; transition: none !important; }
  .js .backdrop { opacity: 1 !important; transition: none !important; }
}