/**
 * Design System v2 — Decoración y efectos de temporadas automáticas
 *
 * Se activan con data-season="<temporada>" en #ds2 / body y .store-page.
 * Cero JavaScript invasivo: animaciones CSS aceleradas por GPU,
 * pointer-events: none y respeto estricto a prefers-reduced-motion.
 */

/* ─── BANNER DE TEMPORADA ─── */
#ds2 .ds-season-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  background: var(--ds-brand);
  color: var(--ds-brand-ink, #ffffff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  position: relative;
  z-index: 40;
}

#ds2 .ds-season-banner span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* ─── EFECTOS DE FONDO (OVERLAYS) ─── */
#ds2[data-season]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* 1. NAVIDAD: Nieve suave cayendo */
@keyframes ds-snowfall {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 300px 800px, 150px 600px, 80px 400px;
  }
}

#ds2[data-season="navidad"]::before {
  background-image:
    radial-gradient(3px 3px at 30px 40px, rgba(255, 255, 255, .75), transparent),
    radial-gradient(4px 4px at 150px 120px, rgba(255, 255, 255, .85), transparent),
    radial-gradient(2px 2px at 260px 80px, rgba(255, 255, 255, .6), transparent);
  background-size: 320px 400px, 400px 500px, 250px 300px;
  animation: ds-snowfall 14s linear infinite;
  opacity: .75;
}

/* Luces sutiles bajo el banner en Navidad */
#ds2[data-season="navidad"] .ds-season-banner::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    #dc2626 0 10px,
    #16a34a 10px 20px,
    #facc15 20px 30px,
    #2563eb 30px 40px
  );
  opacity: .85;
}

/* 2. AMOR Y AMISTAD: Corazones flotantes tenues */
@keyframes ds-float-hearts {
  0% {
    background-position: 0 500px, 50px 600px;
  }
  100% {
    background-position: 40px 0, 80px 0;
  }
}

#ds2[data-season="amor"]::before {
  background-image:
    radial-gradient(4px 4px at 50px 80px, rgba(225, 29, 72, .35), transparent),
    radial-gradient(6px 6px at 180px 220px, rgba(244, 63, 94, .3), transparent);
  background-size: 240px 480px, 320px 560px;
  animation: ds-float-hearts 22s linear infinite;
  opacity: .7;
}

/* 3. BLACK FRIDAY: Acento de urgencia y contraste de ofertas */
#ds2[data-season="blackfriday"] .ds-season-banner {
  background: #facc15;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 800;
}

#ds2[data-season="blackfriday"] .badge--discount,
#ds2[data-season="blackfriday"] .product-card__badge {
  background: #facc15 !important;
  color: #111111 !important;
  font-weight: 700 !important;
}

/* 4. HALLOWEEN: Ambiente nocturno con detalles naranja */
#ds2[data-season="halloween"] .ds-season-banner {
  background: #ea580c;
  color: #ffffff;
}

#ds2[data-season="halloween"]::before {
  background-image:
    radial-gradient(2px 2px at 80px 100px, rgba(249, 115, 22, .4), transparent),
    radial-gradient(3px 3px at 220px 260px, rgba(168, 85, 247, .3), transparent);
  background-size: 300px 450px, 400px 600px;
  opacity: .6;
}

/* 5. DÍA DE LA MADRE: Pétalos suaves */
#ds2[data-season="madre"]::before {
  background-image:
    radial-gradient(4px 3px at 60px 90px, rgba(225, 29, 72, .25), transparent),
    radial-gradient(5px 4px at 200px 180px, rgba(244, 114, 182, .3), transparent);
  background-size: 260px 420px, 340px 520px;
  animation: ds-snowfall 20s linear infinite;
  opacity: .65;
}

/* 6. DÍA DEL PADRE: Elegancia formal */
#ds2[data-season="padre"] .ds-season-banner {
  background: #0369a1;
  color: #ffffff;
  letter-spacing: .03em;
}

/* ─── MOVIMIENTO REDUCIDO ─── */
@media (prefers-reduced-motion: reduce) {
  #ds2[data-season]::before {
    animation: none !important;
  }
}