/* Vault Two Zero — hero video on slide 1 (#slide-525-20).
 *
 * Not from the WordPress source: added 2026-10-03 (Jim's request, Mike's go). The
 * markup is written by tools/build_site.py (add_hero_video), which also stamps the two
 * url()s below with a content hash; the behaviour is initHeroVideo in site.js; the
 * files are encoded by hero-video/scene/encode.sh. See hero-video/README.md.
 *
 * The slide keeps its own box (678 px desktop, 784 px tablet, 960 px phone):
 * the media layer is absolutely positioned inside it, so no layout moves.
 * Order of what a visitor sees:
 *   1. the first frame (the open vault), as the video element's own background, while it loads
 *   2. the video, once, muted
 *   3. the still of the video's own last frame, faded in over it
 * With prefers-reduced-motion the still is shown from the start and the video
 * never loads (its <source media> does not match either).
 */
#slide-525-20 {
  position: relative;
  overflow: hidden;
  background: #050607 none;            /* replaces the old photo; it is no longer fetched */
}
#slide-525-20 > .ct-div-block { position: relative; z-index: 1; }   /* the spacer that gives the slide its height */

.v20-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050607;
  container-type: size;                /* cqw / cqh below are this box */
  --ar-w: 2560;                        /* the wide render is 2560 x 904 */
  --ar-h: 904;
}
@media (max-width: 991px) {
  .v20-hero { --ar-w: 9; --ar-h: 16; } /* the portrait render is 1080 x 1920 */
}

/* The video, its first-frame background and the final still must sit in exactly the same place,
 * or the picture nudges when one replaces the other. First the plain way: fill the box, "cover". */
.v20-hero video,
.v20-hero-still,
.v20-hero-still img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.v20-hero video { background: #050607 url(/assets/images/hero-first-wide.webp?v=9133145430) 50% 50% / cover no-repeat; }
@media (max-width: 991px) {
  .v20-hero video { background-image: url(/assets/images/hero-first-portrait.webp?v=15949d5663); }
}

/* Then the exact way. "cover" leaves the media a fractional size and offset whenever the box is
 * cropped top and bottom (every width from 480 to 991 px), and browsers place a <video> and an
 * <img> half a pixel apart in that case (measured 2026-10-03: 0.5 CSS px at 480, 600 and 768 px).
 * Here both get the same whole-pixel box, centred on whole pixels, and fill it. */
@supports (width: round(up, 1cqw, 1px)) {
  .v20-hero video,
  .v20-hero-still {
    --w: max(100cqw, round(up, calc(100cqh * var(--ar-w) / var(--ar-h)), 1px));
    --h: max(100cqh, round(up, calc(100cqw * var(--ar-h) / var(--ar-w)), 1px));
    inset: auto;
    width: var(--w);
    height: var(--h);
    left: round(nearest, calc((100cqw - var(--w)) / 2), 1px);
    top: round(nearest, calc((100cqh - var(--h)) / 2), 1px);
    object-fit: fill;
  }
  .v20-hero-still img { object-fit: fill; }
  .v20-hero video { background-size: 100% 100%; }
}

.v20-hero-still { opacity: 0; transition: opacity .6s ease; }
.v20-hero.is-settled .v20-hero-still { opacity: 1; }
.v20-hero.is-instant .v20-hero-still { transition: none; }

/* the nav sits over the top of the frame ring: darken the top so it reads */
.v20-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 30%);
}

/* Wider than the 1920 px the frame was composed for. The slide is a fixed 678 px tall, so at
 * 2560 px "cover" would crop the door top and bottom and cut partner logos (checked: Fortinet
 * and CyberArk). Instead the hero grows with the screen and keeps its proportions; 904/2560 =
 * 35.3125vw, which is 678 px at 1920. The three slides share one slider box, so they grow
 * together. Shipped as the default on Mike's go of 2026-10-03 (he was told; one rule to
 * reverse). The alternative keeps 678 px and shows the vault as a 1920 px island. */
@media (min-width: 1921px) {
  #slide-525-20, #slide-840-20, #slide-572-20,
  #div_block-526-20, #div_block-841-20, #div_block-573-20 { height: 35.3125vw; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v20-hero video { display: none; }
  .v20-hero-still { opacity: 1; transition: none; }
}