/* ==========================================================================
   ANIMATION — utility states, keyframes, reduced motion
   ========================================================================== */

/* Elements start in a "pre-reveal" state; JS (GSAP) animates them in.
   If JS fails to load, this base CSS still renders content fully
   readable — the reveal classes only apply opacity via [data-animate]
   once JS has initialized, preventing a no-JS blank page. */
[data-animate] {
  opacity: 1;
}

.js-ready [data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(28px);
}

.js-ready [data-animate="fade"] {
  opacity: 0;
}

.js-ready [data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.96);
}

.js-ready [data-animate="cell-flicker"] { opacity: 0.25; }

.js-ready [data-hero-in] {
  opacity: 0;
  transform: translateY(20px);
}

.js-ready [data-case-primary-media] {
  opacity: 0;
  transform: scale(0.97);
}

/* Hero pin wrapper */
.hero-pin-spacer { position: relative; }

/* Count-up number readiness */
.stat-value[data-count-to] { font-variant-numeric: tabular-nums; }

/* Card hover micro-interaction already handled via transitions in
   components.css — kept out of keyframes to stay restrained. */

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-visual-composition {
  animation: gentle-float 6s var(--ease-standard) infinite;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-ready [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-visual .placeholder-box { animation: none; }
}