.halloween {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.halloween svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

.halloween__ragnatela {
  position: absolute;
  top: var(--nav-h, 62px);
  width: clamp(150px, 13vw, 210px);
  aspect-ratio: 1;
}

.halloween__ragnatela--sx { left: 0; }

.halloween__ragnatela--dx {
  right: 0;
  width: clamp(118px, 10vw, 165px);
  transform: scaleX(-1);
}

.halloween__fili,
.halloween__anelli {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.halloween__fili { stroke: rgba(var(--text-rgb), .13); }
.halloween__anelli { stroke: rgba(var(--text-rgb), .085); }

.halloween__goccia {
  position: absolute;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: rgba(var(--mob-magenta-2-rgb), .85);
  box-shadow: 0 0 6px 1px rgba(var(--mob-magenta-rgb), .5);
  opacity: .45;
  animation: halloween-luccica 6s ease-in-out infinite;
}

.halloween__goccia--1 { left: 24%; top: 29.7%; animation-delay: -1s; }
.halloween__goccia--2 { left: 3.8%; top: 54.2%; animation-duration: 7.5s; animation-delay: -3.8s; }
.halloween__goccia--3 { left: 19.7%; top: 44.3%; animation-duration: 8.5s; animation-delay: -2.2s; }

.halloween__ragno {
  position: absolute;
  top: -240px;
  right: clamp(46px, 4.4vw, 72px);
  width: 20px;
  height: calc(450px + var(--nav-h, 62px));
  transform-origin: 50% 0;
  animation: halloween-dondola 7s ease-in-out infinite alternate;
}

.halloween__discesa {
  position: absolute;
  inset: 0;
  transform: translate3d(0, -110px, 0);
  animation: halloween-scende 28s ease-in-out -6s infinite;
}

.halloween__filo {
  position: absolute;
  top: 0;
  bottom: 12px;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  background: rgba(var(--text-rgb), .16);
}

.halloween__bestiola {
  position: absolute;
  left: 0;
  bottom: 0;
}

.halloween .halloween__bestiola {
  width: 20px;
  height: 18px;
}

.halloween__zampe {
  fill: none;
  stroke: rgba(var(--text-rgb), .36);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.halloween__testa,
.halloween__addome {
  fill: var(--ink-900);
  stroke: rgba(var(--text-rgb), .36);
  stroke-width: .9;
}

.halloween__occhietto { fill: var(--mob-crimson); }

.halloween__pipistrello {
  --b: 46px;
  position: absolute;
  top: 18%;
  left: 0;
  width: var(--b);
  height: calc(var(--b) * .5);
  transform: translate3d(-20vw, 0, 0);
  animation: halloween-vola var(--durata, 36s) linear var(--ritardo, 0s) infinite;
}

.halloween__planata {
  position: absolute;
  inset: 0;
  animation: halloween-onda var(--onda, 2.6s) ease-in-out infinite alternate;
}

.halloween__ala {
  position: absolute;
  top: 4%;
  width: 44%;
  height: 52.8%;
  animation: halloween-ala-sx var(--battito, .6s) ease-in-out infinite alternate;
}

.halloween__ala--sx {
  left: 0;
  transform-origin: 100% 35%;
}

.halloween__ala--dx {
  right: 0;
  transform-origin: 0 35%;
  animation-name: halloween-ala-dx;
}

.halloween__ala--dx svg { transform: scaleX(-1); }

.halloween__corpo {
  position: absolute;
  top: 0;
  left: 43%;
  width: 14%;
  height: 46.6%;
}

.halloween__pipistrello path {
  fill: var(--ink-900);
  stroke: rgba(var(--mob-magenta-rgb), .4);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.halloween__pipistrello--1 { --b: 56px; --durata: 34s; --ritardo: -4s; --battito: .56s; --onda: 2.4s; top: 15%; }
.halloween__pipistrello--2 { --b: 44px; --durata: 43s; --ritardo: -24s; --battito: .5s; --onda: 3s; top: 29%; }
.halloween__pipistrello--3 { --b: 50px; --durata: 38s; --ritardo: -15s; --battito: .62s; --onda: 2.8s; top: 22%; animation-name: halloween-vola-indietro; }
.halloween__pipistrello--4 { --b: 40px; --durata: 47s; --ritardo: -36s; --battito: .48s; --onda: 3.3s; top: 36%; animation-name: halloween-vola-indietro; }

.halloween__fantasma {
  --g: 40px;
  position: absolute;
  width: var(--g);
  height: calc(var(--g) * 1.25);
  animation: halloween-fluttua var(--durata, 10s) ease-in-out var(--ritardo, 0s) infinite alternate;
}

.halloween__fantasma--1 { --g: 40px; --durata: 9s; top: 47%; right: clamp(12px, 2.4vw, 48px); }
.halloween__fantasma--2 { --g: 30px; --durata: 12s; --ritardo: -5s; top: 69%; left: clamp(10px, 2.2vw, 44px); }

.halloween__lenzuolo {
  fill: rgba(var(--text-rgb), .085);
  stroke: rgba(var(--text-rgb), .12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.halloween__buio { fill: rgba(var(--ink-900-rgb), .55); }

.halloween__zucca {
  --z: 52px;
  position: absolute;
  bottom: 8px;
  width: var(--z);
  height: calc(var(--z) * .875);
}

.halloween__zucca--1 { --z: 54px; --fiamma: 3.4s; left: clamp(8px, 1.2vw, 24px); }
.halloween__zucca--2 { --z: 34px; --fiamma: 2.7s; left: calc(clamp(8px, 1.2vw, 24px) + 50px); bottom: 6px; }
.halloween__zucca--3 { --z: 40px; --fiamma: 3.9s; right: clamp(88px, 7vw, 120px); }

.halloween__bagliore {
  position: absolute;
  top: -45%;
  right: -75%;
  bottom: -50%;
  left: -75%;
  background: radial-gradient(closest-side, rgba(var(--mob-vermillion-rgb), .2), rgba(var(--mob-crimson-rgb), .07) 55%, transparent);
  opacity: .85;
  animation: halloween-candela var(--fiamma, 3.4s) linear infinite;
}

.halloween__buccia,
.halloween__luce {
  position: absolute;
  inset: 0;
}

.halloween__luce {
  opacity: .85;
  animation: halloween-candela var(--fiamma, 3.4s) linear infinite;
}

.halloween__polpa {
  fill: rgba(var(--mob-vermillion-rgb), .26);
  stroke: rgba(var(--mob-vermillion-rgb), .72);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.halloween__cuore { fill: rgba(var(--mob-vermillion-rgb), .16); }

.halloween__coste {
  fill: none;
  stroke: rgba(var(--mob-vermillion-rgb), .48);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.halloween__picciolo {
  fill: rgba(var(--ink-900-rgb), .7);
  stroke: rgba(var(--mob-vermillion-rgb), .55);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.halloween__viticcio {
  fill: none;
  stroke: rgba(var(--text-rgb), .22);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.halloween__alone {
  fill: none;
  stroke: rgba(var(--mob-crimson-rgb), .4);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.halloween__fiamma { fill: var(--mob-rose); }

@keyframes halloween-luccica {
  0%, 100% { opacity: .15; }
  50% { opacity: .9; }
}

@keyframes halloween-dondola {
  from { transform: rotate(-1.6deg); }
  to { transform: rotate(1.6deg); }
}

@keyframes halloween-scende {
  0%, 12% { transform: translate3d(0, -170px, 0); }
  42% { transform: translate3d(0, 0, 0); }
  51% { transform: translate3d(0, -14px, 0); }
  60% { transform: translate3d(0, 0, 0); }
  88%, 100% { transform: translate3d(0, -170px, 0); }
}

@keyframes halloween-vola {
  0% { transform: translate3d(-12vw, 0, 0); }
  50%, 100% { transform: translate3d(108vw, -8vh, 0); }
}

@keyframes halloween-vola-indietro {
  0% { transform: translate3d(108vw, 0, 0); }
  50%, 100% { transform: translate3d(-12vw, -6vh, 0); }
}

@keyframes halloween-onda {
  from { transform: translate3d(0, -10px, 0) rotate(-6deg); }
  to { transform: translate3d(0, 10px, 0) rotate(5deg); }
}

@keyframes halloween-ala-sx {
  from { transform: rotate(24deg) scaleY(.7); }
  to { transform: rotate(-20deg); }
}

@keyframes halloween-ala-dx {
  from { transform: rotate(-24deg) scaleY(.7); }
  to { transform: rotate(20deg); }
}

@keyframes halloween-fluttua {
  0% { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: .55; }
  50% { opacity: 1; }
  100% { transform: translate3d(-18px, -26px, 0) rotate(3deg); opacity: .65; }
}

@keyframes halloween-candela {
  0%, 100% { opacity: .82; }
  9% { opacity: .66; }
  17% { opacity: .95; }
  26% { opacity: .74; }
  38% { opacity: 1; }
  47% { opacity: .78; }
  59% { opacity: .9; }
  68% { opacity: .7; }
  81% { opacity: .97; }
  90% { opacity: .76; }
}

@media (max-width: 767.98px) {
  .halloween__ragnatela--sx { width: 112px; }
  .halloween__ragnatela--dx,
  .halloween__pipistrello--2,
  .halloween__pipistrello--4,
  .halloween__fantasma,
  .halloween__zucca--3 { display: none; }
  .halloween__ragno {
    right: auto;
    left: 30px;
    height: calc(390px + var(--nav-h, 62px));
  }
  .halloween .halloween__bestiola { width: 16px; height: 14px; }
  .halloween__pipistrello--1 { --b: 40px; top: 13%; }
  .halloween__pipistrello--3 { --b: 34px; top: 24%; }
  .halloween__zucca { opacity: .72; }
  .halloween__zucca--1 { --z: 40px; left: 8px; }
  .halloween__zucca--2 { --z: 26px; left: 46px; bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .halloween__pipistrello,
  .halloween__fantasma { display: none; }
  .halloween__ragno,
  .halloween__discesa,
  .halloween__goccia,
  .halloween__bagliore,
  .halloween__luce { animation: none; }
}

@media print {
  .halloween { display: none; }
}