/* ===========================================================
   A+PRUEBA · movimiento
   Fase 2: lo que necesitan las interacciones (abrir el panel,
   el saludo de los CTA, el latido al elegir).
   Fase 3 agrega aquí flotar, vaivén, estrellas y cometa.
   =========================================================== */

@keyframes menear {
  0%   { transform: scale(var(--escala, 1)) rotate(0deg) translateX(0); }
  20%  { transform: scale(var(--escala, 1)) rotate(-4deg) translateX(-6px); }
  45%  { transform: scale(var(--escala, 1)) rotate(4deg) translateX(6px); }
  70%  { transform: scale(var(--escala, 1)) rotate(-3deg) translateX(-4px); }
  88%  { transform: scale(var(--escala, 1)) rotate(2deg) translateX(2px); }
  100% { transform: scale(var(--escala, 1)) rotate(0deg) translateX(0); }
}

@keyframes latido {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes aparecer {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes panel-entra {
  from { opacity: 0; transform: translateX(var(--desliz, 0)); }
  to   { opacity: 1; transform: none; }
}

/* El saludo va en el envoltorio interno del boleto: el externo flota. */
.boleto.saluda .boleto__interior { animation: menear 600ms var(--ease-out); }

/* Cambio de modalidad dentro del diálogo: fundido y 24px de deslizamiento. */
.panel-entrada__contenido--anima { animation: panel-entra 250ms var(--ease-out) both; }

@keyframes funde { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .boleto.saluda .boleto__interior { animation: none; }
  /* sin deslizamiento: solo el fundido corto que usan todos los diálogos */
  .panel-entrada__contenido--anima { animation: funde 150ms linear both; }
}


/* ===========================================================
   Fase 3 · el lenguaje de movimiento de la página
   =========================================================== */

@keyframes crecer-menear {
  0%   { transform: scale(1) rotate(0deg) translateX(0); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  20%  { transform: scale(var(--escala, 1)) rotate(-4deg) translateX(-6px); }
  45%  { transform: scale(var(--escala, 1)) rotate(4deg) translateX(6px); }
  70%  { transform: scale(var(--escala, 1)) rotate(-3deg) translateX(-4px); }
  88%  { transform: scale(var(--escala, 1)) rotate(2deg) translateX(2px); }
  100% { transform: scale(var(--escala, 1)) rotate(0deg) translateX(0); }
}

@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes vaiven {
  from { transform: scale(var(--escala, 1)) rotate(-2deg); }
  to   { transform: scale(var(--escala, 1)) rotate(2deg); }
}

/* --- Patrón "crecer y menear" ---------------------------------
   Al entrar el puntero: crece con rebote y menea una vez.
   Mientras sigue encima: vaivén suave. Al salir: vuelve en 250ms.
   Todos componen su escala con --escala, para que el hover, el saludo
   y el estado atenuado del boleto no se pisen entre sí.              */
.boleto__interior,
.aliado,
.red {
  transform: scale(var(--escala, 1));
  transition: transform var(--dur-rapida) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .boleto:hover .boleto__interior,
  .red:hover {
    animation: menear 600ms var(--ease-out),
               vaiven 1.6s ease-in-out 600ms infinite alternate;
  }
  .boleto:hover .boleto__interior { --escala: 1.08; }
  .red:hover { --escala: 1.1; }

  /* aliados: crecen con spring mientras menean */
  .aliado:hover {
    --escala: 1.08;
    animation: crecer-menear 600ms var(--ease-out),
               vaiven 1.6s ease-in-out 600ms infinite alternate;
  }

  /* el boleto crece junto con su sombra 3D (en el envoltorio: la mask la recortaría) */
  .boleto:hover .boleto__forma {
    filter: drop-shadow(0 12px 0 var(--color-boleto)) drop-shadow(0 20px 36px rgba(0, 0, 0, .4));
  }
}

/* En táctil, el boleto responde al dedo */
.boleto:active .boleto__interior { --escala: .96; }

/* El foco de teclado marca el boleto sin vaivén */
.boleto:focus-visible .boleto__interior { --escala: 1.04; animation: none; }

/* --- Reposo: todo lo que se mueve siempre --- */
.boleto { animation: flotar 4s ease-in-out infinite; }
.boleto--virtual { animation-delay: 2s; }

@media (prefers-reduced-motion: reduce) {
  .boleto,
  .boleto--virtual {
    animation: none;
  }
  .boleto__interior,
  .aliado,
  .red,
  .circular-carousel__stage {
    transition: none;
  }
  /* hover: sin meneo, sin vaivén y sin crecer */
  .boleto:hover .boleto__interior,
  .aliado:hover,
  .red:hover {
    --escala: 1;
    animation: none;
  }
}

/* ===========================================================
   Diálogos: el fondo borroso aparece y se va con un fundido.
   ::backdrop no hereda variables, por eso la curva va escrita.
   La caja la anima js/dialog.js (FLIP, panel lateral, fundido).
   =========================================================== */

@keyframes dialogo-fondo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogo-fondo-sale  { from { opacity: 1; } to { opacity: 0; } }

.dialogo[open]::backdrop {
  animation: dialogo-fondo-entra 300ms cubic-bezier(.22, 1, .36, 1);
}
.dialogo[open].dialogo--cerrando::backdrop {
  animation: dialogo-fondo-sale 250ms cubic-bezier(.22, 1, .36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .dialogo[open]::backdrop { animation-duration: 150ms; animation-timing-function: linear; }
  .dialogo[open].dialogo--cerrando::backdrop { animation-duration: 150ms; }
}

/* ===========================================================
   Nav
   Enlaces: línea de 2px que crece desde el centro y texto a 1.06.
   Botón "Regístrate gratis": crece y menea en hover; late al clic
   (js/main.js agrega .late y baja a #entradas al terminar).
   =========================================================== */

@keyframes latido-cta {
  0%, 100% { transform: scale(var(--escala, 1)); }
  50%      { transform: scale(1.12); }
}

.nav__texto,
.nav__lista a::after { transition: transform var(--dur-rapida) var(--ease-out); }

.nav__lista a:focus-visible { color: var(--blanco); }
.nav__lista a:focus-visible::after { transform: scaleX(1); }
.nav__lista a:focus-visible .nav__texto { transform: scale(1.06); }

.nav__cta { transform: scale(var(--escala, 1)); }

@media (hover: hover) and (pointer: fine) {
  .nav__lista a:hover { color: var(--blanco); }
  .nav__lista a:hover::after { transform: scaleX(1); }
  .nav__lista a:hover .nav__texto { transform: scale(1.06); }

  .nav__cta:hover { --escala: 1.06; animation: menear 600ms var(--ease-out); }
}

/* el latido gana aunque el puntero siga encima */
.nav__cta.late,
.nav__cta.late:hover { animation: latido-cta 400ms var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  /* solo la línea, sin escala y sin crecer */
  .nav__lista a::after { transition: none; }
  .nav__lista a .nav__texto,
  .nav__lista a:hover .nav__texto,
  .nav__lista a:focus-visible .nav__texto { transform: none; }
  .nav__cta,
  .nav__cta:hover,
  .nav__cta.late { --escala: 1; animation: none; }
}

/* ===========================================================
   Hero (js/hero.js)
   Las palabras entran una vez. "futuro profesional" queda en celeste
   fijo: la ola y el brillo de colores se quitaron (18 oct).
   =========================================================== */

@keyframes palabra-entra {
  from { transform: translateY(40%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hero--animado .hero__palabra {
  animation: palabra-entra 600ms var(--ease-spring) calc(var(--i, 0) * 60ms) backwards;
}
.hero--animado .hero__sub {
  animation: aparecer 500ms var(--ease-out) var(--retraso-sub, 620ms) backwards;
}

@media (prefers-reduced-motion: reduce) {
  /* hero.js no divide el texto; esto cubre un cambio de preferencia en vivo */
  .hero--animado .hero__palabra,
  .hero--animado .hero__sub { animation: none; }
}

/* ===========================================================
   Polaroid de la sede (Ubicación)
   En hover crece a 1.08, se endereza y menea una vez. El meneo
   arranca desde su giro de reposo (-4°), así no salta.
   =========================================================== */
@keyframes polaroid-menear {
  0%   { transform: rotate(-4deg) scale(1); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  30%  { transform: rotate(3deg) scale(1.08); }
  55%  { transform: rotate(-2deg) scale(1.08); }
  80%  { transform: rotate(1deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1.08); }
}
@media (hover: hover) and (pointer: fine) {
  .polaroid:hover {
    transform: rotate(0deg) scale(1.08);
    animation: polaroid-menear 600ms var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .polaroid { transition: none; }
  .polaroid:hover { transform: rotate(-4deg); animation: none; }
}

/* ===========================================================
   Chatbot: la burbuja crece y menea en hover, como los aliados.
   La entrada y salida de la burbuja, del globito y de los mensajes
   están en styles.css; con movimiento reducido, todo sin animar.
   =========================================================== */

.chatbot__burbuja { transform: scale(var(--escala, 1)); }

@media (hover: hover) and (pointer: fine) {
  .chatbot__burbuja:hover {
    --escala: 1.08;
    animation: crecer-menear 600ms var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chatbot,
  .chatbot--fuera { transform: none; transition: opacity 150ms linear, visibility 0s; }
  .chatbot--fuera { transition: opacity 150ms linear, visibility 0s linear 150ms; }
  .chatbot__burbuja,
  .chatbot__burbuja:hover { --escala: 1; animation: none; }
  .chatbot__globito,
  .chatbot-panel[open],
  .chatbot-msg,
  .chatbot-opciones { animation: none; }
}