/* ===== SCROLL-TRIGGERED ANIMATIONS (smooth, water-flow feel) ===== */

/* Smooth water-flow easing curve */
:root {
  --ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base state for animated elements */
.animate-on-scroll {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 1s var(--ease-flow),
              transform 1s var(--ease-flow);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Visible state */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* After animation completes, drop will-change to free GPU memory */
.animate-on-scroll.animation-done {
  will-change: auto;
}

/* Staggered children */
.animate-stagger > .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.animate-stagger > .animate-on-scroll:nth-child(2) { transition-delay: 120ms; }
.animate-stagger > .animate-on-scroll:nth-child(3) { transition-delay: 240ms; }
.animate-stagger > .animate-on-scroll:nth-child(4) { transition-delay: 360ms; }
.animate-stagger > .animate-on-scroll:nth-child(5) { transition-delay: 480ms; }
.animate-stagger > .animate-on-scroll:nth-child(6) { transition-delay: 600ms; }

/* Hero specific animations */
.hero-animate {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: heroFadeIn 1.1s var(--ease-flow) forwards;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.hero-animate:nth-child(1) { animation-delay: 0.15s; }
.hero-animate:nth-child(2) { animation-delay: 0.3s; }
.hero-animate:nth-child(3) { animation-delay: 0.45s; }
.hero-animate:nth-child(4) { animation-delay: 0.65s; }

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Nav entrance */
.nav-animate {
  opacity: 0;
  animation: navSlideDown 0.7s var(--ease-flow) 0.3s forwards;
  will-change: opacity, transform;
}

@keyframes navSlideDown {
  from {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Image scale-in */
.image-animate {
  opacity: 0;
  transform: scale(0.97) translate3d(0, 0, 0);
  transition: opacity 1.2s var(--ease-flow),
              transform 1.2s var(--ease-flow);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.image-animate.visible {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

.image-animate.animation-done {
  will-change: auto;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .hero-animate,
  .nav-animate,
  .image-animate {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
}