/* ═══ MOTION LAYER ══════════════════════════════════════════
   Everything here degrades to "visible, no movement" when the
   visitor has reduced motion on, or if JS never runs.
   ═══════════════════════════════════════════════════════════ */

/* ── scroll reveal ── */
.reveal{opacity:1;transform:none}
.armed{opacity:0;transform:translateY(24px)}
.armed.in{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* direction variants — set with data-anim on any .reveal */
.armed[data-anim="left"]{transform:translateX(-30px)}
.armed[data-anim="right"]{transform:translateX(30px)}
.armed[data-anim="zoom"]{transform:scale(.94)}
.armed[data-anim="blur"]{filter:blur(8px)}
.armed.in[data-anim="left"],
.armed.in[data-anim="right"],
.armed.in[data-anim="zoom"]{transform:none}
.armed.in[data-anim="blur"]{filter:none;transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}

/* ── children cascade one after another ── */
.stagger > *{opacity:0;transform:translateY(20px)}
.stagger.in > *{opacity:1;transform:none;
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.stagger.in > *:nth-child(1){transition-delay:.00s}
.stagger.in > *:nth-child(2){transition-delay:.08s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.24s}
.stagger.in > *:nth-child(5){transition-delay:.32s}
.stagger.in > *:nth-child(6){transition-delay:.40s}
.stagger.in > *:nth-child(7){transition-delay:.48s}
.stagger.in > *:nth-child(8){transition-delay:.56s}

/* ── hero entrance, once, on load ── */
.hero-in > *{opacity:0;transform:translateY(22px)}
body.loaded .hero-in > *{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
body.loaded .hero-in > *:nth-child(1){transition-delay:.05s}
body.loaded .hero-in > *:nth-child(2){transition-delay:.15s}
body.loaded .hero-in > *:nth-child(3){transition-delay:.25s}
body.loaded .hero-in > *:nth-child(4){transition-delay:.35s}
body.loaded .hero-in > *:nth-child(5){transition-delay:.45s}

.portrait-wrap .portrait{opacity:0;transform:translateY(30px) scale(.97)}
body.loaded .portrait-wrap .portrait{opacity:1;transform:none;
  transition:opacity 1s var(--ease) .2s,transform 1.1s var(--ease) .2s}
.portrait-wrap .badge{opacity:0;transform:translateY(14px)}
body.loaded .portrait-wrap .badge{opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
body.loaded .portrait-wrap .badge-a{transition-delay:.7s}
body.loaded .portrait-wrap .badge-b{transition-delay:.85s}
.portrait-wrap .ring,.portrait-wrap .halo{opacity:0;transform:translate(-50%,0) scale(.9)}
body.loaded .portrait-wrap .ring,
body.loaded .portrait-wrap .halo{opacity:1;transform:translate(-50%,0) scale(1);
  transition:opacity 1.2s var(--ease) .1s,transform 1.2s var(--ease) .1s}

/* ── image mask wipe ── */
.frame.armed,.pcard.armed{clip-path:inset(0 0 100% 0)}
.frame.armed.in,.pcard.armed.in{clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--ease),opacity .6s var(--ease),transform .8s var(--ease)}

/* ── orbit callouts cascade outward from the centre ── */
.orb-stage .flag.armed{opacity:0;transform:translateY(16px) scale(.96)}
.orb-stage .flag.armed.in{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .7s var(--ease)}
.orb-stage .flag.armed.in.f1{transition-delay:.10s}
.orb-stage .flag.armed.in.f4{transition-delay:.18s}
.orb-stage .flag.armed.in.f2{transition-delay:.26s}
.orb-stage .flag.armed.in.f5{transition-delay:.34s}
.orb-stage .flag.armed.in.f3{transition-delay:.42s}
.orb-stage .flag.armed.in.f6{transition-delay:.50s}
.orb-stage .dot{opacity:0;transform:scale(0)}
.orb-stage.lit .dot{opacity:1;transform:scale(1);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.orb-stage.lit .d1{transition-delay:.3s}.orb-stage.lit .d2{transition-delay:.4s}
.orb-stage.lit .d3{transition-delay:.5s}.orb-stage.lit .d4{transition-delay:.6s}

/* ── counters ── */
.cbox .n{font-variant-numeric:tabular-nums}

/* ── links and cards ── */
.pa,.wc,.tcard,.post,.bt,.cbox,.ci,.val{will-change:transform}
.btn,.tlink,.pa li a{-webkit-tap-highlight-color:transparent}

/* ── header shrink on scroll ── */
.site-header .hdr{transition:background .3s,box-shadow .35s var(--ease),padding .35s var(--ease)}
.site-header.stuck .hdr{padding-top:7px;padding-bottom:7px}
.site-header .logo img{transition:height .35s var(--ease)}
.site-header.stuck .logo img{height:40px}

/* ── if JS never runs, nothing may stay hidden ── */
html:not(.js) .stagger > *,
html:not(.js) .hero-in > *,
html:not(.js) .portrait-wrap .portrait,
html:not(.js) .portrait-wrap .badge,
html:not(.js) .orb-stage .dot{opacity:1!important;transform:none!important}
html:not(.js) .portrait-wrap .ring,
html:not(.js) .portrait-wrap .halo{opacity:1!important;transform:translate(-50%,0)!important}

/* ── everything off when asked ── */
@media (prefers-reduced-motion:reduce){
  .armed,.stagger > *,.hero-in > *,
  .portrait-wrap .portrait,.portrait-wrap .badge,
  .portrait-wrap .ring,.portrait-wrap .halo,
  .orb-stage .flag.armed,.orb-stage .dot{
    opacity:1!important;transform:none!important;filter:none!important;
    clip-path:none!important;transition:none!important}
}