.strega {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-velo) + 8);
  overflow: hidden;
  pointer-events: none;
}

.strega__volo {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: var(--strega-largo, 250px);
  block-size: var(--strega-alto, 253px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: crosshair;
  pointer-events: auto;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.strega__alone {
  position: absolute;
  inset: 30% -10% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.42), rgba(139, 47, 255, 0.18) 45%, transparent 70%);
  animation: strega-pulsa 900ms ease-in-out infinite alternate;
  pointer-events: none;
}

.strega__disegno {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.75)) drop-shadow(0 0 18px rgba(139, 47, 255, 0.6));
  pointer-events: none;
}

.strega__volo:focus-visible {
  outline: 3px solid var(--allerta);
  outline-offset: 4px;
  border-radius: 24px;
}

.strega__volo.is-preso { pointer-events: none; }

.strega__volo.is-preso .strega__disegno,
.strega__volo.is-preso .strega__alone {
  animation: strega-preso 420ms ease-out forwards;
}

.strega__volo.is-via {
  pointer-events: none;
  animation: strega-via 650ms ease forwards;
}

.strega__scia {
  position: absolute;
  inline-size: 7px;
  block-size: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgb(255, 210, 63);
  box-shadow: 0 0 8px rgba(255, 122, 26, 0.95), 0 0 14px rgba(255, 210, 63, 0.7);
  pointer-events: none;
  animation: strega-scia 900ms ease-out forwards;
}

.strega__scia--viola {
  background: rgb(231, 214, 255);
  box-shadow: 0 0 8px var(--viola), 0 0 14px var(--ciano);
}

.strega__volante {
  position: absolute;
  overflow: visible;
  scale: var(--verso, 1) 1;
  filter: drop-shadow(0 0 8px rgba(255, 122, 26, 0.7));
  pointer-events: none;
  animation: strega-cappello 1400ms cubic-bezier(.25, .6, .5, 1) forwards;
}

.strega--quieto .strega__volo {
  animation: strega-dentro 600ms ease both;
}

.strega--quieto .strega__volo.is-preso { animation: none; }

.strega--quieto .strega__volo.is-via { animation: strega-via 650ms ease forwards; }

.strega--quieto .strega__alone { animation: none; }

@keyframes strega-pulsa {
  from { opacity: .55; scale: .92; }
  to   { opacity: 1; scale: 1.08; }
}

@keyframes strega-preso {
  0%   { opacity: 1; scale: 1; }
  35%  { opacity: 1; scale: 1.18; }
  100% { opacity: 0; scale: .2; }
}

@keyframes strega-via {
  to { opacity: 0; }
}

@keyframes strega-dentro {
  from { opacity: 0; }
}

@keyframes strega-scia {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: .2; translate: 0 var(--sy, 20px); }
}

@keyframes strega-cappello {
  0%   { opacity: 1; translate: 0 0; rotate: 0deg; }
  30%  { opacity: 1; translate: calc(var(--dx, 0px) * .4) -90px; }
  100% { opacity: 0; translate: var(--dx, 0px) 220px; rotate: var(--gira, 360deg); }
}