/* JASS PLAY - Fondos estacionales aislados del catalogo */
:root {
  --season-base: #080b12;
  --season-glow-1: rgba(255, 122, 24, .16);
  --season-glow-2: rgba(255, 255, 255, .06);
  --season-particle: rgba(255, 255, 255, .58);
  --season-watermark: rgba(255, 255, 255, .035);
}

html { background: var(--season-base); }
body.season-bg-active { background-color: transparent !important; }

.season-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background:
    radial-gradient(circle at 18% 12%, var(--season-glow-1), transparent 38%),
    radial-gradient(circle at 82% 76%, var(--season-glow-2), transparent 42%),
    linear-gradient(145deg, var(--season-base), #05070b 72%);
  transition: background 600ms ease;
  contain: strict;
}

.season-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--season-watermark);
  font: 900 clamp(4.5rem, 16vw, 14rem)/.85 system-ui, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-12deg);
  text-transform: uppercase;
  white-space: nowrap;
}

.season-watermark img {
  width: min(52vw, 560px);
  max-height: 42vh;
  object-fit: contain;
  opacity: .075;
  filter: grayscale(1) brightness(1.8);
}

.season-particle {
  position: absolute;
  left: var(--x);
  top: -10vh;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--season-particle);
  opacity: var(--opacity);
  box-shadow: 0 0 12px currentColor;
  animation: season-fall var(--duration) linear var(--delay) infinite;
  will-change: transform;
}

@keyframes season-fall {
  to { transform: translate3d(var(--drift), 120vh, 0) rotate(360deg); }
}

/* Temas: solo cambian variables; nunca tocan tarjetas, modales o carrito. */
body[data-season="default"] { --season-base:#090b12; --season-glow-1:rgba(255,126,27,.18); --season-glow-2:rgba(94,65,180,.10); }
body[data-season="summer"] { --season-base:#07141a; --season-glow-1:rgba(255,174,50,.20); --season-glow-2:rgba(0,190,210,.13); --season-particle:rgba(255,205,90,.38); }
body[data-season="newyear"] { --season-base:#080b18; --season-glow-1:rgba(255,202,74,.20); --season-glow-2:rgba(76,112,255,.16); --season-particle:rgba(255,215,92,.65); }
body[data-season="valentines"] { --season-base:#170812; --season-glow-1:rgba(255,55,120,.20); --season-glow-2:rgba(255,155,190,.11); --season-particle:rgba(255,126,166,.48); }
body[data-season="easter"] { --season-base:#11120c; --season-glow-1:rgba(199,120,54,.17); --season-glow-2:rgba(112,74,42,.13); --season-particle:rgba(218,151,83,.44); }
body[data-season="peru"] { --season-base:#13090c; --season-glow-1:rgba(235,25,45,.22); --season-glow-2:rgba(255,255,255,.10); --season-particle:rgba(255,235,235,.52); }
body[data-season="spring"] { --season-base:#08130f; --season-glow-1:rgba(44,190,112,.16); --season-glow-2:rgba(255,133,187,.11); --season-particle:rgba(255,164,202,.42); }
body[data-season="halloween"] { --season-base:#100817; --season-glow-1:rgba(255,103,0,.22); --season-glow-2:rgba(123,56,204,.16); --season-particle:rgba(255,135,35,.50); }
body[data-season="christmas"] { --season-base:#07120f; --season-glow-1:rgba(18,155,91,.17); --season-glow-2:rgba(210,30,55,.16); --season-particle:rgba(255,255,255,.72); }

@media (max-width: 700px) {
  .season-watermark { font-size: clamp(3rem, 17vw, 7rem); }
  .season-watermark img { width: min(72vw, 380px); }
  .season-particle:nth-child(n+16) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .season-particle { animation: none; display: none; }
  .season-background { transition: none; }
}

/* MOSTRAR EL FONDO ANIMADO DESDE EL INICIO */

body.season-bg-active,
body.season-bg-active main,
body.season-bg-active .hero,
body.season-bg-active #inicio {
    background-color: transparent !important;
}

body.season-bg-active .hero,
body.season-bg-active #inicio {
    background-image: none !important;
  
}

.season-background {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
}