/*
  LiminalSpace Games: "Flicker" studio intro (shared, self-hosted)
  Source of truth for the look: brand/intro/liminalspace-flicker-intro.original.html
  Fonts are bundled locally (SIL OFL), so there are no external requests and it is portal-safe.
*/
@font-face { font-family: 'LS Space Grotesk'; font-weight: 400; font-style: normal; font-display: block; src: url('./fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'LS Space Grotesk'; font-weight: 500; font-style: normal; font-display: block; src: url('./fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'LS Barlow Condensed'; font-weight: 400; font-style: normal; font-display: block; src: url('./fonts/barlow-condensed-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'LS Barlow Condensed'; font-weight: 600; font-style: normal; font-display: block; src: url('./fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }

.ls-intro {
  --ls-bg: #141416;
  --ls-light: #F2E7B6;
  --ls-text: #F2E7B6;
  --ls-sub: #8E8A78;
  --ls-font: 'LS Space Grotesk', system-ui, sans-serif;
  --ls-size: 48px;
  --ls-weight: 500;
  --ls-track: -0.02em;
  --ls-dur: 4.2s;

  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  background: var(--ls-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

/* Full-screen overlay mode, used when the intro plays on top of a loading game */
.ls-intro.ls-overlay {
  position: fixed;
  inset: 0;
  min-height: 0;
  z-index: 2147483000;
  transition: opacity 0.35s ease;
}
.ls-intro.ls-overlay.is-leaving { opacity: 0; pointer-events: none; }

.ls-logo { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 6vmin, 44px); }

/* ---------- versions ---------- */
.ls-intro[data-version="inverted"] { --ls-bg: #EEE7CF; --ls-light: #141416; --ls-text: #141416; --ls-sub: #6E6852; }
.ls-intro[data-version="ember"] {
  --ls-bg: #160D0B; --ls-light: #F2643C; --ls-text: #F2643C; --ls-sub: #A07A6E;
  --ls-font: 'LS Barlow Condensed', system-ui, sans-serif; --ls-size: 60px; --ls-weight: 600; --ls-track: 0.02em;
}
.ls-intro[data-version="ember"] .ls-name { text-transform: uppercase; font-size: min(var(--ls-size), 12vw); }
.ls-intro[data-version="horizontal"] { --ls-size: 40px; }
.ls-door-arch, .ls-eyes { display: none; }
.ls-intro[data-version="arched"] .ls-door-rect { display: none; }
.ls-intro[data-version="arched"] .ls-door-arch { display: inline; }
.ls-intro[data-version="watcher"] .ls-eyes { display: inline; }

@media (min-width: 520px) {
  .ls-intro[data-version="horizontal"] .ls-logo { flex-direction: row; gap: 32px; }
  .ls-intro[data-version="horizontal"] .ls-mark { width: 104px; }
  .ls-intro[data-version="horizontal"] .ls-wordmark { align-items: flex-start; }
  .ls-intro[data-version="horizontal"] .ls-games { padding-left: 0; }
}

/* ---------- mark ---------- */
.ls-mark { width: min(170px, 38vw); height: auto; aspect-ratio: 170 / 262; overflow: visible; flex: none; display: block; }
.ls-door  { fill: var(--ls-light); }
.ls-spill { fill: var(--ls-light); opacity: 0.32; }
.ls-panel { fill: var(--ls-bg); }
.ls-knob  { fill: var(--ls-light); }
.ls-eyes circle { fill: var(--ls-bg); }
.ls-lit   { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--ls-light) 45%, transparent)); }

/* ---------- wordmark ---------- */
.ls-wordmark { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ls-name {
  font-family: var(--ls-font);
  font-size: min(var(--ls-size), 13vw);
  font-weight: var(--ls-weight);
  letter-spacing: var(--ls-track);
  line-height: 1;
  white-space: nowrap;
  color: var(--ls-text);
}
.ls-name span { font-weight: 400; opacity: 0.72; }
.ls-games {
  font-family: 'LS Space Grotesk', system-ui, sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.55em; padding-left: 0.55em; color: var(--ls-sub);
}

/* ---------- small "tap to skip" hint (overlay mode only) ---------- */
.ls-skip {
  position: absolute; right: 16px; bottom: 16px;
  font: 500 12px 'LS Space Grotesk', system-ui, sans-serif; letter-spacing: 0.08em;
  color: var(--ls-sub); opacity: 0; transition: opacity 0.4s 1s;
}
.ls-intro.is-playing .ls-skip { opacity: 0.6; }

/* ---------- replay button (standalone page mode only) ---------- */
.ls-replay {
  position: absolute; right: 16px; bottom: 16px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--ls-sub); border-radius: 22px;
  background: transparent; color: var(--ls-sub);
  font: 500 14px 'LS Space Grotesk', system-ui, sans-serif;
  cursor: pointer; opacity: 0; transition: opacity 0.2s;
}
.ls-replay:focus-visible { opacity: 1; outline: 2px solid var(--ls-light); outline-offset: 2px; }
@media (hover: hover) { .ls-intro:hover .ls-replay { opacity: 0.8; } }

/* ---------- waiting for fonts: everything dark ---------- */
.ls-intro.is-waiting .ls-lit,
.ls-intro.is-waiting .ls-knob,
.ls-intro.is-waiting .ls-eyes,
.ls-intro.is-waiting .ls-wordmark { opacity: 0; }

/* ---------- animation ---------- */
.ls-intro.is-playing .ls-lit      { animation: ls-flicker  var(--ls-dur) step-end both; }
.ls-intro.is-playing .ls-spill    { animation: ls-spill    var(--ls-dur) ease-in-out both; }
.ls-intro.is-playing .ls-knob     { animation: ls-knob     var(--ls-dur) ease-in-out both; }
.ls-intro.is-playing .ls-eyes     { animation: ls-eyes     var(--ls-dur) linear both; }
.ls-intro.is-playing .ls-wordmark { animation: ls-wm-flick var(--ls-dur) step-end both; }

/* Fluorescent tube struggling on at 0.35s, 0.76s and 1.36s, then holding */
@keyframes ls-flicker {
  0%      { opacity: 0; }
  8.33%   { opacity: 1; }
  10%     { opacity: 0; }
  18.1%   { opacity: 1; }
  19.05%  { opacity: 0.25; }
  20.48%  { opacity: 1; }
  23.33%  { opacity: 0; }
  32.38%  { opacity: 1; }
  33.81%  { opacity: 0.5; }
  35.24%  { opacity: 1; }
  100%    { opacity: 1; }
}
@keyframes ls-spill { 0%, 35.71% { opacity: 0; } 47.62%, 100% { opacity: 0.32; } }
@keyframes ls-knob  { 0%, 42.86% { opacity: 0; } 52.38%, 100% { opacity: 1; } }
@keyframes ls-eyes  { 0%, 71.43% { opacity: 0; } 78.57%, 100% { opacity: 1; } }
@keyframes ls-wm-flick {
  0%      { opacity: 0; }
  54.76%  { opacity: 1; }
  56.19%  { opacity: 0; }
  61.9%   { opacity: 1; }
  63.1%   { opacity: 0.4; }
  64.76%  { opacity: 1; }
  100%    { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-intro.is-playing .ls-lit,
  .ls-intro.is-playing .ls-spill,
  .ls-intro.is-playing .ls-knob,
  .ls-intro.is-playing .ls-eyes,
  .ls-intro.is-playing .ls-wordmark { animation: none; }
}