/* Lost Chapter Games — public landing page.
   Palette: deeper/richer take on the app palette (#0f1115 / #6c8cff / #e8eaed),
   with crest-star gold (#e8c06a) and waterfall ice-blue (#8fc3e8) accents.
   Owned by the landing page only — do not import into app pages. */

:root {
  --lc-bg: #090b12;            /* deep navy night */
  --lc-bg-2: #0f1115;          /* app base, used for footer band */
  --lc-text: #e8eaed;
  --lc-muted: #9aa0a6;
  --lc-gold: #e8c06a;          /* crest star gold */
  --lc-gold-dim: #b8933f;
  --lc-ice: #8fc3e8;           /* waterfall blue */
  --lc-accent: #6c8cff;        /* app accent, kept for focus rings */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lc-bg);
  color: var(--lc-text);
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Scene ---------- */

#scene {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 110%, #101625 0%, transparent 60%),
    var(--lc-bg);
}

#stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Faint radial glow that follows the pointer (JS moves it).
   A cheap hint of the future ripple/portal effect. */
#pointer-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(232, 192, 106, 0.10) 0%,
    rgba(143, 195, 232, 0.05) 45%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 20px 64px;
}

/* White-background workaround for the crest JPEG:
   the <img> sits over a soft moonlit-haze backdrop and uses
   mix-blend-mode: multiply, so pure white pixels take on the haze/scene
   colour ("fake transparency" that reads as a glow), while the mostly-dark
   crest artwork stays visible. A radial mask feathers the rectangle edge. */
.crest-wrap {
  position: relative;
  width: min(80vw, 420px);
  isolation: isolate;
}

.crest-halo {
  position: absolute;
  inset: -12%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(214, 222, 236, 0.16) 0%,
    rgba(160, 178, 205, 0.08) 45%,
    transparent 72%);
}

#crest {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%,
    #000 55%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 48%,
    #000 55%, transparent 96%);
  filter: brightness(1.28) contrast(1.04);
}

/* ---------- Text & button ---------- */

.title {
  margin: 20px 0 0;
  font-size: clamp(1.8rem, 6vw, 2.9rem);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-indent: 0.22em; /* re-centre tracked text */
  color: var(--lc-gold);
  text-shadow: 0 0 24px rgba(232, 192, 106, 0.35);
}

.tagline {
  margin: 8px 0 0;
  font-size: clamp(0.95rem, 3vw, 1.15rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--lc-ice);
  opacity: 0.85;
}

.enter-btn {
  display: inline-block;
  margin-top: 32px;
  padding: 13px 36px;
  border: 1px solid var(--lc-gold-dim);
  border-radius: 4px;
  color: var(--lc-gold);
  text-decoration: none;
  letter-spacing: 0.14em;
  font-size: 1rem;
  background: rgba(232, 192, 106, 0.06);
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.enter-btn:hover,
.enter-btn:focus-visible {
  background: rgba(232, 192, 106, 0.14);
  box-shadow: 0 0 22px rgba(232, 192, 106, 0.25);
  color: #f5dda2;
}

.enter-btn:focus-visible {
  outline: 2px solid var(--lc-accent);
  outline-offset: 3px;
}

/* WebGL lake scene mounts here (assets/landing/scene.js). Full-bleed layer
   behind .hero (which sits above it at z-index: 1). scene.js sizes its own
   canvas via JS; we just need the mount and canvas to fill #scene. */
#lake-mount {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

#lake-mount canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Once the 3D scene has booted, it fully replaces the 2D fallback layer
   (starfield canvas, pointer glow, flat crest image + halo). */
body.lc-webgl #stars,
body.lc-webgl #pointer-glow,
body.lc-webgl #crest,
body.lc-webgl .crest-halo,
body.lc-webgl .crest-wrap {
  display: none;
}

/* `lc-3d` is set by the inline gate script in index.php's <head>, BEFORE first
   paint, whenever the WebGL scene is going to boot. It hides the same fallback
   layer as .lc-webgl above, but early enough that the flat crest never paints
   at all — .lc-webgl arrives only after ~1.2MB of three.js has parsed, which is
   far too late and produced a visible flash-then-vanish.
   The watchdog in landing.js strips this class if the scene never signals ready,
   so a failed/blocked module still falls back to the 2D page. */
html.lc-3d #stars,
html.lc-3d #pointer-glow,
html.lc-3d #crest,
html.lc-3d .crest-halo,
html.lc-3d .crest-wrap {
  display: none;
}

/* JS-disabled visitors get the crest via <noscript>; it inherits the same
   blend/mask treatment the scripted <img> uses. */
.crest-noscript {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 55%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 48%, #000 55%, transparent 96%);
  filter: brightness(1.28) contrast(1.04);
}

/* The 3D scene carries the whole landing page: the crest model already says
   "Lost Chapter" in carved stone, and holding the arch is the way in. So the
   wordmark, tagline and "Enter the Archive" button are dropped from the 3D
   view — they only duplicated what the model shows.

   These are hidden on html.lc-3d (set pre-paint by the gate script in
   index.php) rather than body.lc-webgl, so they never flash before the scene
   boots. They stay fully visible on the fallback path, where there is no
   gateway to click and the button is the only route into the app. */
html.lc-3d .hero {
  position: absolute;
  inset: 0;
  padding: 0;
  animation: none;
  pointer-events: none;  /* let ripples reach the whole scene */
}

html.lc-3d .tagline,
html.lc-3d .enter-btn {
  display: none;
}

/* The <h1> stays in the document for SEO and screen readers — just not drawn.
   (Standard visually-hidden clip; do not swap for display:none.) */
html.lc-3d .title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Gateway hotspot (hold-to-login) ---------- */

/* Invisible hit-area sized and positioned over the 3D gateway every frame by
   scene.js — "click and hold the arch" IS the login control. Charge progress
   feedback lives in the 3D FX (core glow + spirals), not in any ring UI.
   The button stays in the DOM (focusable) for keyboard/AT users. */
#gateway-hotspot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 120px;   /* JS overrides with the gateway's projected bounds */
  height: 220px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  --hold: 0;
}

