/*
 * Soundbliz - tema de Halloween (temporal).
 * Se carga solo cuando la web esta en modo Halloween (config/halloween.php) y
 * todo va bajo html.halloween. Para quitarlo: HALLOWEEN=false o borrar este archivo.
 *
 * Reglas: nada de esto toca los anuncios, nada captura clics (pointer-events:none),
 * y las animaciones se apagan con prefers-reduced-motion.
 */

/* ---------- 1. Paleta: naranja calabaza sobre negro ---------- */
html.halloween {
  --be-primary: 255 106 0 !important;
  --be-primary-light: 255 170 90 !important;
  --be-primary-dark: 214 80 0 !important;
  --be-on-primary: 0 0 0 !important;
  --be-bg-chip: 52 30 70 !important;
}
html.halloween.dark {
  --be-paper: 24 16 32 !important;
}
/* el panel tenia .bg-chip forzado en morado; en Halloween manda la paleta */
html.halloween .bg-chip {
  background-color: rgb(var(--be-bg-chip)) !important;
}

/* ---------- 2. Brillo de vela en titulares ---------- */
html.halloween h1,
html.halloween h2 {
  text-shadow: 0 0 12px rgb(255 106 0 / 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  html.halloween h1 {
    animation: hw-flicker 4s infinite;
  }
}
@keyframes hw-flicker {
  0%, 18%, 22%, 62%, 66%, 100% { text-shadow: 0 0 14px rgb(255 106 0 / 0.55); }
  20%, 64% { text-shadow: 0 0 3px rgb(255 106 0 / 0.2); }
}

/* ---------- 3. Telaraña en la esquina superior izquierda ---------- */
html.halloween body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 110px;
  height: 110px;
  z-index: 40;
  pointer-events: none;
  opacity: 0.55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d9d9d9' stroke-width='1'><path d='M0 0 L100 0 M0 0 L92 38 M0 0 L70 70 M0 0 L38 92 M0 0 L0 100'/><path d='M22 0 Q18 18 0 22 M44 0 Q36 36 0 44 M66 0 Q54 54 0 66 M88 0 Q72 72 0 88'/></svg>") no-repeat top left / contain;
}

/* ---------- 4. Murciélagos (solo escritorio, un pase lento) ---------- */
html.halloween body::after {
  content: '';
  position: fixed;
  top: 18%;
  left: -80px;
  width: 54px;
  height: 28px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 28'><path fill='%23111' stroke='%23ff6a00' stroke-width='1' d='M27 8 L31 2 L33 9 C38 3 46 4 54 10 C48 10 46 14 44 19 C41 15 38 15 35 19 L31 15 L27 24 L23 15 L19 19 C16 15 13 15 10 19 C8 14 6 10 0 10 C8 4 16 3 21 9 L23 2 Z'/></svg>") no-repeat center / contain;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  html.halloween body::after {
    animation: hw-bat 26s linear infinite;
  }
}
@keyframes hw-bat {
  0%, 70% { transform: translate(0, 0); opacity: 0; }
  72% { opacity: 0.9; }
  85% { transform: translate(55vw, -30px); }
  98% { opacity: 0.9; }
  100% { transform: translate(calc(100vw + 120px), 40px); opacity: 0; }
}

/* ---------- 5. Logo con sombrero de bruja ---------- */
html.halloween a:has(> picture) {
  position: relative;
}
html.halloween a:has(> picture)::after {
  content: '';
  position: absolute;
  top: -9px;
  left: -6px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  transform: rotate(-18deg);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path fill='%23241033' stroke='%23ff6a00' stroke-width='1.5' d='M20 2 L27 26 L36 30 L36 34 L4 34 L4 30 L13 26 Z'/><rect x='13' y='24' width='14' height='4' fill='%23ff6a00'/></svg>") no-repeat center / contain;
}

/* ---------- 6. Goteo de sangre bajo el menú superior ---------- */
html.halloween .sticky.top-0::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 10px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12px 0, #8b0000 7px, transparent 8px) 0 0 / 60px 10px repeat-x,
    radial-gradient(circle at 42px 0, #b30000 4px, transparent 5px) 0 0 / 60px 8px repeat-x;
  opacity: 0.85;
}

/* ---------- 7. Móvil: más sobrio ---------- */
@media (max-width: 768px) {
  html.halloween body::before {
    width: 70px;
    height: 70px;
  }
  html.halloween .sticky.top-0::after {
    display: none;
  }
}