/* ============================================================
   VIDEO DIALOG — the site's one video player (video-dialog.js).
   A member of the modal family, built for smooth playback: see
   Couple-v3-video-player-brief-for-Tim.md for the measurements.
   Uses what styles.css already has: .cd-scrim, .cd-close, the
   cd-panel-in keyframes, --scrim-dialog, --r-card-lg, --shadow-hero.
   ============================================================ */

/* The scrim under a video DIMS but does not BLUR. Under the family's
   backdrop blur a 60fps film dropped frames on a 4K monitor. */
.cd-scrim.vd-scrim { -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }

/* A plain layer BESIDE the scrim that only centers the panel. No opacity,
   filter, backdrop-filter, mask or animation on it, ever: a <video> inside
   an element that carries one is drawn by the page instead of being handed
   straight to the screen. Clicks fall through it to the scrim. */
.vd-stage {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 24px;
  pointer-events: none;
}

/* The panel IS the video: 16:9, as wide as fits up to 1120px, never taller
   than the window. It takes the color its film opens on. The slide-up fills
   BACKWARDS only, so nothing is left animating once it has landed. */
.vd-panel {
  position: relative;
  width: min(100%, 1120px, calc((100dvh - 48px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: var(--vd-opens-on, var(--lavender));
  border-radius: var(--r-card-lg);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
  pointer-events: auto;
  animation: cd-panel-in 200ms cubic-bezier(.2,.8,.2,1) backwards;
}
.vd-video {
  display: block; width: 100%; height: 100%;
  background: var(--vd-opens-on, var(--lavender));
}

/* The close button lives on the stage, outside the panel (which clips its
   own corners). It is the family's .cd-close: hidden above 640px, shown at
   640px and under, at the top right of the screen. */
.vd-stage > .cd-close { pointer-events: auto; }

/* The feature card's play control is a real <button>: strip the browser's
   button look so it renders exactly as the gold disc it was. */
button.feature-card-play { -webkit-appearance: none; appearance: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* The pointer on the thumbnail is not only for looks. iPhone Safari turns a
   tap on a plain <div> into a click for a document-level handler only when
   the element looks clickable, and this is what makes it so. Keep it. */
.feature-card-thumb { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .vd-panel { animation: none !important; }
}

@media (max-width: 640px) {
  /* PHONES KEEP THE DESKTOP LAYOUT (Ryan, 2026-10-06). The site's other
     dialogs become a white full-screen sheet here; the video does not,
     because a 16:9 film on a white sheet leaves most of the screen blank.
     So nothing about the stage or the panel changes at this width. A tap on
     the dimmed page closes it, and because a phone has no Esc key the 44px
     close button stays. */
  .vd-stage > .cd-close { top: calc(16px + env(safe-area-inset-top)); }
  /* Touch floor: the disc keeps its 40px look (styles.css) and gets a 44px
     tap area. A true 44px disc narrows the copy beside it and wraps the
     Wingman card onto a third line at 390px. */
  button.feature-card-play { position: relative; }
  button.feature-card-play::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; }
}