/* Mira · il sito a tema Halloween (html[data-season="halloween"], vedi _site_season in app.py).
   Solo decorazioni sopra la landing: colori, caratteri e impaginazione restano quelli di Mira.
   Gli elementi li aggiunge static/season/halloween.js; con «riduci movimento» stanno fermi. */
html[data-season="halloween"]{
  --hw-pumpkin:#F2721C; --hw-pumpkin-deep:#C4520E; --hw-purple:#6E3FD0; --hw-night:#1C1428;
  --coral:#EE6A24; --coral-700:#D05714; --coral-text:#B4470F; --coral-soft:#FCE3D0; --coral-tint:#FEF1E6;
}

/* ── la luce del tramonto nel hero ── */
[data-season="halloween"] .mira-hero,[data-season="halloween"] .pz-hero{
  background:
    radial-gradient(60rem 34rem at 92% -6%,rgba(242,114,28,.20),transparent 62%),
    radial-gradient(46rem 30rem at -8% 82%,rgba(110,63,208,.13),transparent 62%),
    var(--paper)}
.hw-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.mira-hero .hero-body,.pz-hero > :not(.hw-layer):not(.hw-spider){position:relative;z-index:1}

/* luna dietro il globo */
.hw-moon{position:absolute;left:50%;top:47%;width:66%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 34% 30%,rgba(236,196,142,.55) 0 6%,transparent 6.5%),
    radial-gradient(circle at 62% 58%,rgba(236,196,142,.45) 0 9%,transparent 9.5%),
    radial-gradient(circle at 44% 72%,rgba(236,196,142,.35) 0 4%,transparent 4.5%),
    radial-gradient(circle at 40% 36%,#FFF4DF,#FFE2B8 58%,#FBC98C);
  box-shadow:0 0 70px 26px rgba(255,190,110,.42),0 0 180px 70px rgba(242,114,28,.16);
  opacity:.82;animation:hwMoon 9s ease-in-out infinite}
@keyframes hwMoon{50%{box-shadow:0 0 84px 32px rgba(255,190,110,.5),0 0 200px 80px rgba(242,114,28,.2)}}
.mira-globe{isolation:isolate}

