/* ==========================================================================
   ANIMATIONS.CSS - Scroll, Transitions & Keyframe Animations
   ========================================================================== */

/* 1. KEYFRAME LOOPS & DYNAMIC MOVEMENTS */
@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Float movement for blob orbs */
@keyframes float-slow {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

/* 2. INITIAL ENTRY LOAD ANIMATIONS (Page load) */
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-up-delayed {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.animate-slide-up-delayed-more {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. INTERSECTIONOBSERVER SCROLL TRIGGER ANIMATIONS */
/* Base un-triggered state */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Triggered active state */
.animate-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll Animation Delays */
.animate-on-scroll.delay-1 {
  transition-delay: 0.15s;
}

.animate-on-scroll.delay-2 {
  transition-delay: 0.3s;
}

.animate-on-scroll.delay-3 {
  transition-delay: 0.45s;
}

/* Side sliding animations */
.slide-left-on-scroll {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-left-on-scroll.active {
  opacity: 1;
  transform: translateX(0);
}

.slide-right-on-scroll {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-right-on-scroll.active {
  opacity: 1;
  transform: translateX(0);
}

/* 4. HOVER INTERACTIVE EFFECTS */
/* Premium hover card glow */
.glass-card {
  position: relative;
  z-index: 1;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(800px circle at var(--mouse-x, 0) var(--mouse-y, 0), rgba(0, 212, 255, 0.06), transparent 40%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glass-card:hover::before {
  opacity: 1;
}

/* Progress Bar Trigger Animation */
.skill-bar-fill.triggered {
  width: var(--width) !important;
}

/* Typewriter typing animation helpers */
.typing-cursor {
  animation: blink-cursor 0.7s infinite;
}

@keyframes blink-cursor {
  from, to { border-color: transparent }
  50% { border-color: var(--color-accent-start); }
}

/* ==========================================================================
   5. FRAMER MOTION INSPIRED STAGGERED ENTRANCE ANIMATIONS
   ========================================================================== */
.animate-slide-up-fade {
  opacity: 0;
  transform: translateY(32px);
  animation: slideUpFade 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Precise staggered delay values */
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }
.delay-350 { animation-delay: 350ms; }
.delay-400 { animation-delay: 400ms; }
.delay-450 { animation-delay: 450ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }