/* ==========================================================================
   $MATE — motion layer
   One place for every transition on the site: page-to-page navigation,
   section entrances, tab changes and the small asset animations. Every rule
   here is switched off wholesale under prefers-reduced-motion at the bottom.
   ========================================================================== */

:root {
  --ease-out:  cubic-bezier(.22, .84, .28, 1);   /* entrances, settles softly */
  --ease-in:   cubic-bezier(.6, .02, .82, .3);   /* exits, leaves quickly     */
  --ease-both: cubic-bezier(.62, .02, .28, 1);   /* A → B moves               */
  --ease-back: cubic-bezier(.2, 1.28, .4, 1);    /* small pops                */

  --t-micro: 180ms;
  --t-el:    420ms;
  --t-sect:  700ms;
  --t-page:  520ms;
}

/* ==========================================================================
   1 · Page transitions
   ========================================================================== */

/* Browsers with cross-document view transitions drive the whole navigation. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: page-out var(--t-page) var(--ease-in) both;
}
::view-transition-new(root) {
  animation: page-in var(--t-page) var(--ease-out) both;
}

@keyframes page-out {
  to { opacity: 0; transform: scale(.985) translateY(-10px); filter: blur(3px); }
}
@keyframes page-in {
  from { opacity: 0; transform: scale(1.012) translateY(14px); filter: blur(3px); }
}

/* The backdrop must not blink between pages — it is the one thing that stays. */
#mate-backdrop { view-transition-name: backdrop; }
::view-transition-old(backdrop),
::view-transition-new(backdrop) { animation: none; mix-blend-mode: normal; }

/* Scripted fallback for browsers without view transitions. */
html.is-leaving .page,
html.is-leaving .board,
html.is-leaving .frame {
  opacity: 0;
  transform: translateY(-12px) scale(.99);
  transition: opacity var(--t-page) var(--ease-in), transform var(--t-page) var(--ease-in);
}

html.no-vt .page,
html.no-vt .board,
html.no-vt .frame {
  animation: page-in var(--t-page) var(--ease-out) both;
}

/* ==========================================================================
   2 · Entrances
   ========================================================================== */

/* A container marked [data-stagger] hands each child an index so they arrive
   in sequence rather than all at once. */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
}
[data-stagger].is-in > * {
  animation: rise var(--t-el) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rise-sm {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

/* Hero pieces come in on load, in reading order. */
.hero__tags   { animation: rise var(--t-sect) var(--ease-out) both; animation-delay: 60ms; }
.hero__title  { animation: rise var(--t-sect) var(--ease-out) both; animation-delay: 130ms; }
.hero__lede   { animation: rise var(--t-sect) var(--ease-out) both; animation-delay: 210ms; }
.hero__actions{ animation: rise var(--t-sect) var(--ease-out) both; animation-delay: 290ms; }
.hero__side .stat:nth-child(1) { animation: rise var(--t-sect) var(--ease-out) both; animation-delay: 250ms; }
.hero__side .stat:nth-child(2) { animation: rise var(--t-sect) var(--ease-out) both; animation-delay: 330ms; }
.topbar       { animation: rise-sm var(--t-el) var(--ease-out) both; }

.hero__tags .tag { animation: pop var(--t-el) var(--ease-back) both; }
.hero__tags .tag:nth-child(2) { animation-delay: 120ms; }
.hero__tags .tag:nth-child(3) { animation-delay: 190ms; }

/* ==========================================================================
   3 · Assets
   ========================================================================== */

/* — the Nexus asterisk turns a sixth of a revolution on hover ————— */
.ncard__head svg { transition: transform .55s var(--ease-both); transform-origin: 50% 50%; }
.ncard__head:hover svg { transform: rotate(60deg); }

/* — orbs: idle drift, and a lift with a lit rim on hover ——————— */
.orb {
  animation: drift 7s ease-in-out infinite;
  will-change: transform;
}
.orb:nth-child(2) { animation-delay: -2.3s; }
.orb:nth-child(3) { animation-delay: -4.6s; }
.orb svg { transition: transform .45s var(--ease-back); }
.orb:hover {
  animation-play-state: paused;
  box-shadow: 0 14px 30px rgba(2, 6, 14, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.orb:hover svg { transform: rotate(90deg) scale(1.08); }
.orb:active { transform: translateY(0) scale(.96); }

@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* — cards catch a slow specular sweep when you hover them ——————— */
.card, .card--dark, .card--deep, .fact, .phase, .tier, .flow__step, .plan, .proof__cell {
  position: relative;
  overflow: hidden;
}
.fact::after, .phase::after, .tier::after, .flow__step::after, .plan::after, .proof__cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.16) 48%, transparent 64%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}
.fact:hover::after, .phase:hover::after, .tier:hover::after,
.flow__step:hover::after, .plan:hover::after, .proof__cell:hover::after {
  opacity: 1;
  animation: sheen 1.05s var(--ease-both) forwards;
}
@keyframes sheen { to { transform: translateX(120%); } }

/* — buttons press, and the cream ones lift ——————————————————— */
.btn, .act, .ticket__cta, .quick, .seg__btn, .slip__btn, .switch__btn, .tab, .plan {
  transition:
    background var(--t-micro) var(--ease-both),
    color var(--t-micro) var(--ease-both),
    border-color var(--t-micro) var(--ease-both),
    transform var(--t-micro) var(--ease-both),
    box-shadow var(--t-micro) var(--ease-both);
}
.btn:active, .act:active, .ticket__cta:active, .quick:active,
.seg__btn:active, .slip__btn:active, .switch__btn:active { transform: scale(.965); }

.btn--cream:hover, .ticket__cta:hover { transform: translateY(-2px); }

/* — the segmented controls slide their lit pill ————————————— */
.seg, .switch, .slip__opts { position: relative; }
.seg__btn, .switch__btn, .slip__btn, .tab {
  transition-duration: var(--t-micro), var(--t-micro), var(--t-micro), var(--t-micro), var(--t-micro);
}

/* — meters fill, then a highlight travels along them ————————— */
.meter { position: relative; overflow: hidden; }
.meter__fill { position: relative; }
.meter__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: meter-sweep 3.6s var(--ease-both) 1.2s infinite;
}
@keyframes meter-sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(220%); } }

