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

/* Fade-in up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-12px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ripple {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ===== HERO FLOATING BADGE ===== */
@keyframes heroBadgePop {
  0%  { transform: scale(0.6) translateY(20px); opacity: 0; }
  80% { transform: scale(1.05) translateY(-2px); }
  100%{ transform: scale(1) translateY(0); opacity: 1; }
}

/* ===== NET PATTERN ANIMATION ===== */
@keyframes netDraw {
  from { stroke-dashoffset: 1000; opacity: 0; }
  to   { stroke-dashoffset: 0;    opacity: 0.18; }
}

/* ===== SCROLL-TRIGGERED ===== */
.anim-init       { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.anim-init.show  { opacity: 1; transform: translateY(0); }
.anim-left       { opacity: 0; transform: translateX(-28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.anim-left.show  { opacity: 1; transform: translateX(0); }
.anim-right      { opacity: 0; transform: translateX(28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.anim-right.show { opacity: 1; transform: translateX(0); }
.anim-scale      { opacity: 0; transform: scale(0.9); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.anim-scale.show { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ===== HERO ENTRANCE ===== */
.hero-anim-1 { animation: fadeInUp  0.8s var(--ease) 0.1s both; }
.hero-anim-2 { animation: fadeInUp  0.8s var(--ease) 0.25s both; }
.hero-anim-3 { animation: fadeInUp  0.8s var(--ease) 0.4s both; }
.hero-anim-4 { animation: fadeInUp  0.8s var(--ease) 0.55s both; }
.hero-anim-5 { animation: scaleIn   0.7s var(--ease) 0.7s both; }
.hero-float  { animation: float 4s ease-in-out infinite; }
.hero-float-delay { animation: float 4s ease-in-out 1.5s infinite; }

/* ===== PULSE RING (for icons / badges) ===== */
.pulse-ring {
  position: relative;
}
.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--blue-light);
  animation: ripple 2s ease-out infinite;
}

/* ===== SHIMMER BUTTON ===== */
.btn-shimmer {
  background-size: 200% auto;
  background-image: linear-gradient(90deg, var(--blue) 0%, var(--blue-sky) 50%, var(--blue) 100%);
  animation: shimmer 2.5s linear infinite;
}

/* ===== HERO BG PARTICLES ===== */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  animation: float var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
}