/* Boty: estilos del módulo js/boty.js */
.boty {
  --boty-size: 192px;
  --boty-tilt: 0deg;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  width: var(--boty-size);
  height: var(--boty-size);
  pointer-events: none;
  will-change: transform;
}

.boty__float {
  width: 100%;
  height: 100%;
  animation: boty-bob 2.4s steps(6) infinite;
}

.boty__sprite {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease;
}

.boty.is-flipped .boty__sprite { transform: scaleX(-1); }
.boty.is-flying .boty__sprite { transform: rotate(var(--boty-tilt)); }

.boty__shadow {
  width: 60%;
  height: 6%;
  margin: 2% auto 0;
  border-radius: 50%;
  background: #d5dbf7;
  animation: boty-shadow 2.4s steps(6) infinite;
}
.boty.is-flying .boty__shadow { opacity: 0; }

/* Globo de texto */
.boty__bubble {
  position: absolute;
  z-index: 1;
  width: max-content;
  max-width: 220px;
  padding: 10px 14px;
  font-family: 'Pixelify Sans', 'Courier New', monospace;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: #1b1f3b;
  background: #fff;
  /* borde pixelado: sombras en escalón en vez de border-radius */
  box-shadow:
    0 -3px 0 0 #1b1f3b, 0 3px 0 0 #1b1f3b, -3px 0 0 0 #1b1f3b, 3px 0 0 0 #1b1f3b,
    0 6px 0 0 rgba(27, 31, 59, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s steps(3), transform 0.2s steps(3), visibility 0s linear 0.2s;
  pointer-events: none;
}
.boty__bubble.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s steps(3), transform 0.2s steps(3), visibility 0s;
}
.boty__bubble::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  box-shadow: 3px 3px 0 0 #1b1f3b;
}

.boty[data-bubble='top'] .boty__bubble { bottom: 96%; left: 50%; transform: translate(-50%, 6px); }
.boty[data-bubble='top'] .boty__bubble.is-visible { transform: translate(-50%, 0); }
.boty[data-bubble='top'] .boty__bubble::after { left: calc(50% - 4px); bottom: -6px; transform: rotate(45deg); }

.boty[data-bubble='left'] .boty__bubble { right: 92%; top: 8%; }
.boty[data-bubble='left'] .boty__bubble::after { right: -6px; top: 14px; transform: rotate(-45deg); }

.boty[data-bubble='right'] .boty__bubble { left: 92%; top: 8%; }
.boty[data-bubble='right'] .boty__bubble::after { left: -6px; top: 14px; transform: rotate(135deg); }

/* Celular: la mitad del tamaño, fijo abajo a la derecha */
.boty--dock {
  --boty-size: 96px;
  position: fixed;
  top: auto;
  left: auto;
  right: 8px;
  bottom: 8px;
  transform: none !important;
}
.boty--dock .boty__bubble {
  bottom: 100%;
  right: 8px;
  max-width: min(220px, calc(100vw - 32px));
  font-size: 14px;
}
.boty--dock .boty__bubble::after { right: 28px; bottom: -6px; transform: rotate(45deg); }

@keyframes boty-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6%); } }
@keyframes boty-shadow { 0%, 100% { transform: scaleX(1); opacity: 0.5; } 50% { transform: scaleX(0.8); opacity: 0.3; } }

/* Sin animaciones: Boty aparece quieto en cada sección */
.boty--still .boty__float,
.boty--still .boty__shadow { animation: none; }
.boty--still .boty__sprite,
.boty--still .boty__bubble { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .boty__float, .boty__shadow { animation: none; }
  .boty__sprite, .boty__bubble { transition: none; }
}

/* Vuelo: sin vaivén mientras viaja (la curva ya da el movimiento) */
.boty.is-flying .boty__float { animation: none; }
.boty.is-flying .boty__sprite { transition: none; }

/* Llegada: pequeño rebote en pasos, con aplastado y estirado */
.boty.is-landing .boty__float { animation: boty-land 0.42s steps(7) both; transform-origin: 50% 100%; }
@keyframes boty-land {
  0% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(5%) scale(1.08, 0.9); }
  60% { transform: translateY(-6%) scale(0.95, 1.06); }
  80% { transform: translateY(1%) scale(1.02, 0.98); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* Celular: cambio de pose con un fundido corto */
.boty__float { transition: opacity 0.14s steps(3); }
.boty.is-swapping .boty__float { opacity: 0; }

/* Estela de chispas pixeladas */
.boty-chispa {
  position: absolute;
  z-index: 39;
  pointer-events: none;
  animation: boty-chispa 0.55s steps(5) forwards;
}
@keyframes boty-chispa {
  0% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .boty.is-landing .boty__float { animation: none; }
  .boty__float { transition: none; }
  .boty-chispa { display: none; }
}