/* ==========================================================================
   GATE V3 — MOTION SYSTEM
   --------------------------------------------------------------------------
   Three levels, one easing family. Motion supports comprehension; it never
   gates content. Everything below degrades to a static, fully-readable page
   under prefers-reduced-motion or with JS disabled.

     L1  microinteractions   150–250ms   buttons, links, tabs, selectors
     L2  UI transitions      250–500ms   accordions, periods, notes, charts
     L3  editorial entrances 500–800ms   hero, product objects, diagrams

   Reveal type is chosen by MEANING, not applied uniformly:
     .reveal            text            small vertical rise
     .reveal--object    product/3D      depth: scale + rise
     .reveal--cards     editorial       staggered children
     .reveal--diagram   process         progressive draw
     .reveal--data      figures         value/'bar transition
     .reveal--connector relationship    connector grows from centre
     .reveal--mask      dark evidence   controlled wipe
   Some sections intentionally have none.
   ========================================================================== */

:root {
  --m1: 200ms;
  --m2: 380ms;
  --m3: 640ms;
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   SCROLL REVEALS
   -------------------------------------------------------------------------- */
.reveal            { opacity: 0; transform: translateY(16px); }
.reveal--object    { opacity: 0; transform: translateY(26px) scale(0.965); }
.reveal--connector { opacity: 0; }
/* NB: a fully-clipped element (inset ... 100%) has zero painted area and
   IntersectionObserver never reports it as intersecting. Leave a sliver —
   opacity:0 keeps it invisible either way. */
.reveal--mask      { opacity: 0; clip-path: inset(0 0 88% 0); }
.reveal--data      { opacity: 0; transform: translateY(10px); }

.reveal.is-in,
.reveal--object.is-in,
.reveal--data.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--m3) var(--m-ease), transform var(--m3) var(--m-ease);
}
.reveal--object.is-in { transition-duration: 760ms; }
.reveal--connector.is-in { opacity: 1; transition: opacity var(--m2) var(--m-ease); }
.reveal--mask.is-in {
  opacity: 1; clip-path: inset(0 0 0 0);
  transition: opacity var(--m2) var(--m-ease), clip-path 700ms var(--m-ease);
}

/* staggered children — editorial cards, step sequences, metric rows */
.reveal--cards > * { opacity: 0; transform: translateY(18px); }
.reveal--cards.is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--m2) var(--m-ease), transform var(--m2) var(--m-ease);
}
.reveal--cards.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal--cards.is-in > *:nth-child(2) { transition-delay: 80ms; }
.reveal--cards.is-in > *:nth-child(3) { transition-delay: 160ms; }
.reveal--cards.is-in > *:nth-child(4) { transition-delay: 240ms; }
.reveal--cards.is-in > *:nth-child(5) { transition-delay: 320ms; }

/* process sequences draw their connector as the steps land */
.reveal--diagram .step { opacity: 0; transform: translateY(14px); }
.reveal--diagram.is-in .step {
  opacity: 1; transform: none;
  transition: opacity var(--m2) var(--m-ease), transform var(--m2) var(--m-ease);
}
.reveal--diagram.is-in .step:nth-child(1) { transition-delay: 0ms; }
.reveal--diagram.is-in .step:nth-child(2) { transition-delay: 110ms; }
.reveal--diagram.is-in .step:nth-child(3) { transition-delay: 220ms; }
.reveal--diagram.is-in .step:nth-child(4) { transition-delay: 330ms; }
.reveal--diagram.is-in .step:nth-child(5) { transition-delay: 440ms; }

/* --------------------------------------------------------------------------
   HERO — entrance, then a very small continuous float
   -------------------------------------------------------------------------- */
.hero-seq > * { opacity: 0; transform: translateY(20px); }
.hero-seq.is-in > * {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--m-ease), transform 700ms var(--m-ease);
}
.hero-seq.is-in > *:nth-child(2) { transition-delay: 90ms; }
.hero-seq.is-in > *:nth-child(3) { transition-delay: 170ms; }

.hero__instrument { opacity: 0; transform: translateY(30px) scale(0.97); }
.hero__instrument.is-in {
  opacity: 1; transform: none;
  transition: opacity 780ms var(--m-ease) 180ms, transform 780ms var(--m-ease) 180ms;
}

