/* The fixed world: the film's night sky, the window bars, the blimp, a black scrim, grain. */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky-1); }
.sky {
  position: absolute; inset: -2% 0;
  background:
    radial-gradient(130% 90% at 60% 110%, rgba(6, 60, 150, .55), transparent 60%),
    linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 30%, var(--sky-2) 72%, var(--sky-3) 100%);
}
/* masks sit on wrapper divs, never on the <video> itself (WebKit renders masked video unreliably) */
.city {
  position: absolute; inset: 0;
  transform: translate3d(0, var(--cy, 100%), 0); will-change: transform;
  /* its own sky melts into the page's sky */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 12%, #000 46%);
          mask-image: linear-gradient(180deg, transparent 0, transparent 12%, #000 46%);
}
.city video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.blimp {
  position: absolute; left: 50%; top: 50%;
  width: var(--bw, 64vw); aspect-ratio: 1756 / 824;
  transform: translate(-50%, -50%) translate3d(var(--bx, 0), var(--by, 0), 0) scale(var(--bs, 1)) rotate(var(--br, 0deg));
  will-change: transform;
}
.blimp-base, .blimp-sign { position: absolute; inset: 0; width: 100%; height: 100%; }
.blimp-sign {
  -webkit-mask: url(../assets/img/blimp-mask.png) center / 100% 100% no-repeat;
          mask: url(../assets/img/blimp-mask.png) center / 100% 100% no-repeat;
}
.blimp-video { width: 100%; height: 100%; object-fit: fill; }
/* the window the film shot looks through: a darker pane with two black mullions */
.bars {
  position: absolute; left: 0; top: -5%; bottom: -5%; width: 15.6vw;
  background: linear-gradient(90deg, rgba(0, 4, 20, .62), rgba(0, 4, 20, .5));
  /* the pane fades out under the nav and well above the name and the tagline, so no hard edge crosses any text.
     Positions are in vh because the box starts 5vh above the screen. */
  -webkit-mask-image: linear-gradient(180deg, transparent calc(5vh + 64px), #000 calc(5vh + 150px), #000 46vh, transparent 56vh);
          mask-image: linear-gradient(180deg, transparent calc(5vh + 64px), #000 calc(5vh + 150px), #000 46vh, transparent 56vh);
  transform: translate3d(calc(var(--barx, 0px) + var(--barp, 0px)), 0, 0); will-change: transform;
}
.bars i { position: absolute; top: 0; bottom: 0; background: #010208; }
.bars i:nth-child(1) { left: 27%; width: 13%; }
.bars i:nth-child(2) { right: 0; width: 14%; }
.dim { position: absolute; inset: 0; background: #010309; opacity: 0; will-change: opacity; }
/* film grain: a baked tile of black and white specks (no blend mode over the video), drifting slowly */
.grain {
  position: fixed; inset: -40px; z-index: 55; opacity: .4; pointer-events: none;
  background-size: 180px 180px; animation: grain 2.4s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-9px, 7px); } 50% { transform: translate(8px, -6px); }
  75% { transform: translate(-6px, -9px); } 100% { transform: translate(0, 0); }
}
.is-reduced .grain { animation: none; }
/* phones: the whole blimp and its whole sign stay inside the screen, a little above centre.
   The hull spans about 0.5% to 94.5% of its box, so it is nudged right to sit centred. */
.is-mobile .blimp { --bw: min(96vw, 130svh); }
.is-mobile .bars { width: 10vw; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 85%); mask-image: linear-gradient(180deg, #000 45%, transparent 85%); }