/* ============================================================
   Scroll-triggered reveal system
   - All elements start hidden/offset and resolve via .is-in
   - .is-in is added by Reveal.jsx (IntersectionObserver)
   - Special-case transitions for hero headline, word-by-word
     body copy, bar growth, stat pop, marquee continuous
   ============================================================ */

/* ----- Standard fade-up ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 850ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms + var(--rd, 0ms));
  will-change: opacity, transform;
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   1. HERO
   ============================================================ */

/* Small tagline — fades in first, fastest */
.hero-eyebrow {
  opacity: 0;
  transition: opacity 450ms ease-out;
}
.hero-eyebrow.is-in { opacity: 1; }

/* MEGA headline — color fills from light gray → ink, while the
   two lines slide in from opposite sides. */
.hero-mega-headline {
  color: #dadada;
  transition: color 1300ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.hero-mega-headline.is-in {
  color: var(--color-ink);
}

.hero-headline-line {
  display: block;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-headline-top { transform: translateX(-22vw); }
.hero-headline-bot { transform: translateX(22vw); }
.hero-mega-headline.is-in .hero-headline-line {
  opacity: 1;
  transform: none;
}

/* Left column — description + CTA slide in from left */
.hero-slide-left {
  opacity: 0;
  transform: translateX(-100px);
  will-change: transform, opacity;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Right column — testimonial card slides in from right */
.hero-slide-right {
  opacity: 0;
  transform: translateX(100px);
  will-change: transform, opacity;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Center image — fades up in place */
.hero-fade-up {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide-left.is-in,
.hero-slide-right.is-in,
.hero-fade-up.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2. ABOUT STRIP — word-by-word opacity stagger.
   Pure opacity transition with inline per-word transition-delay.
   ============================================================ */

.word-reveal { display: inline; }
.word-reveal-word {
  display: inline;
  opacity: 0.2;
  transition: opacity 0.5s ease-out;
}
.word-reveal.is-in .word-reveal-word {
  opacity: 1;
}

/* Stat numbers — scale up + fade, after the body finishes */
.stat-pop {
  opacity: 0;
  transform: scale(0.82);
  transform-origin: left bottom;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 120ms + 700ms);
}
.stat-pop.is-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   3. EXPERTISE GRID — staggered cards
   ============================================================ */

.tile[data-reveal] {
  transform: translateY(32px);
}
.tile[data-reveal].is-in {
  transform: none;
}

/* ============================================================
   4. STATS BAR CHART — bars grow up, percentages fade in
   ============================================================ */

.bars-anim .bar-stick {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 60ms + 250ms);
}
.bars-anim.is-in .bar-stick {
  transform: scaleY(1);
}

.bars-anim .bar-value {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 60ms + 550ms);
}
.bars-anim.is-in .bar-value {
  opacity: 1;
  transform: none;
}
/* labels stay visible the whole time (act as the "anchor") */

/* ============================================================
   5. TESTIMONIALS GRID — row stagger (top row first, then bottom)
   ============================================================ */

.testimonial-card[data-reveal] {
  transform: translateY(36px);
}
.testimonial-card[data-reveal].is-in {
  transform: none;
}

/* ============================================================
   6. FOOTER — staggered reveal
   ============================================================ */

.footer-stagger > *[data-reveal] {
  transition-delay: calc(var(--i, 0) * 130ms);
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero-eyebrow,
  .hero-mega-headline,
  .hero-headline-line,
  .hero-slide-left,
  .hero-slide-right,
  .hero-fade-up,
  .word-reveal-word,
  .stat-pop,
  .bars-anim .bar-stick,
  .bars-anim .bar-value {
    opacity: 1 !important;
    transform: none !important;
    color: inherit !important;
    transition: none !important;
  }
  .hero-mega-headline { color: var(--color-ink) !important; }
}