/* ============================================================
   Celva Bio: "Prefer to watch?" video intro
   A drop-in band offering a video alternative to reading a
   long-form page. Pairs with scripts/video-intro.js.

   Markup: a .watch section wrapping intro copy + a .video-intro
   player (poster facade that swaps in a YouTube iframe on play).

   Depends only on global tokens (--ink, --ink-muted, --border)
   from colors_and_type.css, so it is portable to any page that
   loads site.css. The display serif intentionally matches the
   long-form pages' 'Fraunces' fallback stack.
   ============================================================ */

.watch {
  --watch-gold: #8a6a1f;
  --watch-gold-bright: #c69a3d;
  --watch-navy: #0e1526;
  /* full-width within the article grid column; inner elements self-center.
     (auto side-margins would shrink-wrap a stretch grid item.) */
  margin: 44px 0 8px;
  text-align: center;
}

/* ----- intro copy ----- */
.watch__kicker {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--watch-gold); margin: 0 0 14px;
  max-width: none; /* opt out of the global p reading-measure so the centered eyebrow spans the band */
}
.watch__title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.05;
  letter-spacing: -0.015em; color: var(--ink);
  margin: 0 auto 16px; max-width: 18ch; text-wrap: balance;
}
.watch__title em { font-style: italic; color: var(--watch-gold); }
.watch__sub {
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6;
  color: var(--ink-muted); margin: 0 auto 28px; max-width: 600px;
  text-wrap: pretty;
}

/* ----- figure + caption ----- */
.watch__figure { margin: 0; }
.watch__cap {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted); margin: 16px 0 0;
}
.watch__cap::after { content: "  \2193"; } /* down arrow */

/* ============ reusable player (poster facade) ============ */
.video-intro {
  position: relative; width: 100%; max-width: 900px;
  margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  background: var(--watch-navy, #0e1526);
  box-shadow:
    0 0 0 1px rgba(198, 154, 61, 0.30),
    0 30px 60px -30px rgba(11, 29, 58, 0.55),
    0 8px 20px -12px rgba(11, 29, 58, 0.35);
}
/* fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .video-intro { height: 0; padding-bottom: 56.25%; }
}

.video-intro__trigger {
  position: absolute; inset: 0; display: block;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  background: none; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.video-intro__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0;
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.video-intro__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(8, 12, 22, 0.12), rgba(8, 12, 22, 0.44) 100%),
    linear-gradient(to top, rgba(8, 12, 22, 0.55), rgba(8, 12, 22, 0) 48%);
}

/* play button */
.video-intro__play {
  position: absolute; top: 50%; left: 50%;
  width: clamp(58px, 8vw, 78px); aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(180deg, #d8ab47 0%, #9b7620 100%);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 360ms cubic-bezier(.16, 1, .3, 1), box-shadow 360ms ease;
}
.video-intro__play svg {
  width: 42%; height: 42%; margin-left: 8%; /* optical centering of the triangle */
  fill: #fff; display: block;
}
.video-intro__play::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 0; transition: opacity 360ms ease, transform 360ms ease;
}

/* hover / focus */
.video-intro__trigger:hover .video-intro__poster,
.video-intro__trigger:focus-visible .video-intro__poster { transform: scale(1.035); }
.video-intro__trigger:hover .video-intro__play,
.video-intro__trigger:focus-visible .video-intro__play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 16px 38px -8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.video-intro__trigger:hover .video-intro__play::before,
.video-intro__trigger:focus-visible .video-intro__play::before { opacity: 1; transform: scale(1.04); }
.video-intro__trigger:focus-visible {
  outline: 2px solid var(--watch-gold-bright, #c69a3d); outline-offset: 3px;
}

/* playing state: hide facade, reveal the API-driven player */
.video-intro.is-playing .video-intro__trigger { visibility: hidden; }
.video-intro__player { position: absolute; inset: 0; z-index: 2; }
.video-intro__player iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* sound toggle: fades in on the band that is currently playing (centered) */
.video-intro__sound {
  position: absolute; z-index: 4; top: 12px; right: 12px;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(8, 12, 22, 0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease, background 200ms ease;
}
.video-intro.is-active .video-intro__sound { opacity: 1; transform: none; pointer-events: auto; }
.video-intro__sound:hover { background: rgba(8, 12, 22, 0.82); }
.video-intro__sound svg { width: 20px; height: 20px; display: block; }
.video-intro__sound:focus-visible {
  outline: 2px solid var(--watch-gold-bright, #c69a3d); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .video-intro__poster,
  .video-intro__play,
  .video-intro__play::before { transition: none !important; }
}

@media (max-width: 700px) {
  .watch { margin-top: 32px; }
  .video-intro { border-radius: 12px; }
}