/* animations.css — Keyframes y clases de animación */

@keyframes girar       { to { transform: rotate(360deg); } }
@keyframes pulsar      { 0%,100%{ opacity:1 } 50%{ opacity:.5 } }
@keyframes shimmer     { 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } }
@keyframes aparecer    { from{ opacity:0 } to{ opacity:1 } }
@keyframes subirAparecer  { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }
@keyframes bajarAparecer  { from{ opacity:0; transform:translateY(-14px) } to{ opacity:1; transform:translateY(0) } }
@keyframes escalarAparecer{ from{ opacity:0; transform:scale(.94) } to{ opacity:1; transform:scale(1) } }
@keyframes rebotar     { 0%{opacity:0;transform:scale(.6)} 60%{opacity:1;transform:scale(1.05)} 80%{transform:scale(.97)} 100%{transform:scale(1)} }
@keyframes flotar      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes temblar     { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)} 40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)} }
@keyframes corazon     { 0%{transform:scale(1)} 25%{transform:scale(1.35)} 50%{transform:scale(1)} 75%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes entrarToast { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }
@keyframes salirToast  { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(100%)} }
@keyframes desvanecer  { from{opacity:1} to{opacity:0} }

/* Utilidades */
.anim-aparecer         { animation: aparecer          .35s ease both; }
.anim-subir            { animation: subirAparecer     .4s  ease both; }
.anim-bajar            { animation: bajarAparecer     .3s  ease both; }
.anim-escalar          { animation: escalarAparecer   .3s  ease both; }
.anim-rebotar          { animation: rebotar           .5s  cubic-bezier(.36,.07,.19,.97) both; }
.anim-flotar           { animation: flotar            3s   ease-in-out infinite; }
.anim-temblar          { animation: temblar           .4s  ease; }

/* Delays escalonados */
.delay-1 { animation-delay:  60ms; }
.delay-2 { animation-delay: 120ms; }
.delay-3 { animation-delay: 180ms; }
.delay-4 { animation-delay: 240ms; }
.delay-5 { animation-delay: 300ms; }
.delay-6 { animation-delay: 360ms; }

/* Listas escalonadas */
.lista-escalonada > *:nth-child(1) { animation-delay:  0ms; }
.lista-escalonada > *:nth-child(2) { animation-delay: 55ms; }
.lista-escalonada > *:nth-child(3) { animation-delay:110ms; }
.lista-escalonada > *:nth-child(4) { animation-delay:165ms; }
.lista-escalonada > *:nth-child(5) { animation-delay:220ms; }
.lista-escalonada > *:nth-child(6) { animation-delay:275ms; }
.lista-escalonada > *:nth-child(7) { animation-delay:330ms; }
.lista-escalonada > *:nth-child(8) { animation-delay:385ms; }

/* Hover */
.hover-elevar { transition: transform var(--trans-base), box-shadow var(--trans-base); }
.hover-elevar:hover { transform: translateY(-3px); box-shadow: var(--sombra-lg); }

/* Entrada de página */
.pagina-entra { animation: subirAparecer .35s ease both; }

/* Círculos decorativos auth */
.deco-circulo {
  position: absolute; border-radius: 50%; background: rgba(197,241,53,.07);
  animation: flotar 6s ease-in-out infinite;
}
.deco-circulo:nth-child(1) { width:280px; height:280px; top:-70px; right:-70px; animation-delay:0s; }
.deco-circulo:nth-child(2) { width:180px; height:180px; bottom:50px; left:-50px; animation-delay:2s; background:rgba(197,241,53,.04); }
.deco-circulo:nth-child(3) { width:110px; height:110px; bottom:180px; right:30px; animation-delay:4s; background:rgba(197,241,53,.1); }

/* Like */
.btn-accion.gustado svg { animation: corazon .4s ease; }