/* ==========================================================================
   LUNCUMO FOODS — "opening soon" gate
   Built by js/gate.js. Relies on the tokens, .btn, .link-underline and
   keyframes from style.css, which loads first on every page.
   ========================================================================== */

/* While locked, nothing but the gate is rendered — not painted, not focusable,
   not read out by a screen reader. */
html.gate-on { overflow: hidden; }
html.gate-on body > *:not(.gate) { display: none !important; }

.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  background: var(--ink, #08070a);
  color: var(--on-dark, #f6f2ea);
  transition: opacity 0.9s var(--ease, ease), transform 0.9s var(--ease, ease);
}
.gate--leaving {
  opacity: 0;
  transform: scale(1.025);
  pointer-events: none;
}

/* ---- Backdrop ------------------------------------------------------------- */
.gate__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gate__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: gate-drift 32s ease-in-out infinite alternate;
}
@keyframes gate-drift {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.14) translate(-2%, -1.5%); }
}
/* Darkest on the left where the type sits, a warm pool behind the ticket. */
.gate__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(52% 64% at 80% 52%, rgba(248, 152, 8, 0.16), transparent 70%),
    linear-gradient(92deg, rgba(8, 7, 10, 0.96) 0%, rgba(8, 7, 10, 0.88) 36%, rgba(8, 7, 10, 0.62) 68%, rgba(8, 7, 10, 0.74) 100%),
    linear-gradient(180deg, rgba(8, 7, 10, 0.72) 0%, transparent 24%, transparent 66%, rgba(8, 7, 10, 0.92) 100%);
}

.gate__wrap {
  width: 100%;
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding-inline: var(--gutter, 1.5rem);
}

/* ---- Top bar: the logo is the (silent) unlock ------------------------------ */
.gate__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.1rem, 3vh, 2rem);
}
.gate__logo {
  display: block;
  padding: 0.35rem 0.6rem 0.35rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;          /* five fast taps must not trigger zoom */
  transition: filter 0.45s var(--ease, ease), transform 0.45s var(--ease, ease);
}
.gate__logo img {
  display: block;
  width: clamp(150px, 16vw, 200px);
  height: auto;
  pointer-events: none;
}
.gate__place {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-mute, #a9a29a);
}

/* ---- Body ------------------------------------------------------------------ */
.gate__body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: clamp(1rem, 3vh, 2.5rem);
}
.gate__copy {
  display: grid;
  justify-items: start;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.gate__title {
  font-size: clamp(2.7rem, 7vw, 5.6rem);
  line-height: 0.97;
  letter-spacing: -0.02em;
}
.gate__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.gate__title .line > span {
  display: block;
  animation: rise 1.1s var(--ease-out, ease) backwards;
}
.gate__title .line:nth-child(1) > span { animation-delay: 0.15s; }
.gate__title .line:nth-child(2) > span { animation-delay: 0.28s; }
.gate__copy > .hero__place { animation: fade-up 0.9s var(--ease-out, ease) 0.05s backwards; }
.gate__lede {
  max-width: 46ch;
  text-wrap: balance;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: #ddd6cc;
  animation: fade-up 1s var(--ease-out, ease) 0.45s backwards;
}
.gate__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem 2rem;
  animation: fade-up 1s var(--ease-out, ease) 0.6s backwards;
}

/* ---- Footer ---------------------------------------------------------------- */
.gate__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-block: clamp(1rem, 2.4vh, 1.6rem);
}
/* the rule sits on the content edge, not out in the gutter */
.gate__foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter, 1.5rem);
  right: var(--gutter, 1.5rem);
  height: 1px;
  background: rgba(246, 242, 234, 0.12);
}
.gate__tag {
  font-family: var(--font-display, serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--brass, #d8a840);
}
.gate__links { display: flex; gap: 1.6rem; }
.gate__links a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute, #a9a29a);
  transition: color 0.25s var(--ease, ease);
}
.gate__links a:hover { color: var(--gold-hi, #fbc02d); }

/* ---- The student ticket ------------------------------------------------------
   Two paper halves with a bite taken out of each side of the tear line, so it
   reads as a voucher stub. The notches are masks, so the halves can be any
   height; the shadow is a filter on the wrapper so the masks do not clip it. */
.ticket {
  --notch: 11px;
  justify-self: end;
  width: min(100%, 22.5rem);
  color: var(--on-light, #17130f);
  transform: rotate(1.8deg);
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.55));
  animation: fade-up 1s var(--ease-out, ease) 0.5s backwards;
}
.ticket__top,
.ticket__bottom {
  position: relative;
  padding: 1.5rem 1.6rem;
  background: var(--cream, #f8f4ec);
}
.ticket__top {
  border-radius: 8px 8px 0 0;
  padding-bottom: 1.35rem;
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 100%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.ticket__bottom {
  border-radius: 0 0 8px 8px;
  padding-top: 1.35rem;
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle var(--notch) at 0 0, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0, #0000 97%, #000) right / 51% 100% no-repeat;
}
/* the perforation */
.ticket__bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--notch) + 8px);
  right: calc(var(--notch) + 8px);
  border-top: 2px dashed rgba(23, 19, 15, 0.22);
}
.ticket__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--clay, #b8461e);
}
.ticket__big {
  margin: 0.55rem 0 0.35rem;
  font-family: var(--font-display, serif);
  font-size: clamp(3.6rem, 7vw, 4.8rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.ticket__big small {
  font-size: 0.4em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--clay, #b8461e);
}
.ticket__sub { font-size: 1rem; color: var(--on-light-mute, #6b6157); }
.ticket__ask {
  margin-bottom: 0.85rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--on-light-mute, #6b6157);
}
.ticket__where {
  margin-top: 0.85rem;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--on-light-mute, #6b6157);
}

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .gate__body { grid-template-columns: 1fr; gap: 2.2rem; align-items: start; }
  .ticket { justify-self: center; width: min(100%, 24rem); transform: rotate(1deg); }
}
@media (max-width: 640px) {
  .gate__place { display: none; }
  .gate__links { gap: 1.2rem; }
}