/* Fondo de Halloween y logo de temporada. Todo cuelga de html.hw-on: sin esa clase este archivo no pinta nada y el 1-nov el sitio
   vuelve solo a su fondo y a su logo de siempre. La capa HTML la emite halloween_sky() (halloween_theme.php).
   Oscuro = «Cementerio»; claro = «Pergamino». Texto solo sobre superficies opacas: la luna va muy atenuada porque el contenido pasa por encima. */

/* El color de fondo va en html (lo ven la carga y el rebote del scroll) y body se deja transparente para que se vea la capa */
html.hw-on{background:#0b0710}
html.hw-on[data-theme="light"]{background:#f4ecdd}
html.hw-on body{background:transparent}

/* Capa fija: detrás de todo, recortada y aislada; sin alturas en vh ni background-attachment */
html.hw-on .hw-sky{position:fixed;inset:0;z-index:-1;overflow:hidden;contain:strict;pointer-events:none}
html.hw-on .hw-sky *{pointer-events:none}
html.hw-on .hw-sky-d,html.hw-on .hw-sky-l{position:absolute;inset:0}
html.hw-on:not([data-theme="light"]) .hw-sky-l{display:none}
html.hw-on[data-theme="light"] .hw-sky-d{display:none}

/* ── Cementerio (tema oscuro) ── */
html.hw-on .hw-sky-d{background:radial-gradient(ellipse 70% 38% at 50% 106%,#ff4d002b,#0000 70%),radial-gradient(ellipse 120% 55% at 50% 100%,#341650,#0000 72%),linear-gradient(#050308,#0b0710 32%,#150b21 68%,#22102f)}
html.hw-on .hw-stars,html.hw-on .hw-stars::after{position:absolute;inset:0 0 28%;content:"";background-image:radial-gradient(1px 1px at 22px 34px,#fff,#0000),radial-gradient(1px 1px at 140px 76px,#e7dcff,#0000),radial-gradient(1.5px 1.5px at 92px 152px,#fff,#0000),radial-gradient(1px 1px at 212px 18px,#ffe7c2,#0000),radial-gradient(1px 1px at 248px 184px,#fff,#0000),radial-gradient(1px 1px at 58px 206px,#d6c6ff,#0000);background-size:270px 230px;-webkit-mask-image:linear-gradient(#000 45%,#0000);mask-image:linear-gradient(#000 45%,#0000)}
html.hw-on .hw-stars{opacity:.7}
html.hw-on .hw-stars::after{inset:0;background-size:383px 311px;background-position:117px 61px;opacity:.6}
html.hw-on .hw-moon{position:absolute;top:9%;right:6%;width:clamp(64px,8vw,120px);aspect-ratio:1;border-radius:50%;opacity:.32;background:radial-gradient(circle at 66% 36%,#8c745a57,#0000 9%),radial-gradient(circle at 40% 64%,#8c745a42,#0000 13%),radial-gradient(circle at 73% 68%,#8c745a3d,#0000 7%),radial-gradient(circle at 38% 34%,#fffdf4,#f2e6c4 55%,#c9b68b);box-shadow:0 0 24px 4px #fff1d261,0 0 80px 24px #ffd69626}
html.hw-on .hw-bat{position:absolute;left:0;fill:#08040c;stroke:#5c3f80;stroke-width:.8;filter:drop-shadow(0 0 3px #c69cf480);animation:hw-fly var(--d,26s) linear var(--dl,0s) infinite;will-change:transform}
html.hw-on .hw-b1{top:16%;width:58px;--d:24s}
html.hw-on .hw-b2{top:28%;width:42px;--d:31s;--dl:-9s}
html.hw-on .hw-b3{top:10%;width:32px;--d:37s;--dl:-20s}
html.hw-on .hw-ghost{position:absolute;left:5%;top:52%;width:52px;fill:#efe6fb;opacity:.2;animation:hw-bob 6s ease-in-out infinite alternate}
html.hw-on .hw-graves{position:absolute;left:0;bottom:0;width:100%;height:clamp(70px,11vw,150px)}
html.hw-on .hw-fog{position:absolute;left:0;bottom:-4%;width:200%;height:30%;background:radial-gradient(ellipse 13% 40% at 15% 70%,#c4b6d633,#0000),radial-gradient(ellipse 16% 30% at 38% 80%,#c4b6d629,#0000),radial-gradient(ellipse 13% 42% at 62% 68%,#c4b6d62e,#0000),radial-gradient(ellipse 13% 32% at 86% 80%,#c4b6d626,#0000);background-size:50% 100%;animation:hw-drift 40s linear infinite;will-change:transform}

/* ── Pergamino (tema claro) ── */
html.hw-on .hw-sky-l{background:radial-gradient(ellipse 60% 50% at 12% -4%,#ffe6b8,#0000 70%),radial-gradient(ellipse 70% 60% at 100% 104%,#e8d2ac,#0000 66%),#f4ecdd}
html.hw-on .hw-sky-l .hw-bat{fill:#3a2a1a;stroke:#3a2a1a;filter:none;opacity:.16}
html.hw-on .hw-sky-l .hw-b1{top:18%;width:46px;--d:34s}
html.hw-on .hw-sky-l .hw-b2{top:32%;width:34px;--d:44s;--dl:-16s}
html.hw-on .hw-pk{position:absolute;right:3%;bottom:-12px;width:60px;opacity:.5;--pk:#c8560c;--face:#fff0c8}

@keyframes hw-fly{from{transform:translateX(-90px)}to{transform:translateX(calc(100vw + 90px))}}
@keyframes hw-bob{to{transform:translateY(-16px)}}
@keyframes hw-drift{to{transform:translateX(-50%)}}

/* Móvil: menos adornos y la luna más tenue (el contenido ocupa casi todo el ancho) */
@media (max-width:599px){
html.hw-on .hw-b2,html.hw-on .hw-b3,html.hw-on .hw-ghost,html.hw-on .hw-fog{display:none}
html.hw-on .hw-moon{top:12%;right:-14px;width:84px;opacity:.22}
html.hw-on .hw-pk{width:48px}
}

/* Accesibilidad y bajo consumo */
@media (prefers-reduced-motion:reduce){
html.hw-on .hw-sky *,html.hw-on .hw-sky::before,html.hw-on .hw-sky::after{animation:none}
}
@media (forced-colors:active){
html.hw-on .hw-sky{display:none}
}
@media print{
html.hw-on .hw-sky{display:none}
}

/* ── Logo de temporada ──
   El <img class="theme-logo"> apunta al SVG de siempre. Aquí se cambia su contenido solo mientras dura el tema.
   En tema claro theme.css ya reemplaza el logo por sp-blacklogo.png y fija su alto en 24 px; esta regla, más específica,
   solo cambia la imagen y conserva esas medidas. */
html.hw-on img.theme-logo{content:url(/seasonal/halloween/logo-halloween.svg?v=1)}
html.hw-on[data-theme="light"] img.theme-logo{content:url(/seasonal/halloween/logo-halloween-claro.svg?v=1)}