/* =========================================================
   03 · Video (piece B)
   Click-to-load YouTube facade as a calm title card: the client's steel
   cloud render on light aluminum, an engraved two-voice title, one orange play button.
   The card opens from an inset, rounded shape to the container width as it
   scrolls in (js/sections/video.js). Nothing leaks outside the frame.
   ========================================================= */


.video__head { align-items: end; row-gap: 32px; }
.video__title { grid-column: 1 / span 7; }
.video__copy { grid-column: 9 / span 4; display: grid; gap: 20px; justify-items: start; }
.video__copy .link { color: var(--graphite); }
.video__copy p { font-size: 16px; line-height: 1.6; color: rgba(26, 27, 30, .84); }

.vid-stage { position: relative; margin-top: clamp(64px, 7vw, 112px); }

/* ---------- The card: a dark gunmetal display set into the aluminum (the clipped, revealed element) ---------- */
.vid-frame {
  --inset: 0%; --r: 0px;
  position: relative; z-index: 1; width: min(calc(100% - var(--side) * 2), var(--maxw)); aspect-ratio: 16 / 9;
  margin-inline: auto;
  background: var(--gunmetal-900);
  clip-path: inset(var(--inset) round var(--r));
  will-change: clip-path;
}
.vid-frame.is-playing { clip-path: none; background: var(--gunmetal-950); }
.vid-screen { position: absolute; inset: 0; overflow: hidden; }
.vid-screen::after { /* recessed: dark lip at the top, soft inner shadow, light bevel at the bottom */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, .8),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset 0 18px 36px -18px rgba(0, 0, 0, .75),
    inset 0 0 0 1px rgba(0, 0, 0, .5);
}
.vid-frame.is-playing .vid-screen::after { display: none; }
.vid-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Poster: the client's machined-steel cloud (cut-out), lit on the dark display ---------- */
.vid-poster {
  position: absolute; inset: 0; overflow: hidden; cursor: pointer; color: var(--ink-on-dark); isolation: isolate;
  background:
    radial-gradient(55% 65% at 50% 42%, rgba(236, 238, 240, .14), rgba(236, 238, 240, 0) 70%),
    var(--gunmetal-900) url("../../assets/img/tex/brushed-dark.webp") center / 1024px repeat;
}
.vid-poster__img { /* depth layer: drifts with scroll and pointer */
  position: absolute; left: 26%; right: 26%; top: 13%; bottom: 25%;
  will-change: transform;
}
.vid-poster__img img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)) drop-shadow(0 -1px 0 rgba(255, 255, 255, .12));
}
.vid-poster__tint { display: none; }

.vid-poster__meta, .vid-poster__title { position: absolute; }
.vid-poster__meta {
  left: calc(var(--inset) + clamp(20px, 4.4vw, 56px)); top: calc(var(--inset) + clamp(18px, 4vw, 52px));
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-on-dark);
}
.vid-poster__title {
  left: calc(var(--inset) + clamp(20px, 4.4vw, 56px)); bottom: calc(var(--inset) + clamp(20px, 4.4vw, 56px));
  margin: 0; max-width: 70%;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.04;
  color: var(--alu-50); text-shadow: 0 -1px 0 rgba(0, 0, 0, .6);
}
.vid-poster__title em { font-style: italic; font-weight: 400; color: var(--alu-400); }

/* Play button: a clean orange disc centred on the logo; the card's single orange element; magnetic */
.vid-play {
  position: absolute; right: calc(var(--inset) + clamp(20px, 4.4vw, 56px)); bottom: calc(var(--inset) + clamp(20px, 4.4vw, 56px)); width: 84px; height: 84px;
  border-radius: 50%; display: grid; place-items: center; will-change: transform;
}
.vid-play__core {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ember-500); color: var(--graphite);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 30px -8px rgba(255, 102, 0, .6);
  transition: transform 600ms var(--ease-out), background var(--dur-hover), box-shadow var(--dur-hover);
}
.vid-play__core svg { width: 28px; height: 28px; fill: currentColor; transform: translateX(2px); }
.vid-play:hover .vid-play__core, .vid-play:focus-visible .vid-play__core {
  transform: scale(1.08); background: var(--ember-400);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 36px -8px rgba(255, 102, 0, .75);
}
.vid-play:focus-visible { outline: 2px solid var(--ember-500); outline-offset: 6px; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .video__title, .video__copy { grid-column: 1 / -1; }
  .video__copy { max-width: 520px; }
}
@media (max-width: 640px) {
  .vid-poster__title { display: none; }
  .vid-poster__img { left: 8%; right: 30%; top: 18%; bottom: 14%; }
  .vid-play { bottom: calc(var(--inset) + 16px); right: calc(var(--inset) + 16px); }
  .vid-play, .vid-play__core { width: 64px; height: 64px; }
  .vid-play__core svg { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .vid-frame { clip-path: none; }
}

/* Poster = the hero's chrome logo loop (assets/video/hero-loop.mp4), full-bleed with a little overscan for the drift */
.vid-poster { background: #000; }
.vid-poster__img { left: -2%; right: -2%; top: -2%; bottom: -2%; }
.vid-poster__loop { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .vid-poster__img { left: -2%; right: -2%; top: -2%; bottom: -2%; } }