/* ── Tema Halloween — "La notte delle Locuste" (v2: realistico/horror) ──
   Caricato solo quando il tema è attivo (core/themes.py); tutto sotto
   html[data-site-theme="halloween"] o su elementi creati da js/themes/halloween.js.
   html.hw-fx-off = effetti animati spenti dall'utente (resta la palette). */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');

html[data-site-theme="halloween"] {
  --gold: #E8590C;            /* l'oro del sito diventa brace */
  --gold-light: #FF922B;
  --hw-ember: 232, 89, 12;
  --hw-blood: 138, 3, 3;
  --hw-moon: 255, 236, 190;
  --hw-fell: 'IM Fell English SC', Georgia, serif;
}

/* cielo notturno: alone freddo dall'alto, fisso mentre si scorre */
html[data-site-theme="halloween"] body {
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -12%, rgba(70, 60, 110, .22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 115%, rgba(var(--hw-blood), .10), transparent 70%);
  background-attachment: fixed;
}

/* vignetta leggera e ferma (pulsando faceva sembrare il centro una luce fissa durante lo scroll) */
html[data-site-theme="halloween"] body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 89;
  background: radial-gradient(ellipse 130% 110% at 50% 45%, transparent 62%, rgba(0, 0, 0, .4) 100%);
}

/* accenti: brace con bagliore, neon che "muore" ogni tanto */
html[data-site-theme="halloween"] .accent,
html[data-site-theme="halloween"] .l-hero__title span {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(var(--hw-ember), .55), 0 0 42px rgba(var(--hw-blood), .45);
  animation: hw-neon 9s infinite;
}
@keyframes hw-neon { 0%, 31%, 35%, 71%, 73%, 100% { opacity: 1; } 33% { opacity: .35; } 72% { opacity: .5; } }
html.hw-fx-off .accent, html.hw-fx-off .l-hero__title span { animation: none; }

html[data-site-theme="halloween"] .navbar { border-bottom-color: rgba(var(--hw-blood), .9); }
html[data-site-theme="halloween"] .navbar__logo img { filter: drop-shadow(0 0 8px rgba(var(--hw-blood), .9)); }
html[data-site-theme="halloween"] .navbar__logo-text span { color: var(--gold); }

/* intestazioni pagina: notte di luna piena con nuvole che passano */
html[data-site-theme="halloween"] .page-header {
  position: relative; overflow: hidden;
  border-bottom-color: rgba(var(--hw-blood), .55);
  background: linear-gradient(180deg, rgba(40, 34, 70, .35) 0%, rgba(13, 13, 13, 0) 100%);
}
html[data-site-theme="halloween"] .page-header > * { position: relative; z-index: 1; }
html[data-site-theme="halloween"] .page-header::before,
html[data-site-theme="halloween"] .l-hero__bg::before {
  content: ''; position: absolute; top: 22px; right: 9%; width: 108px; height: 108px; border-radius: 50%; z-index: 0;
  background:
    radial-gradient(circle at 34% 36%, rgba(60, 50, 40, .16) 0 9%, transparent 10%),
    radial-gradient(circle at 63% 58%, rgba(60, 50, 40, .18) 0 13%, transparent 14%),
    radial-gradient(circle at 56% 26%, rgba(60, 50, 40, .12) 0 6%, transparent 7%),
    radial-gradient(circle at 28% 68%, rgba(60, 50, 40, .12) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 80%, rgba(60, 50, 40, .10) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 38%, #fffaf0, #ece1c8 52%, #c8b893 100%);
  box-shadow: 0 0 40px 10px rgba(var(--hw-moon), .16), 0 0 140px 50px rgba(var(--hw-moon), .07);
  opacity: .82;
}
html[data-site-theme="halloween"] .page-header::after,
html[data-site-theme="halloween"] .l-hero__bg::after {
  content: ''; position: absolute; inset: -30% -60%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 14% 7% at 30% 22%, rgba(18, 15, 26, .92), transparent 70%),
    radial-gradient(ellipse 20% 6% at 64% 16%, rgba(22, 18, 30, .85), transparent 70%),
    radial-gradient(ellipse 12% 6% at 80% 28%, rgba(16, 13, 22, .8), transparent 70%),
    radial-gradient(ellipse 18% 5% at 10% 30%, rgba(20, 16, 28, .7), transparent 70%);
  filter: blur(7px);
  animation: hw-clouds 70s linear infinite alternate;
}
@keyframes hw-clouds { from { transform: translateX(-14%); } to { transform: translateX(14%); } }
html[data-site-theme="halloween"] .l-hero__bg::before { top: 30%; right: 18%; width: 150px; height: 150px; } /* .l-hero__bg sborda del 20%: compensato */
@media (max-width: 768px) {
  html[data-site-theme="halloween"] .page-header::before { width: 64px; height: 64px; top: 14px; right: 6%; }
  html[data-site-theme="halloween"] .l-hero__bg::before { width: 90px; height: 90px; }
}

