/* =========================================================================
   Shared motion layer. Loaded after every theme stylesheet.
   ========================================================================= */

/* Reveal ------------------------------------------------------------------ */
.js [data-reveal]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js [data-reveal].in{opacity:1;transform:none}

.js [data-reveal="scale"]{transform:translate3d(0,34px,0) scale(.965)}
.js [data-reveal="scale"].in{transform:none}
.js [data-reveal="left"]{transform:translate3d(-34px,0,0)}
.js [data-reveal="left"].in{transform:none}
.js [data-reveal="right"]{transform:translate3d(34px,0,0)}
.js [data-reveal="right"].in{transform:none}
.js [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}
.js [data-reveal="clip"].in{clip-path:inset(0 0 0 0)}

/* Stagger children -------------------------------------------------------- */
.js [data-stagger] > *{opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--sd,0ms),
             transform .8s cubic-bezier(.16,1,.3,1) var(--sd,0ms)}
.js [data-stagger].in > *{opacity:1;transform:none}

/* Split text -------------------------------------------------------------- */
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;
  padding:.06em .04em .22em;margin:-.06em -.04em -.22em}
.js [data-split] .w i{display:inline-block;font-style:inherit;transform:translate3d(0,110%,0);
  transition:transform .95s cubic-bezier(.16,1,.3,1);transition-delay:var(--wd,0ms)}
.js [data-split].in .w i{transform:none}

/* Pinned sequence --------------------------------------------------------- */
.pin-stage{position:sticky;top:0;height:100vh;display:flex;align-items:safe center;
  padding-top:calc(var(--hdr) + 28px);padding-bottom:24px;overflow:hidden}
[data-pin-panel]{position:absolute;inset:0;display:flex;align-items:stretch;justify-content:center;
  opacity:0;transform:scale(.975) translateY(14px);pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
[data-pin-panel].active{opacity:1;transform:none;pointer-events:auto}
[data-pin-panel] > .panel{width:100%;height:100%;display:flex;flex-direction:column}
[data-pin-panel] .body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-evenly}
/* a pinned section already centres itself, so the neighbours must not
   also contribute a full section gap */
.sec:has(+ .pinsec){padding-bottom:clamp(18px,1.8vw,32px)}
.pinsec + .sec{padding-top:clamp(26px,2.8vw,46px)}
.pin-grid{align-items:stretch}
.pin-copy{display:flex;flex-direction:column;justify-content:center}
[data-pin-step]{cursor:pointer;opacity:.42;user-select:none;
  transition:opacity .4s ease,background .4s ease,box-shadow .4s ease,transform .4s ease}
[data-pin-step]:hover{opacity:.85}
[data-pin-step].active{opacity:1;cursor:default}
[data-pin-step]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
[data-pin-step] p{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .3s ease,margin-top .5s cubic-bezier(.16,1,.3,1)}
[data-pin-step].active p{max-height:140px;opacity:1}
.reduced [data-pin-step] p{max-height:none;opacity:1}

/* Horizontal track -------------------------------------------------------- */
[data-htrack]{position:relative}
[data-htrack] .htrack-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;gap:clamp(28px,4vw,56px);overflow:hidden;padding-top:var(--hdr)}
[data-htrack] .htrack-inner{display:flex;gap:32px;will-change:transform;padding-inline:var(--gutter)}

/* Marquee ----------------------------------------------------------------- */
.marquee{overflow:hidden;position:relative;display:flex}
.marquee ul{display:flex;flex:0 0 auto;gap:0;animation:mq 38s linear infinite;will-change:transform}
.marquee.rev ul{animation-direction:reverse}
.marquee li{flex:0 0 auto;padding-inline:34px;display:flex;align-items:center;gap:16px;white-space:nowrap}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
.marquee:hover ul{animation-play-state:paused}

/* Progress bar ------------------------------------------------------------ */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;width:0}

/* Scroll cue -------------------------------------------------------------- */
.cue{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.cue span{display:block;width:1px;height:44px;position:relative;overflow:hidden}
.cue span::after{content:"";position:absolute;left:0;top:0;width:1px;height:44px;
  background:currentColor;animation:cue 2.1s cubic-bezier(.7,0,.3,1) infinite}
@keyframes cue{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* Floating drift ---------------------------------------------------------- */
@keyframes drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-16px,0)}}
@keyframes driftB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,14px,0)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes meshA{0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6%,-8%,0) scale(1.14)}
  66%{transform:translate3d(-7%,6%,0) scale(.92)}}
@keyframes meshB{0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(-9%,7%,0) scale(1.18)}
  75%{transform:translate3d(8%,-5%,0) scale(.9)}}
@keyframes pulseRing{0%{transform:scale(.85);opacity:.55}100%{transform:scale(1.5);opacity:0}}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-stagger] > *,.js [data-split] .w i{opacity:1!important;transform:none!important;clip-path:none!important}
  .marquee ul{animation:none}
  .cue span::after{animation:none}
  [data-pin-panel]{position:relative;opacity:1;transform:none;pointer-events:auto}
  .pin-stage{position:relative;height:auto;min-height:0;display:block;padding-top:0}
  [data-pin-panel]{position:relative}
  [data-pin-step]{opacity:1}
  [data-htrack] .htrack-sticky{position:relative;height:auto;overflow-x:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Horizontal reveal offsets would push past a narrow viewport, so on small
   screens every reveal comes from below instead. Placed last so it wins over
   the base rules above. */
@media (max-width:900px){
  .js [data-reveal="right"],.js [data-reveal="left"]{transform:translate3d(0,26px,0)}
}