/* Demo-specific overrides on top of Tailwind */

/* Inter font is loaded via Google Fonts in each HTML file */

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f9fafb; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* Smooth transitions */
* { transition-property: color, background-color, border-color, box-shadow, opacity, transform;
    transition-duration: 150ms; transition-timing-function: ease-in-out; }

/* Video element */
#camera-feed { width: 100%; border-radius: 12px; background: #000; }

/* Waveform animation */
.waveform-bar {
  display: inline-block;
  width: 4px;
  background: #7c3aed;
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
.waveform-bar:nth-child(4) { animation-delay: 0.3s; }
.waveform-bar:nth-child(5) { animation-delay: 0.4s; }
.waveform-bar:nth-child(6) { animation-delay: 0.5s; }
.waveform-bar:nth-child(7) { animation-delay: 0.6s; }
.waveform-bar:nth-child(8) { animation-delay: 0.7s; }
@keyframes wave {
  0%, 100% { height: 8px; }
  50% { height: 32px; }
}
.waveform-bar.idle { animation: none; height: 8px; }

/* Code diff panel */
.code-removed { background: #fef2f2; color: #dc2626; }
.code-added   { background: #f0fdf4; color: #16a34a; }

/* Speed test progress */
#speed-progress-bar {
  transition: width 0.3s ease;
}

/* Iframe container */
#cross-origin-frame {
  width: 100%;
  height: 480px;
  border: none;
  border-radius: 12px;
}

/* Feature card hover */
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

/* Nav active link */
.nav-link.active { color: #7c3aed; font-weight: 600; }

/* Badge pulse for recording */
.badge-recording {
  animation: pulse-red 1.5s ease-in-out infinite;
}
@keyframes pulse-red {
  0%, 100% { background-color: #fecaca; color: #dc2626; }
  50% { background-color: #dc2626; color: #fff; }
}

/* Apple Pay button */
.apple-pay-button {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: buy;
  -apple-pay-button-style: black;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  cursor: pointer;
}

/* Selector mode toggle */
.mode-x-active .mode-x-label { background: #ede9fe; color: #7c3aed; }
.mode-y-active .mode-y-label { background: #fff7ed; color: #ea580c; }

/* Map tile */
#map-tile { border-radius: 12px; width: 100%; max-height: 200px; object-fit: cover; }

/* Monospace clock */
#device-time { font-family: 'JetBrains Mono', 'Fira Code', monospace; letter-spacing: 0.05em; }