/* Songbound teaser: the title screen. Colours from art/ui/palette.json. */
@font-face {
  font-family: "Jersey 10";
  src: url("/assets/fonts/Jersey10-Regular.woff") format("woff");
  font-display: swap;
}

:root {
  --night-dark: #1a1e36;
  --night: #242a48;
  --night-light: #3e4870;
  --gold: #e2b252;
  --gold-light: #fade8c;
  --parchment: #f4e8cc;
  --parchment-light: #fcf6e4;
  --ink: #3a2c2e;
  --outline: #28212c;
  /* One pixel of the interface kit, in CSS px. Kit art is drawn at this integer scale. */
  --px: 2px;
  --cursor: calc(12 * var(--px));
  --gutter: calc(14 * var(--px));
  --text: 28px;
  --edge-l: max(20px, env(safe-area-inset-left));
  --edge-r: max(20px, env(safe-area-inset-right));
  --edge-t: max(20px, env(safe-area-inset-top));
  --edge-b: max(16px, env(safe-area-inset-bottom));
  --focus-x: 50%;
  --focus-y: 50%;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--night-dark); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--night-dark);
  color: var(--parchment-light);
  font-family: "Jersey 10", ui-monospace, monospace;
  font-size: var(--text);
  line-height: 1;
  overflow-x: hidden;
}

p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The stage: one screen, the loop behind everything. */
.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--night-dark) url("/assets/img/poster_land.webp") var(--focus-x) var(--focus-y) / cover no-repeat;
}

.loop, .motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.loop {
  object-fit: cover;
  object-position: var(--focus-x) var(--focus-y);
  opacity: 0;
  transition: opacity 1.4s ease;
}

.loop.is-on { opacity: 1; }

.motes { image-rendering: pixelated; }

/* The veil keeps the words readable: night from the left, a soft vignette all round. */
.veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(26 30 54 / 0.86) 0%, rgb(26 30 54 / 0.62) 24%, rgb(26 30 54 / 0.18) 46%, transparent 60%),
    linear-gradient(0deg, rgb(26 30 54 / 0.7) 0%, transparent 22%),
    radial-gradient(ellipse 120% 100% at 60% 45%, transparent 55%, rgb(26 30 54 / 0.55) 100%);
}

/* The title column. */
.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: calc(10 * var(--px));
  padding: var(--edge-t) var(--edge-r) 0 calc(var(--edge-l) + var(--gutter));
  max-width: calc(560px + var(--edge-l));
}

.logo { margin: 0 0 0 -2%; width: clamp(240px, 34vw, 500px); line-height: 0; }

.logo img { width: 100%; height: auto; }

.words { display: flex; flex-direction: column; gap: calc(7 * var(--px)); }

/* Words over the moving art carry a full pixel outline, so they hold contrast on any frame. */
.line, .soon, .foot {
  text-shadow:
    0 2px 0 var(--outline), 0 -2px 0 var(--outline), 2px 0 0 var(--outline), -2px 0 0 var(--outline),
    0 0 16px rgb(26 30 54 / 0.9);
}

.line { font-size: calc(var(--text) * 1.5); color: var(--parchment-light); }

.line span { display: block; text-wrap: balance; }

.line span + span { margin-top: 0.12em; }

.soon {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  white-space: nowrap;
  color: var(--gold-light);
}

.gem {
  flex: none;
  width: calc(9 * var(--px));
  height: calc(7 * var(--px));
  background: url("/assets/kit/divider_gem.png") 0 0 / 100% 100%;
  image-rendering: pixelated;
}

/* The menu: the game's own pill and plank buttons, with its cursor. */
.menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(5 * var(--px));
  margin-top: calc(4 * var(--px));
  min-width: min(300px, 100%);
}

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px 3px;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  image-rendering: pixelated;
  border-image-repeat: stretch;
  -webkit-tap-highlight-color: transparent;
}

.btn[hidden] { display: none; }

/* Heights are whole multiples of the art, so no row of it stretches by a fraction. */
.pill {
  height: 54px;
  color: var(--ink);
  border-image-source: url("/assets/kit/pill_normal.png");
  border-image-slice: 8 fill;
  border-image-width: 24px;
}

.pill:hover, .pill:focus-visible { border-image-source: url("/assets/kit/pill_focused.png"); }

.pill:active { border-image-source: url("/assets/kit/pill_pressed.png"); }

.night {
  height: 48px;
  color: var(--parchment-light);
  text-shadow: 0 2px 0 var(--outline);
  border-image-source: url("/assets/kit/plate_night.png");
  border-image-slice: 8 fill;
  border-image-width: 16px;
}

.night:hover, .night:focus-visible { color: var(--gold-light); filter: brightness(1.2); }

.btn:active { padding: 6px 30px 0; }

.btn:focus-visible { outline: 2px solid var(--parchment-light); outline-offset: 4px; }

/* The cursor rests on the first item, and follows the pointer and the keyboard. */
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--gutter));
  width: var(--cursor);
  height: var(--cursor);
  margin-top: calc(var(--cursor) / -2);
  background: url("/assets/kit/cursor.png") 0 0 / calc(4 * var(--cursor)) var(--cursor);
  image-rendering: pixelated;
  opacity: 0;
  animation: cursor 0.5s steps(4) infinite;
}

.btn:hover::before,
.btn:focus-visible::before,
.menu:not(:hover):not(:focus-within) > .btn:first-child::before { opacity: 1; }

@keyframes cursor { to { background-position-x: calc(-4 * var(--cursor)); } }

/* Paused (or reduced motion): the cursor holds its still frame too. */
[data-stage="still"] .btn::before { animation: none; }

.foot {
  padding: calc(6 * var(--px)) var(--edge-r) var(--edge-b) calc(var(--edge-l) + var(--gutter));
  font-size: 21px;
  color: var(--parchment);
}

/* A button that isn't open yet: greyed, with no cursor and no press. */
.pill.is-soon {
  color: var(--ink);
  opacity: 0.75;
  cursor: default;
  gap: 0.6em;
  border-image-source: url("/assets/kit/pill_disabled.png");
}

.pill.is-soon:hover, .pill.is-soon:active { border-image-source: url("/assets/kit/pill_disabled.png"); padding: 0 30px 3px; }

.is-soon::before { display: none; }

.soon-tag { font-size: 0.7em; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }