/* ──────────────────────────────────────────────────────────────
   Guyra'i en la web — COPIA de app/src/styles/guyrai.css.
   Si cambia allá, se copia acá: la mascota tiene que verse y moverse
   igual en la web y en la app.

   El dibujo va en línea en cada página (el mismo SVG que arma
   app/src/components/ui/guyrai.tsx). La diferencia con la app es
   cuándo se mueve: acá la clase `guyrai-animado` la pone el script de
   la página cuando Guyra'i entra en pantalla (y la saca al salir, así no
   gasta nada fuera de vista). Sin JS queda quieto, que dice lo mismo.

   DIFERENCIA CON LA APP (decidida por el usuario el 06-10-2026): en la web
   el saludo, el logro y el check NO corren una vez: repiten en ciclos, con
   una pausa entre vueltas. Por eso esos tres usan keyframes propios
   (`gy-*-bucle`), con la pausa adentro, en vez de los de la app.
   ────────────────────────────────────────────────────────────── */

.guyrai {
  --gy-tinta:   #0E1430;
  --gy-blanco:  #FFFFFF;
  --gy-cara:    #17A392;
  --gy-sol:     #FDB813;
  --gy-mejilla: #F2A7A0;
  --gy-gris:    #ADB0BD;
  --gy-brillo:  #FFFFFF;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Colores por pieza ─────────────────────────────────────── */
.guyrai .gy-trazo    { stroke: var(--gy-tinta); }
.guyrai .gy-blanco   { fill: var(--gy-blanco); }
.guyrai .gy-sol      { fill: var(--gy-sol); }
.guyrai .gy-cara     { fill: var(--gy-cara); }
.guyrai .gy-tinta    { fill: var(--gy-tinta); }
.guyrai .gy-brillo   { fill: var(--gy-brillo); }
.guyrai .gy-mejilla  { fill: var(--gy-mejilla); }

.guyrai .gy-linea,
.guyrai .gy-ala-plegada,
.guyrai .gy-rayas path,
.guyrai .gy-onda,
.guyrai .gy-zeta {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.guyrai .gy-linea       { stroke: var(--gy-tinta); }
.guyrai .gy-ala-plegada { stroke: var(--gy-gris); }
.guyrai .gy-rayas path  { stroke: var(--gy-gris); }
.guyrai .gy-onda        { stroke: var(--gy-sol); }
.guyrai .gy-zeta        { stroke: var(--gy-cara); }

/* ── Piezas que se mueven: el origen es la propia pieza ────── */
.guyrai-animado .gy-figura,
.guyrai-animado .gy-cuerpo,
.guyrai-animado .gy-ojo,
.guyrai-animado .gy-ala,
.guyrai-animado .gy-acc,
.guyrai-animado .gy-acc * {
  transform-box: fill-box;
}

/* ── De fondo: respira desde la percha y parpadea ──────────── */
.guyrai-animado .gy-cuerpo {
  transform-origin: 50% 100%;
  animation: gy-respira 4s ease-in-out infinite;
}
.guyrai-animado.gy-calma  .gy-cuerpo { animation-duration: 5s; }
.guyrai-animado.gy-siesta .gy-cuerpo { animation-duration: 6s; }

.guyrai-animado .gy-ojo {
  transform-origin: center;
  animation: gy-parpadeo 5.5s ease-in-out 1.2s infinite;
}

/* ── saludo: el ala se agita tres veces y descansa, en bucle ── */
.guyrai-animado.gy-saludo .gy-ala {
  transform-origin: 100% 100%;
  animation: gy-saluda-bucle 4.6s ease-in-out infinite;
}
.guyrai-animado.gy-saludo .gy-rayas {
  animation: gy-rayas-bucle 4.6s ease-in-out infinite;
}

/* ── cargando: los tres puntos en ola ──────────────────────── */
.guyrai-animado.gy-cargando .gy-puntos circle {
  transform-origin: center;
  animation: gy-ola 1.2s ease-in-out infinite both;
}
.guyrai-animado.gy-cargando .gy-puntos circle:nth-child(2) { animation-delay: 0.15s; }
.guyrai-animado.gy-cargando .gy-puntos circle:nth-child(3) { animation-delay: 0.3s; }

/* ── listo: la insignia aparece, el check se dibuja, repite ── */
.guyrai-animado.gy-listo .gy-insignia {
  transform-origin: center;
  animation: gy-pop-bucle 4s ease-in-out infinite;
}
.guyrai-animado.gy-listo .gy-check {
  stroke-dasharray: 1;
  animation: gy-dibuja-bucle 4s ease-out infinite;
}

/* ── atencion: una sacudida, después un pulso suave ────────── */
.guyrai-animado.gy-atencion .gy-insignia {
  transform-origin: center;
  animation:
    gy-sacude 0.6s ease-in-out 0.15s,
    gy-pulso 2.4s ease-in-out 1s infinite;
}

/* ── aviso: las ondas laten hacia afuera ───────────────────── */
.guyrai-animado.gy-aviso .gy-onda {
  transform-origin: 0% 50%;
  animation: gy-onda 1.6s ease-out infinite both;
}
.guyrai-animado.gy-aviso .gy-onda-2 { animation-delay: 0.25s; }

/* ── logro: salto, estrella y confeti, en ciclos de 5 s ────── */
.guyrai-animado.gy-logro .gy-figura {
  transform-origin: 50% 100%;
  animation: gy-salto-bucle 5s ease-in-out infinite;
}
.guyrai-animado.gy-logro .gy-ala {
  transform-origin: 100% 100%;
  animation: gy-saluda-logro-bucle 5s ease-in-out infinite;
}
.guyrai-animado.gy-logro .gy-estrella {
  transform-origin: center;
  animation: gy-estrella-bucle 5s ease-out infinite;
}
.guyrai-animado.gy-logro .gy-confeti {
  transform-origin: center;
  animation: gy-confeti-bucle 5s ease-out infinite;
}
/* Cada punto sale desde cerca del pájaro hacia su lugar. */
.guyrai .gy-confeti-1 { --dx: -40px; --dy: 10px; }
.guyrai .gy-confeti-2 { --dx: -35px; --dy: -6px; }
.guyrai .gy-confeti-3 { --dx: 45px;  --dy: 30px; }

/* ── siesta: las Z suben y se apagan ───────────────────────── */
.guyrai-animado.gy-siesta .gy-zeta {
  transform-origin: center;
  animation: gy-zeta 3.2s ease-in-out infinite both;
}
/* Delay negativo: la segunda arranca a mitad de ciclo, sin esperar. */
.guyrai-animado.gy-siesta .gy-zeta-2 { animation-delay: -1.6s; }

/* ── sinsenal: el cartel se balancea, colgado de arriba ────── */
.guyrai-animado.gy-sinsenal .gy-insignia {
  transform-origin: 50% 0%;
  animation: gy-balanceo 3s ease-in-out infinite;
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes gy-respira {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(0.99, 1.025); }
}
@keyframes gy-parpadeo {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
@keyframes gy-saluda {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-14deg); }
  70%      { transform: rotate(10deg); }
}
@keyframes gy-rayas {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}
@keyframes gy-ola {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.45; }
  30%           { transform: translateY(-7px); opacity: 1; }
}
@keyframes gy-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes gy-dibuja {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes gy-sacude {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-14deg); }
  40%      { transform: rotate(12deg); }
  60%      { transform: rotate(-8deg); }
  80%      { transform: rotate(4deg); }
}
@keyframes gy-pulso {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes gy-onda {
  0%   { transform: scale(0.85); opacity: 0.25; }
  40%  { transform: scale(1);    opacity: 1; }
  100% { transform: scale(1);    opacity: 0.25; }
}
@keyframes gy-salto {
  0%   { transform: translateY(0)     scale(1, 1); }
  15%  { transform: translateY(0)     scale(1.06, 0.92); }
  45%  { transform: translateY(-16px) scale(0.96, 1.05); }
  75%  { transform: translateY(0)     scale(1.05, 0.94); }
  100% { transform: translateY(0)     scale(1, 1); }
}
@keyframes gy-estrella {
  0%   { transform: scale(0)   rotate(-90deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(10deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}
@keyframes gy-confeti {
  from { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
  to   { transform: translate(0, 0) scale(1);                   opacity: 1; }
}
@keyframes gy-zeta {
  0%   { transform: translate(-4px, 6px)  scale(0.8); opacity: 0; }
  30%  { opacity: 1; }
  70%  { transform: translate(2px, -4px)  scale(1);   opacity: 1; }
  100% { transform: translate(6px, -12px) scale(1.05); opacity: 0; }
}
@keyframes gy-balanceo {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* ── Keyframes de la web: la pausa va adentro del ciclo ────── */
/* saludo: tres agitadas (0,7 s cada una) y descanso hasta los 4,6 s. */
@keyframes gy-saluda-bucle {
  0%, 4%     { transform: rotate(0deg); }
  8.5%       { transform: rotate(-14deg); }
  14.5%      { transform: rotate(10deg); }
  19.2%      { transform: rotate(0deg); }
  23.7%      { transform: rotate(-14deg); }
  29.7%      { transform: rotate(10deg); }
  34.4%      { transform: rotate(0deg); }
  38.9%      { transform: rotate(-14deg); }
  44.9%      { transform: rotate(10deg); }
  49.6%, 100% { transform: rotate(0deg); }
}
@keyframes gy-rayas-bucle {
  0%, 4%, 19.2%, 34.4%, 49.6%, 100% { opacity: 1; }
  11.6%, 26.8%, 42% { opacity: 0.2; }
}
/* logro: salto, aleteo doble, estrella y confeti; se van antes de repetir. */
@keyframes gy-salto-bucle {
  0%, 2%   { transform: translateY(0)     scale(1, 1); }
  4.7%     { transform: translateY(0)     scale(1.06, 0.92); }
  10.1%    { transform: translateY(-16px) scale(0.96, 1.05); }
  15.5%    { transform: translateY(0)     scale(1.05, 0.94); }
  20%, 100% { transform: translateY(0)    scale(1, 1); }
}
@keyframes gy-saluda-logro-bucle {
  0%, 6%   { transform: rotate(0deg); }
  9.6%     { transform: rotate(-14deg); }
  14.4%    { transform: rotate(10deg); }
  18%      { transform: rotate(0deg); }
  21.6%    { transform: rotate(-14deg); }
  26.4%    { transform: rotate(10deg); }
  30%, 100% { transform: rotate(0deg); }
}
@keyframes gy-estrella-bucle {
  0%, 7%   { transform: scale(0)   rotate(-90deg); opacity: 0; }
  16.8%    { transform: scale(1.2) rotate(10deg);  opacity: 1; }
  21%, 80% { transform: scale(1)   rotate(0deg);   opacity: 1; }
  90%      { transform: scale(0.8) rotate(0deg);   opacity: 0; }
  100%     { transform: scale(0)   rotate(-90deg); opacity: 0; }
}
@keyframes gy-confeti-bucle {
  0%, 9%   { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
  21%, 80% { transform: translate(0, 0) scale(1);                   opacity: 1; }
  90%      { transform: translate(0, 0) scale(1);                   opacity: 0; }
  100%     { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; }
}
/* listo: la insignia aparece, el check se dibuja, se apaga y vuelve. */
@keyframes gy-pop-bucle {
  0%, 2.5% { transform: scale(0);   opacity: 0; }
  13.75%, 85% { transform: scale(1); opacity: 1; }
  93%      { transform: scale(0.8); opacity: 0; }
  100%     { transform: scale(0);   opacity: 0; }
}
@keyframes gy-dibuja-bucle {
  0%, 11.25% { stroke-dashoffset: 1; }
  20%, 85%   { stroke-dashoffset: 0; }
  93%, 100%  { stroke-dashoffset: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .guyrai-animado,
  .guyrai-animado * {
    animation: none !important;
  }
}