body.landing-page { padding: 0; }

.landing {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.landing-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kept fairly bright on purpose: mix-blend-mode: difference (header.css,
     footer.css) needs real luminance/color variation in what's behind it to
     read as an "invert" - white text differenced against a heavily dimmed
     video stays close to white with barely any visible shift. */
  filter: brightness(0.85) saturate(0.85) blur(1px);
  z-index: 0;
}

.landing-content {
  /* No z-index here on purpose: a z-index would make this a stacking context,
     isolating header/footer so their mix-blend-mode: difference only blends
     against this (transparent) box instead of the .landing-bg-video behind it.
     Without it, tree order already paints this above the z-index:0 video. */
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* header is fixed (out of flow) and .showreel-box is absolutely positioned
     (out of flow) - footer is the only real flex child left, so push it to
     the bottom explicitly rather than relying on a second item to anchor it. */
  justify-content: flex-end;
}

.landing-content header,
.landing-content footer {
  color: #fff;
}

.showreel-box {
  /* Absolutely positioned + centered on .landing itself (not a flex child of
     .landing-content) so it sits at the exact viewport center regardless of
     header/footer height - header is position:fixed (out of flex flow) and
     footer's height would otherwise skew flex/margin-based centering toward
     the top by half the footer's height. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(63vw, 2000px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 44px 12px var(--bg);
}

.showreel-box:hover {
  box-shadow: 0 0 44px 12px var(--accent);
}

.showreel-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}