/* GENERATED from frontend/foundations/choreography.css — do not edit this copy. */
/* ============================================================================
   YWE choreography — entrances that arrive in sequence.
   Promoted from public/store/reveal.js, which already did this well on one
   surface. Source of truth; synced by scripts/sync-frontend-foundations.mjs.

   Everything here reads motion.css tokens. Load ywe-motion.css first.
   Spec: docs/SPEC_MOTION_SYSTEM.md §6   Guide: docs/MOTION.md
   ============================================================================ */

/* An element waiting to arrive. Hidden only once JS confirms it can reveal it —
   `.choreo-ready` is set by choreography.js. Without JS the content is simply
   visible, which is the correct failure. */
.choreo-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rise, 9px));
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--t-standard, 320ms) var(--ease-enter, cubic-bezier(.364, 0, .164, 1)),
    transform var(--t-standard, 320ms) var(--ease-enter, cubic-bezier(.364, 0, .164, 1));
}

/* A hero leads: it travels further and takes longer, so the eye lands on it
   before the row beneath it starts. */
[data-reveal="hero"].is-revealed {
  transition:
    opacity   var(--t-slow, 720ms) var(--ease-enter, cubic-bezier(.364, 0, .164, 1)),
    transform var(--t-slow, 720ms) var(--ease-enter, cubic-bezier(.364, 0, .164, 1));
}
.choreo-ready [data-reveal="hero"] {
  transform: translateY(calc(var(--rise, 9px) * 1.6));
}

/* Reduced motion: no travel, no wait. Content is simply there. */
@media (prefers-reduced-motion: reduce) {
  .choreo-ready [data-reveal],
  .choreo-ready [data-reveal="hero"] {
    opacity: 1;
    transform: none;
  }
  [data-reveal].is-revealed {
    transition: none;
  }
}

/* ----------------------------------------------------------------------------
   Cascade — children of a container arrive in sequence. CSS only, so it works
   for JS-injected children (a CSS animation runs when a node enters the DOM)
   without any change to a render path.

   Capped at 12 steps: past ~430ms the last item reads as forgotten rather than
   sequenced, and anything beyond the cap simply arrives with step 12.
   ---------------------------------------------------------------------------- */
[data-choreo="cascade"] > * {
  animation: ywe-cascade-in var(--t-standard, 320ms)
             var(--ease-enter, cubic-bezier(.364, 0, .164, 1)) both;
}
[data-choreo="cascade"] > *:nth-child(1)  { animation-delay: calc(var(--stagger-dense, 36ms) * 0); }
[data-choreo="cascade"] > *:nth-child(2)  { animation-delay: calc(var(--stagger-dense, 36ms) * 1); }
[data-choreo="cascade"] > *:nth-child(3)  { animation-delay: calc(var(--stagger-dense, 36ms) * 2); }
[data-choreo="cascade"] > *:nth-child(4)  { animation-delay: calc(var(--stagger-dense, 36ms) * 3); }
[data-choreo="cascade"] > *:nth-child(5)  { animation-delay: calc(var(--stagger-dense, 36ms) * 4); }
[data-choreo="cascade"] > *:nth-child(6)  { animation-delay: calc(var(--stagger-dense, 36ms) * 5); }
[data-choreo="cascade"] > *:nth-child(7)  { animation-delay: calc(var(--stagger-dense, 36ms) * 6); }
[data-choreo="cascade"] > *:nth-child(8)  { animation-delay: calc(var(--stagger-dense, 36ms) * 7); }
[data-choreo="cascade"] > *:nth-child(9)  { animation-delay: calc(var(--stagger-dense, 36ms) * 8); }
[data-choreo="cascade"] > *:nth-child(10) { animation-delay: calc(var(--stagger-dense, 36ms) * 9); }
[data-choreo="cascade"] > *:nth-child(11) { animation-delay: calc(var(--stagger-dense, 36ms) * 10); }
[data-choreo="cascade"] > *:nth-child(n+12) { animation-delay: calc(var(--stagger-dense, 36ms) * 11); }

@keyframes ywe-cascade-in {
  from { opacity: 0; transform: translateY(var(--rise, 9px)); }
  to   { opacity: 1; transform: none; }
}

/* A skeleton is already a waiting state — it must not wait to appear. */
[data-choreo="cascade"].skeleton-track > * { animation: none; }

@media (prefers-reduced-motion: reduce) {
  [data-choreo="cascade"] > * { animation: none; }
}