/* ==========================================================================
   BRUJA VOLADORA & BANDADA DE MURCIÉLAGOS (PAN Y CANELA)
   Animación interactiva sin emojis ni bloqueo de interacción
   ========================================================================== */

#witch-sky-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99998;
  overflow: hidden;
}

/* Contenedor posicionado por JS con translate3d(posX, posY, 0) */
.witch-flyer {
  position: absolute;
  top: 0;
  left: 0;
  width: 155px;
  height: 125px;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
  transform-origin: center center;
}

/* Envoltorio para la explosión mágica (evita sobrescribir el translate3d padre) */
.witch-poof-wrap {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  filter: drop-shadow(0 8px 16px rgba(26, 17, 8, 0.28));
  transition: filter 0.25s ease;
}

.witch-flyer:hover .witch-poof-wrap,
.witch-flyer:focus-visible .witch-poof-wrap {
  filter: drop-shadow(0 0 14px rgba(229, 169, 60, 0.85)) drop-shadow(0 8px 18px rgba(26, 17, 8, 0.38));
}

.witch-flyer:focus-visible {
  outline: 2px dashed #e5a93c;
  outline-offset: 4px;
  border-radius: 12px;
}

/* Envoltorio visual que recibe scaleX(direction) y rotate(pitchAngle) */
.witch-visual {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  will-change: transform;
}

/* Gráfico SVG de la Bruja */
.witch-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: witchBroomFloat 2.2s ease-in-out infinite;
}

/* Capa y melena ondeando al viento */
.witch-cape-waving {
  transform-origin: 72px 58px;
  animation: witchCapeFlutter 0.9s ease-in-out infinite alternate;
}

.witch-hair-waving {
  transform-origin: 68px 42px;
  animation: witchHairFlutter 1.1s ease-in-out infinite alternate;
}

/* Cola del gatito en la escoba */
.witch-cat-tail {
  transform-origin: 128px 62px;
  animation: witchCatTailWag 1.3s ease-in-out infinite alternate;
}

/* Chispas mágicas de la escoba y varita */
.witch-sparkle-1 {
  animation: witchSparklePulse 0.9s ease-in-out infinite alternate;
}

.witch-sparkle-2 {
  animation: witchSparklePulse 1.3s ease-in-out 0.3s infinite alternate;
}

.witch-sparkle-3 {
  animation: witchSparklePulse 1.1s ease-in-out 0.6s infinite alternate;
}

/* Estela de chispas durante el vuelo */
.witch-flight-spark {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: witchTrailSparkFade 0.85s ease-out forwards;
}

@keyframes witchTrailSparkFade {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(var(--st-x, -15px), var(--st-y, 12px), 0) scale(0.1);
    opacity: 0;
  }
}

/* Animaciones de flotación interna */
@keyframes witchBroomFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(-2deg);
  }
}

@keyframes witchCapeFlutter {
  0% {
    transform: rotate(0deg) skewY(0deg);
  }
  100% {
    transform: rotate(-7deg) skewY(-6deg);
  }
}

@keyframes witchHairFlutter {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-5deg) scaleX(1.04);
  }
}

@keyframes witchCatTailWag {
  0% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(12deg);
  }
}

@keyframes witchSparklePulse {
  0% {
    opacity: 0.3;
    transform: scale(0.65);
  }
  100% {
    opacity: 1;
    transform: scale(1.35);
  }
}

/* Efecto 'Puf' de transformación mágica en el lugar exacto del toque */
.witch-flyer.is-poofing {
  pointer-events: none;
}

