/* Logo Video Mask Reveal
   ─────────────────────────────────────────────────────
   Video plays full-screen behind a black overlay.
   The overlay has a logo-shaped hole (inverted CSS mask).
   On scroll the hole expands, then the overlay fades to 0
   so the full video is cleanly revealed.
   Mask images are set dynamically by JS for correct paths. */

.logo-video-section {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #fff;
  overflow: hidden;
  z-index: 1;
}

/* Full-bleed when embedded in post/page HTML card (inside .gh-content) */
.gh-content .logo-video-section {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Video — always full-viewport behind everything */
.logo-video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 0;
}

/* Black overlay with logo-shaped hole (inverted mask).
   mask-image is set by JS with the correct asset path.
   Two layers:  logo SVG (source) + solid fill (destination)
   Composite: XOR / exclude → solid everywhere EXCEPT the logo */
.logo-video-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 2;

  -webkit-mask-size:
    24vw auto,
    100% 100%;
  mask-size:
    24vw auto,
    100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Soft glow behind the logo */
.logo-video-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24vw auto;
  filter: blur(40px) brightness(1.6);
  opacity: 0.35;
  z-index: 3;
  will-change: background-size, opacity;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .logo-video-overlay {
    -webkit-mask-size:
      38vw auto,
      100% 100%;
    mask-size:
      38vw auto,
      100% 100%;
  }
  .logo-video-glow {
    background-size: 38vw auto;
    filter: blur(30px) brightness(1.4);
  }
}

@media (max-width: 600px) {
  .logo-video-overlay {
    -webkit-mask-size:
      52vw auto,
      100% 100%;
    mask-size:
      52vw auto,
      100% 100%;
  }
  .logo-video-glow {
    background-size: 52vw auto;
    filter: blur(22px) brightness(1.3);
    opacity: 0.3;
  }
}