/* Lunaclash placeholder: one screen, nearly dark. A pool of light moves over
   the Nightmarescape forest; only inside it is the world lit and the wordmark
   gold. The forest's eyes glow and blink in the dark. */

@font-face { font-family: 'Fira Sans Extra Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('assets/fonts/fira-sans-extra-condensed-300-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/space-mono-700-latin.woff2') format('woff2'); }

:root {
  --night: #05060b;
  --cream: #efe6d2;
  --mute: #d8cfbd8c;
  --pad: clamp(18px, 3vw, 38px);
  /* the light: its centre (the script moves it) and its diameter */
  --lx: 50vw;
  --ly: 46vh;
  --d: clamp(380px, 60vmax, 1180px);
  /* the world's slight parallax against the light (it stays centred) */
  --pan-x: 0px;
  --pan-y: 0px;
  /* the wordmark's box, shared by both copies of the scene and the tagline */
  --mark-w: min(84vw, 700px, 118vh);
  --mark-y: 46%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--night); }
body {
  color: var(--cream); font: 300 16px/1.4 'Fira Sans Extra Condensed', 'Arial Narrow', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img { display: block; }
::selection { background: #ffae0055; color: #fff; }
:focus-visible { outline: 1px solid var(--cream); outline-offset: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the scene (twice) ---------- */
.scene { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
.scene-dark { position: fixed; }
.world {
  position: absolute; left: 50%; top: 50%;
  /* a little narrower than cover, so more of the forest's width shows; the
     strips it leaves above and below fade into the night */
  width: max(100vw, 160vh); width: max(100vw, 160dvh); aspect-ratio: 16 / 9;
  transform: translate3d(calc(-50% + var(--pan-x)), calc(-50% + var(--pan-y)), 0) scale(1.04);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
.world img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-dark .world-art { filter: brightness(.1) saturate(.8); }
.world-glow { mix-blend-mode: screen; }
.world-eyes-left { clip-path: inset(0 50% 0 0); }
.world-eyes-right { clip-path: inset(0 0 0 50%); }
.scene-lit .world-art { filter: brightness(.95) saturate(1.05); }

.mark { position: absolute; left: 50%; top: var(--mark-y); width: var(--mark-w); aspect-ratio: 539 / 155; transform: translate(-50%, -50%); }
.mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mark-flat { opacity: .88; }
.mark-gold { filter: drop-shadow(0 6px 18px #000000a6); }

/* ---------- the light ---------- */
.lens {
  position: fixed; left: 0; top: 0; z-index: 1; width: var(--d); height: var(--d); pointer-events: none;
  transform: translate3d(calc(var(--lx) - var(--d) / 2), calc(var(--ly) - var(--d) / 2), 0);
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000000f2 22%, #00000099 48%, #00000033 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, #000000f2 22%, #00000099 48%, #00000033 72%, transparent 100%);
  will-change: transform;
}
/* the lit copy holds still in the page while its window moves */
.lens > .scene { transform: translate3d(calc(var(--d) / 2 - var(--lx)), calc(var(--d) / 2 - var(--ly)), 0); will-change: transform; }
/* moonlight: a cool lift at the heart of the pool */
.lens::after { content: ''; position: absolute; inset: 0; mix-blend-mode: screen; background: radial-gradient(closest-side, #c3d0ff1f, transparent 62%); }
.motes { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- over everything: the vignette, the words, the grain ---------- */
.veil {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 75% at 50% 47%, transparent 45%, #05060bb3 100%),
    linear-gradient(180deg, #05060b80, transparent 16%, transparent 84%, #05060b99);
}
.ui { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.ui a { pointer-events: auto; }

.tagline {
  position: absolute; left: 0; right: 0; margin: 0;
  top: calc(var(--mark-y) + var(--mark-w) * .1438 + clamp(16px, 3.4vh, 34px));
  color: #ddd4c1b3; text-align: center; font-size: clamp(12px, 1.02vw, 15px);
  letter-spacing: .52em; text-indent: .52em; text-transform: uppercase;
}
.hint {
  position: absolute; left: 0; right: 0; margin: 0;
  top: calc(var(--mark-y) + var(--mark-w) * .1438 + clamp(16px, 3.4vh, 34px) + 52px);
  color: #d8cfbd59; text-align: center; font: 700 10px/1 'Space Mono', ui-monospace, monospace; letter-spacing: .24em; text-indent: .24em; text-transform: uppercase;
}
.hint > span { transition: opacity 1.2s; }
.hint-touch { display: none; }
.explored .hint > span { opacity: 0; }

.corner {
  position: absolute; display: flex; align-items: center; gap: 10px; margin: 0;
  color: var(--mute); font: 700 10.5px/1.5 'Space Mono', ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.corner-tl { left: max(var(--pad), env(safe-area-inset-left)); top: max(var(--pad), env(safe-area-inset-top)); }
.corner-tr { right: max(var(--pad), env(safe-area-inset-right)); top: max(var(--pad), env(safe-area-inset-top)); text-decoration: none; transition: color .3s; }
.corner-tr svg { width: 10px; height: 10px; transition: transform .3s; }
.corner-tr:hover { color: var(--cream); }
.corner-tr:hover svg { transform: translate(2px, -2px); }
.corner-bl { left: max(var(--pad), env(safe-area-inset-left)); bottom: max(var(--pad), env(safe-area-inset-bottom)); }
.corner-br { right: max(var(--pad), env(safe-area-inset-right)); bottom: max(var(--pad), env(safe-area-inset-bottom)); }
.corner-bc { left: 50%; bottom: max(var(--pad), env(safe-area-inset-bottom)); transform: translateX(-50%); gap: 16px; }
.star { width: 9px; height: 12px; flex: none; }
.dim { opacity: .45; }
.corner-br i { width: 5px; height: 5px; border-radius: 50%; background: #ffc35e; box-shadow: 0 0 8px #ffae00; }
.narrow-only { display: none; }
/* the partner marks, baked in the page's one ink */
.partner { width: auto; opacity: .5; }
.partner-axie { height: 24px; }
.partner-ronin { height: 15px; }

.grain {
  position: fixed; inset: -120px; z-index: 4; pointer-events: none; opacity: .055;
  background-size: 128px 128px;
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .world { animation: arrive 3s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .js .world-eyes-left { animation: open .7s 1.5s both, blink 7.9s 4s infinite; }
  .js .world-eyes-right { animation: open .7s 1.9s both, blink 11.3s 6.2s infinite; }
  .js .world-fire { animation: open 1.2s .9s both, flicker 2.7s 2.1s ease-in-out infinite; }
  .js .mark-flat { animation: surface 2.4s 1.1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .lens { animation: light 2.4s .9s ease-out both; }
  .js .tagline { animation: show 1.8s 2.2s both; }
  .js .corner { animation: show 1.6s 2.8s both; }
  .js .hint { animation: show 1.4s 4.2s both; }
  .corner-br i { animation: pulse 2.8s ease-in-out infinite; }
  .grain { animation: grain .8s steps(4) infinite; }
}
@keyframes arrive { from { opacity: 0; transform: translate3d(calc(-50% + var(--pan-x)), calc(-50% + var(--pan-y)), 0) scale(1.1); } }
@keyframes open { from { opacity: 0; } }
@keyframes blink { 0%, 94%, 100% { opacity: 1; } 95.4%, 96.2% { opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: .92; } 31% { opacity: 1; } 47% { opacity: .82; } 63% { opacity: 1; } 81% { opacity: .9; } }
@keyframes surface { from { opacity: 0; filter: blur(6px); } }
@keyframes light { from { opacity: 0; } }
@keyframes show { from { opacity: 0; } }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-37px, 22px); } 50% { transform: translate(19px, -41px); } 75% { transform: translate(-13px, -17px); } }

/* ---------- small screens ---------- */
@media (hover: none) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}
@media (max-width: 720px) {
  :root { --mark-y: 45%; --d: max(340px, 108vw); }
  .corner { font-size: 9.5px; letter-spacing: .13em; }
  .corner-tl { align-items: flex-start; white-space: normal; line-height: 1.6; }
  .corner-tl .star { margin-top: 2px; }
  .narrow-only { display: inline; }
  .corner-bc { bottom: calc(max(var(--pad), env(safe-area-inset-bottom)) + 40px); }
  .tagline { font-size: 11px; letter-spacing: .36em; text-indent: .36em; }
}
@media (max-height: 520px) and (min-width: 721px) {
  :root { --mark-w: min(60vw, 100vh); --mark-y: 44%; }
  .corner-bc { display: none; }
}