/* =============================================================================
   LUMIN — Animated Text Cycle
   One headline word cycles in place: enters from above (blur→0, fade in),
   exits downward (blur up, fade out). The container is a FIXED slot sized to the
   longest word in the list (set once) — its width never animates, so the line
   never reflows and surrounding text never moves. Accent: teal.
   Respects prefers-reduced-motion.
   ========================================================================== */

:root {
  --atc-color: var(--accent, #2fd4c2);   /* animated word colour */
  --atc-dur: 450ms;
  --atc-shift: 9px;
  --atc-blur: 4px;
}

/* fixed-width slot — sized once to the longest word in the list. The width is
   never animated and never changes per word, so the headline cannot reflow and
   the following word stays locked in place. */
.atc {
  position: relative; display: inline-block;
  vertical-align: baseline; white-space: nowrap; overflow: visible;
  width: var(--atc-w, auto);       /* FIXED slot = longest word; set once, never animated */
  text-align: left;                /* shorter words hug the preceding text; slot end never moves */
  margin-inline-end: 0.12em;       /* permanent separation from the following word */
}
.atc__anim {
  display: inline-block; white-space: nowrap; color: var(--atc-color);
  will-change: transform, opacity, filter;
  transition:
    opacity var(--atc-dur) ease,
    transform var(--atc-dur) cubic-bezier(0.22, 1, 0.36, 1),
    filter var(--atc-dur) ease;
  transform: translateY(0); opacity: 1; filter: blur(0);
}
.atc__anim.is-out { transform: translateY(var(--atc-shift)); opacity: 0; filter: blur(var(--atc-blur)); }
.atc__anim.is-pre { transition: none; transform: translateY(calc(var(--atc-shift) * -1)); opacity: 0; filter: blur(var(--atc-blur)); }

/* readable, static text for screen readers (decorative animated word is aria-hidden) */
.atc__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* static state (effect off, hero-only excluded, or reduced motion) */
.atc[data-atc-static] { transition: none !important; }
.atc[data-atc-static] .atc__anim { transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .atc { transition: none !important; }
  .atc__anim { transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; }
}