/* ================= GARUDAMUDA DESIGN SYSTEM & ANIMATIONS ================= */

body { 
  background: #DCE8F7; 
  color: #0F172A;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Snow falling background overlay */
#snow-canvas {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* Phone Mockup Styling */
.phone { 
  width: 390px; 
  height: 844px; 
  background: #FFFFFF; 
  border-radius: 2.75rem; 
  box-shadow: 0 25px 65px -15px rgba(15, 30, 60, 0.25), 0 0 0 10px #FFFFFF, 0 0 0 12px #CBD5E1; 
  overflow: hidden; 
  position: relative; 
  transition: all 0.3s ease;
  margin: 0 auto;
}

.phone-scroll { 
  height: 100%; 
  overflow-y: auto; 
  scrollbar-width: none; 
}
.phone-scroll::-webkit-scrollbar { display: none; }

.notch { 
  position: absolute; 
  top: 12px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 120px; 
  height: 26px; 
  background: #0F172A; 
  border-radius: 14px; 
  z-index: 50; 
}

.tt { font-variant-numeric: tabular-nums; }

/* Soft card elevation */
.soft-card {
  box-shadow: 0 8px 24px -6px rgba(37, 99, 235, 0.08);
}

/* ================= MICRO-ANIMATIONS ================= */

/* 1. Screen Enter Transition */
.animate-screen-enter {
  animation: screenEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes screenEnter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2. Hero Floating & Glow Effects */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
.hero-float-1 { animation: heroFloat 3.2s ease-in-out infinite; }
.hero-float-2 { animation: heroFloat 3.6s ease-in-out infinite 0.4s; }
.hero-float-3 { animation: heroFloat 4.0s ease-in-out infinite 0.8s; }

/* 3. Hero Card Hover Glow */
.hero-card {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-card:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 14px 28px -6px rgba(37, 99, 235, 0.35);
}

/* 4. Castle Flag Waving Animation */
@keyframes flagWave {
  0%, 100% { transform: rotate(0deg) skewY(0deg); }
  50% { transform: rotate(-5deg) skewY(-3deg); }
}
.animate-flag {
  transform-origin: left center;
  animation: flagWave 2.5s ease-in-out infinite;
}

/* 5. Shimmer Sweep Effect across Event Banner */
.shimmer-banner {
  position: relative;
  overflow: hidden;
}
.shimmer-banner::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmerSweep 4s infinite;
}
@keyframes shimmerSweep {
  0% { left: -100%; }
  30%, 100% { left: 200%; }
}

/* 6. Bell Ringing Shake Animation */
@keyframes bellRing {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-12deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.animate-bell {
  animation: bellRing 3.5s ease-in-out infinite;
}

/* 7. Megaphone Soundwave Pulse */
@keyframes megaphonePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12) rotate(-4deg); }
}
.animate-megaphone {
  animation: megaphonePulse 2.8s ease-in-out infinite;
}

/* 8. Countdown Ticker Pulse */
@keyframes pulseCount {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.03); }
}
.animate-ticker {
  animation: pulseCount 2s ease-in-out infinite;
}

/* ================= MODAL CLICK ANIMATIONS ================= */
@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.85) translateY(20px) rotateX(15deg); }
  60% { opacity: 1; transform: scale(1.03) translateY(-4px) rotateX(0deg); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-modal-pop {
  animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

@keyframes pulseAura {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.8)); }
}
.animate-aura {
  animation: pulseAura 2.5s ease-in-out infinite;
}

/* ================= WHITEOUT SURVIVAL EVENT ANIMATIONS ================= */

/* Bear Trap Roar & Pulse */
@keyframes bearRoar {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.6)); }
  30% { transform: scale(1.15) rotate(-6deg); filter: drop-shadow(0 0 16px rgba(180, 83, 9, 0.9)); }
  60% { transform: scale(1.15) rotate(6deg); filter: drop-shadow(0 0 16px rgba(180, 83, 9, 0.9)); }
}
.animate-bear-trap { animation: bearRoar 2.4s ease-in-out infinite; }

/* Foundry Battle Flame & Steam Glow */
@keyframes flamePulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6)); }
  50% { transform: scale(1.12) rotate(4deg); filter: drop-shadow(0 0 18px rgba(239, 68, 68, 0.95)); }
}
.animate-foundry-flame { animation: flamePulse 2s ease-in-out infinite; }

/* Frostfire Mine Crystal Glow & Sparkle */
@keyframes crystalGlow {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5)); }
  50% { transform: scale(1.14) rotate(8deg); filter: drop-shadow(0 0 20px rgba(14, 165, 233, 0.95)); }
}
.animate-crystal-glow { animation: crystalGlow 2.8s ease-in-out infinite; }

/* Sunfire Castle Golden Shield Pulse */
@keyframes sunfireRadiance {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)); }
  50% { transform: scale(1.1) rotate(-3deg); filter: drop-shadow(0 0 24px rgba(251, 191, 36, 0.95)); }
}
.animate-sunfire { animation: sunfireRadiance 2.5s ease-in-out infinite; }

/* SvS Cross Swords Clash */
@keyframes svsClash {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-10deg); }
  75% { transform: scale(1.15) rotate(10deg); }
}
.animate-svs-clash { animation: svsClash 1.8s ease-in-out infinite; }

/* Crazy Joe Axe Swing */
@keyframes axeSwing {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-18deg); }
  60% { transform: rotate(22deg); }
}
.animate-axe-swing { animation: axeSwing 2.2s ease-in-out infinite; }

/* Toast Notification */
.toast {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}