/* Hidden until the 3D scene is live and positioning it every frame — before
   that there's nothing on screen for it to sit over. */
body:not(.lc-webgl) #gateway-hotspot {
  display: none;
}

/* The ring UI is retired — the 3D charge FX is the progress feedback.
   The SVG stays in the markup for the --hold contract but never renders. */
.gateway-ring {
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg); /* progress starts at 12 o'clock */
  filter: drop-shadow(0 0 6px rgba(232, 192, 106, 0.35));
}

.gateway-ring-track {
  fill: rgba(9, 11, 18, 0.35);
  stroke: rgba(232, 192, 106, 0.28);
  stroke-width: 3;
}

.gateway-ring-progress {
  fill: none;
  stroke: var(--lc-gold);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 175.93; /* 2 * pi * r(28) */
  stroke-dashoffset: calc(175.93 * (1 - var(--hold, 0)));
  transition: stroke-dashoffset 0.05s linear;
}

#gateway-hotspot:hover .gateway-ring-track,
#gateway-hotspot:focus-visible .gateway-ring-track {
  stroke: rgba(232, 192, 106, 0.5);
}

#gateway-hotspot:focus-visible {
  outline: 2px solid var(--lc-accent);
  outline-offset: 4px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .gateway-ring-progress {
    transition: none;
  }
}

/* ---------- Gateway flash (hold-to-login completion burst) ---------- */

#gateway-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  --fx-x: 50%;
  --fx-y: 50%;
}

#gateway-flash.flash {
  animation: lc-flash 0.55s ease-out;
}

@keyframes lc-flash {
  0% {
    opacity: 0;
    background: radial-gradient(circle at var(--fx-x) var(--fx-y),
      rgba(255, 246, 223, 0.95) 0%,
      rgba(232, 192, 106, 0.55) 18%,
      transparent 55%);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background: radial-gradient(circle at var(--fx-x) var(--fx-y),
      rgba(255, 246, 223, 0.95) 0%,
      rgba(232, 192, 106, 0.55) 18%,
      transparent 65%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #gateway-flash.flash {
    animation-duration: 0.01s;
  }
}

/* ---------- Login modal ---------- */

.lc-modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lc-modal[hidden] {
  display: none;
}

.lc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.26s ease;
}

.lc-modal-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 380px);
  padding: 32px 28px 28px;
  border: 1px solid var(--lc-gold-dim);
  border-radius: 6px;
  background: linear-gradient(180deg, #12141d 0%, var(--lc-bg) 100%);
  box-shadow: 0 0 0 1px rgba(232, 192, 106, 0.08), 0 20px 60px rgba(0, 0, 0, 0.55);
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.26s ease, transform 0.26s ease;
}

.lc-modal.is-open .lc-modal-backdrop {
  opacity: 1;
}

.lc-modal.is-open .lc-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .lc-modal-backdrop,
  .lc-modal-panel {
    transition: opacity 0.15s linear;
    transform: none;
  }
}

.lc-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--lc-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.lc-modal-close:hover,
.lc-modal-close:focus-visible {
  color: var(--lc-gold);
  background: rgba(232, 192, 106, 0.1);
}

.lc-modal-title {
  margin: 0 0 20px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--lc-gold);
  font-size: 1.3rem;
}

.lc-modal form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.lc-modal label {
  margin-top: 10px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--lc-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

.lc-modal input {
  padding: 10px 12px;
  border: 1px solid #2a2f3d;
  border-radius: 4px;
  background: #0d0f16;
  color: var(--lc-text);
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

.lc-modal input:focus-visible {
  outline: 2px solid var(--lc-accent);
  outline-offset: 1px;
  border-color: var(--lc-accent);
}

.lc-modal-submit {
  margin-top: 20px;
  padding: 12px 20px;
  border: 1px solid var(--lc-gold-dim);
  border-radius: 4px;
  background: rgba(232, 192, 106, 0.1);
  color: var(--lc-gold);
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.lc-modal-submit:hover,
.lc-modal-submit:focus-visible {
  background: rgba(232, 192, 106, 0.18);
  box-shadow: 0 0 22px rgba(232, 192, 106, 0.25);
  color: #f5dda2;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--lc-bg-2);
  border-top: 1px solid #1a1f2b;
  text-align: center;
  padding: 18px 12px;
  color: var(--lc-muted);
  font-size: 0.85rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

.site-footer p { margin: 0; }

/* ---------- Motion (opt-in only) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .crest-wrap {
    animation: crest-float 6s ease-in-out infinite;
  }

  @keyframes crest-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }
}