/* landing */
html[data-site-theme="halloween"] .l-hero__bg-glow {
  background:
    radial-gradient(ellipse 60% 50% at 50% 62%, rgba(var(--hw-blood), .22) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 15%, rgba(60, 50, 110, .25) 0%, transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0, 0, 0, .85) 0%, transparent 60%);
}
html[data-site-theme="halloween"] .l-hero__logo { filter: drop-shadow(0 0 26px rgba(var(--hw-blood), .8)) saturate(.6); }

/* ── Banner evento (testo dal CMS) ── */
.theme-banner {
  position: relative; z-index: 101; display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 9px 16px; text-decoration: none; text-align: center;
  font: 400 15px/1.25 var(--hw-fell, Georgia, serif); letter-spacing: .08em;
  color: #e9d9c4;
  background:
    radial-gradient(ellipse 40% 140% at 50% 0%, rgba(var(--hw-blood), .55), transparent 70%),
    linear-gradient(180deg, #120607, #070304);
  border-bottom: 1px solid rgba(var(--hw-blood), .8);
  text-shadow: 0 0 10px rgba(var(--hw-blood), .9);
}
.theme-banner__txt { animation: hw-neon 11s infinite; }
.theme-banner__go { transition: transform .2s; color: var(--gold); }
.theme-banner:hover .theme-banner__go { transform: translateX(4px); }
.theme-banner--float {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 310;
  border-radius: 999px; padding: 11px 22px; max-width: calc(100% - 32px); border: 1px solid rgba(var(--hw-blood), .8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .7), 0 0 30px rgba(var(--hw-blood), .35);
}
/* telefono: striscia compatta sopra la barra effetti/volume, non un ovale su più righe */
@media (max-width: 560px) {
  .theme-banner--float { left: 12px; right: 12px; bottom: 62px; transform: none; max-width: none;
    border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.2; }
}

/* ── Livelli creati dal JS ── */
/* nebbia DIETRO al contenuto (z-index -1): si vede sullo sfondo e negli spazi vuoti, non slava card e testi durante lo scroll */
.hw-fog { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 30vh; pointer-events: none; z-index: -1; opacity: .75; }
.hw-fx  { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }

/* sangue che cola dalla navbar (SVG con filtro "goo" generato dal JS) */
.hw-drips { position: absolute; left: 0; top: 100%; z-index: -1; width: 100%; height: 230px; pointer-events: none; overflow: visible; }  /* -1: sotto il menu mobile della navbar */
.hw-drips--top { position: fixed; top: 0; z-index: 299; }

/* ragnatele negli angoli */
.hw-web { position: fixed; z-index: 96; pointer-events: none; transform-origin: 0 0; animation: hw-sway 9s ease-in-out infinite alternate; }
.hw-web--r { transform-origin: 100% 0; animation-delay: -4s; }
@keyframes hw-sway { from { rotate: -.6deg; } to { rotate: .8deg; } }

/* ragno appeso al filo */
.hw-hanger {
  position: fixed; z-index: 97; width: 56px; margin-left: -28px; display: flex; flex-direction: column; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  transform: translateY(-110%); transition: transform 3.2s cubic-bezier(.25,.8,.35,1);
}
.hw-hanger.is-down { transform: translateY(0); }
.hw-hanger.is-fleeing { transition: transform .7s cubic-bezier(.6,0,.9,.3); transform: translateY(-110%); }
.hw-hanger__thread { width: 1px; height: var(--len, 160px); background: linear-gradient(180deg, rgba(220, 220, 230, .08), rgba(220, 220, 230, .4)); }
.hw-hanger svg { width: 56px; height: 56px; overflow: visible; animation: hw-swing 4.5s ease-in-out infinite; transform-origin: 50% 0; filter: drop-shadow(0 0 1.5px rgba(215, 210, 240, .55)) drop-shadow(0 0 6px rgba(215, 210, 240, .15)); }
@keyframes hw-swing { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
/* "Clicca sul ragno": neon rosso guasto, scende e risale col ragno (è dentro il pulsante: cliccarla vale come cliccare il ragno) */
.hw-hanger__label {
  position: absolute; right: calc(100% - 4px); bottom: 16px; white-space: nowrap; cursor: pointer;
  font: 400 21px/1 var(--hw-fell, Georgia, serif); letter-spacing: .05em; color: #ff3a2e;
  text-shadow: 0 0 6px rgba(255, 40, 30, .95), 0 0 18px rgba(170, 0, 0, .85), 0 0 38px rgba(120, 0, 0, .6);
  opacity: 0; transition: opacity .5s;
}
.hw-hanger.is-down .hw-hanger__label { opacity: 1; animation: hw-broken-neon 4.6s steps(1) infinite, hw-jitter 3.1s ease-in-out infinite; }
@keyframes hw-broken-neon {
  0%, 5%, 9%, 13%, 46%, 56%, 79%, 82%, 100% { opacity: 1; }
  6%, 7% { opacity: .12; } 10%, 11% { opacity: .3; } 48%, 54% { opacity: 0; } 80% { opacity: .4; }
}
@keyframes hw-jitter { 0%, 100% { translate: 0 0; } 30% { translate: -1px 1px; } 60% { translate: 1px 0; } 80% { translate: 0 -1px; } }
@media (max-width: 768px) { .hw-hanger__label { font-size: 16px; bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .hw-hanger.is-down .hw-hanger__label { animation: none; } }

/* ombra che sbuca dal bordo se resti fermo */
.hw-peek { position: fixed; right: 0; top: 24vh; width: 230px; height: 56vh; z-index: 94; pointer-events: none; transform: translateX(102%); transition: transform 3.5s cubic-bezier(.3,.6,.3,1); }
.hw-peek.is-out { transform: translateX(38%); }
.hw-peek.is-hiding { transition: transform .16s ease-in; transform: translateX(102%); }
.hw-peek svg { width: 100%; height: 100%; overflow: visible; }

/* luci che saltano */
.hw-dim { position: fixed; inset: 0; z-index: 8400; pointer-events: none; background: #000; opacity: 0; }
.hw-dim.is-flicker { animation: hw-flicker .9s steps(1) forwards; }
@keyframes hw-flicker { 0% { opacity: 0; } 12% { opacity: .55; } 22% { opacity: .1; } 40% { opacity: .7; } 52% { opacity: .2; } 70%, 100% { opacity: 0; } }

/* blackout: il cursore diventa una torcia */
.hw-dark {
  position: fixed; inset: 0; z-index: 8500; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle var(--r, 150px) at var(--x, 50%) var(--y, 50%),
    rgba(255, 230, 180, .05) 0, rgba(0, 0, 0, .15) 38%, rgba(2, 1, 3, .9) 72%, #010001 100%);
}
.hw-dark.is-on { opacity: 1; }
.hw-eyes { position: absolute; display: flex; gap: 13px; transition: transform .1s, opacity .35s; }
.hw-eyes i {
  width: 11px; height: 6px; border-radius: 50%;
  background: radial-gradient(#fff6c2 0 20%, #ff3b1f 55%, rgba(255, 30, 0, 0) 75%);
  box-shadow: 0 0 10px 3px rgba(255, 30, 10, .45);
  animation: hw-blink 3.8s infinite;
}
.hw-eyes i:first-child { rotate: 14deg; }
.hw-eyes i:last-child  { rotate: -14deg; }
.hw-eyes.is-gone { transform: scaleY(0); opacity: 0; }
@keyframes hw-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }

/* fulmine */
.hw-flash { position: fixed; inset: 0; z-index: 8450; pointer-events: none; background: #dfe6ff; opacity: 0; mix-blend-mode: screen; }

/* titoli "posseduti" */
.hw-glitch { animation: hw-glitch .7s steps(2) both; color: #e0181b !important; }
@keyframes hw-glitch {
  0%   { text-shadow: 3px 0 rgba(255,0,40,.8), -3px 0 rgba(0,220,255,.6); clip-path: inset(0 0 55% 0); transform: translateX(-3px); }
  25%  { text-shadow: -4px 0 rgba(255,0,40,.8), 4px 0 rgba(0,220,255,.6); clip-path: inset(40% 0 0 0); transform: translateX(4px); }
  50%  { text-shadow: 2px 0 rgba(255,0,40,.8), -2px 0 rgba(0,220,255,.6); clip-path: inset(10% 0 30% 0); transform: translateX(-2px); }
  75%  { text-shadow: -2px 0 rgba(255,0,40,.8), 2px 0 rgba(0,220,255,.6); clip-path: inset(0); transform: none; }
  100% { text-shadow: none; clip-path: inset(0); transform: none; }
}

/* jumpscare */
.hw-js { position: fixed; inset: 0; z-index: 10000; pointer-events: none; display: grid; place-items: center; overflow: hidden; background: #000; }
.hw-js canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .2; mix-blend-mode: screen; }
.hw-js svg {
  position: relative; width: min(96vmin, 980px); height: auto; scale: .22;
  filter: drop-shadow(7px 0 0 rgba(255, 0, 30, .55)) drop-shadow(-7px 0 0 rgba(0, 220, 255, .4));
}
.hw-js.is-go svg { animation: hw-lunge .26s cubic-bezier(.55,0,.9,.35) forwards, hw-shake .07s linear .26s 9; }
.hw-js.is-go .hw-js__mouth { animation: hw-mouth .3s cubic-bezier(.3,1.6,.6,1) .12s both; }
.hw-js.is-out { animation: hw-js-out .5s ease-in forwards; }
@keyframes hw-lunge { to { scale: 1.45; } }
@keyframes hw-shake { 0% { translate: 0 0; } 25% { translate: 16px -11px; } 50% { translate: -14px 9px; } 75% { translate: 11px 13px; } 100% { translate: 0 0; } }
@keyframes hw-mouth { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes hw-js-out { 60% { opacity: 1; } to { opacity: 0; } }
.hw-js__mouth { transform-box: fill-box; transform-origin: 50% 0; }

/* pannello controlli */
.hw-panel { position: fixed; left: 14px; bottom: 14px; z-index: 8000; font: 600 12px/1.2 'Rajdhani', sans-serif; letter-spacing: .1em; }
.hw-panel__btn {
  display: flex; align-items: center; gap: 7px; cursor: pointer; padding: 8px 12px; border-radius: 999px;
  text-transform: uppercase; color: #e9d9c4; background: rgba(10, 4, 6, .88); border: 1px solid rgba(var(--hw-blood), .9);
  box-shadow: 0 0 18px rgba(var(--hw-blood), .35); backdrop-filter: blur(4px);
}
.hw-panel__btn:hover { color: #fff; border-color: #c21818; }
.hw-panel__menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); width: 230px; padding: 12px 14px; border-radius: 6px;
  background: rgba(10, 4, 6, .96); border: 1px solid rgba(var(--hw-blood), .8); box-shadow: 0 14px 40px rgba(0, 0, 0, .7);
  display: grid; gap: 10px; text-transform: uppercase; color: #cfc2b2;
}
.hw-panel__menu[hidden] { display: none; }
.hw-panel__menu p { margin: 0; font: 400 13px/1.3 var(--hw-fell); letter-spacing: .04em; text-transform: none; color: #a8968a; }
.hw-switch { display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 10px; }
.hw-switch input { appearance: none; width: 34px; height: 18px; border-radius: 999px; background: #2a1a1c; position: relative; cursor: pointer; transition: background .2s; flex: none; margin: 0; }
.hw-switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #8a7a70; transition: transform .2s, background .2s; }
.hw-switch input:checked { background: #6e0b0b; }
.hw-switch input:checked::after { transform: translateX(16px); background: #ffb38a; }
.hw-switch--main { color: #f3e6d4; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--hw-blood), .5); }
.hw-panel__sub { display: grid; gap: 10px; transition: opacity .2s; }
.hw-panel__sub.is-off { opacity: .4; }
.hw-switch input:disabled { cursor: not-allowed; }

/* link scherzo: schermata d'ingresso prima del jumpscare */
.hw-gate { position: fixed; inset: 0; z-index: 9900; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(46, 6, 8, .94), #030102 75%); }
.hw-gate__box { text-align: center; max-width: 560px; color: #e9d9c4; }
.hw-gate__candle { font-size: 34px; margin: 0; animation: hw-neon 5s infinite; }
.hw-gate__box h2 { font: 400 clamp(26px, 4.4vw, 42px)/1.15 var(--hw-fell); margin: 10px 0 28px; text-shadow: 0 0 18px rgba(var(--hw-blood), .95); }
.hw-gate__box button {
  font: 400 19px/1 var(--hw-fell); letter-spacing: .06em; padding: 15px 28px; border-radius: 3px; cursor: pointer;
  color: #f3e6d4; background: rgba(110, 8, 8, .35); border: 1px solid rgba(190, 20, 20, .85); box-shadow: 0 0 26px rgba(var(--hw-blood), .55);
}
.hw-gate__box button:hover { background: rgba(140, 10, 10, .5); }
.hw-gate__box .hw-gate__msg { font-size: clamp(44px, 8vw, 84px); letter-spacing: .12em; margin: 0; animation: hw-whisper 2.3s ease-in both; }
@keyframes hw-whisper { from { opacity: 0; filter: blur(8px); } 45% { opacity: 1; filter: blur(0); } to { opacity: .85; transform: scale(1.08); } }

/* barra in basso: menu + altoparlante + volume */
.hw-panel__bar { display: flex; align-items: center; gap: 6px; }
.hw-vol {
  display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px;
  background: rgba(10, 4, 6, .88); border: 1px solid rgba(var(--hw-blood), .9); backdrop-filter: blur(4px);
}
.hw-vol[hidden] { display: none; }
.hw-vol__mute { background: none; border: 0; padding: 2px 4px; font-size: 15px; line-height: 1; cursor: pointer; filter: saturate(.6); }
.hw-vol__range {
  appearance: none; -webkit-appearance: none; width: 110px; height: 4px; border-radius: 999px; cursor: pointer; margin: 0;
  background: linear-gradient(90deg, #c2410c 0, #e8590c var(--fill, 70%), #3a2224 var(--fill, 70%));
}
.hw-vol__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: #ffb38a; border: 2px solid #6e0b0b; box-shadow: 0 0 8px rgba(232, 89, 12, .7);
}
.hw-vol__range::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #ffb38a; border: 2px solid #6e0b0b; }
.hw-vol.is-muted .hw-vol__range { filter: grayscale(1) brightness(.7); }
/* audio non ancora sbloccato dal browser: invito a toccare al posto del cursore */
.hw-vol__hint { display: block; background: none; border: 0; padding: 2px 4px; cursor: pointer; white-space: nowrap;
  font: 600 12px/1 'Rajdhani', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #FFB38A; animation: hw-neon 3s infinite; }
.hw-vol__hint[hidden] { display: none; }
.hw-vol.is-locked .hw-vol__range { display: none; }
@media (max-width: 560px) { .hw-panel__lbl { display: none; } .hw-vol__range { width: 80px; } }

/* sopra la barra carrello dello shop quando è aperta */
body:has(.shop-cartbar.is-on) .hw-panel { bottom: 80px; }
/* On Air da telefono, tab Chat aperta: il pannello coprirebbe il campo "Invia un messaggio" */
@media (max-width: 900px) { body:has(.onair[data-pane="chat"]) .hw-panel { display: none; } }
/* pannello e banner flottante sono fissi in basso: a fine pagina coprivano i link del footer
   (Privacy/Termini da telefono, badge Titans in landing) → spazio extra in fondo finché c'è il tema */
.footer { padding-bottom: 72px; }
@media (max-width: 560px) { .l-enter__footer { padding-bottom: 72px; } }

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme="halloween"] body::before,
  html[data-site-theme="halloween"] .accent,
  html[data-site-theme="halloween"] .page-header::after,
  .hw-web, .hw-hanger svg, .theme-banner__txt { animation: none !important; }
}