/* ============================================================
   ANIMATIONS — Scroll-triggered, keyframes, transitions
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px hsla(165, 45%, 80%, 0.15);
  }
  50% {
    box-shadow: 0 0 35px hsla(165, 45%, 80%, 0.3);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ── Scroll-triggered Animations ──────────────────────────── */
.anim {
  opacity: 0;
  transition:
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
  will-change: opacity, transform;
}

.anim--up {
  transform: translateY(40px);
}

.anim--left {
  transform: translateX(-40px);
}

.anim--right {
  transform: translateX(40px);
}

.anim--scale {
  transform: scale(0.92);
}

.anim--fade {
  /* Only opacity, no transform */
}

/* Visible state (added by IntersectionObserver) */
.anim.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── Stagger Delays ───────────────────────────────────────── */
.delay-1 { transition-delay: 100ms; }
.delay-2 { transition-delay: 200ms; }
.delay-3 { transition-delay: 300ms; }
.delay-4 { transition-delay: 400ms; }
.delay-5 { transition-delay: 500ms; }
.delay-6 { transition-delay: 600ms; }

/* ── Floating Animation ───────────────────────────────────── */
.float {
  animation: float 6s var(--ease-in-out) infinite;
}

.float--slow {
  animation: float 8s var(--ease-in-out) infinite;
}

/* ── Gradient Animation (hero background) ─────────────────── */
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}

/* ── Decorative Accent Line Animation ─────────────────────── */
.accent-line {
  display: inline-block;
  width: 0;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: var(--radius-full);
  transition: width var(--duration-slower) var(--ease-out);
}

.anim.is-visible .accent-line,
.accent-line.is-visible {
  width: 60px;
}

/* ── Reduce Motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .anim {
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}