/* ══ ruktu.com — keyframes ══ */

@keyframes float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.08); }
}
@keyframes float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -35px) scale(0.94); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.animated-grad { background-size: 200% 200%; animation: gradient-shift 6s ease infinite; }

@keyframes blink { 50% { opacity: 0; } }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  60% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

@keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to { opacity: 1; transform: none; }
}

@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes wave-bar { from { transform: scaleY(0.5); } to { transform: scaleY(1); } }

@keyframes mw-shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes task-drag {
  0%, 18% { transform: translate(0, 0); }
  38%, 62% { transform: translate(6px, -8px) rotate(2deg); }
  82%, 100% { transform: translate(0, 0); }
}

/* ══ maqueta del mapa (tarjeta "que te encuentren") ══
   Todas terminan en el estado visible y se usan con animation-fill-mode:
   forwards. Con prefers-reduced-motion el sitio aplasta la duración a .01ms,
   así que sin `forwards` el elemento volvería a su estado base invisible y las
   estrellas nunca aparecerían. */

/* el pin cae sobre la calle y rebota al tocarla */
@keyframes loc-drop {
  0%   { transform: translateY(-120px) rotate(-45deg) scale(0.6); opacity: 0; }
  55%  { transform: translateY(0) rotate(-45deg) scale(1); opacity: 1; }
  70%  { transform: translateY(-14px) rotate(-45deg) scale(0.97); }
  85%  { transform: translateY(0) rotate(-45deg) scale(1.03); }
  100% { transform: translateY(0) rotate(-45deg) scale(1); opacity: 1; }
}

/* el aro que sale del punto de contacto */
@keyframes loc-ripple {
  0%   { transform: scale(0.2); opacity: 0; }
  30%  { opacity: 0.75; }
  100% { transform: scale(1); opacity: 0; }
}

/* las cinco estrellas brotan en arco y se quedan */
@keyframes loc-star {
  0%   { transform: translate(0, 0) scale(0.2); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(1); opacity: 1; }
}

/* estrellas de la escena 2: salen disparadas hacia arriba y se desvanecen */
@keyframes loc-star-up {
  0%   { transform: translate(0, 0) scale(0.3); opacity: 0; }
  25%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { transform: translate(var(--sx), var(--sy)) scale(1); opacity: 0; }
}

/* ondas NFC desde el punto donde el celular toca el letrero */
@keyframes loc-nfc {
  0%   { transform: scale(0.35); opacity: 0; }
  40%  { opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* el celular entra, se inclina y toca */
@keyframes loc-tap {
  0%   { transform: translateX(96px) rotate(16deg); opacity: 0; }
  30%  { transform: translateX(14px) rotate(10deg); opacity: 1; }
  45%  { transform: translateX(-4px) rotate(6deg); }
  60%  { transform: translateX(12px) rotate(10deg); }
  100% { transform: translateX(9px) rotate(9deg); opacity: 1; }
}

/* la ficha sube desde abajo */
@keyframes loc-rise {
  from { transform: translateY(22px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* el cometa recorre el anillo del círculo virtuoso */
@keyframes loc-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* cada nodo se enciende al pasar el cometa */
@keyframes loc-node-lit {
  0%, 100% { transform: scale(1); border-color: #dadce0; }
  12%      { transform: scale(1.12); border-color: #1a73e8; }
  30%      { transform: scale(1); border-color: #dadce0; }
}

/* el número del nodo sube un escalón */
@keyframes loc-tick {
  0%, 100% { transform: translateY(0); opacity: 1; }
  10%      { transform: translateY(-6px); opacity: 0; }
  20%      { transform: translateY(0); opacity: 1; }
}

/* aparición simple, para lo que solo necesita entrar */
@keyframes loc-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* solo opacidad: el stand tiene una perspectiva 3D en su clase base y un
   keyframe con `transform` se la comería (le pasó antes al pin del mapa) */
@keyframes loc-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}