.pipistrello {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-top) + 200);
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.pipistrello__volo {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pipistrello-lato, 110px);
  height: calc(var(--pipistrello-lato, 110px) * .5);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.pipistrello__volo::before {
  content: "";
  position: absolute;
  inset: -18% -3% -12%;
  border-radius: 50%;
}

.pipistrello__volo:focus-visible {
  outline: 2px solid var(--mob-magenta);
  outline-offset: 8px;
}

.pipistrello__alone {
  position: absolute;
  top: calc(var(--pipistrello-lato, 110px) * -.18);
  left: 8%;
  width: 84%;
  height: calc(var(--pipistrello-lato, 110px) * .84);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--mob-magenta-rgb), .3), rgba(var(--mob-magenta-rgb), .1) 55%, rgba(var(--mob-magenta-rgb), 0));
  pointer-events: none;
  animation: pipistrello-respira 1.5s ease-in-out infinite alternate;
}

.pipistrello__disegno {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgba(var(--mob-magenta-rgb), .7)) drop-shadow(0 0 10px rgba(var(--mob-magenta-rgb), .38));
  pointer-events: none;
}

.pipistrello__tono--buio { stop-color: var(--ink-900); }
.pipistrello__tono--pelle { stop-color: var(--ink-500); }
.pipistrello__tono--spento { stop-color: var(--mob-magenta); stop-opacity: 0; }
.pipistrello__tono--acceso { stop-color: var(--mob-magenta); stop-opacity: .46; }
.pipistrello__tono--occhio { stop-color: var(--mob-crimson); stop-opacity: .8; }
.pipistrello__tono--buio-occhio { stop-color: var(--mob-crimson); stop-opacity: 0; }

