/* ═══════════════════════════════════════════════════════════
   SENTINEL AI · animations.css
   Keyframes, scroll-reveal, micro-interactions
   ═══════════════════════════════════════════════════════════ */

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

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

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

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.04); opacity: 1; }
}

/* ─── RADAR SCAN (signature element) ─────────────────────── */
@keyframes radar-sweep {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes radar-ring {
  0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0.8; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}

.radar {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.radar-grid-ring {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  border: 1px solid rgba(99,102,241,0.15);
}
.radar-grid-ring.r1 { width: 100%; height: 100%; }
.radar-grid-ring.r2 { width: 75%;  height: 75%;  border-color: rgba(99,102,241,0.12); }
.radar-grid-ring.r3 { width: 50%;  height: 50%;  border-color: rgba(56,189,248,0.18); }
.radar-grid-ring.r4 { width: 25%;  height: 25%;  border-color: rgba(56,189,248,0.25); }

.radar-crosshair-h, .radar-crosshair-v {
  position: absolute; top: 50%; left: 50%;
  background: rgba(99,102,241,0.08);
}
.radar-crosshair-h { width: 100%; height: 1px; transform: translate(-50%,-50%); }
.radar-crosshair-v { width: 1px; height: 100%; transform: translate(-50%,-50%); }

.radar-sweep {
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    transparent 300deg,
    rgba(99,102,241,0.05) 330deg,
    rgba(99,102,241,0.25) 355deg,
    rgba(129,140,248,0.5) 360deg);
  animation: radar-sweep 4s linear infinite;
}
.radar-pulse {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 50%;
  border-radius: 50%;
  border: 1px solid var(--c-indigo);
  animation: radar-ring 3s ease-out infinite;
}
.radar-pulse:nth-child(2) { animation-delay: 1s; }
.radar-pulse:nth-child(3) { animation-delay: 2s; }

.radar-core {
  position: relative; z-index: 5;
  width: 22%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, var(--c-overlay), var(--c-surface));
  border-radius: 50%;
  border: 1px solid var(--b-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-glow-indigo);
  animation: breathe 3.5s ease-in-out infinite;
}

/* Blips on radar */
.radar-blip {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  z-index: 4;
  transform: translate(-50%,-50%);
}
.radar-blip::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: blip-ping 2.5s ease-out infinite;
}
.radar-blip.danger { background: var(--c-danger); color: var(--c-danger); box-shadow: 0 0 8px var(--c-danger); }
.radar-blip.warn   { background: var(--c-warn);   color: var(--c-warn);   box-shadow: 0 0 8px var(--c-warn); }
.radar-blip.safe   { background: var(--c-safe);   color: var(--c-safe);   box-shadow: 0 0 8px var(--c-safe); }

@keyframes blip-ping {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}

/* ─── TICKER ─────────────────────────────────────────────── */
.ticker {
  display: flex; align-items: center;
  background: var(--c-surface);
  border-top: 1px solid var(--b-dim);
  border-bottom: 1px solid var(--b-dim);
  height: 46px; overflow: hidden;
}
.ticker-tag {
  flex-shrink: 0;
  padding: 0 18px; height: 100%;
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-indigo-light);
  font-family: 'JetBrains Mono', monospace;
  background: var(--c-indigo-dim);
  border-right: 1px solid var(--b-dim);
}
.ticker-tag::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-indigo); box-shadow: 0 0 6px var(--c-indigo);
  animation: live-pulse 2s ease-in-out infinite;
}
.ticker-viewport { flex: 1; overflow: hidden; }
.ticker-track {
  display: flex; gap: 40px; align-items: center;
  padding-left: 28px;
  width: max-content;
  animation: ticker-scroll 40s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-row {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm);
  font-family: 'JetBrains Mono', monospace;
  color: var(--t-2); white-space: nowrap;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

.reveal-scale {
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* Stagger children */
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.stagger.in > * { opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.in > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.in > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.in > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.in > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.in > *:nth-child(6) { transition-delay: 0.40s; }

/* ─── SHIMMER / SKELETON ─────────────────────────────────── */
.shimmer {
  background: linear-gradient(90deg,
    var(--c-raised) 0%,
    var(--c-overlay) 50%,
    var(--c-raised) 100%);
  background-size: 200% 100%;
  animation: shimmer-move 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer-move {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── SCAN LINE (analysis overlay) ───────────────────────── */
@keyframes scan-down {
  0%   { top: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent, var(--c-indigo), var(--c-sky), transparent);
  box-shadow: 0 0 12px var(--c-indigo);
  animation: scan-down 2.5s ease-in-out infinite;
  z-index: 5;
}

/* ─── FACE MESH GRID (deepfake viz) ──────────────────────── */
.face-mesh {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: 0.5;
}
.mesh-dot {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--c-sky);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--c-sky);
  animation: mesh-flicker 2s ease-in-out infinite;
}
@keyframes mesh-flicker {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ─── COUNT UP NUMBER ────────────────────────────────────── */
.count-up { font-variant-numeric: tabular-nums; }

/* ─── HOVER LIFT ─────────────────────────────────────────── */
.hover-lift { transition: transform 0.25s var(--ease-out), box-shadow 0.25s; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); }

/* ─── GLOW ON HOVER ──────────────────────────────────────── */
.glow-hover { transition: box-shadow 0.3s; }
.glow-hover:hover { box-shadow: var(--shadow-glow-indigo); }

/* ─── TYPING DOTS (AI thinking) ──────────────────────────── */
.typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-indigo-light);
  animation: typing-bounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ─── PAGE LOAD SEQUENCE ─────────────────────────────────── */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-load > * {
  animation: page-fade-in 0.8s var(--ease-out) backwards;
}
.page-load > *:nth-child(1) { animation-delay: 0.05s; }
.page-load > *:nth-child(2) { animation-delay: 0.15s; }
.page-load > *:nth-child(3) { animation-delay: 0.25s; }
.page-load > *:nth-child(4) { animation-delay: 0.35s; }

/* ─── NUMBER FLIP ────────────────────────────────────────── */
@keyframes pop-in {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop-in 0.5s var(--ease-spring) backwards; }