/* ── HERO WORD RISE ──────────────────────────────────────────────────────── */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation-name: rise;
  animation-duration: var(--duration-slow);
  animation-timing-function: var(--ease);
  animation-fill-mode: forwards;
}

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ── ROTATING WORD ───────────────────────────────────────────────────────── */
.rotating-word {
  display: inline-block;
  height: calc(var(--leading-tight) * 1em);
  overflow: hidden;
  clip-path: inset(3px 0 0 0);
  vertical-align: top;
}

.rw-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  animation: rw-slide 8s linear 2s infinite;
}

.rw-track em {
  display: block;
  height: calc(var(--leading-tight) * 1em);
  line-height: var(--leading-tight);
  font-style: normal;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
}

@keyframes rw-slide {
  0%        { transform: translateY(0); }
  16%       { transform: translateY(0);    animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  20%       { transform: translateY(-20%); }
  36%       { transform: translateY(-20%); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  40%       { transform: translateY(-40%); }
  56%       { transform: translateY(-40%); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  60%       { transform: translateY(-60%); }
  76%       { transform: translateY(-60%); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  80%       { transform: translateY(-80%); }
  96%, 100% { transform: translateY(-80%); }
}

/* ── ROTATING PHRASE ─────────────────────────────────────────────────────── */
/*
 * Used by initPhraseRotator(). The container element gets .rp-outer added via
 * JS. phrases[0] is duplicated into .rp-sizer (invisible) to hold the container
 * height — put the longest phrase first so shorter ones don't collapse the box.
 */
.rp-outer { position: relative; }

.rp-sizer {
  display: block;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.rp-phrase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.rp-phrase.is-active { opacity: 1; transform: translateY(0); }
.rp-phrase.is-out    { opacity: 0; transform: translateY(-12px); }

/* ── SCROLL REVEAL ───────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}