/* SPACE QUACK.
   Every colour below was sampled from the game's own V130 screenshots and then matched to
   the game's CSS/canvas constants in www/index.html (they agree to the byte). Typography is
   the game's own stack: no web fonts, per the OSTOYA brand lock. */

:root {
  /* space — title screen field, top edge → centre glow → floor */
  --sq-void: #0B0E17;
  --sq-ground: #0D121F;
  --sq-field: #121827;
  --sq-glow: #19202F;

  /* stone + type */
  --sq-ivory: #ECEAE5;        /* title, stone top (--stone-top) */
  --sq-ivory-soft: #E4E2DE;   /* PERSONAL BEST figure */
  --sq-slate: #B7BBC7;        /* tagline as rendered (--stone-side at .96) */
  --sq-slate-muted: #ACB1BB;  /* control legend as rendered */
  --sq-quiet: #8C92A1;        /* smallest print; 5.6:1 on --sq-ground */
  --sq-stone-side: #BEC2CD;
  --sq-stone-deep: #9EA6BA;
  --sq-hairline: rgba(201, 200, 196, .22);
  --sq-ink: #111827;          /* START WALKING text */

  /* the one warm note */
  --sq-gold: #E5BA59;         /* QUACK. full stop */
  --sq-gold-flow: #E7C86F;    /* FLOW / NEW BEST */

  /* further worlds (V130 chapters 1–3, as rendered) */
  --sq-world-violet: #1B1934;
  --sq-world-oxblood: #27151E;
  --sq-world-dawn: #1A2230;

  --sq-font: Avenir, "Avenir Next", "Century Gothic", Futura, system-ui, sans-serif;
  --shell: 1240px;
  --gutter: clamp(16px, 4vw, 56px);
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  color-scheme: dark;
  background:
    radial-gradient(ellipse 1500px 1000px at 50% 460px, var(--sq-glow), rgba(18, 24, 39, 0) 72%),
    linear-gradient(180deg, var(--sq-void) 0, var(--sq-ground) 520px),
    var(--sq-ground);
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  color: var(--sq-ivory);
  font-family: var(--sq-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The game's star field (same recipe), fixed like the game's background layer. */
body::before {
  content: "";
  position: fixed;
  inset: -80px;
  z-index: -1;
  pointer-events: none;
  background: url("../art/stars.svg") 0 0 / 1600px 1200px repeat;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; overflow-wrap: break-word; }
::selection { color: var(--sq-ink); background: var(--sq-ivory); }

:focus-visible {
  outline: 2px solid var(--sq-ivory);
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--sq-ink);
  background: var(--sq-ivory);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }

.shell {
  width: 100%;
  max-width: calc(var(--shell) + 2 * (var(--gutter) + var(--safe-x)));
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--safe-x));
}

