/* ============================================
   KRE8IVE STUDIO -- Scroll & Motion Animations
   ============================================ */

/* --- Scroll Reveal Base --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.stagger > .reveal:nth-child(2) { transition-delay: 0.12s; }
.stagger > .reveal:nth-child(3) { transition-delay: 0.24s; }
.stagger > .reveal:nth-child(4) { transition-delay: 0.36s; }

/* --- Hero Word Reveal --- */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.hero-word.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Comparison Row Reveal --- */
.comparison-row.reveal {
  transform: translateY(20px);
}

/* --- Framework Columns --- */
.framework-col.reveal {
  transform: translateY(24px);
}

/* --- Stat Count-up --- */
.stat-number {
  transition: opacity 0.4s ease;
}

/* --- Card Cursor-Aware Hover --- */
.case-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-word {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .case-card,
  .pain-card {
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}