/* Scroll animations shared by every site style. Elements are only hidden once the head script has
   added .motion-ready, and the page falls back to fully visible content if motion.js does not start. */
:root { --motion-accent: var(--gold, #d6ab72); --motion-ease: cubic-bezier(.2, .7, .2, 1); }
body.home-palette-blue { --motion-accent: #2a9d97; }

/* 1. Blocks rise and fade in as they enter the screen (sections with their own entrance are skipped). The page title
   and the block holding it show at once: hiding them would delay the moment the page counts as displayed. */
.motion-ready main section:not([class*="hero"]):not(.home-journal) > :not(section):not(script):not(style):not(link):not(h1):not(:has(h1)):not(.motion-in):not(.motion-seen) {
    opacity: 0;
    translate: 0 30px;
}
.motion-ready .motion-in {
    transition: opacity .85s var(--motion-ease) var(--motion-delay, 0ms), translate .85s var(--motion-ease) var(--motion-delay, 0ms);
}

/* 2. A line draws under the last word of the main section titles. */
.motion-underline {
    background: linear-gradient(var(--motion-accent), var(--motion-accent)) 0 96% / 0 .09em no-repeat;
    transition: background-size 1s .35s var(--motion-ease);
}
.motion-underline.is-drawn { background-size: 100% .09em; }
/* The underlined word keeps the look of its title (some section styles restyle any span inside). */
html body main :is(h1, h2, h3) > .motion-underline.motion-underline.motion-underline { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }

/* 3. Home hero: the photo zooms out slowly and drifts with the scroll; the title arrives word by word,
   then the text, buttons and award line; images in the page zoom gently as they cross the screen. */
.home-hero { --hero-progress: 0; }
.motion-ready .home-hero-photo img { animation: motion-hero-zoom 9s cubic-bezier(.2, .6, .2, 1) both; translate: 0 calc(var(--hero-progress) * 140px); }
.motion-ready .home-hero-inner { translate: 0 calc(var(--hero-progress) * 60px); opacity: calc(1 - var(--hero-progress) * .8); }
.motion-ready .home-hero-copy > :not(h1) { animation: motion-rise 1s var(--motion-ease) both; }
.motion-ready .home-hero-kicker { animation-delay: .1s !important; }
.motion-ready .home-hero-text { animation-delay: .7s !important; }
.motion-ready .home-hero-copy .home-hero-actions { animation-delay: .9s !important; }
.motion-ready .home-hero-copy > h1:not(.is-split) { opacity: 0; }
.home-hero h1 .motion-word { display: inline-block; animation: motion-word .9s var(--motion-ease) calc(.2s + var(--i) * 80ms) both; }
.motion-ready .home-hero-proof { animation-delay: 1.15s !important; }
.motion-ready .home-hero-scroll { animation: motion-rise 1s var(--motion-ease) 1.6s both; }
.motion-ready [data-motion-zoom] img { scale: calc(1.12 - var(--zoom, 0) * .12); }
@keyframes motion-hero-zoom { from { transform: scale(1.18); } }
@keyframes motion-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes motion-word { from { opacity: 0; transform: translateY(.5em); } }

@media (prefers-reduced-motion: reduce) {
    .motion-underline { transition: none; background-size: 100% .09em; }
}
@media print {
    .motion-ready main section > * { opacity: 1 !important; translate: none !important; }
}