/* ============================================================================
   /watch/ — the sixth funnel page (WD-367)
   ----------------------------------------------------------------------------
   The one funnel page with no conversion structure. It inherits the palette,
   the type, the spacing ladder and the arrival from `funnel.css`; everything
   here is the video list and nothing else.

   ⭐ THE VIDEOS STACK, THEY DO NOT GRID. Three across would present a MENU, and
   a menu gets skimmed and abandoned (root §18) — but more importantly the ORDER
   IS THE ARGUMENT: method, then proof, then the method on a set text. A stack
   is the only layout that says "in this order" without a word of instruction.

   ⛔ TOKENS ARE INHERITED FROM `.swf`, NEVER REDECLARED, and never on :root
   (site-wide landmine #3 — `--ink`/`--brand` are names host pages already use).
   ============================================================================ */

.swf-watch__intro { padding-bottom: 0; }

.swf-watch__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: calc(var(--swf-band) * 1.2);
}

/* ── one video ───────────────────────────────────────────────────────────── */

.swf-watch__play {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; border-radius: var(--swf-r-lg); overflow: hidden;
  background: var(--swf-base); cursor: pointer;
  /* the poster is the whole control, so the ratio is declared on the button as
     well: it holds its own height before the image decodes, and it holds it
     again for the iframe that replaces the image on press. */
  aspect-ratio: 16 / 9;
  box-shadow: var(--swf-shadow-lg);
  isolation: isolate;
}
.swf-watch__play:focus-visible { outline: 3px solid var(--swf-teal); outline-offset: 4px; }

.swf-watch__poster {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  transition: transform .5s var(--swf-arrive), filter .5s var(--swf-arrive);
}
.swf-watch__play:hover .swf-watch__poster,
.swf-watch__play:focus-visible .swf-watch__poster { transform: scale(1.03); filter: brightness(1.06); }

/* the glyph — the site's own teal, the button's own restraint: no ring, no
   YouTube red. A red play badge would read as a YouTube surface, and this page
   deliberately is not one. */
.swf-watch__glyph {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center;
  /* ⭐ MEASURED, not guessed: at 72px on a 1240px poster the glyph read as a speck in the
     desktop screenshot — the control the whole card exists for was the quietest thing on it.
     It scales with the poster instead of sitting at one size for every viewport. */
  width: clamp(64px, 5.6vw, 96px); height: clamp(64px, 5.6vw, 96px); border-radius: 50%;
  /* ⛔ NO `backdrop-filter` HERE. On a round element it renders as a rounded
     RECT the moment any ancestor carries a transform or a filter — and it looks
     perfectly round in a standalone prototype while shipping square on the live
     page (site-wide landmine #1). A flat translucent fill keeps the circle. */
  background: rgba(28, 29, 31, .62);
  color: var(--swf-teal);
  padding-left: 3px;                     /* the triangle's own optical centre */
  transition: background-color .5s var(--swf-arrive), color .5s var(--swf-arrive),
              scale .5s var(--swf-arrive);
}
.swf-watch__play:hover .swf-watch__glyph,
.swf-watch__play:focus-visible .swf-watch__glyph {
  background: var(--swf-teal); color: var(--swf-btn-ink); scale: 1.06;
}

/* the live embed, once pressed — it replaces the button in the same box */
.swf-watch__frame {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; border-radius: var(--swf-r-lg); overflow: hidden;
  background: #000; box-shadow: var(--swf-shadow-lg);
}

/* the length, stated quietly under the title — information, not a badge on the poster,
   which is where a marketing page would put it */
.swf-watch__meta {
  margin: 0 0 var(--swf-lg);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--swf-ink-soft);
}

.swf-watch__title {
  margin: var(--swf-step) 0 var(--swf-md);
  font-family: var(--swf-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, .9rem + 2.2vw, 2.4rem);
  line-height: 1.15; letter-spacing: -.01em; color: var(--swf-ink);
}
.swf-watch__note {
  margin: 0; max-width: 34rem;
  font-size: 1.02rem; line-height: 1.55; color: var(--swf-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .swf-watch__poster, .swf-watch__glyph { transition: none; }
  .swf-watch__play:hover .swf-watch__poster { transform: none; }
}