/* 3–6px travel, several seconds — barely perceptible, never toy-like */
@keyframes gate-float      { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes gate-float-slow { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.hero__instrument.is-in .note-card { animation: gate-float 7s ease-in-out 1.2s infinite; }
.hero__marks .token-mark:nth-child(1) { animation: gate-float-slow 9s ease-in-out 1.4s infinite; }
.hero__marks .token-mark:nth-child(2) { animation: gate-float 6.2s ease-in-out 1.8s infinite; }
.verify-note .token-mark { animation: gate-float 8s ease-in-out 2s infinite; }

/* atmospheric fields drift extremely slowly */
@keyframes gate-drift {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(2%, -1.5%, 0) scale(1.04); }
}
.atmos::before { animation: gate-drift 26s ease-in-out infinite; will-change: transform; }

/* pointer parallax — desktop only, applied to product objects only */
.parallax { transition: translate 500ms var(--m-ease); will-change: translate; }

/* --------------------------------------------------------------------------
   L2 — UI TRANSITIONS
   -------------------------------------------------------------------------- */
/* value changes crossfade rather than flashing */
.val-swap { transition: opacity 140ms ease-out, transform 140ms ease-out; }
.val-swap.is-swapping { opacity: 0; transform: translateY(-4px); }

/* payout visualisations reinforce the product difference */
.viz-maturity__end { transition: transform var(--m2) var(--ease-spring), box-shadow var(--m2) var(--m-ease); }
.viz-maturity__end.is-set { animation: gate-pop 420ms var(--ease-spring); }
@keyframes gate-pop { 0% { transform: scale(0.2); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

.viz-amort i { transform-origin: bottom; animation: gate-grow 320ms var(--m-ease) both; }
@keyframes gate-grow { from { transform: scaleY(0.15); opacity: 0.3; } to { transform: scaleY(1); opacity: 1; } }

/* meters and chart bars animate to position once */
.meter__fill { transition: width 620ms var(--m-ease); }

/* navigation: the current-section underline slides between items */
.nav__slider {
  position: absolute; bottom: 2px; height: 2px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  opacity: 0; width: 0; left: 0;
  transition: transform var(--m2) var(--m-ease), width var(--m2) var(--m-ease), opacity var(--m1) var(--m-ease);
  pointer-events: none;
}
.nav__slider.is-on { opacity: 1; }
/* the per-link rule is replaced by the shared slider */
.nav__link.is-current::after { display: none; }

/* progress rail feels continuous rather than stepped */
.rail__progress { transition: width 120ms linear; }

/* --------------------------------------------------------------------------
   L1 — INTERACTION STATES (complete set on every control)
   -------------------------------------------------------------------------- */
.btn, .tabs__btn, .segmented__btn, .option, .chip,
.disclosure__trigger, .link-arrow, .nav__link, .rail__item,
.sheet__link, .cabinet__navlink, .terminal__open, .wallet-brand {
  transition: background-color var(--m1) var(--m-ease),
              border-color var(--m1) var(--m-ease),
              color var(--m1) var(--m-ease),
              box-shadow var(--m1) var(--m-ease),
              transform var(--m1) var(--m-ease);
}
.btn:active            { transform: translateY(1px) scale(0.995); }
.tabs__btn:active,
.segmented__btn:active { transform: scale(0.98); }
.option:active         { transform: scale(0.985); }

.btn:disabled, .btn[aria-disabled="true"],
.option:disabled, .option[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none !important; box-shadow: none;
}

/* only genuinely interactive cards respond to hover */
a.card, button.card, .news-card, .access-route {
  transition: transform var(--m1) var(--m-ease), box-shadow var(--m1) var(--m-ease);
}
@media (hover: hover) {
  .news-card:hover { transform: translateY(-2px); box-shadow: var(--e-3); }
  .news-card:hover .arw { transform: translateX(4px); }
  .access-route:hover .access-obj { transform: translateY(-2px); }
  .access-obj { transition: transform var(--m1) var(--m-ease); }
  .cab-note:hover { background: var(--c-surface-muted); }
}
.cab-note { transition: background-color var(--m1) var(--m-ease); }

/* cursor correctness */
.cabinet__navlink, .cab-appbar__brand, .wallet-slot { cursor: default; }
.terminal__open, .nav__link, .rail__item { cursor: pointer; }

/* --------------------------------------------------------------------------
   REDUCED MOTION — remove continuous motion and large travel, keep state
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--object, .reveal--data, .reveal--connector,
  .reveal--mask, .reveal--cards > *, .reveal--diagram .step,
  .hero-seq > *, .hero__instrument {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero__instrument.is-in .note-card,
  .hero__marks .token-mark,
  .verify-note .token-mark,
  .atmos::before,
  .viz-amort i,
  .viz-maturity__end.is-set { animation: none !important; }
  .parallax { translate: none !important; transition: none !important; }
  .btn:active, .option:active, .tabs__btn:active { transform: none; }
}

/* No-JS: nothing is ever hidden behind an observer that never fires */
.no-js .reveal, .no-js .reveal--object, .no-js .reveal--data,
.no-js .reveal--connector, .no-js .reveal--mask,
.no-js .reveal--cards > *, .no-js .reveal--diagram .step,
.no-js .hero-seq > *, .no-js .hero__instrument {
  opacity: 1; transform: none; clip-path: none;
}