.witch-flyer.is-poofing .witch-poof-wrap {
  animation: witchPoofBlast 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.witch-flyer.is-poofing .witch-hint-pill {
  opacity: 0 !important;
}

@keyframes witchPoofBlast {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1) drop-shadow(0 0 0 rgba(229, 169, 60, 0));
  }
  35% {
    transform: scale(1.35) rotate(-8deg);
    opacity: 0.92;
    filter: brightness(2.2) drop-shadow(0 0 28px #ffd700);
  }
  100% {
    transform: scale(0.05) rotate(22deg);
    opacity: 0;
    filter: brightness(3) drop-shadow(0 0 42px #e5a93c);
  }
}

/* Partículas mágicas de la explosión */
.witch-magic-puff {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  will-change: transform, opacity;
  animation: magicPuffBurst 0.7s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}

@keyframes magicPuffBurst {
  0% {
    transform: translate3d(0, 0, 0) scale(0.3);
    opacity: 1;
  }
  60% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(var(--p-tx), var(--p-ty), 0) scale(var(--p-scale, 1.5));
    opacity: 0;
  }
}

/* ==========================================================================
   BANDADA DE MURCIÉLAGOS DESVANECIÉNDOSE
   ========================================================================== */
.witch-bat {
  position: absolute;
  width: 48px;
  height: 34px;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 99999;
  filter: drop-shadow(0 4px 10px rgba(17, 11, 5, 0.45));
  animation: batDisperseFlight var(--bat-time, 1.85s) cubic-bezier(0.16, 0.82, 0.32, 1) var(--bat-delay, 0s) forwards;
}

.bat-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Aleteo rápido y orgánico de las alas del murciélago */
.bat-wing-left {
  transform-origin: 24px 16px;
  animation: batWingFlapLeft var(--flap-speed, 0.12s) ease-in-out var(--flap-delay, 0s) infinite alternate;
}

.bat-wing-right {
  transform-origin: 24px 16px;
  animation: batWingFlapRight var(--flap-speed, 0.12s) ease-in-out var(--flap-delay, 0s) infinite alternate;
}

@keyframes batWingFlapLeft {
  0% {
    transform: rotate(14deg) scaleY(0.95);
  }
  100% {
    transform: rotate(-38deg) scaleY(0.25);
  }
}

@keyframes batWingFlapRight {
  0% {
    transform: rotate(-14deg) scaleY(0.95);
  }
  100% {
    transform: rotate(38deg) scaleY(0.25);
  }
}

/* Vuelo curvo, dispersión y desvanecimiento de la bandada */
@keyframes batDisperseFlight {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.25);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translate3d(calc(var(--bat-mid-x) * 0.25), calc(var(--bat-mid-y) * 0.25), 0)
      rotate(calc(var(--bat-rot) * 0.7)) scale(var(--bat-scale, 1));
  }
  48% {
    opacity: 0.96;
    transform: translate3d(var(--bat-mid-x), var(--bat-mid-y), 0)
      rotate(var(--bat-rot)) scale(calc(var(--bat-scale, 1) * 0.92));
  }
  78% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--bat-tx), var(--bat-ty), 0)
      rotate(calc(var(--bat-rot) * 1.25)) scale(calc(var(--bat-scale, 1) * 0.15));
    opacity: 0;
  }
}

/* Etiqueta / tooltip sutil para invitar a tocarla */
.witch-hint-pill {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(17, 11, 5, 0.88);
  color: #fdfaf4;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.88;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(229, 169, 60, 0.65);
}

.witch-flyer:hover .witch-hint-pill,
.witch-flyer:focus-visible .witch-hint-pill {
  opacity: 1;
  transform: translateX(-50%) translateY(2px) scale(1.05);
}

@media (max-width: 768px) {
  .witch-flyer {
    width: 128px;
    height: 104px;
  }
  .witch-hint-pill {
    font-size: 10px;
    padding: 2px 8px;
    bottom: -14px;
  }
}

/* Accesibilidad y Preferencias de Reducción de Movimiento */
@media (prefers-reduced-motion: reduce) {
  .witch-svg,
  .witch-cape-waving,
  .witch-hair-waving,
  .witch-cat-tail,
  .witch-sparkle-1,
  .witch-sparkle-2,
  .witch-sparkle-3,
  .bat-wing-left,
  .bat-wing-right {
    animation: none !important;
  }
  .witch-bat {
    animation-duration: 0.8s !important;
  }
}