/* ══ bg-video module ═════════════════════════════════════════════════
   Self-contained background-video layer for OpEx Machina. Swap the
   media files in this directory to change the background — no markup
   changes required. */

.bgv-root{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#02050E;
}

.bgv-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transition:opacity 700ms ease;
}

.bgv-media.bgv-loaded{ opacity:1; }

/* Fallback image — also serves as the <video> poster so it shows
   instantly while the video buffers. */
.bgv-poster{
  background-size:cover;
  background-position:center center;
}

/* Subtle vignette so foreground text stays legible regardless of
   what the video shows. */
.bgv-root::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(2,5,14,0) 0%, rgba(2,5,14,0.45) 80%, rgba(2,5,14,0.7) 100%),
    linear-gradient(180deg, rgba(2,5,14,0.25) 0%, rgba(2,5,14,0) 25%, rgba(2,5,14,0) 75%, rgba(2,5,14,0.35) 100%);
}

/* ── Quality toggle ── */
.bgv-toggle{
  position:fixed;
  right:14px;
  top:14px;
  z-index:50;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  font:600 9px/1 "Courier New", Courier, monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  background:rgba(2,5,14,.45);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s, background .2s, opacity .2s;
  opacity:.55;
  user-select:none;
}
.bgv-toggle:hover{
  color:rgba(255,255,255,.95);
  border-color:rgba(255,255,255,.35);
  background:rgba(2,5,14,.65);
  opacity:1;
}
.bgv-toggle:focus-visible{
  outline:1px solid rgba(212,160,23,.7);
  outline-offset:2px;
  opacity:1;
}
.bgv-toggle-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(212,160,23,.7);
  box-shadow:0 0 6px rgba(212,160,23,.5);
}
.bgv-toggle[data-mode="low"] .bgv-toggle-dot{
  background:rgba(160,170,190,.5);
  box-shadow:none;
}

/* Respect motion preferences automatically. */
@media (prefers-reduced-motion: reduce){
  .bgv-media{ transition:none; }
}

/* On phones the toggle stays in the top corner with safe-area padding. */
@media (max-width:480px){
  .bgv-toggle{
    right:10px;
    top:max(14px, env(safe-area-inset-top));
    font-size:8px;
    padding:5px 8px;
  }
}