/* Purpose: Scroll-reveal, word-split heading and staggered-children entrance states.
   JS only ever adds the .in class — every visual state lives here. */

.rv {
  --rv-duration: 550ms;

  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--rv-duration) ease, transform var(--rv-duration) var(--ease-out);
}

.rv.in {
  opacity: 1;
  transform: none;
}

.wsplit .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.wsplit .w > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform var(--duration-slower) var(--ease-smooth);
}

.wsplit.in .w > span {
  transform: none;
}

.stag > * {
  --stag-duration: 600ms;

  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--stag-duration) ease, transform var(--stag-duration) var(--ease-smooth);
}

.stag.in > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
  }

  .wsplit .w > span {
    transform: none !important;
  }

  .stag > * {
    opacity: 1 !important;
    transform: none !important;
  }
}