/* ============================================================
   halloween.css — tema stagionale (1 ottobre → 10 novembre).
   Caricato solo quando includes/seasonal.php dice "halloween".

   Regola di fondo: il gradiente azzurro->teal diventa zucca, ma il teal
   pieno resta dov'e' (bordi, link, logo, tag): il sito deve restare
   riconoscibile, non diventare un altro sito per 40 giorni.
   ============================================================ */

:root.hw {
  --hw-orange:   #ff7a18;
  --hw-amber:    #ffb627;
  --hw-ghost:    #f6f3ea;
  --hw-purple:   #6d3f9e;

  /* il gradiente e' il punto in cui il sito "diventa" Halloween */
  --teal-grad:   linear-gradient(135deg, #ff6a00 0%, #ffb627 50%, #ff7a18 100%);
  --yellow:      #ffb627;
}

/* Lo sfondo prende una vena viola appena percepibile, come un cielo di notte */
:root.hw body {
  background-image:
    radial-gradient(900px 500px at 12% -10%, rgba(109, 63, 158, 0.18), transparent 70%),
    radial-gradient(700px 420px at 92% 4%, rgba(255, 122, 24, 0.10), transparent 70%);
  background-attachment: fixed;
}

/* Le ombre "teal" degli hover diventano arancioni: e' l'alone che si nota di piu' */
:root.hw .post-card:hover {
  box-shadow: 0 8px 30px rgba(255, 122, 24, 0.22), var(--shadow-md) !important;
  border-color: rgba(255, 122, 24, 0.35) !important;
}
:root.hw .chip:has(input:checked) { box-shadow: 0 3px 12px rgba(255, 122, 24, 0.32); }

/* ── Ragnatele ─────────────────────────────────────────────────────────────
   Disegnate in SVG da js/halloween.js. Si dissolvono al passaggio del mouse
   e non tornano: devono essere un dettaglio, non un fastidio. */
.hw-web {
  position: absolute;
  width: 190px; height: 190px;
  pointer-events: auto;
  opacity: .5;
  z-index: 3;
  transition: opacity .45s ease, transform .45s ease;
  color: var(--hw-ghost);
}
.hw-web svg { width: 100%; height: 100%; display: block; }
.hw-web.tr { transform: scaleX(-1); }
.hw-web.br { transform: scale(-1, -1); }
.hw-web.bl { transform: scaleY(-1); }
.hw-web:hover { opacity: 0; transform: scale(1.18) rotate(2deg); pointer-events: none; }
.hw-web.tr:hover { transform: scaleX(-1) scale(1.18); }
.hw-web.br:hover { transform: scale(-1.18, -1.18); }
.hw-web.bl:hover { transform: scaleY(-1) scale(1.18); }

/* la ragnatela d'angolo della pagina sta sopra tutto ma non intercetta i click
   del menu: la zona sensibile e' solo il disegno */
.hw-web.hw-corner { position: fixed; z-index: 1200; width: 240px; height: 240px; }
/* quella in basso resta dietro i pannelli flottanti */
.hw-web.hw-corner.bl { z-index: 900; opacity: .38; }

/* ── Fantasmino che esce dai bottoni ───────────────────────────────────── */
.hw-ghost {
  position: fixed;
  width: 34px; height: 40px;
  pointer-events: none;
  z-index: 100000;
  color: var(--hw-ghost);
  animation: hw-float 1.5s ease-out forwards;
}
@keyframes hw-float {
  0%   { opacity: 0;   transform: translate(-50%, 0) scale(.5); }
  18%  { opacity: .95; transform: translate(-50%, -16px) scale(1); }
  60%  { opacity: .8;  transform: translate(-62%, -70px) scale(1.05) rotate(-6deg); }
  100% { opacity: 0;   transform: translate(-42%, -130px) scale(1.1) rotate(5deg); }
}

/* ── Pipistrello che attraversa la pagina ──────────────────────────────── */
.hw-bat {
  position: fixed;
  top: 0; left: 0;
  width: 46px; height: 30px;
  pointer-events: none;
  z-index: 1100;
  /* grigio, non nero: sul tema scuro un pipistrello nero sparisce */
  color: #4a4455;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .55));
}
:root[data-theme="light"] .hw-bat { color: #3a3146; }
/* ali a blocchi: oltre a schiacciarsi scattano un filo, cosi' il volo e' "a frame"
   come le animazioni del gioco invece che una morbida interpolazione */
.hw-bat .hw-wing { transform-origin: 50% 55%; animation: hw-flap .34s steps(2, end) infinite alternate; }
.hw-bat .hw-wing-r { animation-delay: .04s; }
@keyframes hw-flap { from { transform: scaleY(1) translateY(0); } to { transform: scaleY(.4) translateY(1px); } }

/* ── Ragnetto che scende dal filo ──────────────────────────────────────── */
.hw-spider {
  position: fixed;
  top: 0;
  width: 30px;
  pointer-events: auto;
  z-index: 1100;
  color: var(--text);
  cursor: pointer;
}
.hw-spider .hw-thread { display: block; width: 1px; margin: 0 auto; background: rgba(255, 255, 255, .35); }
.hw-spider svg { display: block; }
.hw-spider:hover { color: var(--hw-orange); }

/* ── Zucca easter egg ──────────────────────────────────────────────────── */
.hw-pumpkin {
  position: fixed;
  bottom: -6px;
  width: 44px; height: 44px;
  z-index: 1100;
  cursor: pointer;
  color: var(--hw-orange);
  filter: drop-shadow(0 0 10px rgba(255, 122, 24, .45));
  animation: hw-peek 7s ease-in-out forwards;
}
@keyframes hw-peek {
  0%, 100% { transform: translateY(46px); }
  12%, 88% { transform: translateY(0); }
}
.hw-pumpkin:hover { transform: translateY(-6px) scale(1.08); }

/* Chi ha chiesto meno movimento vede il tema, non le animazioni */
@media (prefers-reduced-motion: reduce) {
  .hw-ghost, .hw-bat, .hw-spider, .hw-pumpkin { display: none !important; }
  :root.hw body { background-attachment: scroll; }
}

/* ============================================================
   Decorazioni per pagina (html[data-hwpage])
   ============================================================ */

/* ── view_post: nebbia in fondo alla pagina ───────────────────────────── */
.hw-fog {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  pointer-events: none;
  z-index: 800;
  overflow: hidden;                      /* i banchi escono dai lati: nessun bordo netto */
  /* velo di fondo: da solo sarebbe una lastra, serve per non far vedere lo stacco in basso */
  background: linear-gradient(to top, rgba(208, 215, 230, .50), rgba(208, 215, 230, .16) 55%, transparent 90%);
  -webkit-mask-image: linear-gradient(to top, #000 72%, transparent 100%);
          mask-image: linear-gradient(to top, #000 72%, transparent 100%);
}
/* Due strati di banchi che scorrono in direzioni opposte a velocita' diverse.
   Sono larghi il triplo dello schermo e il disegno si ripete: scorrendo non
   si vedono i tagli ai lati, che e' il difetto di un solo strato traslato. */
.hw-fog::before, .hw-fog::after {
  content: '';
  position: absolute;
  bottom: -30px; left: -100%;
  width: 300%; height: 170%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  filter: blur(12px);
  will-change: transform;
}
.hw-fog::before {
  background-image: radial-gradient(ellipse 48% 58% at 50% 100%, rgba(220, 226, 240, .62), rgba(220, 226, 240, 0) 74%);
  background-size: 460px 210px;
  animation: hw-fog-a 55s linear infinite;
}
.hw-fog::after {
  background-image: radial-gradient(ellipse 46% 60% at 50% 100%, rgba(202, 186, 230, .52), rgba(202, 186, 230, 0) 74%);
  background-size: 640px 270px;
  opacity: .85;
  animation: hw-fog-b 83s linear infinite;
}
@keyframes hw-fog-a { from { transform: translateX(0); }      to { transform: translateX(-460px); } }
@keyframes hw-fog-b { from { transform: translateX(-640px); } to { transform: translateX(0); } }

/* ── profile: cappello da strega sull'immagine del profilo ────────────── */
.hw-hat {
  position: absolute;
  width: 62px; height: 62px;
  pointer-events: none;
  z-index: 60;
  color: var(--hw-purple);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
  transform: rotate(-16deg);
  transform-origin: bottom center;
  animation: hw-hat-tilt 5s ease-in-out infinite alternate;
}
@keyframes hw-hat-tilt { from { transform: rotate(-18deg); } to { transform: rotate(-11deg); } }

/* ── profile: due occhi che guardano dal buio ─────────────────────────── */
.hw-eyes { position: absolute; display: flex; gap: 11px; z-index: 55; pointer-events: none; }
.hw-eyes span {
  width: 17px; height: 17px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff6c9 0 42%, #e8a62b 43% 100%);
  box-shadow: 0 0 12px rgba(255, 190, 60, .55);
  display: grid; place-items: center;
  animation: hw-blink 5.5s infinite;
}
.hw-eyes span::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #170f06;
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform .12s linear;
}
@keyframes hw-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}

/* ── index: strega di passaggio ───────────────────────────────────────── */
.hw-witch {
  position: fixed; top: 0; left: 0;
  width: 92px; height: 62px;
  pointer-events: none;
  z-index: 1100;
  /* lilla chiaro: nera sul tema scuro non si vedeva */
  color: #9b8ac4;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .55));
}
:root[data-theme="light"] .hw-witch { color: #4a3b6b; }

@media (prefers-reduced-motion: reduce) {
  .hw-fog, .hw-witch, .hw-eyes { display: none !important; }
  .hw-hat { animation: none; }
}

/* strega piu' grande: deve leggersi al volo */
.hw-witch { width: 128px; height: 80px; }

/* occhi in un angolo fisso dello schermo */
.hw-eyes.hw-eyes-fixed { position: fixed; z-index: 1150; }
.hw-eyes.hw-eyes-fixed span { width: 21px; height: 21px; }
.hw-eyes.hw-eyes-fixed span::after { width: 9px; height: 9px; }

/* la nebbia cambia altezza da sola (js): niente transizioni che la facciano scattare */
.hw-fog { transition: none; will-change: height, opacity; }

/* ── Fiocchi di fumo che salgono dal bordo della nebbia ─────────────────
   La nebbia da sola resta una patina: sono questi che la fanno "vivere".
   Nascono sul bordo alto, salgono gonfiandosi e svaniscono. */
.hw-puff {
  position: fixed;
  pointer-events: none;
  z-index: 801;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(216, 222, 238, .5), rgba(216, 222, 238, .18) 45%, rgba(216, 222, 238, 0) 72%);
  filter: blur(14px);
  will-change: transform, opacity;
  animation: hw-puff-rise var(--dur, 9s) cubic-bezier(.22, .61, .36, 1) forwards;
}
@keyframes hw-puff-rise {
  0%   { opacity: 0;   transform: translate(-50%, 0) scale(.55) rotate(0deg); }
  18%  { opacity: .9; }
  70%  { opacity: .55; }
  100% { opacity: 0;   transform: translate(calc(-50% + var(--dx, 0px)), calc(-1 * var(--rise, 220px))) scale(2.1) rotate(var(--rot, 12deg)); }
}

@media (prefers-reduced-motion: reduce) { .hw-puff { display: none !important; } }