*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#000;color:#fff;overflow:hidden}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}

/* ---------- Gate ---------- */
.gate-wrap{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
}
.gate #pw{
  width:280px;height:38px;padding:0 12px;
  background:#000;color:#fff;
  border:1px solid #222;border-radius:2px;
  outline:none;font-size:15px;letter-spacing:.18em;
  caret-color:#fff;
  transition:border-color .15s ease, transform .05s ease;
}
.gate #pw:focus{border-color:#333}
.gate #pw.shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}

/* ---------- Stage (intro + hero share this) ---------- */
.stage{
  position:fixed;inset:0;
  background:#000;
  user-select:none;-webkit-user-select:none;
}
.stage .layer{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
}

/* Base image fills the screen, cropping as needed. */
.stage .layer.base{
  object-fit:cover;
  object-position:center;
  -webkit-user-drag:none;
}

/* SVG hotspot layer uses preserveAspectRatio="slice" so it crops the same
   way as the image's object-fit:cover — hotspot shapes stay perfectly
   aligned with the icons in the underlying PNG regardless of viewport size. */
.stage .layer.hotspots{
  pointer-events:auto;
}

/* Video sits on top of the hero layer during /intro. */
.stage .layer.video{
  object-fit:cover;
  object-position:center;
  opacity:1;
  transition:opacity 600ms ease;
  pointer-events:none;
  z-index:2;
}
.hero.fading .stage .layer.video{opacity:0}

/* While the video is showing we keep the hotspot layer underneath but
   inactive so the user can't click through. */
.hero.with-video .stage .layer.hotspots{pointer-events:none}

/* ---------- Hotspots ---------- */
.hotspot{
  fill:transparent;
  cursor:pointer;
  transition:fill 120ms linear, opacity 120ms linear;
  stroke:none;
  outline:none;
}
.hotspot:hover{
  fill:url(#brightPat);
}
.hotspot.clicked{
  fill:url(#dimPat) !important;
  pointer-events:none;
  cursor:default;
}