/* === Animations === */

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

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

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Section entrance */
.section-enter {
  animation: ppSectionIn 0.5s var(--ease) both;
}

@keyframes ppSectionIn {
  from { opacity: 0; transform: translateY(12px) scale(0.995); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Shimmer loading effect */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: shimmer 1.6s linear infinite;
}

/* Weather animations */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(-10px) translateX(5px); }
  50% { transform: translateY(-5px) translateX(-5px); }
  75% { transform: translateY(-15px) translateX(3px); }
}

@keyframes cloudFloat {
  0% { transform: translateX(120%); }
  100% { transform: translateX(-140%); }
}

@keyframes rainFall {
  0% { transform: translateY(-100%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0; }
}

@keyframes snowFall {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 0.8; }
  100% { transform: translateY(400px) rotate(360deg); opacity: 0; }
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255,200,0,0.5)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(255,200,0,0.7)); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes lightningFlash {
  0%, 92%, 100% { opacity: 0; }
  93% { opacity: 0.65; }
  94% { opacity: 0.15; }
  95% { opacity: 0.85; }
  96% { opacity: 0.2; }
  97% { opacity: 0.7; }
}

@keyframes windDrift {
  0% { transform: translateX(120%); }
  100% { transform: translateX(-140%); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}

@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 10px 18px rgba(168,85,247,0.22)); }
  50% { filter: drop-shadow(0 16px 28px rgba(99,102,241,0.35)); }
}

@keyframes boltFlash {
  0%, 88%, 100% { opacity: 0.55; }
  90% { opacity: 1; }
  92% { opacity: 0.35; }
  94% { opacity: 1; }
}

/* Weather animation classes */
.cloud { animation: cloudFloat linear infinite; }
.cloud.slow { animation-duration: 38s; }
.cloud.mid { animation-duration: 28s; }
.cloud.fast { animation-duration: 18s; }
.cloudLayer { position: absolute; inset: 0; pointer-events: none; }
.mist { position: absolute; inset: -20px; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.14), transparent 55%), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.10), transparent 60%); filter: blur(6px); opacity: 0.7; }
.rain-drop { animation: rainFall 1s linear infinite; }
.snow-flake { animation: snowFall 3s linear infinite; }
.sun-glow { animation: sunPulse 3s ease-in-out infinite; }
.star { animation: twinkle 2s ease-in-out infinite; }
.lightning-flash { position: absolute; inset: 0; background: rgba(255,255,255,0.55); animation: lightningFlash 5.5s infinite; pointer-events: none; mix-blend-mode: overlay; }
.wind-line { position: absolute; height: 2px; width: 80px; background: rgba(255,255,255,0.18); border-radius: 999px; filter: blur(0.2px); animation: windDrift linear infinite; }
.rain-slash { animation: rainFall 0.95s linear infinite; }

/* Site logo */
.site-logo {
  animation: logoFloat 2.8s ease-in-out infinite, logoGlow 3.6s ease-in-out infinite;
}