/* ══════════════════════════════════════════════════════════════
   Keln — title-screen fallback frame.

   This file styles ONE thing: the still frame landing-title.js
   renders if /landing-cinema.js fails to load or throws. It is
   the safety net, not the experience.

   It used to look like a different product — two competing radial
   glows, a tiled CSS star pattern scrolling diagonally, a logo
   scaling on an infinite alternate loop. When landing-cinema.js
   broke, this is what visitors actually saw, and it is what read
   as juvenile. So it has been rebuilt to be a STILL FRAME of the
   real title screen: same black, same vignette, same mark, same
   mono prompt. If the fallback ever fires now, almost nobody will
   be able to tell.

   The one honest difference: no live star field. That needs the
   canvas the cinema owns. A CSS-tiled star pattern is the tell
   that gave the old frame away, so this uses a single static,
   non-repeating dust layer at very low opacity instead — texture,
   not pattern.
   ══════════════════════════════════════════════════════════════ */

#keln-title-screen {
  position: fixed;
  inset: 0;
  z-index: 2500;
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1),
              filter  .6s cubic-bezier(.4, 0, .2, 1);
}
#keln-title-screen.landing-title--out {
  opacity: 0;
  filter: brightness(1.3);
  pointer-events: none;
}

.landing-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: var(--s-10);
  text-align: center;
  overflow: hidden;

  background: #000;
  color: #e7eef8;
  /* --sans, matching landing-cinema.css. The fallback frame has to
     be indistinguishable from the real title screen, and the real
     title screen is the one surface that is not set in the serif. */
  font-family: var(--sans, Inter, system-ui, -apple-system, sans-serif);
}

/* Same vignette geometry as .kc__vignette, so the two frames are
   interchangeable at a glance. */
.landing-title::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%,
      rgba(91, 140, 255, .075) 0%,
      rgba(34, 211, 166, .035) 42%,
      transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%,
      transparent 42%,
      rgba(0, 0, 0, .55) 88%,
      rgba(0, 0, 0, .82) 100%);
}

/* ── Static dust ────────────────────────────────────────────
   Hand-placed points rather than a repeating background-size
   tile. A tile at 90px is readable as a grid within about two
   seconds of looking at it, which is precisely what made the old
   frame feel cheap. This does not scroll and does not repeat. */
.landing-title__stars {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    radial-gradient(1.1px 1.1px at 12% 18%,  rgba(255,255,255,.85), transparent),
    radial-gradient(1px   1px   at 27% 62%,  rgba(206,226,255,.7),  transparent),
    radial-gradient(1.3px 1.3px at 41% 26%,  rgba(255,255,255,.6),  transparent),
    radial-gradient(0.9px 0.9px at 55% 78%,  rgba(186,209,255,.75), transparent),
    radial-gradient(1.2px 1.2px at 68% 14%,  rgba(255,255,255,.8),  transparent),
    radial-gradient(1px   1px   at 79% 55%,  rgba(226,238,255,.65), transparent),
    radial-gradient(1.4px 1.4px at 88% 31%,  rgba(255,232,204,.7),  transparent),
    radial-gradient(0.9px 0.9px at 8%  74%,  rgba(255,255,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 34% 89%,  rgba(214,230,255,.6),  transparent),
    radial-gradient(1px   1px   at 62% 44%,  rgba(255,255,255,.7),  transparent),
    radial-gradient(1.2px 1.2px at 92% 71%,  rgba(186,209,255,.6),  transparent),
    radial-gradient(0.9px 0.9px at 19% 41%,  rgba(255,255,255,.5),  transparent),
    radial-gradient(1.1px 1.1px at 47% 8%,   rgba(236,242,255,.65), transparent),
    radial-gradient(1px   1px   at 73% 92%,  rgba(255,255,255,.6),  transparent);
  background-repeat: no-repeat;
}

/* ── Mark ───────────────────────────────────────────────────── */
.landing-title__logo {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(180px, 26vw, 300px);
  height: auto;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  filter:
    drop-shadow(0 0 1px rgba(226, 240, 255, .85))
    drop-shadow(0 0 22px rgba(34, 211, 166, .24))
    drop-shadow(0 0 60px rgba(34, 211, 166, .10));
  animation: landing-title-breathe 5.2s ease-in-out infinite;
}

@keyframes landing-title-breathe {
  0%, 100% {
    filter:
      drop-shadow(0 0 1px rgba(226, 240, 255, .85))
      drop-shadow(0 0 22px rgba(34, 211, 166, .24))
      drop-shadow(0 0 60px rgba(34, 211, 166, .10));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(240, 248, 255, 1))
      drop-shadow(0 0 34px rgba(34, 211, 166, .42))
      drop-shadow(0 0 92px rgba(91, 140, 255, .20));
  }
}

/* ── Prompt ─────────────────────────────────────────────────── */
.landing-title__prompt {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
  color: rgba(214, 230, 250, .74);
  animation: landing-title-prompt 3.4s ease-in-out infinite;
}

@keyframes landing-title-prompt {
  0%, 100% { opacity: .48; }
  50%      { opacity: 1; }
}

/* ── Legacy controls ────────────────────────────────────────
   Older markup shipped explicit Enter / Skip buttons. Kept so a
   cached page cannot render unstyled controls, restyled to the
   same type grammar as the prompt. */
.landing-title__enter,
.landing-title__skip {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5) var(--s-8);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;

  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: var(--t-xs);
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(214, 230, 250, .6);
  transition: color .2s ease;
}
.landing-title__enter:hover,
.landing-title__skip:hover { color: #ffffff; }
.landing-title__enter:focus-visible,
.landing-title__skip:focus-visible {
  outline: 1px solid rgba(34, 211, 166, .55);
  outline-offset: 4px;
  color: #ffffff;
}

.landing-title__note {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: var(--t-sm);
  color: rgba(150, 168, 192, .6);
}

@media (max-width: 560px) {
  .landing-title { gap: 26px; }
  .landing-title__logo { width: min(62vw, 230px); }
  .landing-title__prompt {
    font-size: var(--t-2xs);
    letter-spacing: .26em;
    text-indent: .26em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-title__logo,
  .landing-title__prompt { animation: none !important; }
  .landing-title__prompt { opacity: .8; }
}