/* ============================================================
   ShieldTech Secret Weapon — App styles + animations
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg-1); color: var(--fg-1);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }
input, textarea { font-family: inherit; color: inherit; }

/* tabular numerals everywhere by default for HUD-feel */
.tabular { font-variant-numeric: tabular-nums; }

/* page transitions */
@keyframes slideUp { from { transform: translateY(12px); } to { transform: translateY(0); } }
@keyframes slideRight { from { transform: translateX(-12px); } to { transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes scanLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(0,163,255,0.28); }
  50% { box-shadow: 0 0 36px rgba(0,163,255,0.55); }
}
@keyframes purpleGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(168,85,247,0.30); }
  50% { box-shadow: 0 0 30px rgba(168,85,247,0.55); }
}
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 0; }
}
@keyframes countUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.slide-up { animation: slideUp 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.slide-right { animation: slideRight 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.fade-in { animation: fadeIn 220ms ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; }
  .slide-up, .slide-right, .fade-in { animation: none !important; opacity: 1 !important; transform: none !important; }
  .scan-line, .glow-blue, .glow-purple, .ai-shimmer, .typing-dot, .live-dot::after { animation: none !important; }
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,0.18); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* AI shimmer text — used sparingly for "thinking" states */
.ai-shimmer {
  background: linear-gradient(90deg, var(--fg-muted) 0%, var(--assistant) 25%, #E9D5FF 50%, var(--assistant) 75%, var(--fg-muted) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.4s linear infinite;
}

/* Live "syncing" line on cards */
.scan-line {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--blue-electric), transparent);
  animation: scanLine 2.4s linear infinite;
}

/* Typing dots */
.typing-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--assistant);
  animation: typing 1.2s ease-in-out infinite;
}

/* Status dot pulse */
.live-dot::after {
  content: ''; position: absolute; inset: -2px; border-radius: 999px;
  border: 1.5px solid currentColor; animation: ringPulse 1.8s ease-out infinite;
}

/* Glowing primary button */
.glow-blue { animation: glowPulse 3.2s ease-in-out infinite; }
.glow-purple { animation: purpleGlow 3.2s ease-in-out infinite; }

/* Caret blink */
.caret { display: inline-block; width: 2px; height: 1em; background: var(--blue-electric); margin-left: 2px; animation: blink 1s steps(1) infinite; vertical-align: -2px; }

/* Card hover */
.card-hover { transition: border-color 160ms ease, transform 160ms ease, box-shadow 200ms ease; }
.card-hover:hover { border-color: var(--border-strong) !important; transform: translateY(-1px); }

/* No-tap-highlight (mobile feel) */
button, a { -webkit-tap-highlight-color: transparent; }

/* Hide scroll for tab chip rows */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Mission ring (conic gradient w/ inner punch-out) */
.mission-ring-track {
  background: conic-gradient(from -90deg, var(--blue) 0%, var(--blue-electric) var(--pct, 0%), rgba(30,41,59,0.6) var(--pct, 0%) 100%);
}