/* ============================================================================
   SPYVORA — Micro-Animations & Keyframes
   ============================================================================ */

/* ============================================================================
   CORE KEYFRAMES
   ============================================================================ */
@keyframes sv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sv-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes sv-slide-in-right {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes sv-slide-out-right {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

@keyframes sv-slide-in-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes sv-slide-in-down {
  from { transform: translateY(-16px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes sv-scale-in {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

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

@keyframes sv-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

@keyframes sv-pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes sv-pulse-online {
  0%, 100% {
    box-shadow: 0 0 8px var(--sv-success);
  }
  50% {
    box-shadow: 0 0 12px var(--sv-success), 0 0 20px rgba(34, 197, 94, 0.3);
  }
}

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

@keyframes sv-bounce-in {
  0%   { transform: scale(0.3);  opacity: 0; }
  50%  { transform: scale(1.05); opacity: 1; }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes sv-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

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

/* ============================================================================
   ONLINE STATUS — Pulsing dot
   ============================================================================ */
.sv-status-dot.online {
  position: relative;
  animation: sv-pulse-online 2s ease-in-out infinite;
}

.sv-status-dot.online::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--sv-success);
  animation: sv-pulse-ring 2s ease-out infinite;
}

.sv-status-dot.offline {
  animation: none;
}

/* ============================================================================
   LOADING SPINNER
   ============================================================================ */
.sv-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--sv-border-strong);
  border-top-color: var(--sv-accent);
  border-radius: 50%;
  animation: sv-spin 0.7s linear infinite;
  display: inline-block;
}

.sv-spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
.sv-spinner-lg { width: 24px; height: 24px; border-width: 3px; }

/* ============================================================================
   LOADING STATE — Indeterminate progress
   ============================================================================ */
.sv-progress-indeterminate .sv-progress-fill {
  width: 40% !important;
  animation: sv-progress-indeterminate 1.2s ease infinite;
}

/* ============================================================================
   CARD HOVER — lift effect
   ============================================================================ */
.sv-stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.15s;
}

/* ============================================================================
   BUTTON PRESS — tactile feedback
   ============================================================================ */
.sv-btn:active:not(:disabled) {
  transform: scale(0.96);
  transition: transform 0.06s;
}

.sv-cmd-btn:active:not(:disabled) {
  transform: scale(0.97);
}

/* ============================================================================
   PAGE TRANSITIONS
   ============================================================================ */
.sv-page.active {
  animation: sv-fade-in 0.18s ease;
}

/* ============================================================================
   DEVICE CARD — hover ripple
   ============================================================================ */
.sv-device-card {
  position: relative;
  overflow: hidden;
}

.sv-device-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(99, 102, 241, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.sv-device-card:hover::after { opacity: 1; }

/* ============================================================================
   TAB — indicator slide
   ============================================================================ */
.sv-tabs {
  position: relative;
}

/* ============================================================================
   TOAST — enter/exit
   ============================================================================ */
.sv-toast {
  animation: sv-slide-in-right 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sv-toast.hiding {
  animation: sv-slide-out-right 0.2s ease forwards;
}

/* ============================================================================
   TABLE ROWS — staggered fade in
   ============================================================================ */
.sv-table tbody tr {
  animation: sv-slide-in-up 0.15s ease backwards;
}

.sv-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.sv-table tbody tr:nth-child(2) { animation-delay: 30ms; }
.sv-table tbody tr:nth-child(3) { animation-delay: 60ms; }
.sv-table tbody tr:nth-child(4) { animation-delay: 90ms; }
.sv-table tbody tr:nth-child(5) { animation-delay: 120ms; }
.sv-table tbody tr:nth-child(n+6) { animation-delay: 150ms; }

/* ============================================================================
   GALLERY ITEMS — staggered appearance
   ============================================================================ */
.sv-gallery-item {
  animation: sv-scale-in 0.2s ease backwards;
}

.sv-gallery-item:nth-child(1) { animation-delay: 0ms; }
.sv-gallery-item:nth-child(2) { animation-delay: 40ms; }
.sv-gallery-item:nth-child(3) { animation-delay: 80ms; }
.sv-gallery-item:nth-child(4) { animation-delay: 120ms; }
.sv-gallery-item:nth-child(n+5) { animation-delay: 160ms; }

/* ============================================================================
   SCREEN MIRROR — glow when active
   ============================================================================ */
.sv-screen-phone.streaming {
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.6), 
    0 0 0 1px rgba(255,255,255,0.05) inset,
    0 0 30px rgba(16, 185, 129, 0.2);
}

.sv-screen-phone.streaming .sv-fps-badge {
  animation: sv-bounce-in 0.4s ease;
}

/* ============================================================================
   RECORDING BLINK
   ============================================================================ */
.sv-rec-dot {
  animation: sv-blink 1s ease infinite;
}

/* ============================================================================
   COMMAND BUTTON — loading state
   ============================================================================ */
.sv-cmd-btn.loading {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.sv-cmd-btn.loading::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: sv-spin 0.6s linear infinite;
  margin-left: 6px;
}

/* ============================================================================
   NAV ITEM — active indicator bar
   ============================================================================ */
.sv-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--sv-accent);
  border-radius: 0 2px 2px 0;
}

/* ============================================================================
   LOGO — ambient glow
   ============================================================================ */
.sv-logo-icon {
  transition: box-shadow 0.3s ease;
}

.sv-logo-icon:hover {
  box-shadow: 0 0 24px var(--sv-accent-glow), 0 0 4px var(--sv-accent);
}

/* ============================================================================
   DASHBOARD CARDS — number counter animation
   ============================================================================ */
.sv-stat-value {
  transition: all 0.3s ease;
}

/* ============================================================================
   TIMELINE ITEM — entry
   ============================================================================ */
.sv-timeline-item {
  animation: sv-slide-in-up 0.2s ease backwards;
}

.sv-timeline-item:nth-child(1) { animation-delay: 0ms; }
.sv-timeline-item:nth-child(2) { animation-delay: 50ms; }
.sv-timeline-item:nth-child(3) { animation-delay: 100ms; }
.sv-timeline-item:nth-child(n+4) { animation-delay: 150ms; }

/* ============================================================================
   MODAL — overlay fade
   ============================================================================ */
.sv-modal-overlay {
  animation: sv-fade-in 0.15s ease;
}

.sv-modal {
  animation: sv-scale-in 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================================================
   FLOATING LOGO — subtle animation on login page
   ============================================================================ */
.sv-login-logo-icon {
  animation: sv-float 3s ease-in-out infinite;
}