/* ============================================
   Animations — @keyframes, reveal system, particles
   ============================================ */

/* ==========================================
   KEYFRAMES
   ========================================== */

/* Hero background drift */
@keyframes hero-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(-2%, 1%) scale(1.05);
  }
  66% {
    transform: translate(1%, -1%) scale(0.98);
  }
  100% {
    transform: translate(0.5%, 0.5%) scale(1.02);
  }
}

/* Avatar ring spin */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scroll chevron bounce */
@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(6px); }
}

/* Floating particles */
@keyframes float-particle {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) translateX(30px) scale(0.3);
    opacity: 0;
  }
}

/* Subtle float for avatar */
@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* Pulse glow for CTA */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4); }
  50%      { box-shadow: 0 4px 35px rgba(108, 92, 231, 0.7); }
}

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

/* ==========================================
   REVEAL SYSTEM (Scroll-triggered)
   ========================================== */

/* Hidden state — before entering viewport */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Revealed state — applied by JS Intersection Observer */
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants for timeline */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ==========================================
   STAGGER DELAYS (applied via JS inline styles)
   ========================================== */

/* Skill cards wave-in */
.skills-grid .skill-card:nth-child(1) { transition-delay: 0.05s; }
.skills-grid .skill-card:nth-child(2) { transition-delay: 0.10s; }
.skills-grid .skill-card:nth-child(3) { transition-delay: 0.15s; }
.skills-grid .skill-card:nth-child(4) { transition-delay: 0.20s; }
.skills-grid .skill-card:nth-child(5) { transition-delay: 0.25s; }
.skills-grid .skill-card:nth-child(6) { transition-delay: 0.30s; }

/* Stats cards stagger */
.about-stats .stat-card:nth-child(1) { transition-delay: 0.05s; }
.about-stats .stat-card:nth-child(2) { transition-delay: 0.12s; }
.about-stats .stat-card:nth-child(3) { transition-delay: 0.19s; }
.about-stats .stat-card:nth-child(4) { transition-delay: 0.26s; }

/* Project cards stagger */
.projects-grid .project-card:nth-child(1) { transition-delay: 0.05s; }
.projects-grid .project-card:nth-child(2) { transition-delay: 0.15s; }
.projects-grid .project-card:nth-child(3) { transition-delay: 0.25s; }

/* Timeline items stagger */
.timeline-item:nth-child(1) { transition-delay: 0.05s; }
.timeline-item:nth-child(2) { transition-delay: 0.15s; }
.timeline-item:nth-child(3) { transition-delay: 0.25s; }
.timeline-item:nth-child(4) { transition-delay: 0.35s; }

/* Contact cards stagger */
.contact-grid .contact-card:nth-child(1) { transition-delay: 0.05s; }
.contact-grid .contact-card:nth-child(2) { transition-delay: 0.12s; }
.contact-grid .contact-card:nth-child(3) { transition-delay: 0.19s; }
.contact-grid .contact-card:nth-child(4) { transition-delay: 0.26s; }

/* ==========================================
   PARTICLES
   ========================================== */
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-particles);
}

.particle {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--clr-accent-1);
  animation: float-particle linear infinite;
  will-change: transform, opacity;
}

/* Particle color variants */
.particle:nth-child(3n) {
  background: var(--clr-accent-2);
}

.particle:nth-child(5n+2) {
  background: var(--clr-accent-3);
}

/* ==========================================
   AVATAR ANIMATION
   ========================================== */
.hero-avatar {
  animation: avatar-float 4s ease-in-out infinite;
}

/* CTA glow pulse */
.btn-primary {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-avatar {
    animation: none;
  }

  .btn-primary {
    animation: none;
  }

  .particle {
    display: none;
  }
}