/* ==========================================================================
   ATHLISM — animations.css
   Preloader, split-text, reveals, page transitions.
   Hidden "before" states only apply when <html class="js"> is set, so the
   site stays fully readable if JavaScript is unavailable.
   ========================================================================== */

/* ---------- Preloader (home) ---------- */
.preloader{display:none}
.js .preloader{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:clamp(20px,3vw,40px);background:var(--primary-deep);color:#fff;clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease-io);animation:pl-failsafe .01s 9s forwards}
.preloader.is-leaving{clip-path:inset(0 0 100% 0)}
.preloader.is-gone{display:none !important}
@keyframes pl-failsafe{to{visibility:hidden;opacity:0}}
.preloader__top{display:flex;justify-content:center}
.preloader__top img{width:clamp(40px,5vw,64px);height:auto;opacity:0;transform:scale(.4) rotate(-90deg);transition:opacity .6s,transform 1.2s var(--ease)}
.preloader.is-run .preloader__top img{opacity:1;transform:none}
.preloader__word{display:flex;justify-content:center;font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:clamp(4.2rem,18vw,22rem);line-height:.82;letter-spacing:-.04em;white-space:nowrap}
.pl-l{display:inline-block;will-change:transform,opacity;opacity:0}
.preloader.is-leaving .preloader__word{transform:translateY(-8vh) scale(1.06);transition:transform 1.05s var(--ease-io)}
.preloader__meta{display:flex;justify-content:space-between;align-items:flex-end;font-size:.95rem;font-weight:600}
.preloader__count{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,6vw,5rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--accent)}
.preloader__tag{opacity:.7}
body.is-loading{overflow:hidden}

/* ---------- Page transition ---------- */
.js .pt{display:flex;transform:translateY(0);animation:pt-out .85s var(--ease-io) .05s both}
.page-home .pt{display:none;animation:none}
body .pt.pt--in{display:flex;animation:pt-in .55s var(--ease-io) forwards}
@keyframes pt-out{from{transform:translateY(0);visibility:visible}99%{visibility:visible}to{transform:translateY(-100%);visibility:hidden}}
@keyframes pt-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
.pt img{animation:pt-logo .85s var(--ease) both}
@keyframes pt-logo{from{transform:scale(1) rotate(0)}to{transform:scale(.4) rotate(-45deg);opacity:0}}
.pt--in img{animation:none}

/* ---------- Split text ---------- */
.w{display:inline-block;white-space:nowrap}
.js [data-split="chars"] .ch{display:inline-block;opacity:0;transform:translate3d(var(--tx,0),var(--ty,60px),0) rotate(var(--r,10deg)) scale(var(--sc,.6));will-change:transform,opacity}
.js [data-split="chars"].is-in .ch{opacity:1;transform:none;transition:transform 1.3s var(--ease) calc(var(--i)*38ms),opacity .5s linear calc(var(--i)*38ms)}
.js [data-split="chars"].is-done .ch{will-change:auto}
.js [data-split="words"] .w{overflow:clip;vertical-align:top;padding:.08em 0 .14em;margin:-.08em 0 -.14em}
.js [data-split="words"] .wi{display:inline-block;transform:translateY(112%) rotate(5deg);transform-origin:left bottom}
.js [data-split="words"].is-in .wi{transform:none;transition:transform 1.1s var(--ease) calc(var(--i)*70ms)}

/* ---------- Reveals ---------- */
.js [data-reveal]{opacity:0;transition:opacity .9s ease var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
.js [data-reveal="up"]{transform:translateY(48px)}
.js [data-reveal="left"]{transform:translateX(-70px)}
.js [data-reveal="right"]{transform:translateX(70px)}
.js [data-reveal="scale"]{transform:scale(.7) rotate(-12deg)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="clip"]{opacity:1;clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease-io) var(--d,0s)}
.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0)}
.js [data-reveal="clip"]>img{scale:1.4;transition:scale 1.9s var(--ease) var(--d,0s)}
.js [data-reveal="clip"].is-in>img{scale:1}

/* ---------- Hover touches ---------- */
.hc__in img{transition:transform 1.2s var(--ease)}
.hc:hover .hc__in img{transform:scale(1.06)}

/* ---------- Reduced motion: show everything, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  .js [data-split="chars"] .ch,.js [data-split="words"] .wi,.js [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .js [data-reveal="clip"]>img{scale:1 !important}
  .marquee__row,.badge-rot svg,.pill__dot,.hero__line::after{animation:none !important}
  .js .pt,.pt{display:none !important}
}