:root {
  color-scheme: dark;
  --page-bg: #050403;
  --focus-gold: #e7bd68;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--page-bg); }
body { min-height: 100svh; overflow: hidden; display: grid; place-items: center; }
.marquee-page {
  position: relative; width: 100vw; height: 100svh; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(85,47,16,.18), transparent 58%), #050403;
}
.marquee-frame {
  position: relative; width: min(100vw, calc(100svh * 4 / 3)); aspect-ratio: 4 / 3;
  max-height: 100svh; overflow: hidden; opacity: 0;
  animation: marquee-arrival 900ms ease-out forwards;
}
.marquee-art {
  display: block; width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
/* Invisible link placed over the painted GET TICKETS plaque. */
.enter-hit-area {
  position: absolute; left: 26.3%; top: 81.1%; width: 47.2%; height: 12.4%;
  border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.enter-hit-area::after {
  content: ""; position: absolute; inset: 3%; border-radius: 8px; opacity: 0;
  box-shadow: 0 0 0 2px rgba(231,189,104,.75), 0 0 24px rgba(231,189,104,.42);
  transition: opacity 180ms ease, transform 180ms ease;
}
.enter-hit-area:hover::after, .enter-hit-area:focus-visible::after {
  opacity: 1; transform: scale(1.015);
}
.enter-hit-area:active { transform: translateY(1px) scale(.995); }
.enter-hit-area:focus-visible { outline: none; }


/* Hidden Projection Booth access over the small ADMIT ONE / FATE AWAITS sign. */
.projection-booth-hit {
  position: absolute;
  z-index: 4;
  right: 16%;
  top: 62.5%;
  width: 5%;
  height: 13%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  cursor: default;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.projection-booth-hit:focus,
.projection-booth-hit:focus-visible {
  outline: none;
}

.fade-curtain {
  position: fixed; inset: 0; z-index: 10; pointer-events: none; background: #000; opacity: 0;
}
.marquee-page.is-entering .fade-curtain { animation: fade-to-stage 720ms ease-in forwards; }
.marquee-page.is-entering .marquee-frame {
  transform-origin: 50% 58%; animation: step-inside 720ms ease-in forwards;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@keyframes marquee-arrival {
  from { opacity: 0; transform: scale(1.015); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fade-to-stage { from { opacity: 0; } to { opacity: 1; } }
@keyframes step-inside {
  from { opacity: 1; transform: scale(1); filter: brightness(1); }
  to { opacity: .35; transform: scale(1.035); filter: brightness(.45); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-frame { animation: none; opacity: 1; }
  .marquee-page.is-entering .fade-curtain,
  .marquee-page.is-entering .marquee-frame { animation-duration: 1ms; }
}
/* ===== MOBILE PORTRAIT POLISH ===== */
@media (max-width: 600px) and (orientation: portrait) {
  .marquee-page {
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
  }

  .marquee-frame {
    width: 100vw;
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 3;
  }

  .marquee-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
  }
}

/* ===== MARQUEE MEMORY =====
   Hidden unless a movie has actually been accepted.
   This masks only the existing tagline area; the painted theater and branding remain untouched.
*/
.marquee-memory {
  position: absolute;
  z-index: 3;
  left: 22.35%;
  top: 34%;
  width: 55.3%;
  height: 9.5%;
  display: none;
  place-items: center;
  padding: .3% 2.1%;
  pointer-events: none;
  overflow: hidden;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(120, 94, 58, .10) 0,
      rgba(120, 94, 58, .10) 1px,
      transparent 1px,
      transparent 15px
    ),
    #dcc58f;
  box-shadow:
    inset 0 0 18px rgba(74, 48, 24, .10),
    0 0 2px rgba(43, 28, 16, .14);
}

.marquee-memory.is-visible {
  display: grid;
}

.marquee-memory-title {
  width: 100%;
  text-align: center;
  color: #3c291b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 3.25vw, 3rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}

.marquee-memory-medium .marquee-memory-title {
  font-size: clamp(1.2rem, 2.85vw, 2.65rem);
}

.marquee-memory-long .marquee-memory-title {
  font-size: clamp(1.02rem, 2.45vw, 2.25rem);
  letter-spacing: .02em;
}

.marquee-memory-very-long .marquee-memory-title {
  font-size: clamp(.9rem, 2.05vw, 1.95rem);
  letter-spacing: .01em;
}

@media (max-width: 600px) and (orientation: portrait) {
  .marquee-memory {
    left: 14.6%;
    top: 34.1%;
    width: 70.8%;
    height: 10.1%;
    padding: .35% 2.6%;
  }

  .marquee-memory-title {
    font-size: clamp(.98rem, 4.7vw, 1.55rem);
    line-height: .9;
  }

  .marquee-memory-medium .marquee-memory-title {
    font-size: clamp(.9rem, 4.25vw, 1.42rem);
  }

  .marquee-memory-long .marquee-memory-title {
    font-size: clamp(.8rem, 3.7vw, 1.24rem);
  }

  .marquee-memory-very-long .marquee-memory-title {
    font-size: clamp(.7rem, 3.2vw, 1.08rem);
  }
}