/* ============================================
   Text Reveal Animation — Vanilla CSS Port
   Characters slide up into view with staggered delay
   ============================================ */

.text-reveal {
  overflow: hidden;
  padding-bottom: 0.1em; /* prevent descender clipping from overflow:hidden */
  white-space: nowrap; /* keep all text on one line — inline-block spans can break anywhere otherwise */
}

/* Scale down on narrow screens so single-line headings still fit */
@media (max-width: 640px) {
  .text-reveal {
    font-size: clamp(1rem, 5vw, 2rem);
  }
}

.text-reveal .tr-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}

/* When revealed (by IntersectionObserver), animate each character */
.text-reveal.revealed .tr-char {
  animation: textRevealChar 0.5s ease-in-out forwards;
  animation-delay: calc(0.02s * var(--index));
}

@keyframes textRevealChar {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

/* Reduced motion: show text immediately, no animation */
@media (prefers-reduced-motion: reduce) {
  .text-reveal .tr-char {
    opacity: 1;
    transform: none;
    animation: none;
  }
}