/* =========================================================================
 * RotatingHeadline — token-driven styles
 * Typography comes from the global `u-text-style-h1` utility (font, size,
 * line-height, weight, letter-spacing — all Webflow tokens). This module only
 * owns layout + the in/out motion, which have no Webflow var equivalent.
 * The only raw values are motion durations/transforms, which §1 of CLAUDE.md
 * explicitly allows as a Tailwind/raw fallback.
 * ========================================================================= */

.r7VXcVtb8ib59dqUzU2A,
.r7VXcVtb8ib59dqUzU2A *,
.r7VXcVtb8ib59dqUzU2A *::before,
.r7VXcVtb8ib59dqUzU2A *::after {
  box-sizing: border-box;
}

/* The line itself. We keep the `u-text-style-h1` class on the element (so it
   stays in sync with any future Webflow retune of that utility), but we also
   set the resolved typography here from the same tokens. That makes the
   component self-contained: it renders correctly even where the global
   `.u-text-style-h1` rule isn't loaded (e.g. the local Vite preview, which only
   imports variables.css), and it doesn't depend on cascade order vs style.css. */
.r7VXcVtb8ib59dqUzU2A {
  /* Token aliases mirror the `u-text-style-h1` definition verbatim. */
  --_text-style---font-family: var(--_typography---font--heading-family);
  --_text-style---font-size: var(--_typography---font-size--h1);
  --_text-style---line-height: var(--_typography---line-height--medium);
  --_text-style---font-weight: var(--_typography---font--primary-bold);
  --_text-style---letter-spacing: var(--_typography---letter-spacing--tight);
  --_text-style---margin-bottom: var(--_spacing---space--11);
  --_text-style---text-wrap: balance;
  --_text-style---margin-top: var(--_spacing---space--13);
  --_text-style---text-transform: var(--_typography---text-transform--none);
  --_text-style---trim-top: var(--_typography---font--primary-trim-top);
  --_text-style---trim-bottom: var(--_typography---font--primary-trim-bottom);

  /* Lead / static part. */
  color: var(--_theme---text-heading-1);
  font-family: var(--_text-style---font-family);
  font-size: var(--_text-style---font-size);
  line-height: var(--_text-style---line-height);
  font-weight: var(--_text-style---font-weight);
  letter-spacing: var(--_text-style---letter-spacing);
  text-transform: var(--_text-style---text-transform, none);
  text-wrap: var(--_text-style---text-wrap);
  /* Now an <h1>: neutralise the UA heading margin (the hero/section owns spacing). */
  margin: 0;
}

.EY4P1x2ElCgTZgUQZ1fv {
  /* Static "fix" part — inherits the heading-1 color set on .root. */
  color: var(--_theme---text-heading-1);
}

/* Rotating word area. Sized by the invisible sizer so the box never collapses
   or shifts as words swap; the animated words sit on top of it. */
.XqJ1pdd0p0Azcdt7OWg1 {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}

/* Invisible placeholder that reserves the worst-case footprint across ALL
   words so the surrounding text and the line box stay put (no layout shift) —
   not just during a word's animation, but between words too. Every word is a
   `.ghost` dropped into the same grid cell, so the box grows to the widest AND
   tallest word. Each ghost wraps like normal text, so the reserved height is
   the tallest *wrapped* word at the current width, and it recomputes on resize. */
.REeCYjQQytngcm8s1ciA {
  display: grid;
  visibility: hidden;
}

.fhwykzKyjs_HjarBbeiz {
  /* All ghosts share one cell → they overlap, and the cell sizes to the max
     width/height of the set rather than their sum. */
  grid-area: 1 / 1;
}

/* Holds the animated words, overlaid on the sizer and clipped to its box. */
.i_pJ30g7SLJ9Y70eeosb {
  position: absolute;
  inset: 0;
}

/* Each word is absolutely positioned so the entering and outgoing words stack
   and cross-fade in the same spot. */
.UNnZXsjJJHUkc9Q6PCwK {
  position: absolute;
  inset: 0;
  display: inline-block;
  /* No `white-space: nowrap`: `inset: 0` locks the word's width to the sizer's
     box, so it wraps at the same points as the sizer (same text + font) and the
     cross-fade stays aligned. */
  /* Rotating word uses the secondary heading color to set it apart from the
     static lead (which is heading-1). */
  color: var(--_theme---text-heading-2);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .UNnZXsjJJHUkc9Q6PCwK {
    will-change: auto;
  }
}