/* --- Shared video facade styles ------------------------------------- */
/* Extracted from home.css when the feature landing pages moved to the site
   root and began rendering the same .v2-video markup. Pairs with
   /js/video-facade.js. Homepage-specific variants (.v2-feature-video,
   .v2-beat-video) stay in home.css, which loads AFTER this file. */

.v2-video {
  position: relative;
  border: 1px solid rgba(var(--ink-rgb), 0.14);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(var(--gold-rgb), 0.10), transparent 70%),
    var(--surface-media);
  aspect-ratio: 16 / 9;
  box-shadow: var(--sh-3);
}

.v2-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.v2-video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }

/* Poster is a graded frame from the video itself — the demo is shot in a
   bright room, so it's darkened and desaturated to sit on a near-black page. */
.v2-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-video.is-playing .v2-video-poster { display: none; }

/* Bottom-left, not centred — the posters are branded title cards and a
   centred ring lands straight on the logo. */
.v2-video-play {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: end;
  justify-content: start;
  gap: 0 var(--sp-4);
  padding: var(--sp-6);
  text-align: left;
  background: linear-gradient(180deg, transparent 28%, rgba(var(--scrim-rgb), 0.6) 62%, rgba(var(--scrim-rgb), 0.96) 100%);
  border: 0;
  color: var(--on-media);
  font-family: inherit;
  cursor: pointer;
}
.v2-video-play-ring { grid-column: 1; grid-row: 1 / 3; align-self: center; }
.v2-video-play-label { grid-column: 2; grid-row: 1; align-self: end; }
.v2-video-play-sub { grid-column: 2; grid-row: 2; align-self: start; margin-top: 2px; }
/* Only the hero has a sub-line. Everywhere else row 2 collapses to 0, so a
   68px ring spanning rows 1-2 sat 25px below a label pinned to row 1's end. */
.v2-video-play:not(:has(.v2-video-play-sub)) .v2-video-play-label {
  grid-row: 1 / 3;
  align-self: center;
}

/* Runtime badge — had NO rules at all, so these laid out in normal flow at
   the panel's top-left and were painted over by the absolute poster. */
.v2-runtime {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 3;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--on-media);
  background: rgba(var(--scrim-rgb), 0.78);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px var(--sp-2);
}
.v2-video.is-playing .v2-runtime { display: none; }

.v2-video-play-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: rgba(var(--scrim-rgb), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.v2-video-play:hover .v2-video-play-ring { background: var(--gold); border-color: var(--gold); color: var(--dark); }

.v2-video-play-label { font-size: 14px; font-weight: 500; }
.v2-video-play-sub { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmer); }
.v2-video.is-playing .v2-video-play { display: none; }