/* base.css
   Page reset, stage, background and the ENTER gate.
   Loaded by index.html (order matters). */

html, body { margin: 0; height: 100%; background: #000; }

/* ============================================================
   STAGE + BACKGROUND (set from BACKGROUND in the config)
   ============================================================ */
.lc-stage {
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  background: #050605;
  touch-action: none;          /* phones: finger moves stay on the page (no scroll / bounce), so a finger rub is detected */
}
.lc-bg, .lc-bg-overlay, .lc-intro {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.lc-bg { object-fit: cover; background-size: cover; background-position: center; }
.lc-bg-overlay { background: #000; opacity: 0; pointer-events: none; }
.lc-intro {
  object-fit: cover; background: #000; z-index: 5;
  transition: opacity 800ms ease;
}
.lc-intro.is-done { opacity: 0; pointer-events: none; }

/* ============================================================
   START GATE ("click to enter" — unlocks sound in the browser)
   ============================================================ */
.lc-gate {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55); cursor: pointer;
  transition: opacity 600ms ease;
}
.lc-gate.is-hidden { opacity: 0; pointer-events: none; transition: opacity 350ms ease; }
.lc-gate.is-hidden button { opacity: 0; transition: opacity 120ms ease; }   /* button vanishes first */
.lc-gate button {
  font: 500 12px/1 "Barlow", system-ui, sans-serif; letter-spacing: 0.35em;
  color: #f2f2ee; background: transparent; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35); padding: 16px 28px 16px 32px;
  transition: border-color 300ms ease, background 300ms ease;
}
.lc-gate button:hover, .lc-gate button:focus-visible {
  border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); outline: none;
}