/* ============================================
   ANIMATIONS — Premium keyframes, entrance
   classes, parallax helpers, micro-interactions
   ============================================ */

/* ── Core Keyframes ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; filter: blur(2px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px) rotate(-1deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px) rotate(1deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}

/* ── Floating / Organic Motion ── */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(0.5deg); }
  50%      { transform: translateY(-14px) rotate(0deg); }
  75%      { transform: translateY(-6px) rotate(-0.5deg); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-6px) rotate(0.3deg); }
  66%      { transform: translateY(-10px) rotate(-0.3deg); }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 hsla(142, 71%, 45%, 0.4);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.15);
    box-shadow: 0 0 0 8px hsla(142, 71%, 45%, 0);
  }
}

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

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

/* ── Premium Shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Glow Pulse for CTAs ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px hsla(170, 55%, 38%, 0.15); }
  50%      { box-shadow: 0 0 40px hsla(170, 55%, 38%, 0.3); }
}

/* ── Dot Ring Expand ── */
@keyframes ringExpand {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── Subtle Morph for BG shapes ── */
@keyframes morph {
  0%, 100% {
    border-radius: 50% 40% 60% 50%;
    transform: rotate(0deg) scale(1);
  }
  25% {
    border-radius: 40% 60% 50% 50%;
    transform: rotate(3deg) scale(1.02);
  }
  50% {
    border-radius: 60% 50% 40% 60%;
    transform: rotate(-2deg) scale(0.98);
  }
  75% {
    border-radius: 50% 50% 60% 40%;
    transform: rotate(1deg) scale(1.01);
  }
}

/* ── Entrance classes (applied via IntersectionObserver) ── */
.anim-hidden {
  opacity: 0;
  will-change: transform, opacity, filter;
}

.anim-fade-up {
  animation: fadeUp 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-fade-in {
  animation: fadeIn 600ms var(--ease-smooth) forwards;
}

.anim-scale-up {
  animation: scaleUp 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-slide-left {
  animation: slideInLeft 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.anim-slide-right {
  animation: slideInRight 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Stagger delays (children) ── */
.stagger-1 { animation-delay: 80ms; }
.stagger-2 { animation-delay: 160ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 320ms; }
.stagger-5 { animation-delay: 400ms; }
.stagger-6 { animation-delay: 480ms; }
.stagger-7 { animation-delay: 560ms; }
.stagger-8 { animation-delay: 640ms; }

/* ── Floating decorative elements ── */
.float-slow {
  animation: floatSlow 8s ease-in-out infinite;
}

.float-medium {
  animation: float 5s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* ── Pulse dot (available badge) ── */
.pulse-dot {
  animation: pulse 2s ease-in-out infinite;
}

/* ── Scroll indicator bounce ── */
.bounce-down {
  animation: bounceDown 1.5s ease-in-out infinite;
}

/* ── Parallax helper class ── */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Morph BG shapes ── */
.morph-shape {
  animation: morph 20s ease-in-out infinite;
}

/* ── Glow CTA ── */
.glow-cta {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ── Magnetic Hover (applied via JS) ── */
.magnetic-hover {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Line Draw Animation for Timeline ── */
@keyframes lineGrow {
  from { height: 0; }
  to   { height: 100%; }
}

.line-draw {
  animation: lineGrow 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Counter / Number Roll ── */
@keyframes countUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Smooth page load ── */
@keyframes pageReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: pageReveal 0.6s ease-out forwards;
}