/* ============================================================
   StreetQuants — manim video player styles
   Used in lessons that have a manim intro film.
   StreetQuants dark theme: matches dash2.css variables.
   ============================================================ */
.video-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  animation: fIn .55s ease-out;
}
@keyframes fIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.video-frame {
  position: relative;
  width: 100%;
  max-width: 920px;
  background: #070c14;
  border: 1px solid rgba(62,207,142,.18);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

.video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
  border-radius: 14px;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 16, 0.55);
  transition: opacity 0.25s;
  pointer-events: none;
}

.video-play-btn {
  pointer-events: auto;
  background: #58cc02;
  color: #040816;
  border: none;
  border-radius: 10px;
  padding: 16px 32px;
  font: 800 16px var(--d2-ff, Nunito, system-ui, sans-serif);
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(88, 204, 2, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.video-play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(88, 204, 2, 0.55);
}
.video-play-btn:active { transform: scale(0.97); }

.video-next-btn,
.video-end-btn {
  pointer-events: auto;
  background: rgba(255,255,255,.06);
  color: var(--d2-ink, #f2f7f4);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 11px 28px;
  margin-left: 10px;
  font: 800 14px var(--d2-ff, Nunito, system-ui, sans-serif);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  opacity: 0;
  transform: translateY(6px);
}
.video-ctrl {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: bIn .4s ease-out .1s both;
}
@keyframes bIn { from{opacity:0} to{opacity:1} }
.video-next-btn:hover,
.video-end-btn:hover { background: rgba(255,255,255,.12); transform: translateY(0); }
.video-next-btn:active,
.video-end-btn:active { transform: scale(0.97); }
.video-next-btn:disabled,
.video-end-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.video-end-btn { background: transparent; border-style: dashed; }

.video-prog {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #58cc02, #3ecf8e);
  border-radius: 0 2px 0 0;
  transition: width .1s linear;
  pointer-events: none;
  opacity: 0;
}
.video-frame[data-state="playing"] .video-prog { opacity: 1; }

.video-sub {
  width: 100%;
  max-width: 920px;
  min-height: 52px;
  padding: 14px 22px;
  background: rgba(7,12,20,.82);
  border: 1px solid rgba(62,207,142,.16);
  border-radius: 10px;
  font: 600 16px var(--d2-ff, Nunito, system-ui, sans-serif);
  color: var(--d2-ink2, #a9bcb2);
  text-align: center;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.video-sub .spoken { color: var(--d2-ink, #f2f7f4); font-weight: 700; }
.video-sub .pending { color: var(--d2-mut, #6b7f75); }
.video-sub .caret { color: var(--d2-green, #3ecf8e); animation: pulse 1s infinite; margin-left: 2px; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.video-foot {
  width: 100%;
  max-width: 920px;
  text-align: center;
  font: 11px var(--d2-ff, Nunito, system-ui, sans-serif);
  color: var(--d2-mut, #6b7f75);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.video-foot .vid-name { color: var(--d2-ink2, #a9bcb2); font-weight: 700; }

/* state-based visibility */
.video-frame[data-state="idle"] .video-overlay { opacity: 1; }
.video-frame[data-state="playing"] .video-overlay { opacity: 0; pointer-events: none; }
.video-frame[data-state="paused"] .video-overlay { opacity: 0; pointer-events: none; }
.video-frame[data-state="done"] .video-overlay { opacity: 0; pointer-events: none; }