.pipistrello__membrana {
  stroke: rgba(var(--mob-magenta-rgb), .85);
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pipistrello__luce { stroke: none; }

.pipistrello__ossa {
  fill: none;
  stroke: rgba(var(--mob-magenta-2-rgb), .5);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.pipistrello__pollice,
.pipistrello__busto,
.pipistrello__testa,
.pipistrello__orecchio {
  fill: var(--ink-900);
  stroke: rgba(var(--mob-magenta-rgb), .85);
  stroke-width: 1.3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pipistrello__pollice { stroke-width: 1; }

.pipistrello__padiglione { fill: rgba(var(--mob-magenta-rgb), .42); }

.pipistrello__pancia { fill: var(--ink-700); }

.pipistrello__pelo {
  fill: none;
  stroke: rgba(var(--text-rgb), .16);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pipistrello__zampe {
  fill: none;
  stroke: rgba(var(--mob-magenta-rgb), .8);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.pipistrello__ciuffo {
  fill: none;
  stroke: rgba(var(--mob-magenta-2-rgb), .9);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pipistrello__guancia { fill: rgba(var(--mob-magenta-rgb), .38); }

.pipistrello__occhi {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pipistrello-ammicca 4.2s ease-in-out infinite;
}

.pipistrello__bagliore { animation: pipistrello-brilla 1.1s ease-in-out infinite alternate; }

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

.pipistrello__pupilla { fill: var(--ink-900); }

.pipistrello__riflesso { fill: rgba(var(--white-rgb), .95); }

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

.pipistrello__bocca {
  fill: rgba(var(--mob-crimson-rgb), .5);
  stroke: rgba(var(--mob-magenta-2-rgb), .9);
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pipistrello__dente { fill: var(--text); }

.pipistrello__scia {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--mob-magenta-2);
  box-shadow: 0 0 6px rgba(var(--mob-magenta-rgb), .95), 0 0 14px rgba(var(--mob-magenta-rgb), .5);
  opacity: 0;
  pointer-events: none;
  animation: pipistrello-scia .9s ease-out forwards;
}

.pipistrello__scia--chiara { background: var(--text); }

.pipistrello__volo.is-scoppiato { cursor: default; }

.pipistrello__volo.is-scoppiato .pipistrello__disegno { animation: pipistrello-scoppia .2s ease-in forwards; }

.pipistrello__volo.is-scoppiato .pipistrello__alone { animation: pipistrello-svanisce .2s ease-in forwards; }

.pipistrello__volo.is-via {
  pointer-events: none;
  animation: pipistrello-svanisce .6s ease-in forwards;
}

.pipistrello--quieto .pipistrello__volo { animation: pipistrello-appare .9s ease-out both; }

.pipistrello--quieto .pipistrello__volo.is-via { animation: pipistrello-svanisce .6s ease-in forwards; }

.pipistrello__lampo,
.pipistrello__onda,
.pipistrello__fumo,
.pipistrello__scintilla {
  position: absolute;
  width: var(--d, 40px);
  height: var(--d, 40px);
  margin: calc(var(--d, 40px) * -.5) 0 0 calc(var(--d, 40px) * -.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.pipistrello__lampo {
  background: radial-gradient(closest-side, rgba(var(--white-rgb), .95), rgba(var(--mob-magenta-2-rgb), .75) 32%, rgba(var(--mob-magenta-rgb), .3) 60%, rgba(var(--mob-magenta-rgb), 0));
  animation: pipistrello-lampo .34s ease-out forwards;
}

.pipistrello__onda {
  border: 2px solid rgba(var(--mob-magenta-2-rgb), .9);
  box-shadow: 0 0 14px rgba(var(--mob-magenta-rgb), .75), inset 0 0 12px rgba(var(--mob-magenta-rgb), .55);
  animation: pipistrello-onda .55s var(--ease-out) forwards;
}

.pipistrello__fumo {
  background: radial-gradient(closest-side, rgba(var(--mob-magenta-2-rgb), .62), rgba(var(--mob-magenta-rgb), .46) 55%, rgba(var(--mob-magenta-rgb), .26) 82%, rgba(var(--mob-magenta-rgb), 0));
  filter: blur(1.5px);
  animation: pipistrello-fumo var(--durata, 1.2s) var(--ease-out) var(--ritardo, 0s) forwards;
}

.pipistrello__fumo--viola {
  background: radial-gradient(closest-side, rgba(var(--mob-magenta-rgb), .5), rgba(var(--mob-cyan-rgb), .22) 62%, rgba(var(--mob-cyan-rgb), .1) 84%, rgba(var(--mob-cyan-rgb), 0));
}

.pipistrello__scintilla {
  background: var(--text);
  box-shadow: 0 0 6px rgba(var(--mob-magenta-rgb), .95), 0 0 12px rgba(var(--mob-magenta-rgb), .5);
  animation: pipistrello-scintilla var(--durata, .8s) cubic-bezier(.15, .75, .35, 1) var(--ritardo, 0s) forwards;
}

.pipistrello__scintilla--magenta { background: var(--mob-magenta-2); }

.pipistrello__scintilla--ciano {
  background: var(--mob-cyan);
  box-shadow: 0 0 6px rgba(var(--mob-cyan-rgb), .95), 0 0 12px rgba(var(--mob-cyan-rgb), .45);
}

.pipistrello__scintilla--rosa { background: var(--mob-rose); }

.pipistrello__scintilla--stella {
  border-radius: 0;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation-name: pipistrello-stella;
}

.pipistrello__puf {
  position: absolute;
  font-family: var(--font-display);
  font-size: var(--d, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
  text-shadow: var(--glow-magenta);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-7deg);
  animation: pipistrello-puf 1s var(--ease-out) forwards;
}

.pipistrello__piccolo {
  position: absolute;
  width: var(--b, 30px);
  height: calc(var(--b, 30px) * .5);
  margin: calc(var(--b, 30px) * -.25) 0 0 calc(var(--b, 30px) * -.5);
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(var(--mob-magenta-rgb), .75));
  pointer-events: none;
  animation: pipistrello-fuga var(--durata, 1.3s) cubic-bezier(.25, .6, .4, 1) var(--ritardo, 0s) forwards;
}

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

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

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

.pipistrello__piccolo-ala--dx {
  right: 0;
  transform-origin: 0 35%;
  animation-name: pipistrello-sbatti-dx;
}

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

.pipistrello__piccolo-corpo {
  position: absolute;
  top: -8%;
  left: 40%;
  width: 20%;
  height: 66%;
}

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

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

@keyframes pipistrello-respira {
  from { opacity: .55; transform: scale(.86); }
  to { opacity: 1; transform: scale(1.08); }
}

@keyframes pipistrello-ammicca {
  0%, 91%, 97%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(.08); }
}

@keyframes pipistrello-brilla {
  from { opacity: .5; }
  to { opacity: 1; }
}

@keyframes pipistrello-appare {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pipistrello-svanisce {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes pipistrello-scoppia {
  0% { opacity: 1; transform: scale(1); }
  45% { opacity: 1; transform: scale(1.22, 1.32); }
  100% { opacity: 0; transform: scale(1.55); }
}

@keyframes pipistrello-lampo {
  0% { opacity: 1; transform: scale(.2); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes pipistrello-onda {
  0% { opacity: 1; transform: scale(.15); }
  100% { opacity: 0; transform: scale(2.3); }
}

@keyframes pipistrello-fumo {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.2); }
  10% { opacity: 1; }
  55% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(var(--s, 1.6)); }
}

@keyframes pipistrello-scintilla {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.4); }
  62% { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) + var(--cade, 20px)), 0) scale(.25); }
}

@keyframes pipistrello-stella {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(.4); }
  25% { opacity: 1; transform: translate3d(calc(var(--dx, 0px) * .5), calc(var(--dy, 0px) * .5), 0) rotate(60deg) scale(1.25); }
  62% { opacity: 1; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(130deg) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), calc(var(--dy, 0px) + var(--cade, 20px)), 0) rotate(210deg) scale(.3); }
}

