/* ============================================
   reframe.ai — code editor aesthetic
   ============================================ */

html {
  scroll-behavior: smooth;
  font-size: 110%;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #21262d; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #58a6ff; }

/* Section transitions */
section {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
section.visible { opacity: 1; transform: translateY(0); }
#hero { opacity: 1; transform: none; }

/* Video containers */
.video-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #161b22;
  aspect-ratio: 16 / 9;
  border: 1px solid #21262d;
}
.video-wrapper video,
.video-wrapper canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Game cards */
.game-card {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  border: 1px solid #21262d;
  border-radius: 8px;
}
.game-card:hover {
  transform: translateY(-2px);
  border-color: #58a6ff;
}
.game-card.correct {
  border-color: #3fb950;
  box-shadow: 0 0 16px rgba(63, 185, 80, 0.1);
}
.game-card.wrong {
  border-color: #f85149;
  box-shadow: 0 0 16px rgba(248, 81, 73, 0.1);
}

/* Slider */
.bitrate-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f85149, #d29922, #3fb950);
  outline: none;
}
.bitrate-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #c9d1d9;
  cursor: pointer;
  border: 2px solid #0d1117;
  transition: transform 0.15s;
}
.bitrate-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* VMAF glowing slider */
.vmaf-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #f85149 0%, #d29922 40%, #c9d1d9 70%, #3fb950 90%);
  outline: none;
  cursor: pointer;
}
.vmaf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c9d1d9;
  border: 3px solid #0d1117;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.5), 0 0 24px rgba(88, 166, 255, 0.2);
  transition: box-shadow 0.3s;
  animation: vmaf-pulse 2s ease-in-out infinite;
}
@keyframes vmaf-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(88, 166, 255, 0.4), 0 0 20px rgba(88, 166, 255, 0.15); }
  50% { box-shadow: 0 0 18px rgba(88, 166, 255, 0.7), 0 0 36px rgba(88, 166, 255, 0.3); }
}

/* VMAF zone hover */
.vmaf-zone {
  cursor: default;
}
.vmaf-zone:hover {
  border-color: #58a6ff !important;
  box-shadow: 0 0 28px rgba(88, 166, 255, 0.25) !important;
  transform: scale(1.08) !important;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 22px;
  background: #21262d;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid #30363d;
}
.toggle-switch.active {
  background: #1f6feb;
  border-color: #58a6ff;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c9d1d9;
  transition: transform 0.2s;
}
.toggle-switch.active::after {
  transform: translateX(22px);
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp 0.3s ease forwards; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(88, 166, 255, 0.1); }
  50% { box-shadow: 0 0 16px rgba(88, 166, 255, 0.2); }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* Mobile */
@media (hover: none) {
  .game-card:active {
    transform: scale(0.99);
    border-color: #58a6ff;
  }
}

@media (max-width: 640px) {
  /* Bigger touch targets */
  button, .game-card { min-height: 44px; }

  /* Slider and compare adjustments */

  /* Readable text on small screens */
  .pn .t { font-size: 14pt; }
  .pn .d { font-size: 11pt; }

  /* Compare slider labels */
  .video-wrapper { border-radius: 6px; }
}