/* ragnatela nell'angolo */
.hw-web{position:absolute;top:0;left:0;width:clamp(110px,15vw,210px);height:auto;color:#CDBFAE;opacity:.85}
.hw-web--r{left:auto;right:0;transform:scaleX(-1);width:clamp(80px,10vw,140px);opacity:.6}

/* ragnetto appeso al filo */
.hw-spider{position:absolute;top:0;right:clamp(18px,9vw,150px);width:34px;pointer-events:auto;cursor:pointer;z-index:3;
  animation:hwDangle 4.8s ease-in-out infinite;transform-origin:50% 0}
.hw-spider .hw-thread{display:block;width:1px;height:var(--len,150px);margin:0 auto;background:linear-gradient(#B9AC9B,#8E8273)}
.hw-spider svg{display:block;width:34px;height:auto;margin-top:-2px;color:var(--hw-night)}
.hw-spider .hw-legs{animation:hwLegs 1.6s ease-in-out infinite}
.hw-spider.is-up{animation:hwClimb 3.6s cubic-bezier(.3,1.2,.4,1) forwards}
@keyframes hwDangle{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(16px) rotate(3deg)}}
@keyframes hwLegs{50%{transform:scaleY(.86)}}
@keyframes hwClimb{0%{transform:translateY(0)}22%{transform:translateY(calc(var(--len,150px) * -1 + 8px))}70%{transform:translateY(calc(var(--len,150px) * -1 + 8px))}100%{transform:translateY(0)}}

/* nebbiolina sul fondo */
.hw-fog{position:absolute;left:-10%;right:-10%;bottom:-20px;height:170px;opacity:.9;
  background:
    radial-gradient(42% 70% at 18% 100%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(38% 60% at 56% 100%,rgba(244,238,255,.85),transparent 70%),
    radial-gradient(40% 70% at 88% 100%,rgba(255,255,255,.85),transparent 70%);
  animation:hwFog 18s ease-in-out infinite alternate}
@keyframes hwFog{to{transform:translateX(6%)}}

/* la targhetta sopra il titolo */
.hw-pill{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 -.4rem;padding:.42rem .95rem .42rem .55rem;border-radius:999px;
  background:rgba(255,255,255,.82);border:1px solid #F3CFB0;color:var(--hw-pumpkin-deep);font-family:var(--font-d);font-size:.76rem;font-weight:700;
  letter-spacing:.06em;box-shadow:0 10px 24px -16px rgba(196,82,14,.55);animation:hwPop .7s cubic-bezier(.3,1.5,.5,1) .3s both}
.hw-pill svg{width:22px;height:22px;flex:none;animation:hwWobble 3.2s ease-in-out infinite}
@keyframes hwPop{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes hwWobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

/* il punto corallo dei titoli diventa una zucchetta */
.hw-pdot{display:inline-block;width:.46em;height:.5em;margin-left:.05em;color:transparent!important;vertical-align:-.02em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 70'%3E%3Cpath d='M30 17c0-6 3-11 9-13l3 4c-5 2-7 5-7 9z' fill='%234F7A28'/%3E%3Cellipse cx='32' cy='43' rx='29' ry='25' fill='%23E5631A'/%3E%3Cellipse cx='32' cy='43' rx='17' ry='24' fill='%23F2721C'/%3E%3Cellipse cx='32' cy='43' rx='7' ry='23' fill='%23F7883A'/%3E%3Cpath d='M16 38l7-6 4 7zM48 38l-7-6-4 7z' fill='%233A1A06'/%3E%3Cpath d='M18 50c6 6 22 6 28 0l-4 2-3-3-3 3-4-3-4 3-3-3-3 3z' fill='%233A1A06'/%3E%3C/svg%3E") center bottom/contain no-repeat}

/* cappello da strega sul logo */
.mira-brand{position:relative}
.hw-hat{position:absolute;left:1px;top:-3px;width:27px;height:auto;transform:rotate(-16deg);transform-origin:50% 90%;pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(31,27,23,.18));animation:hwHat 5s ease-in-out infinite}
@keyframes hwHat{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(-9deg) translateY(-1px)}}

/* stelle nelle sezioni scure */
.hw-stars{position:absolute;inset:0;pointer-events:none;z-index:0}
.hw-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFE9C7;box-shadow:0 0 6px 1px rgba(255,214,150,.7);
  animation:hwTwinkle var(--t,3s) ease-in-out var(--w,0s) infinite}
@keyframes hwTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}
.mira-dark{position:relative}
.mira-dark > :not(.hw-stars){position:relative;z-index:1}

/* il fantasmino che fa capolino */
.hw-ghost{position:fixed;left:clamp(10px,2.4vw,28px);bottom:-120px;z-index:90;width:76px;cursor:pointer;
  transition:bottom .9s cubic-bezier(.3,1.35,.45,1);filter:drop-shadow(0 12px 18px rgba(31,27,23,.22))}
.hw-ghost.is-out{bottom:-14px}
.hw-ghost svg{display:block;width:100%;height:auto;animation:hwFloat 2.6s ease-in-out infinite}
.hw-ghost .hw-bubble{position:absolute;left:62px;bottom:72px;width:max-content;max-width:min(260px,70vw);padding:.6rem .8rem;border-radius:14px 14px 14px 4px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-family:var(--font-t);font-size:.82rem;line-height:1.4;color:var(--ink);
  opacity:0;transform:translateY(6px) scale(.96);transform-origin:0 100%;transition:opacity .35s ease .5s,transform .35s ease .5s}
.hw-ghost.is-out .hw-bubble{opacity:1;transform:none}
.hw-ghost .hw-bubble b{color:var(--hw-purple)}
@keyframes hwFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}

@media (max-width:768px){
  .hw-spider{right:8px;--len:64px!important}
  .hw-pill-x{display:none}
  .hw-web{width:96px}.hw-web--r{display:none}
  .hw-ghost{width:58px}.hw-ghost .hw-bubble{left:48px;bottom:56px;font-size:.76rem}
  .hw-hat{width:24px;left:0;top:-4px}
}
@media (prefers-reduced-motion:reduce){
  .hw-moon,.hw-spider,.hw-spider .hw-legs,.hw-fog,.hw-pill,.hw-pill svg,.hw-hat,.hw-stars i,.hw-ghost svg{animation:none!important}
}
@media print{.hw-layer,.hw-ghost,.hw-hat,.hw-pill{display:none!important}}