/* Small uppercase labels: the game's HUD/legend voice. */
.label {
  color: var(--sq-slate);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .34em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ header */

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__brand {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  white-space: nowrap;
}
.site-header__nav {
  display: flex;
  gap: clamp(14px, 3vw, 36px);
}
.site-header__nav a {
  padding: 10px 0;
  color: var(--sq-slate);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-header__nav a:hover { color: var(--sq-ivory); }
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: calc(clamp(104px, 17svh, 150px) + env(safe-area-inset-top, 0px));
}
.hero__copy { text-align: center; }

/* The title-screen lockup: SPACE over a larger QUACK with a gold full stop. */
.lockup {
  display: grid;
  justify-items: center;
  color: var(--sq-ivory);
  font-weight: 500;
  line-height: .91;
}
.lockup__space {
  display: block;
  font-size: clamp(46px, 14.2vw, 76px);
  letter-spacing: .14em;
  margin-right: -.14em; /* the tracking after the final letter is not part of the word */
}
.lockup__quack {
  display: block;
  margin-top: .06em;
  font-size: clamp(64px, 20.4vw, 108px);
  letter-spacing: .004em;
}
.lockup__dot { color: var(--sq-gold); }

.tagline {
  margin-top: clamp(26px, 6svh, 52px);
  color: var(--sq-slate);
  font-size: clamp(10px, 3.05vw, 13.5px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__line {
  margin-top: 14px;
  color: var(--sq-slate-muted);
  font-size: clamp(14px, 3.8vw, 16px);
  line-height: 1.55;
}

.hero__art {
  position: relative;
  z-index: 1;
  width: min(94vw, 600px);
  margin: clamp(28px, 7svh, 72px) auto clamp(56px, 9svh, 96px);
  pointer-events: none;
}
.hero__art img { width: 100%; }

.hero__moon { display: none; }

@media (min-width: 960px) {
  .hero { min-height: clamp(720px, 100svh, 1120px); }
  .hero__inner { padding-top: clamp(150px, 22svh, 250px); }
  .hero__copy { text-align: left; }
  .lockup { justify-items: start; }
  .lockup__space { font-size: clamp(64px, 6.4vw, 116px); margin-right: 0; }
  .lockup__quack { font-size: clamp(91px, 9.1vw, 165px); margin-left: -.03em; }
  .tagline { font-size: clamp(12px, .95vw, 15px); letter-spacing: .32em; }
  .hero__line { font-size: 17px; }

  .hero__art {
    position: absolute;
    right: -5vw;
    bottom: clamp(36px, 9svh, 120px);
    width: min(60vw, 1180px);
    margin: 0;
  }

  .hero__moon {
    display: block;
    position: absolute;
    z-index: 0;
    top: clamp(88px, 13svh, 160px);
    right: 16%;
    width: clamp(140px, 11vw, 200px);
    opacity: .9;
  }
}

/* ------------------------------------------------------------ how it plays */

.how {
  position: relative;
  padding: clamp(88px, 12vw, 176px) 0 clamp(72px, 9vw, 140px);
  text-align: center;
}

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 12vw, 72px);
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.step { display: grid; justify-items: center; }
/* All three vignettes are rendered at the same game scale; each image keeps that scale inside
   a shared frame (image px ÷ 1300) so the duck is the same size in every step. */
.step__art {
  display: grid;
  place-items: center;
  width: min(84vw, 360px);
  aspect-ratio: 1360 / 1060;   /* the three frames share one scale: width % = file width / 1360 */
}
.step__art img { height: auto; }
.step__art--walk img { width: 90%; }
.step__art--turn img { width: 50.2%; }
.step__art--jump img { width: 99.6%; }
.step__num {
  margin-top: 6px;
  color: var(--sq-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  font-variant-numeric: tabular-nums;
}
.step__title {
  margin: 10px -.34em 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.step__text {
  max-width: 26ch;
  margin-top: 10px;
  color: var(--sq-slate);
  font-size: 15.5px;
  line-height: 1.6;
}

@media (min-width: 820px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
  }
  .step__art { width: min(100%, 380px); }
}

/* The title screen's control legend, as the section's quiet coda. */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(56px, 8vw, 104px);
  color: var(--sq-slate-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.legend__item { display: inline-flex; align-items: center; gap: 9px; }
.legend__arrow {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  color: var(--sq-ivory);
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0;
}
.legend__sep { width: 1px; height: 22px; background: var(--sq-hairline); }
.legend__tap {
  position: relative;
  width: 25px; height: 25px;
  border: 1px solid rgba(235, 234, 231, .62);
  border-radius: 50%;
}
.legend__tap::before,
.legend__tap::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.legend__tap::before {
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  background: var(--sq-ivory);
}
.legend__tap::after { inset: 4px; border: 1px solid rgba(235, 234, 231, .28); }

@media (max-width: 380px) {
  .legend { gap: 12px 10px; font-size: 9.5px; letter-spacing: .11em; }
  .legend__item { gap: 5px; }
  .legend__arrow { width: 20px; height: 20px; font-size: 18px; }
  .legend__sep { height: 18px; }
  .legend__tap { width: 21px; height: 21px; }
}

/* ------------------------------------------------------------- the journey */

.journey { padding-top: clamp(48px, 7vw, 110px); }

.journey__intro { max-width: calc(760px + 2 * (var(--gutter) + var(--safe-x))); margin-inline: auto; text-align: center; }
.journey__title {
  margin-top: 18px;
  font-size: clamp(38px, 10vw, 84px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: .01em;
}
.journey__text {
  max-width: 44ch;
  margin: 22px auto 0;
  color: var(--sq-slate);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
}

/* One continuous sky: the worlds, in the order a long run reaches them.
   Small screens read it top to bottom. The run art sets the start; each milestone
   (100 / 200 / 300 / 500 / 800 / 1500 — where the game changes sky) is one even step
   further. The first three carry a celestial body level with their number; the last three
   (Far Out, the Home Stretch, the aurora) are marked by their number alone, as the sky
   darkens away. */
.worlds {
  --run-w: min(82vw, 400px);
  --run-h: calc(var(--run-w) * 1545 / 1234);
  --step: clamp(120px, 33vw, 150px);
  --m1: calc(var(--run-h) + var(--step) * .55);
  --m2: calc(var(--m1) + var(--step));
  --m3: calc(var(--m2) + var(--step));
  --m4: calc(var(--m3) + var(--step));
  --m5: calc(var(--m4) + var(--step));
  --m6: calc(var(--m5) + var(--step));
  position: relative;
  margin: clamp(28px, 4.5vw, 64px) 0 0;
  height: calc(var(--m6) + var(--step) * .7);
}
.worlds__sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle 62vw at 78% var(--m1), rgba(126, 110, 178, .10), transparent),
    radial-gradient(circle 66vw at 40% var(--m2), rgba(150, 86, 100, .10), transparent),
    radial-gradient(circle 62vw at 78% var(--m3), rgba(150, 164, 178, .10), transparent),
    linear-gradient(180deg,
      var(--sq-ground) 0, var(--sq-field) calc(var(--m1) - var(--step)),
      var(--sq-world-violet) var(--m1),
      var(--sq-world-oxblood) var(--m2),
      var(--sq-world-dawn) var(--m3), var(--sq-ground) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 80px), transparent 100%);
}
.worlds__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../art/stars.svg") 240px 80px / 1600px 1200px repeat;
  opacity: .8;
}

.worlds__body { position: absolute; transform: translateY(-50%); }
.worlds__body--moon   { top: var(--m1); right: 6%;  width: clamp(150px, 42vw, 220px); }
.worlds__body--planet { top: var(--m2); left: 16%;  width: clamp(230px, 66vw, 340px); }
.worlds__body--sun    { top: var(--m3); right: 6%;  width: clamp(180px, 50vw, 260px); }

.worlds__run {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: var(--run-w);
  transform: translateX(-50%);
}

.worlds__marks {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sq-quiet);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.worlds__marks li {
  position: absolute;
  left: calc(var(--gutter) + var(--safe-x));
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  transform: translateY(-50%);
}
.worlds__marks li::before { content: ""; width: 14px; height: 1px; background: var(--sq-hairline); }
.worlds__marks li:nth-child(1) { top: var(--m1); }
.worlds__marks li:nth-child(2) { top: var(--m2); }
.worlds__marks li:nth-child(3) { top: var(--m3); }
.worlds__marks li:nth-child(4) { top: var(--m4); }
.worlds__marks li:nth-child(5) { top: var(--m5); }
.worlds__marks li:nth-child(6) { top: var(--m6); }

/* Wide screens read it left to right: each body stands above its milestone; the three
   milestones beyond the last body (500 / 800 / 1500) continue the row to the right. */
@media (min-width: 960px) {
  .worlds { height: clamp(520px, 40vw, 700px); }
  .worlds__sky {
    background:
      radial-gradient(ellipse 30% 64% at 48% 32%, rgba(126, 110, 178, .09), transparent 70%),
      radial-gradient(ellipse 30% 64% at 64% 50%, rgba(150, 86, 100, .09), transparent 70%),
      radial-gradient(ellipse 28% 58% at 80% 66%, rgba(150, 164, 178, .10), transparent 70%),
      linear-gradient(90deg,
        var(--sq-ground) 0%, var(--sq-field) 26%,
        var(--sq-world-violet) 48%,
        var(--sq-world-oxblood) 64%,
        var(--sq-world-dawn) 80%,
        var(--sq-ground) 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  }
  .worlds__body { transform: translate(-50%, -50%); }
  .worlds__body--moon   { top: 32%; left: 48%; right: auto; width: clamp(150px, 13vw, 230px); }
  .worlds__body--planet { top: 50%; left: 64%; width: clamp(230px, 20vw, 350px); }
  .worlds__body--sun    { top: 66%; left: 80%; right: auto; width: clamp(190px, 16vw, 280px); }

  .worlds__run {
    top: 50%;
    left: max(4vw, 50vw - 640px);
    width: min(30vw, 480px);   /* clears the moon (left edge 48% - 115px) from 960 px to 1920 px */
    height: auto;
    transform: translateY(-50%);
  }

  .worlds__marks li { top: 80% !important; flex-direction: column; gap: 10px; transform: translate(-50%, -50%); }
  .worlds__marks li::before { width: 1px; height: 14px; }
  .worlds__marks li:nth-child(1) { left: 48%; }
  .worlds__marks li:nth-child(2) { left: 64%; }
  .worlds__marks li:nth-child(3) { left: 80%; }
  .worlds__marks li:nth-child(4) { left: 87.5%; }
  .worlds__marks li:nth-child(5) { left: 92.5%; }
  .worlds__marks li:nth-child(6) { left: 97.5%; }
}

/* ------------------------------------------------------------------- outro */

.outro {
  padding: clamp(48px, 10vw, 150px) 0 clamp(96px, 11vw, 170px);
  text-align: center;
}
.outro__inner { display: grid; justify-items: center; }
.outro__icon {
  width: clamp(76px, 8vw, 96px);
  border-radius: 22.5%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34), 0 0 0 1px rgba(236, 234, 229, .08);
}
.outro__brand {
  margin: 30px -.2em 0 0;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .2em;
}
.outro__brand .lockup__dot { letter-spacing: 0; }
.outro__status {
  max-width: 34ch;
  margin-top: 18px;
  color: var(--sq-slate);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-wrap: balance;
}
.outro__pip {
  display: inline-block;
  vertical-align: .22em;
  margin-right: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sq-gold);
}

