/* PLUGGED LA CUTZ — entrance gate */
#gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  /* the split panels carry the black — a transparent root lets the
     recede actually reveal the hero film beneath */
  background: transparent;
  min-height: 100svh;
}
/* non-cinematic exits fade as one surface, so the root goes solid */
#gate.gate-fade { background: var(--ink); }

/* two recede panels sit behind the content; they carry the split animation */
.gate__panel {
  position: absolute;
  inset: 0;
  background: var(--ink);
}
/* hex-angled meeting edge (±30° echoes the ceiling geometry); the halves
   overlap a hair so no seam shows over the transparent root */
.gate__panel--left  { clip-path: polygon(0 0, 54.15% 0, 46.15% 100%, 0 100%); }
.gate__panel--right { clip-path: polygon(53.85% 0, 100% 0, 100% 100%, 45.85% 100%); }

.gate__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 2.25rem;
  padding: 2rem;
  text-align: center;
}

.gate__hex {
  position: absolute;
  z-index: 1;
  width: min(72rem, 92vw);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  pointer-events: none;
}
.gate__hex polygon {
  fill: none;
  stroke: var(--silver);
  stroke-width: 1;
  opacity: 0.22;
}

.gate__lockup { display: grid; justify-items: center; gap: 0.9rem; color: var(--marble); }

.gate__estd {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--smoke);
}

.gate__name {
  font-family: var(--font-serif);
  font-weight: 600;
  /* single line at every width — the lockup never wraps or clips */
  font-size: clamp(1.5rem, 0.4rem + 5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.gate__sub {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--silver);
}
.gate__sub::before, .gate__sub::after {
  content: '';
  width: 3.5rem;
  height: 1px;
  background: var(--line);
}

.gate__actions { display: grid; justify-items: center; gap: 0.85rem; }

.gate__enter { min-width: 15rem; }

.gate__hint {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: var(--smoke);
}

/* gate leaving states (driven by JS) */
html.entering #gate { pointer-events: none; }

/* non-cinematic exits (reduced motion / no GSAP) crossfade instead */
#gate.gate-fade { opacity: 0; transition: opacity 300ms ease; }