/* =============================================
   FADE-IN ANIMATIONS
   ============================================= */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* =============================================
   FOG DRIFT
   ============================================= */
@keyframes fogDrift1 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.04; }
  50% { transform: translate(30px, -20px) scale(1.1); opacity: 0.06; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.04; }
}

@keyframes fogDrift2 {
  0% { transform: translate(0, 0) scale(1); opacity: 0.03; }
  50% { transform: translate(-40px, 15px) scale(1.15); opacity: 0.05; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.03; }
}

/* =============================================
   BAT FLIGHT
   ============================================= */
@keyframes batFly1 {
  0% { left: -5%; transform: translateY(0); }
  25% { transform: translateY(-30px); }
  50% { transform: translateY(20px); }
  75% { transform: translateY(-15px); }
  100% { left: 105%; transform: translateY(0); }
}

@keyframes batFly2 {
  0% { left: 105%; transform: translateY(0) scaleX(-1); }
  25% { transform: translateY(25px) scaleX(-1); }
  50% { transform: translateY(-20px) scaleX(-1); }
  75% { transform: translateY(10px) scaleX(-1); }
  100% { left: -5%; transform: translateY(0) scaleX(-1); }
}

@keyframes batFly3 {
  0% { left: -5%; transform: translateY(0); }
  33% { transform: translateY(-40px); }
  66% { transform: translateY(30px); }
  100% { left: 105%; transform: translateY(0); }
}

/* =============================================
   CANDLE FLICKER
   ============================================= */
@keyframes candleFlicker {
  0% { opacity: 0.5; }
  10% { opacity: 0.7; }
  20% { opacity: 0.4; }
  30% { opacity: 0.8; }
  40% { opacity: 0.5; }
  50% { opacity: 0.6; }
  60% { opacity: 0.9; }
  70% { opacity: 0.4; }
  80% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { opacity: 0.6; }
}

/* =============================================
   CASTLE AMBIENCE
   ============================================= */
@keyframes castleAmbience {
  0% { opacity: 0.8; }
  100% { opacity: 1; }
}

/* =============================================
   GLOW PULSE
   ============================================= */
@keyframes glowPulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1.02); }
}

/* =============================================
   SCROLL INDICATOR
   ============================================= */
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(12px); opacity: 0.3; }
}

/* =============================================
   SLIDE DOWN (MOBILE MENU)
   ============================================= */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}