/* ------------------------------------------------------------------ footer */

.site-footer {
  border-top: 1px solid rgba(236, 234, 229, .08);
  padding: 32px 0 calc(40px + env(safe-area-inset-bottom, 0px));
}
.site-footer__row {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.site-footer__studio img { width: auto; height: 32px; opacity: .88; }
.site-footer__line { color: var(--sq-slate-muted); font-size: 13px; letter-spacing: .04em; }
.site-footer__legal { color: var(--sq-quiet); font-size: 12px; letter-spacing: .04em; }

@media (min-width: 720px) {
  .site-footer__row {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-items: start;
    gap: 28px;
    text-align: left;
  }
}

/* ------------------------------------------------------------------ small */

@media (max-width: 400px) {
  .site-header__brand { font-size: 11px; letter-spacing: .2em; }
  .site-header__nav a { font-size: 10px; letter-spacing: .12em; }
}
@media (max-width: 350px) {
  .site-header__brand { letter-spacing: .12em; }
  .site-header__nav { gap: 12px; }
  .site-header__nav a { font-size: 9.5px; letter-spacing: .06em; }
  .tagline { letter-spacing: .2em; }
}

/* ------------------------------------------------------------------ motion
   Everything moves only when the visitor has not asked for less. The reduced-motion page is
   the same page, fully composed, just still. */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  body::before { animation: sq-drift 220s ease-in-out infinite alternate; will-change: transform; }

  .hero__copy { animation: sq-rise 1.3s var(--ease-out) both; }
  .hero__art img { animation: sq-arrive 1.8s .2s var(--ease-out) both; }
  .hero__moon { animation: sq-fade 2.6s .7s ease both; }

  .sq-motion [data-reveal] { transition: opacity 1s ease, transform 1.2s var(--ease-out); }
  .sq-motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); }
}

@keyframes sq-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-36px, -24px, 0); }
}
@keyframes sq-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sq-arrive {
  from { opacity: 0; transform: translate3d(-10px, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes sq-fade { from { opacity: 0; } to { opacity: 1; } }