/* ── Background Video ───────────────────────────────────────────────────────── */ .bkbv-outer { box-sizing: border-box; position: relative; overflow: hidden; } .bkbv-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .bkbv-media video, .bkbv-media iframe { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border: none; pointer-events: none; } /* 16:9 aspect — ensure iframe covers the box */ .bkbv-media iframe { /* Always at least 100vw wide and 56.25vw tall (16:9) */ min-width: 100%; min-height: 100%; width: 177.78vh; /* 16/9 × 100vh */ height: 56.25vw; /* 9/16 × 100vw */ } .bkbv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.5s ease; } /* hide poster when video is playing */ .bkbv-outer.bkbv--playing .bkbv-poster { opacity: 0; } .bkbv-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .bkbv-content { position: relative; z-index: 2; display: flex; flex-direction: column; } .bkbv-content, .bkbv-content p, .bkbv-content h1, .bkbv-content h2, .bkbv-content h3, .bkbv-content h4, .bkbv-content h5, .bkbv-content h6 { color: inherit; } @media (prefers-reduced-motion: reduce) { .bkbv-media video, .bkbv-media iframe { display: none !important; } .bkbv-outer.bkbv--playing .bkbv-poster { opacity: 1; } }