/* ==============================================================
   Load / text / image animations (assets/animations.js)
   ============================================================== */
html.anim .site-header,html.anim .hero-meta-top,html.anim .hero-meta-bottom{opacity:0;transform:translateY(-14px);}
html.anim .hero-meta-bottom{transform:translateY(14px);}
/* hero: grows from 0px to its screen-dependent height (--hero-h) */

.hero-shot{height:var(--hero-h)!important;min-height:0!important;}
html.anim .hero-shot{height:0!important;}
html.anim.ready .site-header,html.anim.ready .hero-meta-top,html.anim.ready .hero-meta-bottom{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.22,1,.36,1) .5s,transform .9s cubic-bezier(.22,1,.36,1) .5s;}
html.anim.ready .hero-shot{height:var(--hero-h)!important;transition:height 1.4s cubic-bezier(.76,0,.24,1);}
html.anim.ready.hero-done .hero-shot{transition:none;}

/* masked word rise */
html.anim :is(.intro-statement,.section-heading-line h2,.section-heading-line p,.manifesto-big,.manifesto-footer p,.services-feature h3,.intro-copy p,.service-row p,.step p,.pricing-card p,.tools-text p,.toolkit-title,.tools-title,.approach-picture figcaption,.pricing-card h3,.step h3,.particle-wordmark-copy,.contact-email,.hero-positioning-copy,main h1):not(.is-split){visibility:hidden;}
/* Roomy mask: negative letter-spacing makes the last letter overhang the word box, and descenders need space. */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em .12em .3em;margin:-.18em -.12em -.3em;}
.wi{display:inline-block;will-change:transform;}
html.anim .is-split .wi{transform:translateY(115%);opacity:0;}
html.anim .is-split.in .wi{transform:none;opacity:1;transition:transform 1s cubic-bezier(.22,1,.36,1) var(--d,0s),opacity .8s cubic-bezier(.22,1,.36,1) var(--d,0s);}
/* hero buttons appear one by one after the tagline (animations.js sets .in, 0.3s apart) */
html.anim .hero-buttons .hero-cta-pill{opacity:0;transform:translateY(14px);}
html.anim .hero-buttons .hero-cta-pill.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),background .28s,color .28s;}

/* fade-y */
html.anim .fy{opacity:0;transform:translateY(24px);}
html.anim .fy.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);}

/* intro loader */
.loader{position:fixed;inset:0;z-index:10000;background:#131313;color:#fff;display:none;align-items:center;justify-content:center;border-radius:0 0 4em 4em;overflow:hidden;}
html.intro .loader{display:flex;}
.loader-mark{position:relative;overflow:hidden;padding:.15em .1em;font-family:var(--display);font-weight:600;font-size:clamp(40px,5vw,72px);letter-spacing:-.06em;line-height:1;}
.loader-mark b{color:var(--red,#f53500);font-weight:inherit;}
.loader-mark span{display:inline-block;transform:translateY(115%);}
.loader.in .loader-mark span{transform:none;transition:transform .9s cubic-bezier(.22,1,.36,1);}
.loader.out{transform:translateY(-100%);transition:transform 1.1s cubic-bezier(.76,0,.24,1);}
@media(prefers-reduced-motion:reduce){.loader{display:none!important;}}

/* Particle wordmark: DOM text stays for accessibility/measuring, the canvas draws the visible letters. */
html.pw .mega-wordmark .particle-wordmark-copy{transform:none!important;transition:none!important;visibility:hidden;}

/* ---- first load: nothing below the hero shows, and scrolling is locked, until the hero has reached its full height ---- */
html.scroll-lock,html.scroll-lock body{overflow:hidden;}
html.anim:not(.hero-full) main > :not(.hero-shot-wrap),
html.anim:not(.hero-full) .footer{visibility:hidden;}

/* Wordmark reveal = the same feel as the headline words: a short rise (~73px, like the statement) plus a real fade-in.
   (Without this the huge letters travelled ~300px, which reads as a slide, not a fade.) */
html.anim .particle-wordmark-copy.is-split .wi{transform:translateY(.27em);opacity:0;}
html.anim .particle-wordmark-copy.is-split.in .wi{transform:none;opacity:1;transition:transform 1s cubic-bezier(.22,1,.36,1) var(--d,0s),opacity .9s cubic-bezier(.22,1,.36,1) var(--d,0s);}

/* the second intro paragraph follows the first a little later */
html.anim .intro-copy p + p.in .wi,html.anim .intro-copy p.in + p.in .wi{transition-delay:calc(var(--d,0s) + .15s);}