/* ═══════════════════════════════════════════════════════════════
   ÁLBUM DIGITAL SST — Animaciones
   ═══════════════════════════════════════════════════════════════ */

@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1); opacity:1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity:0; }
}

@keyframes glowRing {
  0%   { transform: scale(0); opacity:0.9; }
  100% { transform: scale(4); opacity:0; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes scaleBounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.3); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes confettiFall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity:1; }
  100% { transform: translateY(300px) rotate(720deg); opacity:0; }
}

@keyframes slideDown {
  from { transform: translateY(-12px); opacity:0; }
  to   { transform: translateY(0); opacity:1; }
}

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

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

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%  { transform: translateX(-8px); }
  40%  { transform: translateX(8px); }
  60%  { transform: translateX(-5px); }
  80%  { transform: translateX(5px); }
}

@keyframes pulse {
  0%,100% { opacity:1; }
  50%      { opacity:0.5; }
}

@keyframes badgePop {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

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

@keyframes slideInRight {
  from { transform: translateX(110%); opacity:0; }
  to   { transform: translateX(0); opacity:1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity:1; }
  to   { transform: translateX(110%); opacity:0; }
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity:0; }
  to   { transform: scale(1); opacity:1; }
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity:1; }
  100% { transform: translateY(-50px) scale(0.7); opacity:0; }
}

@keyframes progressFill {
  from { width: 0; }
}

/* ── Shimmer overlay for sticker ── */
.shimmer-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: shimmer 1s ease-in-out;
  pointer-events: none;
}

/* ── Glow ring element ── */
.glow-ring {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  pointer-events: none;
  animation: glowRing 0.6s ease-out forwards;
  transform-origin: center;
}

/* ── Confetti piece ── */
.confetti-piece {
  position: absolute;
  width: 10px; height: 6px;
  pointer-events: none;
  animation: confettiFall 1.5s ease-in forwards;
}

/* ── Points float ── */
.points-float {
  position: absolute;
  font-weight: 800;
  font-size: 1.1rem;
  color: #f6d860;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  pointer-events: none;
  animation: floatUp 1.2s ease-out forwards;
  z-index: 999;
  white-space: nowrap;
}