/* Home hero: the rotating headline (ten versions, two lines each).
   All ten versions sit in ONE grid cell, so the headline box is always as tall as the tallest version at the current width: no layout shift.
   The type is the page's h1 (nothing is set here for font, size, weight, line-height or letter-spacing).
   Motion: line-by-line masked reveal with a brief logo-colour sweep across the letters, blur to sharp, 80 ms between lines (tokens in system.css).
   No JS: version 1 is shown. Reduced motion: version 1, no rotation and no sweep. */

/* the block keeps its 55rem measure (a test pins how much of it the lines fill); the headline is wider and overflows it evenly on both sides, so the longest versions stay on one line */
.rot { display: flex; flex-direction: column; align-items: center; width: min(76rem, calc(100vw - 2 * var(--gutter))); max-width: none; }
.rot__h { display: grid; width: 100%; justify-items: center; }
.rot__v { grid-area: 1 / 1; display: block; width: 100%; opacity: 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
.rot__v.is-active, .rot__v.is-leaving { opacity: 1; pointer-events: auto; -webkit-user-select: text; user-select: text; }
/* each line is a mask; the padding leaves room for descenders and the negative margin keeps the line box unchanged */
.rot__l { display: block; overflow: hidden; padding: .02em .08em .14em; margin: -.02em -.08em -.14em; }
.rot__t { display: block; text-wrap: balance; }
.rot__l { --i: 0; } .rot__l + .rot__l { --i: 1; }


@media (prefers-reduced-motion: no-preference) {
  /* the new version: the text rises out of its mask while a band of logo colours runs left to right across the letters */
  .rot__v.is-entering .rot__t {
    background-image: linear-gradient(100deg, var(--text) 0 36%, var(--brand-orange) 42%, var(--brand-red) 47%, var(--brand-magenta) 52%, var(--brand-blue) 59%, var(--text) 66% 100%);
    background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
    animation: rot-in var(--motion-reveal) var(--ease) both; animation-delay: calc(120ms + var(--i) * var(--motion-stagger));
  }
  /* the previous version leaves upward through the same mask */
  .rot__v.is-leaving .rot__t { animation: rot-out 420ms var(--ease) both; animation-delay: calc(var(--i) * 40ms); }
}
@keyframes rot-in {
  0% { transform: translateY(105%); opacity: 0; filter: blur(8px); color: transparent; background-position: 100% 0; }
  30% { opacity: 1; }
  80% { color: transparent; }
  85% { background-position: 0 0; }
  100% { transform: none; opacity: 1; filter: blur(0); color: var(--text); background-position: 0 0; }
}
@keyframes rot-out { to { transform: translateY(-70%); opacity: 0; filter: blur(5px); } }
@media (forced-colors: active) { .rot__v .rot__t { animation: none !important; background: none !important; } }

/* Typewriter (hero-headline.mjs): with JS the stacked versions are only the height reserve; ONE live copy types on top of them.
   Every character is in the DOM at its final position; typing only toggles visibility (class "on"), so nothing reflows. No JS: version 1 shows as before. */
html.js .rot__v.rot__v { opacity: 0; }
/* until the module takes over (class is-tw) the server-rendered first headline stays visible: no flash, the live copy then replaces it in place */
html.js .rot:not(.is-tw) .rot__v.is-active { opacity: 1; }
html.js .rot__v.rot__live { opacity: 1; position: relative; transition: opacity 400ms ease; pointer-events: auto; -webkit-user-select: text; user-select: text; }
.tw-w { white-space: nowrap; }
.tw-c { visibility: hidden; }
.tw-c.on { visibility: visible; }
.tw-c.tw-dot { animation: tw-blink 1s steps(1, end) infinite; }
.tw-caret { position: absolute; left: 0; top: 0; width: 2px; height: 1em; background: currentColor; pointer-events: none; }
@keyframes tw-blink { 0%, 49.99% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .tw-c.tw-dot { animation: none; } .rot__v.rot__live { transition-duration: 400ms; } }