/* ══════════════════════════════════════════════
   EXILIUM — KEYFRAMES
   Todas las animaciones reutilizables del sistema.
   Importar una sola vez; referenciar desde cualquier módulo.
   ══════════════════════════════════════════════ */

@keyframes goldShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

@keyframes goldBtnShimmer {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

@keyframes goldAura {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ambientPulse {
  0%   { opacity: 0.4; }
  100% { opacity: 1; }
}

@keyframes ambientDrift {
  0%   { opacity: 0; transform: translate(0,0) scale(1); }
  25%  { opacity: 1; transform: translate(30px,-20px) scale(1.1); }
  50%  { opacity: 0.6; transform: translate(-20px,30px) scale(0.95); }
  75%  { opacity: 1; transform: translate(10px,10px) scale(1.05); }
  100% { opacity: 0; transform: translate(0,0) scale(1); }
}

@keyframes headerLineGlow {
  0%   { opacity: 0.2; left: 15%; right: 15%; }
  100% { opacity: 0.5; left: 5%; right: 5%; }
}

@keyframes heroTopLine {
  0%   { opacity: 0.6; filter: blur(0); }
  50%  { opacity: 1;   filter: blur(1px); }
  100% { opacity: 0.6; filter: blur(0); }
}

@keyframes heroSweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes heroSweepReverse {
  0%   { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

@keyframes heroBottomPulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes logoBreathe {
  0%   { filter: drop-shadow(0 0 10px rgba(200,40,40,0.55)) drop-shadow(0 0 22px rgba(180,20,20,0.3)); }
  100% { filter: drop-shadow(0 0 14px rgba(200,40,40,0.65)) drop-shadow(0 0 28px rgba(180,20,20,0.4)); }
}

@keyframes badgeSweep {
  0%   { left: -100%; }
  50%  { left: 160%; }
  100% { left: 160%; }
}

@keyframes dividerDot {
  0%   { opacity: 0.3; box-shadow: 0 0 4px rgba(232,184,75,0.2); }
  100% { opacity: 1;   box-shadow: 0 0 12px rgba(232,184,75,0.6); }
}

@keyframes starPulse {
  0%, 100% { opacity: 0.3; transform: scale(1) rotate(0deg); }
  50%      { opacity: 0.8; transform: scale(1.15) rotate(15deg); }
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

@keyframes progressGlow {
  0%   { opacity: 0.3; box-shadow: 0 0 4px rgba(232,184,75,0.3); }
  100% { opacity: 1;   box-shadow: 0 0 8px rgba(232,184,75,0.6); }
}

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

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

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

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

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes modalOverlayIn {
  from { background: rgba(0,0,0,0);   backdrop-filter: blur(0px); }
  to   { background: rgba(0,0,0,0.88); backdrop-filter: blur(18px); }
}

@keyframes modalOverlayOut {
  from { background: rgba(0,0,0,0.88); backdrop-filter: blur(18px); }
  to   { background: rgba(0,0,0,0);    backdrop-filter: blur(0px); }
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(24px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@keyframes modalOut {
  from { opacity: 1; transform: scale(1)    translateY(0); }
  to   { opacity: 0; transform: scale(0.95) translateY(12px); }
}

@keyframes modalGlowPulse {
  0%   { opacity: 0.2; transform: scale(1); }
  50%  { opacity: 0.5; transform: scale(1.02); }
  100% { opacity: 0.2; transform: scale(1); }
}

@keyframes embersOverlayPulse {
  0%   { opacity: 0.05; transform: scale(1); }
  50%  { opacity: 0.1;  transform: scale(1.02); }
  100% { opacity: 0.06; transform: scale(1.01); }
}

@keyframes textureFloat {
  0%   { background-position: 0 0; }
  100% { background-position: 600px 300px; }
}