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

@keyframes blink {
  0%,100%{opacity:1}
  50%{opacity:0}
}
@keyframes float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes spin {
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes scrollWheel {
  0%{transform:translateY(0);opacity:1}
  100%{transform:translateY(12px);opacity:0}
}
@keyframes fadeInUp {
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn {
  from{opacity:0}
  to{opacity:1}
}
@keyframes slideInLeft {
  from{opacity:0;transform:translateX(-40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes slideInRight {
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes glowPulse {
  0%,100%{box-shadow:0 0 20px rgba(0,212,255,0.2)}
  50%{box-shadow:0 0 40px rgba(0,212,255,0.5),0 0 80px rgba(0,212,255,0.15)}
}
@keyframes gradientShift {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes particlePulse {
  0%,100%{transform:scale(1);opacity:0.6}
  50%{transform:scale(1.5);opacity:1}
}
@keyframes rotateSlow {
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ===== ANIMATION CLASSES ===== */
.animate-fade-in {
  animation: fadeIn 0.8s ease forwards;
}
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
}
.animate-slide-left {
  animation: slideInLeft 0.8s ease forwards;
}
.animate-slide-right {
  animation: slideInRight 0.8s ease forwards;
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}
.animate-glow {
  animation: glowPulse 2.5s ease infinite;
}
.animate-spin-slow {
  animation: rotateSlow 20s linear infinite;
}

/* ===== STAGGER DELAYS ===== */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* ===== HERO ENTRY ANIMATIONS ===== */
.hero-badge    { opacity:0; animation: fadeInUp 0.7s 0.1s ease forwards; }
.hero-title    { opacity:0; animation: fadeInUp 0.7s 0.25s ease forwards; }
.hero-description { opacity:0; animation: fadeInUp 0.7s 0.4s ease forwards; }
.hero-cta      { opacity:0; animation: fadeInUp 0.7s 0.55s ease forwards; }
.hero-stats    { opacity:0; animation: fadeInUp 0.7s 0.7s ease forwards; }
.hero-visual   { opacity:0; animation: slideInRight 0.9s 0.3s ease forwards; }
.hero-scroll-hint { opacity:0; animation: fadeIn 1s 1.2s ease forwards; }

/* ===== GRADIENT BACKGROUND (hero grid lines) ===== */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* ===== SECTION BG ACCENTS ===== */
.about-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(123,47,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.projects-section::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,212,255,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.contact-section::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,255,136,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ===== TECH PILL FLOATS ===== */
.pill-1 { animation: float 3.5s ease-in-out infinite; }
.pill-2 { animation: float 4s ease-in-out 0.5s infinite; }
.pill-3 { animation: float 3.8s ease-in-out 1s infinite; }
.pill-4 { animation: float 4.2s ease-in-out 1.5s infinite; }

/* ===== AVATAR GLOW ===== */
.avatar-circle {
  animation: glowPulse 3s ease infinite;
}