/* ==========================================================
   Mercado Secreto Tijuana - Estilos de Estaciones del Año
   ========================================================== */

/* Contenedor de hojas flotantes de temporada */
#leavesOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#leavesOverlay.fading-out {
  opacity: 0 !important;
}

/* Elementos individuales de partículas estacionales */
.autumn-leaf,
.seasonal-particle {
  position: absolute;
  top: -60px;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.autumn-leaf svg,
.seasonal-particle svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(1px 2px 4px rgba(44, 34, 30, 0.2));
}

/* Animaciones de Primavera (Pétalos de flor) */
@keyframes springDrift1 {
  0% { transform: translateY(-20px) translateX(0) rotate(0deg) rotateY(0deg); opacity: 0; }
  15% { opacity: 0.92; }
  50% { transform: translateY(50vh) translateX(70px) rotate(140deg) rotateY(160deg); }
  85% { opacity: 0.85; }
  100% { transform: translateY(105vh) translateX(120px) rotate(320deg) rotateY(360deg); opacity: 0; }
}

@keyframes springDrift2 {
  0% { transform: translateY(-20px) translateX(0) rotate(0deg) rotateX(0deg); opacity: 0; }
  15% { opacity: 0.95; }
  50% { transform: translateY(48vh) translateX(-55px) rotate(-180deg) rotateX(150deg); }
  85% { opacity: 0.8; }
  100% { transform: translateY(105vh) translateX(40px) rotate(-340deg) rotateX(360deg); opacity: 0; }
}

/* Animaciones de Verano (Destellos solares ascendentes) */
@keyframes summerShimmer1 {
  0% { transform: translateY(105vh) translateX(0) scale(0.6); opacity: 0; }
  20% { opacity: 0.95; transform: translateY(80vh) translateX(25px) scale(1.1); }
  60% { opacity: 0.8; transform: translateY(40vh) translateX(-20px) scale(0.9); }
  100% { transform: translateY(-20px) translateX(30px) scale(1.2); opacity: 0; }
}

@keyframes summerShimmer2 {
  0% { transform: translateY(105vh) translateX(0) scale(0.8); opacity: 0; }
  25% { opacity: 0.9; transform: translateY(75vh) translateX(-35px) scale(1.2); }
  70% { opacity: 0.85; transform: translateY(30vh) translateX(20px) scale(0.8); }
  100% { transform: translateY(-20px) translateX(-25px) scale(1.3); opacity: 0; }
}

/* Animaciones de Invierno (Copos de nieve descendentes) */
@keyframes winterFloat1 {
  0% { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.95; }
  50% { transform: translateY(50vh) translateX(35px) rotate(180deg); }
  85% { opacity: 0.9; }
  100% { transform: translateY(105vh) translateX(-25px) rotate(360deg); opacity: 0; }
}

@keyframes winterFloat2 {
  0% { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.9; }
  50% { transform: translateY(52vh) translateX(-40px) rotate(-160deg); }
  85% { opacity: 0.85; }
  100% { transform: translateY(105vh) translateX(30px) rotate(-320deg); opacity: 0; }
}

/* Animaciones de Otoño (Caída y balanceo de hojas) */
@keyframes fallSway1 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) rotateY(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  50% {
    transform: translateY(50vh) translateX(65px) rotate(160deg) rotateY(180deg);
  }
  85% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(105vh) translateX(-35px) rotate(360deg) rotateY(360deg);
    opacity: 0;
  }
}

@keyframes fallSway2 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) rotateX(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  45% {
    transform: translateY(45vh) translateX(-70px) rotate(-140deg) rotateX(160deg);
  }
  80% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(105vh) translateX(50px) rotate(-320deg) rotateX(360deg);
    opacity: 0;
  }
}

@keyframes fallSway3 {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.9);
    opacity: 0;
  }
  12% {
    opacity: 0.85;
  }
  55% {
    transform: translateY(55vh) translateX(90px) rotate(210deg) scale(1);
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(105vh) translateX(-10px) rotate(420deg) scale(0.95);
    opacity: 0;
  }
}

/* ==================== Acentos de Temporada: OTOÑO ==================== */
body.season-autumn {
  --primary-peach: #D96B27;
  --primary-hover: #C35616;
  --kraft: #BF9B7B;
  --antique-gold: #C99738;
}

body.season-autumn .top-announcement {
  background: linear-gradient(90deg, #2A1D17 0%, #3B2419 50%, #2A1D17 100%);
  border-bottom: 1px solid #7E4B28;
}

body.season-autumn .hero-section {
  background: radial-gradient(circle at top right, #FAEDE0 0%, #FAF6EE 60%);
}

.season-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFF3E6;
  color: #B45309;
  border: 1px solid #FCD34D;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Barra de aviso de temporada */
.seasonal-banner {
  background: linear-gradient(135deg, #FAF1E4 0%, #F5E5D0 100%);
  border-bottom: 1px solid #E4CDA0;
  padding: 7px 15px;
  font-size: 13px;
  color: #5C381E;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.seasonal-banner strong {
  color: #B45309;
}

/* ==================== Acentos: INVIERNO ==================== */
body.season-winter {
  --primary-peach: #C47A53;
  --antique-gold: #BFA054;
}
body.season-winter .top-announcement {
  background: #1C242B;
}

/* ==================== Acentos: PRIMAVERA ==================== */
body.season-spring {
  --primary-peach: #DE7C5A;
}

/* ==================== Acentos: VERANO ==================== */
body.season-summer {
  --primary-peach: #E28751;
}