/* Atmosfera Halloween: livello fisso dietro la pagina, solo decorativo. Si attiva da halloween.js. */
.hw-sfondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hw-sfondo * { pointer-events: none; }

/* nebbia lenta */
.hw-nebbia { position: absolute; left: -30%; width: 160%; height: 38vh; opacity: .55;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(246,235,203,.22), rgba(246,235,203,0) 70%);
  animation: hw-nebbia 16s ease-in-out infinite alternate; }
.hw-nebbia.b { bottom: -8vh; animation-duration: 22s; animation-direction: alternate-reverse; opacity: .4; }
.hw-nebbia.a { bottom: 18vh; }
@keyframes hw-nebbia { from { transform: translateX(-18%) scaleY(.9); } to { transform: translateX(18%) scaleY(1.15); } }

/* pipistrelli che attraversano lo schermo */
.hw-pip { position: absolute; left: -80px; color: #010D06; opacity: .85; animation: hw-vola linear forwards; }
.hw-pip svg { display: block; width: 100%; height: auto; animation: hw-ali .38s ease-in-out infinite alternate; transform-origin: center; }
@keyframes hw-vola { from { transform: translate(0, 0); } 50% { transform: translate(55vw, var(--su, -40px)); } to { transform: translate(120vw, 20px); } }
@keyframes hw-ali { from { transform: scaleY(1); } to { transform: scaleY(.55); } }

/* ragnetto sul filo */
.hw-ragno { position: absolute; top: 0; width: 44px; transform: translateY(var(--y0, -300px)); }
.hw-ragno::before { content: ""; position: absolute; left: 50%; bottom: 30px; width: 1px; height: 400px; background: rgba(246,235,203,.55); }
.hw-ragno svg { position: relative; display: block; width: 100%; height: auto; color: #010D06; filter: drop-shadow(0 0 1px rgba(244,188,44,.6)); }

/* lucciole dorate */
.hw-luce { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--oro-vivo, #F4BC2C);
  box-shadow: 0 0 8px 2px rgba(244,188,44,.6); opacity: 0; animation: hw-luce 5s ease-in-out infinite; }
@keyframes hw-luce { 0%,100% { opacity: 0; transform: translateY(0); } 50% { opacity: .9; transform: translate(14px,-70px); } }

/* striscia in alto */
.hw-striscia { background: #010D06; color: var(--crema, #F6EBCB); text-align: center; font-size: .85rem; padding: .45rem 1rem;
  border-bottom: 1px solid rgba(244,188,44,.5); position: relative; z-index: 2; }
.hw-striscia a { color: var(--oro-vivo, #F4BC2C); text-decoration: underline; text-underline-offset: 3px; }

/* il contenuto resta sopra l'atmosfera */
body.hw-on > header, body.hw-on > main, body.hw-on > footer, body.hw-on > section { position: relative; z-index: 1; }

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

/* Fondale gotico */
.hw-cielo { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 75% 12%, rgba(246,235,203,.16), transparent 60%), linear-gradient(#010D06 0%, #033119 55%, #010D06 100%); }
.hw-luna { position: absolute; top: 6vh; right: 9vw; width: clamp(90px, 14vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffaf0, #F6EBCB 55%, #d8c68f 100%);
  box-shadow: 0 0 60px 18px rgba(246,235,203,.28), 0 0 160px 60px rgba(244,188,44,.12); animation: hw-respiro 9s ease-in-out infinite; }
@keyframes hw-respiro { 50% { box-shadow: 0 0 80px 26px rgba(246,235,203,.36), 0 0 200px 80px rgba(244,188,44,.16); } }
.hw-ragnatela { position: absolute; top: 0; width: clamp(110px, 18vw, 220px); color: rgba(246,235,203,.35); }
.hw-ragnatela.sx { left: 0; } .hw-ragnatela.dx { right: 0; transform: scaleX(-1); }
.hw-ragnatela svg { display: block; width: 100%; height: auto; }
.hw-finestre { position: absolute; left: 0; right: 0; bottom: 0; height: 62vh; display: flex; justify-content: space-around; align-items: flex-end; padding: 0 4vw; }
.hw-fin { height: 100%; flex: 0 0 auto; }
.hw-fin.f1 { height: 70%; } .hw-fin.f2 { height: 100%; } .hw-fin.f3 { height: 78%; }
.hw-fin svg { height: 100%; width: auto; overflow: visible; }
.hw-fin .vetro { fill: rgba(244,188,44,.16); animation: hw-candela 2.4s ease-in-out infinite; }
.hw-fin.f2 .vetro { animation-duration: 3.1s; animation-delay: -1.3s; }
.hw-fin.f3 .vetro { animation-duration: 2s; animation-delay: -2.4s; }
.hw-fin .piombo { stroke: #010D06; stroke-width: 2.4; }
.hw-fin .telaio { stroke: rgba(246,235,203,.28); stroke-width: 2; }
@keyframes hw-candela { 0%,100% { fill: rgba(244,188,44,.10); } 12% { fill: rgba(244,188,44,.42); } 30% { fill: rgba(244,188,44,.18); } 52% { fill: rgba(244,188,44,.5); } 75% { fill: rgba(244,188,44,.2); } }

/* Il contenuto lascia vedere il fondale: colori via variabili del sito */
body.hw-on { --testo: #F6EBCB; --grigio: #cdc4a4; --oro-testo: #F4BC2C; --filo: rgba(246,235,203,.22); --nebbia: rgba(1,13,6,.5); background: #010D06; color: var(--testo); }
body.hw-on .pagina { background: rgba(1,13,6,.74); }
body.hw-on main h1, body.hw-on main h2, body.hw-on main h3 { color: var(--oro-vivo, #F4BC2C); }

.hw-ragnatela { transform-origin: top left; animation: hw-ondeggia 4.5s ease-in-out infinite alternate; }
.hw-ragnatela.dx { transform-origin: top right; animation-name: hw-ondeggia-dx; }
@keyframes hw-ondeggia { from { transform: skewX(-3deg) scale(1); } to { transform: skewX(4deg) scale(1.05); } }
@keyframes hw-ondeggia-dx { from { transform: scaleX(-1) skewX(-3deg) scale(1); } to { transform: scaleX(-1) skewX(4deg) scale(1.05); } }
.hw-luna { animation-duration: 4s; }
.hw-nuvola { position: absolute; left: -45vw; width: 45vw; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(1,13,6,.85), rgba(1,13,6,0) 70%); animation: hw-nuvola linear forwards; }
@keyframes hw-nuvola { to { transform: translateX(160vw); } }
.hw-sfondo::after { content: ""; position: absolute; inset: 0; background: rgba(246,235,203,.5); opacity: 0; transition: opacity .12s; }
.hw-sfondo.hw-lampo::after { opacity: .55; animation: hw-flash .9s steps(1) forwards; }
@keyframes hw-flash { 0% { opacity: .6; } 12% { opacity: 0; } 22% { opacity: .45; } 40% { opacity: 0; } 100% { opacity: 0; } }
.hw-pip svg { animation-duration: .22s; }

.hw-zucche { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; }
.hw-zucca { position: absolute; bottom: -4px; animation: hw-zucca 3s ease-in-out infinite; animation-delay: var(--ritardo, 0s); filter: drop-shadow(0 0 18px rgba(244,188,44,.55)); }
.hw-zucca svg { display: block; width: 100%; height: auto; }
.hw-zucca .occhi { animation: hw-brace 2.2s ease-in-out infinite; animation-delay: var(--ritardo, 0s); }
@keyframes hw-zucca { 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes hw-brace { 0%,100% { opacity: .75; } 30% { opacity: 1; } 60% { opacity: .55; } }
.hw-fantasma { position: absolute; left: 0; opacity: 0; filter: drop-shadow(0 0 12px rgba(246,235,203,.6)); animation-timing-function: linear; animation-fill-mode: forwards; }
.hw-fantasma svg { display: block; width: 100%; height: auto; animation: hw-bob 2.4s ease-in-out infinite; }
@keyframes hw-bob { 50% { transform: translateY(-22px) rotate(4deg); } }
@keyframes hw-fant-d { 0% { transform: translateX(-80px); opacity: 0; } 12%,88% { opacity: .85; } 100% { transform: translateX(calc(100vw + 40px)); opacity: 0; } }
@keyframes hw-fant-s { 0% { transform: translateX(calc(100vw + 40px)) scaleX(-1); opacity: 0; } 12%,88% { opacity: .85; } 100% { transform: translateX(-80px) scaleX(-1); opacity: 0; } }
.hw-striscia { font-weight: 600; letter-spacing: .01em; }