/* ============================================
   EMPYREAN — KEYFRAMES + CLASES DE ANIMACIÓN
   ============================================ */

/* ─── Generales ─────────────────────────────── */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes highlight {
  0%   { border-color: var(--gold); transform: scale(1.02); }
  100% { border-color: #f0f0f0;    transform: scale(1); }
}
.animate-pop    { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.highlight-input { animation: highlight 0.5s ease-out; border-color: var(--gold) !important; }
.step-next {
  border-color: var(--primary) !important;
  background: linear-gradient(135deg, #fef6ff, #fce8ff) !important;
  box-shadow: 0 0 0 3px rgba(96, 32, 96, 0.1) !important;
}

/* ─── SVG modal ─────────────────────────────── */
@keyframes drawSvg  { to { stroke-dashoffset: 0; } }
@keyframes drawRing { to { stroke-dashoffset: 0; } }
@keyframes pulseSvg {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.03); }
}
@keyframes popEmoji {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
.icon-pulse { animation: pulseSvg 2.5s infinite ease-in-out; }

/* ─── Neon ring spin ────────────────────────── */
@keyframes spinNeon    { 0% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }
@keyframes rainbowHue  { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

/* ─── Longpress fill ────────────────────────── */
@keyframes lp-fill { from { stroke-dashoffset: 113; } to { stroke-dashoffset: 0; } }

/* ─── Slide up ──────────────────────────────── */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Tabs / Navegación ─────────────────────── */
@keyframes tabPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.88); }
  75%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes tabSlideNew {
  0%   { transform: translateX(-50%) scaleX(0.3); opacity: 0; }
  100% { transform: translateX(-50%) scaleX(1);   opacity: 1; }
}
@keyframes underlineGrow {
  from { width: 8px;  opacity: 0.4; }
  to   { width: 22px; opacity: 1; }
}
@keyframes iconBounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-5px); }
  65%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes shimmerAnim {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ─── Avatar ────────────────────────────────── */
@keyframes avatarPulseNew {
  0%, 100% { box-shadow: 0 0 0 0   rgba(96, 32, 96, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(96, 32, 96, 0); }
}

/* ─── Listas / Cards ────────────────────────── */
@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cardStagger {
  from { opacity: 0; transform: translateY(22px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ─── Bubble perfil ─────────────────────────── */
@keyframes bubbleEnter {
  0%   { opacity: 0; transform: scale(0.7) translateY(-20px); }
  100% { opacity: 1; transform: scale(1)   translateY(0); }
}
@keyframes bubbleLeave {
  0%   { opacity: 1; transform: scale(1)   translateY(0); }
  100% { opacity: 0; transform: scale(0.8) translateY(-10px); }
}
@keyframes bubbleInNew {
  0%   { opacity: 0; transform: translateY(-18px) scale(0.94); }
  60%  {             transform: translateY(3px)   scale(1.01); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes bubbleOutNew {
  0%   { opacity: 1; transform: translateY(0)     scale(1); }
  100% { opacity: 0; transform: translateY(-14px) scale(0.93); }
}

/* ─── Backdrop ──────────────────────────────── */
@keyframes backdropFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdropFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* ─── Auth ──────────────────────────────────── */
@keyframes authLogoFloat {
  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 10px 25px rgba(96, 32, 96, 0.22)); }
  50%      { transform: translateY(-10px); filter: drop-shadow(0 22px 42px rgba(96, 32, 96, 0.4)); }
}
@keyframes sparkleFly {
  0%   { opacity: 0;    transform: translateY(0)      scale(0.4) rotate(0deg); }
  12%  { opacity: 0.85; }
  88%  { opacity: 0.5; }
  100% { opacity: 0;    transform: translateY(-220px) scale(1.1) rotate(540deg); }
}
@keyframes rippleAnim {
  from { transform: scale(0);   opacity: 0.42; }
  to   { transform: scale(5.5); opacity: 0; }
}
/* ─── Biometric gate ─────────────────────────── */
@keyframes gateRing1 {
  0%, 100% { transform: scale(1);    opacity: 0.5; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes gateRing2 {
  0%, 100% { transform: scale(1);    opacity: 0.25; }
  50%      { transform: scale(1.18); opacity: 0.55; }
}
@keyframes gateRing3 {
  0%, 100% { transform: scale(1);    opacity: 0.1; }
  50%      { transform: scale(1.24); opacity: 0.3; }
}
@keyframes gateBtnPulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(96,32,96,0.35); }
  50%      { box-shadow: 0 14px 46px rgba(96,32,96,0.55), 0 0 0 8px rgba(96,32,96,0.08); }
}
@keyframes gateOrb1 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(15px,-20px) scale(1.1); }
}
@keyframes gateOrb2 {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-10px,15px) scale(0.9); }
}

/* ─── Calendario ────────────────────────────── */
@keyframes dayPop {
  0%   { opacity: 0; transform: scale(0.55); }
  70%  {             transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* ─── Modal ─────────────────────────────────── */
@keyframes modalBounce {
  0%   { opacity: 0; transform: scale(0.78) translateY(28px); }
  65%  {             transform: scale(1.04) translateY(-4px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ─── Vista / View transition ───────────────── */
@keyframes viewSlide {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Skeleton ──────────────────────────────── */
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ─── Badge ─────────────────────────────────── */
@keyframes heartPop {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes badgePing {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ─── Btn ready ─────────────────────────────── */
@keyframes btnReady {
  0%   { transform: scale(1);    box-shadow: 0 8px 25px rgba(96, 32, 96, 0.35); }
  40%  { transform: scale(1.04); box-shadow: 0 14px 38px rgba(96, 32, 96, 0.55); }
  100% { transform: scale(1);    box-shadow: 0 8px 25px rgba(96, 32, 96, 0.35); }
}

/* ─── Formulario: borde decorativo ──────────── */
@keyframes formBorderAppear {
  0%   { opacity: 0;    transform: scaleY(0); }
  100% { opacity: 0.35; transform: scaleY(1); }
}

/* ─── Status pill ───────────────────────────── */
@keyframes pillGlow {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 6px rgba(155, 77, 155, 0.3); }
}

/* ============================================
   CLASES DE ANIMACIÓN APLICADAS
   ============================================ */

/* Avatar header */
.header-avatar { animation: avatarPulseNew 3s ease-in-out infinite; }

/* Tab shimmer activo */
.tab-btn.active { overflow: hidden; }
.tab-btn.active::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  background-size: 200% auto;
  animation: shimmerAnim 2.2s linear infinite;
  border-radius: inherit;
  pointer-events: none;
}
.tab-btn.active::after {
  animation: tabSlideNew 0.3s ease forwards, underlineGrow 0.35s ease forwards !important;
}
.tab-btn.tab-popping { animation: tabPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* Bubble perfil */
.bubble-anim-enter { animation: bubbleInNew 0.32s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important; }
.bubble-anim-leave { animation: bubbleOutNew 0.26s ease forwards !important; }

/* Citas: entrada escalonada */
.appointment-card { animation: cardStagger 0.38s cubic-bezier(0.4, 0, 0.2, 1) both !important; }
.appointment-card:nth-child(1)   { animation-delay: 0ms !important; }
.appointment-card:nth-child(2)   { animation-delay: 65ms !important; }
.appointment-card:nth-child(3)   { animation-delay: 130ms !important; }
.appointment-card:nth-child(4)   { animation-delay: 195ms !important; }
.appointment-card:nth-child(5)   { animation-delay: 260ms !important; }
.appointment-card:nth-child(n+6) { animation-delay: 320ms !important; }

/* Calendario: días en cascada */
.cal-grid .day { animation: dayPop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.cal-grid .day:nth-child(1)    { animation-delay: 8ms; }
.cal-grid .day:nth-child(2)    { animation-delay: 18ms; }
.cal-grid .day:nth-child(3)    { animation-delay: 28ms; }
.cal-grid .day:nth-child(4)    { animation-delay: 38ms; }
.cal-grid .day:nth-child(5)    { animation-delay: 48ms; }
.cal-grid .day:nth-child(6)    { animation-delay: 58ms; }
.cal-grid .day:nth-child(7)    { animation-delay: 68ms; }
.cal-grid .day:nth-child(8)    { animation-delay: 78ms; }
.cal-grid .day:nth-child(9)    { animation-delay: 88ms; }
.cal-grid .day:nth-child(10)   { animation-delay: 98ms; }
.cal-grid .day:nth-child(11)   { animation-delay: 108ms; }
.cal-grid .day:nth-child(12)   { animation-delay: 118ms; }
.cal-grid .day:nth-child(13)   { animation-delay: 128ms; }
.cal-grid .day:nth-child(14)   { animation-delay: 138ms; }
.cal-grid .day:nth-child(15)   { animation-delay: 148ms; }
.cal-grid .day:nth-child(16)   { animation-delay: 158ms; }
.cal-grid .day:nth-child(17)   { animation-delay: 168ms; }
.cal-grid .day:nth-child(18)   { animation-delay: 178ms; }
.cal-grid .day:nth-child(19)   { animation-delay: 188ms; }
.cal-grid .day:nth-child(20)   { animation-delay: 198ms; }
.cal-grid .day:nth-child(21)   { animation-delay: 208ms; }
.cal-grid .day:nth-child(22)   { animation-delay: 218ms; }
.cal-grid .day:nth-child(n+23) { animation-delay: 225ms; }

/* Auth */
.auth-logo-large { animation: authLogoFloat 4s ease-in-out infinite; }
.auth-sparkle    { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  width: 80px; height: 80px;
  margin-left: -40px; margin-top: -40px;
  pointer-events: none;
  animation: rippleAnim 0.58s ease-out forwards;
}

/* Modal */
.modal-content { animation: modalBounce 0.42s cubic-bezier(0.175, 0.885, 0.32, 1.45) both !important; }

/* View transition */
.view-enter-anim { animation: viewSlide 0.36s cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Skeleton loader */
.skeleton-card  { background: white; border: 1px solid #f0e6f0; border-radius: 28px; padding: 22px 22px 22px 30px; margin-bottom: 16px; }
.skeleton-line  { border-radius: 99px; margin-bottom: 10px; background: linear-gradient(90deg, #f5eef8 0%, #ede0f5 50%, #f5eef8 100%); animation: skeletonPulse 1.5s ease-in-out infinite; }
.skeleton-title { width: 52%; height: 15px; margin-bottom: 14px; }
.skeleton-text  { width: 80%; height: 11px; }
.skeleton-short { width: 38%; height: 11px; }
.skeleton-btn   { width: 48%; height: 32px; border-radius: 16px; margin-top: 14px; }

/* Badge corazón */
.heart-badge { animation: heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), badgePing 2.8s ease-in-out 1.5s infinite !important; }

/* Surcharge alert entrada */
.surcharge-alert[style*="flex"] { animation: popIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; }

/* Formulario: borde izquierdo animado */
.form-section { position: relative; }
.form-section::before {
  content: "";
  position: absolute;
  top: 10px; left: -20px; bottom: 10px; width: 3px;
  background: linear-gradient(180deg, var(--primary), var(--gold), var(--primary));
  border-radius: 99px;
  opacity: 0;
  animation: formBorderAppear 1.2s ease 0.5s forwards;
}
@media (max-width: 768px) { .form-section::before { display: none; } }

/* Status pill glow */
.status-pill { animation: pillGlow 3s ease-in-out infinite; }

/* ─── Productos / Inventario ────────────────── */
@keyframes catOpen {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-card { animation: cardStagger 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
.product-card:nth-child(1)   { animation-delay: 0ms; }
.product-card:nth-child(2)   { animation-delay: 55ms; }
.product-card:nth-child(3)   { animation-delay: 110ms; }
.product-card:nth-child(4)   { animation-delay: 165ms; }
.product-card:nth-child(n+5) { animation-delay: 215ms; }

.venta-card { animation: cardStagger 0.38s cubic-bezier(0.4, 0, 0.2, 1) both; }
.venta-card:nth-child(1)   { animation-delay: 0ms; }
.venta-card:nth-child(2)   { animation-delay: 55ms; }
.venta-card:nth-child(3)   { animation-delay: 110ms; }
.venta-card:nth-child(4)   { animation-delay: 165ms; }
.venta-card:nth-child(n+5) { animation-delay: 215ms; }

.inventario-summary-card { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.inventario-summary-card:nth-child(2) { animation-delay: 80ms; }

.cat-open-anim { animation: catOpen 0.22s ease forwards; }