/* ============================================
   Shared Animations
   ============================================ */

/* ---- Mesh Gradient Background ---- */
.mesh-gradient {
  background:
    radial-gradient(at 40% 20%, rgba(36,145,182,0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%,   rgba(6,182,212,0.1)  0px, transparent 50%),
    radial-gradient(at 0%   50%, rgba(36,145,182,0.1)  0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(6,182,212,0.08)  0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(36,145,182,0.12) 0px, transparent 50%);
  animation: meshMove 20s ease-in-out infinite alternate;
}

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

/* ---- Hero Spotlight ---- */
#hero-spotlight {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 40% 20%, rgba(36,145,182,0.25) 0px, transparent 50%),
    radial-gradient(at 80% 0%,   rgba(6,182,212,0.18)  0px, transparent 50%),
    radial-gradient(at 0%   50%, rgba(36,145,182,0.18)  0px, transparent 50%),
    radial-gradient(at 80% 50%, rgba(6,182,212,0.12)  0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(36,145,182,0.20) 0px, transparent 50%);
  animation: meshMove 20s ease-in-out infinite alternate;
  mask-image: radial-gradient(
    circle 300px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    black 0%,
    transparent 70%
  );
  -webkit-mask-image: radial-gradient(
    circle 300px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    black 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- Keyframes ---- */
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-20px) scale(1.02); }
}

@keyframes floatDelayed {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-30px) scale(1.03); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.8; transform: scale(1.05); }
}

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

@keyframes navPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes sectionGlow {
  0% {
    box-shadow: inset 0 0 0 0 rgba(36, 145, 182, 0);
  }
  40% {
    box-shadow: inset 0 0 60px 20px rgba(36, 145, 182, 0.12), 0 0 40px rgba(36, 145, 182, 0.15);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(36, 145, 182, 0);
  }
}

/* ---- Animation Classes ---- */
.animate-float {
  animation: float 8s ease-in-out infinite;
}

.animate-float-delayed {
  animation: floatDelayed 10s ease-in-out infinite 2s;
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

.animate-bounce-slow {
  animation: bounceSlow 2.5s ease-in-out infinite;
}

.section-glow {
  animation: sectionGlow 1.2s ease-out forwards;
}

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

/* ---- Touch Device Tweaks ---- */
@media (pointer: coarse) {
  .glass-card:hover {
    transform: none !important;
  }
}