/* Door logo — split across the two doors, meeting at the seam.
   Sized to fill ALMOST THE ENTIRE SCREEN, on every device.

   This uses CSS min() rather than fixed breakpoint tiers. Reason,
   found by testing before shipping: fixed tiers only control ONE
   dimension cleanly. "Fill almost the whole screen" + "never clip
   a round shape" must hold on BOTH width and height at once — a
   normal tall phone and a short landscape phone can have the same
   width but need very different sizes, and independent width/height
   tier systems contradicted each other (4 of 7 test cases clipped).
   min(92vw, 92vh) picks whichever dimension is more restrictive,
   continuously, so it can't produce that contradiction. Still pure
   CSS — no JavaScript. */

:root {
  --logo-w: min(92vw, 92vh, 2400px);
}

/* On screens ≥800px, the site's own desktop layout (see index.html's
   min-width:800px block) pushes the door down by 78px to make room
   for the facade band header — so the door's actual usable height is
   (100vh - 78px), not the full viewport. Without this override, the
   92vh above sizes against the WRONG height on desktop and clips the
   bottom. Found by testing, not assumed. */
@media (min-width: 800px) {
  :root {
    --logo-w: min(92vw, calc((100vh - 78px) * 0.92), 2400px);
  }
}

.door-logo {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--logo-w) / 2);
  overflow: hidden;
  pointer-events: none;
}

.door-logo img {
  position: absolute;
  top: 50%;
  width: var(--logo-w);
  height: auto;
  transform: translateY(-50%);
  opacity: 0.9;
}

/* Left door shows the LEFT half of the logo: image's own left edge
   pinned to the box's left edge, the rest clipped by overflow:hidden.
   Box itself is pinned to the seam (the door's right edge). */
.door-logo.side-left {
  right: 0;
}
.door-logo.side-left img {
  left: 0;
}

/* Right door shows the RIGHT half of the logo: image's own right edge
   pinned to the box's right edge. Box itself is pinned to the seam
   (the door's left edge). */
.door-logo.side-right {
  left: 0;
}
.door-logo.side-right img {
  right: 0;
}