@keyframes pipistrello-puf {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(.3); }
  18% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1.18); }
  32% { opacity: 1; transform: translate(-50%, -56%) rotate(-8deg) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -115%) rotate(-6deg) scale(.95); }
}

@keyframes pipistrello-fuga {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(.3); }
  12% { opacity: 1; transform: translate3d(calc(var(--dx, 0px) * .12), calc(var(--dy, 0px) * .12), 0) rotate(var(--inclina, 0deg)) scale(1); }
  55% { opacity: 1; transform: translate3d(calc(var(--dx, 0px) * .55 + var(--wx, 0px)), calc(var(--dy, 0px) * .55 + var(--wy, 0px)), 0) rotate(calc(var(--inclina, 0deg) * -1)) scale(.92); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0) rotate(var(--inclina, 0deg)) scale(.5); }
}

@keyframes pipistrello-sbatti-sx {
  from { transform: rotate(28deg) scaleY(.7); }
  to { transform: rotate(-24deg); }
}

@keyframes pipistrello-sbatti-dx {
  from { transform: rotate(-28deg) scaleY(.7); }
  to { transform: rotate(24deg); }
}

@keyframes pipistrello-scia {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(0, var(--sy, 16px), 0) scale(.3); }
}

@keyframes pipistrello-sfuma {
  0% { opacity: 0; }
  25% { opacity: .9; }
  100% { opacity: 0; }
}

@media (max-width: 767.98px) {
  .pipistrello__disegno { filter: drop-shadow(0 0 2px rgba(var(--mob-magenta-rgb), .75)) drop-shadow(0 0 7px rgba(var(--mob-magenta-rgb), .38)); }
}

@media (prefers-reduced-motion: reduce) {
  .pipistrello__alone,
  .pipistrello__occhi,
  .pipistrello__bagliore,
  .pipistrello__piccolo-ala { animation: none; }
  .pipistrello__volo.is-scoppiato .pipistrello__disegno { animation-name: pipistrello-svanisce; }
  .pipistrello__lampo,
  .pipistrello__fumo,
  .pipistrello__puf { animation-name: pipistrello-sfuma; }
  .pipistrello__onda,
  .pipistrello__scintilla,
  .pipistrello__piccolo,
  .pipistrello__scia { display: none; }
}

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