/* — donut: arrives with a turn, then keeps its slow rotation ————— */
.pool__ring { animation: ring-in 900ms var(--ease-out) both; }
@keyframes ring-in {
  from { opacity: 0; transform: scale(.82) rotate(-24deg); }
  to   { opacity: 1; transform: none; }
}
.pool__ring { transition: transform .5s var(--ease-out); }
.pool:hover .pool__ring { transform: scale(1.03); }
.pool:hover .pool__arc { animation-duration: 12s; }
.pool__arc { transition: filter .4s ease; }
.pool:hover .pool__arc { filter: brightness(1.08); }

/* — the live-chain dot already pulses; give the chip a soft glow —— */
.chain { transition: background var(--t-micro) var(--ease-both); }
.chain:hover { background: rgba(255, 255, 255, 0.2); }

/* — depth bars react to the pointer ——————————————————————— */
.depth__bar { transition: height .5s var(--ease-out), background var(--t-micro) ease, transform var(--t-micro) ease; }
.depth__bars:hover .depth__bar { background: rgba(255, 255, 255, 0.18); }
.depth__bar:hover { background: rgba(253, 250, 244, 0.95) !important; transform: scaleY(1.06); transform-origin: bottom; }

/* — table rows brighten under the pointer ————————————————— */
.tape__row, .epochs__row, .contract, .arch__row {
  transition: background var(--t-micro) ease, transform var(--t-micro) ease;
  border-radius: 8px;
}
.tape__row:hover, .epochs__row:hover, .contract:hover, .arch__row:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* — the swap ticket flashes the figures it just recomputed ————— */
.is-fresh { animation: flash 620ms var(--ease-out); }
@keyframes flash {
  0%   { color: #fff; text-shadow: 0 0 16px rgba(253, 250, 244, 0.55); }
  100% { color: inherit; text-shadow: none; }
}

/* — flip button spins a full turn each press —————————————— */
.flip__btn svg { transition: transform .45s var(--ease-back); }
.flip__btn:hover svg { transform: scale(1.12); }

/* — the tape keeps a faint scan so it reads as live ———————— */
.tape__title::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--pos);
  vertical-align: middle;
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ==========================================================================
   4 · Tab changes inside the terminal
   ========================================================================== */

.pane { animation: pane-in var(--t-el) var(--ease-out) both; }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to   { opacity: 1; transform: none; }
}

.pane.is-out {
  animation: pane-out 200ms var(--ease-in) both;
}
@keyframes pane-out {
  to { opacity: 0; transform: translateY(-8px) scale(.995); }
}

/* Panels inside a freshly shown pane arrive one after another. */
.pane .pane__left > *,
.pane .pane__right > * {
  animation: rise var(--t-el) var(--ease-out) both;
}
.pane .pane__left  > :nth-child(1) { animation-delay: 40ms; }
.pane .pane__left  > :nth-child(2) { animation-delay: 100ms; }
.pane .pane__left  > :nth-child(3) { animation-delay: 160ms; }
.pane .pane__right > :nth-child(1) { animation-delay: 80ms; }
.pane .pane__right > :nth-child(2) { animation-delay: 140ms; }
.pane .pane__right > :nth-child(3) { animation-delay: 200ms; }

/* ==========================================================================
   4b · Failsafe
   No element may depend on an animation *finishing* to become readable. A
   couple of seconds after load the entrance animations are force-completed,
   so a throttled frame loop, a blocked animation or a slow device can never
   leave body copy sitting at opacity 0. Tab changes re-arm below.
   ========================================================================== */

html.motion-settled .hero__tags,
html.motion-settled .hero__title,
html.motion-settled .hero__lede,
html.motion-settled .hero__actions,
html.motion-settled .hero__side .stat,
html.motion-settled .hero__tags .tag,
html.motion-settled .topbar,
html.motion-settled .pool__ring,
html.motion-settled [data-reveal],
html.motion-settled [data-stagger] > *,
html.motion-settled .pane,
html.motion-settled .pane .pane__left > *,
html.motion-settled .pane .pane__right > *,
html.motion-settled .tape__row {
  /* The transition has to be cancelled, not just overridden. Setting
     opacity:1 at higher specificity still animates toward it, so a crawling
     frame loop left revealed sections sitting at ~0.8 opacity — washed out,
     not broken enough to notice, and wrong. */
  transition: none !important;
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ==========================================================================
   5 · Reduced motion — everything above stops
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }

  [data-stagger] > *,
  .hero__tags, .hero__title, .hero__lede, .hero__actions, .hero__side .stat,
  .topbar, .pane, .pane .pane__left > *, .pane .pane__right > *,
  .pool__ring, .hero__tags .tag {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .orb, .meter__fill::after, .tape__title::after, .chain__dot { animation: none !important; }
  .fact::after, .phase::after, .tier::after, .flow__step::after,
  .plan::after, .proof__cell::after { display: none; }
  html.is-leaving .page, html.is-leaving .board, html.is-leaving .frame {
    opacity: 1; transform: none;
  }
}