/* ============================================================ */
/* Home — the Juicebox 2000 teaser at the top: just the video    */
/* ============================================================ */

.glowed .reel { padding: 30px 40px 60px; }

/* 16:9, and never taller than the window under the nav */
.glowed .reel-frame {
  position: relative;
  width: 100%;
  max-width: max(560px, calc((100svh - 200px) * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border: 1px solid rgba(143, 234, 255, 0.2);
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 48px rgba(143, 234, 255, 0.12);
}
.glowed .reel-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Pause and sound, bottom right: out of sight until the pointer's over the video, a tap wakes it, a key reaches
   a button, or it's paused */
.glowed .reel-controls {
  position: absolute; right: 20px; bottom: 20px;
  display: flex; gap: 10px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
/* hover only where there's a real pointer, and focus only from the keyboard: a tapped button keeps both on a phone */
@media (hover: hover) {
  .glowed .reel-frame:hover .reel-controls { opacity: 1; pointer-events: auto; }
}
.glowed .reel-frame:has(:focus-visible) .reel-controls,
.glowed .reel-frame.awake .reel-controls,
.glowed .reel-frame.paused .reel-controls { opacity: 1; pointer-events: auto; }
.glowed .reel-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(8, 18, 32, 0.6);
  border: 1px solid rgba(216, 240, 255, 0.3);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  color: rgba(216, 240, 255, 0.85);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s;
}
.glowed .reel-btn:hover {
  border-color: rgba(143, 234, 255, 0.6);
  color: #fff;
  box-shadow: 0 0 16px rgba(143, 234, 255, 0.35);
}
.glowed .reel-btn:focus-visible { outline: 2px solid #8feaff; outline-offset: 2px; }

@media (max-width: 720px) {
  .glowed .reel { padding: 16px 16px 32px; }
  .glowed .reel-frame { max-width: none; border-radius: 18px; }
  .glowed .reel-controls { right: 12px; bottom: 12px; gap: 8px; }
  .glowed .reel-btn { width: 36px; height: 36px; font-size: 0.875rem; }
}