@keyframes seccion-entrada {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes item-entrada {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes seccion-entrada-derecha {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes seccion-entrada-izquierda {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ripple-expandir {
  from { transform: scale(0); opacity: 0.32; }
  to { transform: scale(1); opacity: 0; }
}

@keyframes aura-deriva-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6%, 8%, 0) scale(1.18); }
}

@keyframes aura-deriva-b {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-8%, -6%, 0) scale(1.12); }
}

@keyframes fondo-deriva {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

@keyframes nav-rebote {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes toast-entrada {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toast-salida {
  from { opacity: 1; }
  to { opacity: 0; transform: translateY(-6px); }
}

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

@keyframes glow-pulso {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.18), 0 0 32px 6px rgba(70,110,255,0.55), 0 10px 26px rgba(0,0,0,0.4); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 0 44px 10px rgba(70,110,255,0.75), 0 10px 26px rgba(0,0,0,0.4); }
}

.btn-entrar {
  animation: glow-pulso 2600ms ease-in-out infinite;
}

.welcome__icon-badge {
  animation: flotar-lento 4200ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn-entrar, .welcome__icon-badge {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Entrada escalonada: cada hijo directo aparece un poco después
   del anterior. Como los paneles se ocultan con display:none,
   la animación se re-dispara sola cada vez que vuelves a la
   sección (el navegador reinicia las animaciones al re-mostrar
   un elemento que estaba display:none).
   ------------------------------------------------------------ */
.stagger-children > * {
  animation: item-entrada 420ms var(--ease-out) backwards;
}
.stagger-children > *:nth-child(1) { animation-delay: calc(var(--dur-stagger-paso) * 0); }
.stagger-children > *:nth-child(2) { animation-delay: calc(var(--dur-stagger-paso) * 1); }
.stagger-children > *:nth-child(3) { animation-delay: calc(var(--dur-stagger-paso) * 2); }
.stagger-children > *:nth-child(4) { animation-delay: calc(var(--dur-stagger-paso) * 3); }
.stagger-children > *:nth-child(5) { animation-delay: calc(var(--dur-stagger-paso) * 4); }
.stagger-children > *:nth-child(6) { animation-delay: calc(var(--dur-stagger-paso) * 5); }
.stagger-children > *:nth-child(7) { animation-delay: calc(var(--dur-stagger-paso) * 6); }
.stagger-children > *:nth-child(8) { animation-delay: calc(var(--dur-stagger-paso) * 7); }
.stagger-children > *:nth-child(9) { animation-delay: calc(var(--dur-stagger-paso) * 8); }
.stagger-children > *:nth-child(10) { animation-delay: calc(var(--dur-stagger-paso) * 9); }
.stagger-children > *:nth-child(n+11) { animation-delay: calc(var(--dur-stagger-paso) * 10); }