/* IRMA'S — entrance gate
   The salon's own gesture: two warm panels standing closed like the shop
   doors, a thread of gold light along the seam, and on ENTER the doors part
   to hand the screen over to the film. */

/* Hidden by default and shown only once the pre-paint script has decided the
   visitor is gated. A visitor without JavaScript therefore never meets a door
   that cannot be opened — they land straight on the static hero. */
#gate { display: none; }
html.gated #gate {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: var(--ink);
  overflow: hidden;
}

/* The storefront still, held back so the lockup always wins the contrast. */
.gate__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  /* the source still is 908px wide; a gentle blur turns browser upscaling
     into deliberate depth of field rather than visible softness */
  filter: blur(1.5px) saturate(1.04) brightness(0.92);
  transform: scale(1.06);
}
/* Held back just enough for the lockup to win, never so far that the
   storefront stops reading as a storefront. */
.gate__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(115% 85% at 50% 50%, rgba(16, 14, 12, 0.1) 0%, rgba(16, 14, 12, 0.58) 62%, rgba(16, 14, 12, 0.86) 100%),
    linear-gradient(180deg, rgba(16, 14, 12, 0.55) 0%, transparent 24%, transparent 68%, rgba(16, 14, 12, 0.78) 100%);
}

/* ── the doors ─────────────────────────────────────────────────────── */

/* The doors read as smoked glass: the storefront is still there behind them,
   just held at a distance until they open. */
.gate__door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.6%; /* slight overlap so no seam pixel shows before opening */
  background:
    linear-gradient(180deg, rgba(32, 26, 21, 0.34) 0%, rgba(16, 14, 12, 0.6) 100%);
  backdrop-filter: blur(3px) saturate(0.94);
  -webkit-backdrop-filter: blur(3px) saturate(0.94);
  will-change: transform;
}
.gate__door--left  { left: 0;  border-right: 1px solid rgba(201, 162, 39, 0.34); }
.gate__door--right { right: 0; border-left:  1px solid rgba(201, 162, 39, 0.34); }

/* Warm light along the seam — the shop is lit inside, before you open it. */
.gate__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: clamp(140px, 22vw, 320px);
  transform: translateX(-50%);
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    46% 52% at 50% 50%,
    rgba(240, 214, 146, 0.5) 0%,
    rgba(201, 162, 39, 0.24) 38%,
    transparent 74%
  );
  opacity: 0;
}
html.has-motion .gate__seam { animation: gate-breathe 5.5s var(--ease-inout) 0.5s infinite; }
@keyframes gate-breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.95; }
}
html:not(.has-motion) .gate__seam { opacity: 0.7; }

/* ── lockup ────────────────────────────────────────────────────────── */

.gate__inner {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  padding: var(--gutter);
  text-align: center;
  max-width: 46rem;
}

/* A soft pool of shade that travels with the lockup, so the type keeps its
   contrast without darkening the whole storefront behind it. */
.gate__inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 165%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(16, 14, 12, 0.82) 0%, rgba(16, 14, 12, 0.52) 52%, transparent 78%);
  pointer-events: none;
}

.gate__lockup { display: grid; justify-items: center; gap: 0.35rem; }

.gate__estd {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

/* "Irma's" in the red script, the way it sits on the real sign. */
.gate__script {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 1rem + 5vw, 3.6rem);
  color: var(--red-lit);
  line-height: 1;
  text-shadow: 0 2px 24px rgba(200, 32, 44, 0.34);
}

.gate__name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 0.7rem + 2.9vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-lit) 0%, var(--gold) 46%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Safari occasionally drops transparent-clipped text on compositing changes. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gate__name { color: var(--gold); background: none; }
}

.gate__sub {
  margin-top: 0.55rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-mute);
}

.gate__actions { display: grid; justify-items: center; gap: 0.5rem; }
.gate__enter { min-width: min(19rem, 78vw); }
.gate__hint {
  font-size: var(--fs-small);
  color: var(--text-mute);
  letter-spacing: 0.04em;
}

/* ── entrance / exit states ────────────────────────────────────────── */

/* Reduced-motion and no-GSAP exit: a plain, quick crossfade. */
#gate.gate-fade {
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
}

/* Once entering, the gate must not swallow clicks meant for the site. */
html.entering #gate { pointer-events: none; }

@media (max-width: 480px) {
  .gate__door { backdrop-filter: none; -webkit-backdrop-filter: none; }
}