/* ═══════════════════════════════════════════════════
   ANIMATIONS — Keyframes + Micro-interactions
   ═══════════════════════════════════════════════════ */

/* ── Core Keyframes ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

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

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

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

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

@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

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

@keyframes glow {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
  50%       { box-shadow: 0 0 28px var(--accent-glow-strong); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ── Page entry ── */
.page-enter {
  animation: fadeInUp 0.4s var(--t) both;
}

/* ── Card stagger ── */
.report-card:nth-child(1) { animation-delay: 0.05s; }
.report-card:nth-child(2) { animation-delay: 0.10s; }
.report-card:nth-child(3) { animation-delay: 0.15s; }
.report-card:nth-child(4) { animation-delay: 0.20s; }
.report-card:nth-child(5) { animation-delay: 0.25s; }
.report-card:nth-child(6) { animation-delay: 0.30s; }
.report-card:nth-child(7) { animation-delay: 0.35s; }
.report-card:nth-child(8) { animation-delay: 0.40s; }
.report-card:nth-child(n+9) { animation-delay: 0.45s; }

/* ── Login background animation ── */
.login-bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(124,111,247,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(0,201,167,0.08) 0%, transparent 55%),
              radial-gradient(ellipse at 60% 80%, rgba(124,111,247,0.06) 0%, transparent 50%),
              var(--bg-base);
}

.login-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
}

/* ── Active nav pulse ── */
.nav-item.active {
  animation: none;
  position: relative;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

/* ── Glow on hover for stat cards ── */
.stat-card:hover .stat-icon.purple {
  box-shadow: 0 0 16px var(--accent-glow);
}
.stat-card:hover .stat-icon.teal {
  box-shadow: 0 0 16px var(--teal-glow);
}

/* ── Button ripple (via pseudo) ── */
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.btn-primary:hover::before { transform: scaleX(1); }

/* ── Smooth iframe reveal ── */
.viewer-frame {
  animation: fadeIn 0.5s ease;
}

/* ── Table row hover ── */
tbody tr {
  transition: background var(--t-fast), transform var(--t-fast);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}