/* ===== REVEAL ANIMATIONS ===== */

/* Keyframe: blur + fade + subtle rise */
@keyframes reveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0px);
  }
}

/* Hero elements animate immediately on page load.
   animation-delay: 50ms minimum so fill-mode:both reliably holds
   the 'from' state before the animation starts. */
.hero-animate {
  animation-name: reveal;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

/* Stagger delays for top-to-bottom sequence */
.hero-animate-1 { animation-delay: 50ms; }
.hero-animate-2 { animation-delay: 280ms; }
.hero-animate-3 { animation-delay: 520ms; }


/* Below-fold elements: hidden by default, animate when .reveal is added by JS */
.scroll-animate {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.scroll-animate.reveal {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* prefers-reduced-motion intentionally not applied —
   this is a one-time entrance animation, not looping or flashing content. */