/* Motion — the five layers: entrance · ambient · response · transition · emphasis.
   Rails: everything is visible without JS (the hidden state only exists under .js),
   and prefers-reduced-motion gets none at all. Only transform / opacity / clip-path move. */

/* ——— entrance ——— */
.js [data-reveal]{opacity:0;transform:translateY(var(--rise));
  transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out),clip-path 900ms var(--e-out);
  transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal="scale"]{transform:scale(.94);transition-timing-function:var(--e-back)}
.js [data-reveal="left"]{transform:translateX(calc(var(--rise) * -1.2))}
.js [data-reveal="right"]{transform:translateX(calc(var(--rise) * 1.2))}
.js [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0)}
.js [data-reveal].in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0;margin:0 -.06em -.12em 0}
.js [data-split] .w>span{display:inline-block;transform:translateY(108%);transition:transform 850ms var(--e-out);transition-delay:calc(var(--wi,0) * 42ms)}
.js [data-split].in .w>span{transform:none}

/* ——— keyframes ——— */
@keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes wipeDown{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6%,-5%) scale(1.08)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes ping{0%{transform:scale(1);opacity:.75}80%,100%{transform:scale(2.8);opacity:0}}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes blink{50%{opacity:0}}
@keyframes pop{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.4)}86%{transform:scale(.9)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
@keyframes shift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes scrollShot{0%,10%{transform:translateY(0)}45%,55%{transform:translateY(-34%)}90%,100%{transform:translateY(-70%)}}
@keyframes ring{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-14deg)}20%,40%{transform:rotate(14deg)}50%{transform:rotate(0)}}

/* ——— pause what you can't see ——— */
.paused,.paused *,.paused *::before,.paused *::after,.tab-hidden *,.tab-hidden *::before,.tab-hidden *::after{animation-play-state:paused!important}

/* ——— touch: keep the motion, shorten the travel, no parallax ——— */
@media (hover:none){ .layer{translate:none!important} }

/* ——— the hard rail ——— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-split] .w>span{opacity:1!important;transform:none!important;clip-path:none!important}
  .screen .shot{clip-path:none!important;transform:none!important}
  .track{transform:none!important}
  .layer{translate:none!important}
}