/**
 * Tenant background-video layer — visual treatment (2026-08-03).
 *
 * Ownership split (see PER_TENANT_THEMING_AND_DASHBOARD_CONTENT_2026-08-03.md Part A):
 *   - BrandTokens::emit() / ConsoleRenderer::brand_css_variables_for_tenant() (this plugin,
 *     Frontend/BrandTokens.php + Frontend/ConsoleRenderer.php) resolve the per-tenant DATA:
 *     `--lpos-glass-veil` (the tint) + `--lpos-bg-video` / `--lpos-bg-video-poster-css`
 *     (the media, read from the `lpos_tenant_bg_video_<slug>` / `lpos_tenant_bg_video_poster_
 *     <slug>` options the data fleet sets).
 *   - BlueprintRenderer::render_bg_video_layer() (UI fleet, Frontend/BlueprintRenderer.php)
 *     emits the actual markup: `.lpos-blueprint__bgvideo` > `.lpos-blueprint__bgvideo-media`
 *     (`<video autoplay muted loop playsinline poster="..." src="...">`) + `.lpos-blueprint__
 *     bgvideo-veil`.
 *   - console-tokens.css (UI fleet) owns ONLY that layer's position/z-index/object-fit
 *     structure (see its "TENANT BACKGROUND VIDEO LAYER" comment) plus the base
 *     `background:var(--lpos-glass-veil,transparent)` wiring on `.lpos-blueprint__bgvideo-veil`.
 *   - THIS file (data fleet) owns the VISUAL treatment on top of that structure: the
 *     reduced-motion / small-viewport static-poster swap, and any per-tenant polish — all
 *     token-driven (no hardcoded tenant selectors: `--lpos-accent` / `--lpos-glass-veil` /
 *     `--lpos-bg-video-poster-css` already resolve to the correct tenant via BrandTokens, so a
 *     plain, tenant-agnostic rule here is automatically correct for every tenant).
 *
 * No tenant has a video configured => `--lpos-bg-video-poster-css` is unset, `url(none)`-shaped
 * rules below no-op, and the existing dark radial-gradient background on
 * `.lpos-blueprint--console` (console-tokens.css, unchanged) shows straight through. Honest
 * empty — no placeholder video/poster is invented here.
 */

/* Reduced motion: hide the playing <video>, paint the tenant's poster frame (if any) as a plain
   background-image on the wrapper instead. A <video poster> attribute only paints while that
   element is itself visible and hasn't started playing, so once the video is display:none this
   is the only way a static frame still shows -- --lpos-bg-video-poster-css is already a ready
   `url("...")` expression (BrandPackRepository::bg_video_css_variables_for_tenant()), so this is
   a plain var() substitution, no CSS-side url()-wrapping needed. Falls through to `none` (no
   poster configured) -> the existing dark radial-gradient background on .lpos-blueprint--console
   shows through unchanged. */
@media (prefers-reduced-motion: reduce) {
  .lpos-blueprint__bgvideo-media {
    display: none;
  }
  .lpos-blueprint__bgvideo {
    background: var(--lpos-bg-video-poster-css, none) center / cover no-repeat;
  }
}

/* Mobile fallback: same static-poster treatment below the app's mobile breakpoint (matches
   console-tokens.css's own 767px cutoff) -- a decoded, looping background video is pure
   bandwidth/battery cost on a phone with little visual payoff at that viewport size. A tenant
   without a poster (only a video) simply shows no background layer on mobile, same honest-empty
   behavior as "no video configured" -- there is no separate mobile-specific video asset; if the
   data fleet later wants one, it slots in as its own `lpos_tenant_bg_video_mobile_<slug>` option
   + a matching `--lpos-bg-video-mobile` token, same convention as the desktop pair above. */
@media (max-width: 767px) {
  .lpos-blueprint__bgvideo-media {
    display: none;
  }
  .lpos-blueprint__bgvideo {
    background: var(--lpos-bg-video-poster-css, none) center / cover no-repeat;
  }
}

/* Full-motion desktop state: let the tenant's --lpos-glass-veil (already tenant-resolved by
   BrandTokens -- BioLimitless runs a lighter veil than the app default, see
   BrandPackRepository::biolimitless_default_brand_pack()) sit over the video at normal opacity;
   nothing else to add here, console-tokens.css's own `.lpos-blueprint__bgvideo-veil{background:
   var(--lpos-glass-veil,transparent)}` already reads it. This rule only exists so the reduced-
   motion/mobile media queries above have something to override, and to document the default
   explicitly rather than leaving it implicit. */
.lpos-blueprint__bgvideo-veil {
  transition: background var(--lpos-duration-base, 220ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
}

/**
 * Vimeo BACKGROUND upgrade (2026-08-04). See BrandPackRepository::bg_video_css_variables_for_
 * tenant() and assets/js/tenant-bg-video.js's own header comments for the full contract; short
 * version: BlueprintRenderer prints `lpos_tenant_bg_video_<slug>` verbatim as a `<video src>`,
 * which cannot play a Vimeo watch-page URL. When that option holds one anyway (BioLimitless's
 * only hero video is Vimeo-hosted, oEmbed-verified 2026-08-04 -- no direct .mp4/.webm exists to
 * use instead), tenant-bg-video.js swaps that broken `<video>` for a working
 * `.lpos-tenant-vimeo-embed` iframe in the same DOM slot (still inside `.lpos-blueprint__bgvideo`,
 * so it inherits that wrapper's existing position:absolute/inset:0/z-index:-1/overflow:hidden/
 * pointer-events:none from console-tokens.css, unedited).
 */

/* Hide the raw <video> the instant its own `src` attribute is a Vimeo URL -- a Vimeo watch-page
   URL can never successfully load as a <video src>, so this prevents a flash of a broken/black
   video box for the brief window before tenant-bg-video.js replaces the element outright. If JS
   is unavailable, this stays hidden and the console's own dark radial-gradient background shows
   through instead -- same "honest empty, no broken placeholder" posture as the no-video-configured
   case above, never a visibly broken element. */
video.lpos-blueprint__bgvideo-media[src*="vimeo.com"] {
  visibility: hidden;
}

/* The replacement iframe itself. Vimeo's own documented technique for a BACKGROUND-mode embed:
   oversize the iframe to a fixed 16:9 box, center it, and let the `.lpos-blueprint__bgvideo`
   wrapper's own `overflow:hidden` (console-tokens.css) crop it to "cover" -- `object-fit` support
   for <iframe> is inconsistent across browsers so this is the reliable cross-browser approach,
   not a plain width/height:100% fill (that would just stretch/distort the video). Decorative-only:
   pointer-events:none + no border, matches the `<video autoplay muted loop playsinline>` it
   replaces (tenant-bg-video.js also sets aria-hidden/tabindex="-1" on the element itself). */
.lpos-tenant-vimeo-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  object-fit: cover;
}