/* astro90 — worlds: the home page's night (sky, scenes, horizon) and the game
   pages. Loaded after site.css, only on the pages that use it. */

/* ---------------------------------------------------------------- the sky */
/* The zenith: a generated star field over the name on its horizon. */
.sky {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-content: center;
  padding: calc(var(--header-h) + 28px) 0 104px;
  background:
    radial-gradient(75% 45% at 78% 112%, rgb(255 107 61 / .12), transparent 70%),
    radial-gradient(90% 70% at 18% -12%, rgb(56 72 140 / .32), transparent 70%),
    linear-gradient(180deg, #070A15 0%, #0A0D1A 62%, var(--night-900) 100%);
}
/* A faint Milky Way: two soft bands of haze across the upper sky. */
.sky::before {
  content: ""; position: absolute; z-index: -2; left: -20%; right: -20%; top: -30%; height: 90%;
  background:
    radial-gradient(38% 22% at 58% 52%, rgb(150 160 255 / .09), transparent 70%),
    radial-gradient(60% 14% at 50% 50%, rgb(210 190 255 / .07), transparent 72%),
    radial-gradient(22% 9% at 36% 50%, rgb(255 214 190 / .05), transparent 70%);
  rotate: -18deg; pointer-events: none;
}
.sky__cue {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 6px;
  font: 500 .6875rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--chalk-3); text-decoration: none;
}
.sky__cue:hover { color: var(--chalk); }

.hero__readout { margin-bottom: clamp(20px, 4vw, 44px); }
.hero__alt { color: var(--signal-2); }
/* Headings that hold an SVG mark use the (already loaded) body face, so the
   display font is not downloaded just for their whitespace. */
.hero__title, .ink-word, .lh-name { font-family: var(--font-body); }
.hero__title { margin: 0; line-height: 0; font-size: inherit; }
.hero-mark { display: block; width: 100%; max-width: 1040px; height: auto; overflow: visible; color: var(--chalk); }
.hero-mark__horizon { stroke-opacity: .2; }
.hero-mark__ticks { stroke-opacity: .5; }
.hero-mark__arc { stroke-opacity: .32; }
.hero-mark__zenith { stroke-opacity: .3; stroke-dasharray: 2.5 4; }
.hero-mark__corner { stroke-opacity: .5; }
.hero-mark__glow { transform-box: fill-box; transform-origin: center; }

/* The altitude counter: 00° -> 90° in step with the star. */
@property --alt { syntax: "<integer>"; inherits: false; initial-value: 90; }
.hero__alt { counter-reset: alt var(--alt); }
.hero__alt::after { content: counter(alt, decimal-leading-zero) "°"; }

.hero__intro { display: grid; gap: 14px 56px; margin-top: clamp(22px, 3.6vw, 44px); }
.hero__tagline {
  margin: 0; font: italic 500 clamp(1.75rem, 1.2rem + 2.2vw, 2.9rem)/1.08 var(--font-display);
  letter-spacing: -.012em;
}
.hero__lede { margin: 0; max-width: 34em; color: var(--chalk-2); font-size: clamp(1.03rem, .96rem + .3vw, 1.2rem); }
.hero__lede a { color: var(--chalk); }
@media (min-width: 860px) {
  .hero__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: end; }
}

@keyframes a90-rise { from { transform: rotate(90deg); } to { transform: rotate(0deg); } }
@keyframes a90-trail { from { stroke-dashoffset: var(--arc-len); } to { stroke-dashoffset: 0; } }
@keyframes a90-flare {
  0% { opacity: 0; transform: scale(.3); }
  40% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes a90-alt { from { --alt: 0; } to { --alt: 90; } }
@keyframes a90-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .7; transform: scale(1.18); } }
@keyframes cue-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-mark__orbit { animation: a90-rise 2.6s var(--ease-rise) .35s both; }
  .hero-mark__trail { animation: a90-trail 2.6s var(--ease-rise) .35s both; }
  .hero-mark__glow { animation: a90-flare 1.5s var(--ease-out) 2.75s both; }
  .hero__alt { animation: a90-alt 2.6s var(--ease-rise) .35s both; }
  /* Leaving the zenith: the name lifts away as the first world arrives. */
  .js .sky__inner { translate: 0 calc(var(--p, 0) * -7vh); opacity: calc(1 - var(--p, 0) * .55); }
  .motion-on .sky__cue svg { animation: cue-bob 2.4s var(--ease-soft) infinite; }
  .motion-on .hero-mark__glow { animation: a90-flare 1.5s var(--ease-out) 2.75s both, a90-breathe 4.8s ease-in-out 4.3s infinite; }
}

/* ----------------------------------------------------------------- scenes */
/* One full-screen world per game. In the motion layout each scene is a tall
   track whose stage stays pinned while the scene scrolls; the script feeds the
   stage its progress as --p (0 -> 1). Without the script, with reduced motion,
   or on short screens, the scenes simply stack. */
.scene { position: relative; }
.scene__stage { position: relative; isolation: isolate; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) and (min-height: 620px) {
  .js .scene { height: 230vh; }
  .js .scene__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
}
.scene__kind { margin: 0 0 12px; font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.scene__tagline { margin: 0; }
.scene__blurb { margin: 14px 0 0; max-width: 30em; font-size: clamp(1rem, .96rem + .2vw, 1.08rem); }
.scene__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }

/* ------------------------------------------------------------ Inkube world */
.scene--inkube { color: #F7F0FF; background: #1A0C30; }
.scene--inkube .scene__stage {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "word" "play" "copy"; row-gap: 10px;
  padding: calc(var(--header-h) + 10px) var(--gutter) 22px;
  background:
    radial-gradient(90% 55% at 8% 0%, rgb(47 207 221 / .16), transparent 62%),
    radial-gradient(80% 60% at 100% 100%, rgb(255 78 170 / .22), transparent 66%),
    linear-gradient(165deg, #25113F 0%, #1A0C30 48%, #2B1152 100%);
}
.ink-glows { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ink-glows span { position: absolute; border-radius: 50%; }
.ink-glows span:nth-child(1) {
  width: 70vmax; height: 70vmax; left: -32vmax; top: -36vmax;
  background: radial-gradient(circle, rgb(47 207 221 / .16), transparent 62%);
  translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -18px);
}
.ink-glows span:nth-child(2) {
  width: 64vmax; height: 64vmax; right: -26vmax; bottom: -32vmax;
  background: radial-gradient(circle, rgb(255 78 170 / .2), transparent 62%);
  translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * 16px);
}
.ink-glows span:nth-child(3) {
  width: 42vmax; height: 42vmax; left: 28%; top: 26%;
  background: radial-gradient(circle, rgb(167 125 255 / .13), transparent 65%);
  translate: calc(var(--px, 0) * 12px) calc((var(--p, .5) - .5) * -90px);
}

.ink-word { grid-area: word; position: relative; z-index: 1; margin: 0; line-height: 0; }
.ink-word a { display: inline-block; }
.ink-word .inkube-wordmark { display: block; width: min(86vw, 420px); height: auto; filter: drop-shadow(0 0 22px rgb(255 92 168 / .3)); }

.ink-play { grid-area: play; position: relative; z-index: 2; min-height: 330px; display: grid; place-items: center; container-type: size; }
.ink-phone {
  position: relative; z-index: 2; height: min(84cqh, 560px); width: auto; aspect-ratio: .4716;
  transform-origin: 50% 60%;
  transform: perspective(1400px)
    rotateY(calc(-14deg + var(--px, 0) * 8deg + var(--p, .5) * 18deg))
    rotateX(calc(5deg - var(--py, 0) * 5deg))
    rotateZ(calc(-4deg + var(--p, .5) * 6deg));
}
.ink-lab { position: absolute; left: 50%; top: 50%; width: min(118cqh, 100cqw); height: auto; aspect-ratio: 1; translate: -50% -50%; overflow: visible; pointer-events: none; }
.ink-lab--back { z-index: 1; }
.ink-lab--front { z-index: 3; }
.ink-steps {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0; z-index: 4;
  display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none;
  border-radius: 999px; background: rgb(18 7 34 / .72); border: 1px solid rgb(247 240 255 / .14);
  font: 500 .625rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(247 240 255 / .74);
}
.ink-steps li { padding: 7px 9px; border-radius: 999px; transition: color .3s, background-color .3s; }
.scene--inkube[data-step="0"] .ink-steps li:nth-child(1),
.scene--inkube[data-step="1"] .ink-steps li:nth-child(2),
.scene--inkube[data-step="2"] .ink-steps li:nth-child(3),
.scene--inkube[data-step="3"] .ink-steps li:nth-child(4) { color: #1A0C30; background: #8FE9F2; }

.scene--inkube .scene__copy { grid-area: copy; position: relative; z-index: 3; }
.scene--inkube .scene__kind { color: #D7C6F2; }
.scene--inkube .scene__tagline { font: 700 .95rem/1.3 var(--font-body); letter-spacing: .22em; color: #DCCFEF; }
.scene--inkube .scene__blurb { color: #E6DCF5; }
.scene--inkube .store__soon { color: #8FE9F2; }

/* Narration: the rule in big words, in step with the blots (wide screens). */
.ink-narr { display: none; }
.ink-narr p {
  grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 18px;
  transition: opacity .45s var(--ease-out), translate .45s var(--ease-out);
  font: 500 1.05rem/1.3 var(--font-body); color: #E6DCF5;
}
.ink-narr em { display: block; margin-bottom: 6px; font: italic 500 clamp(3rem, 5.2vw, 5.4rem)/1 var(--font-display); letter-spacing: -.02em; }
.ink-narr p:nth-child(1) em { color: #8FE9F2; }
.ink-narr p:nth-child(2) em { color: #FF8DB3; }
.ink-narr p:nth-child(3) em { color: #FFC766; }
.ink-narr p:nth-child(4) em { color: #AEEF8C; }
.scene--inkube[data-step="0"] .ink-narr p:nth-child(1),
.scene--inkube[data-step="1"] .ink-narr p:nth-child(2),
.scene--inkube[data-step="2"] .ink-narr p:nth-child(3),
.scene--inkube[data-step="3"] .ink-narr p:nth-child(4) { opacity: 1; translate: 0 0; }
.lh-narr em { font-size: clamp(2.4rem, 3.8vw, 3.9rem); }
.lh-narr p:nth-child(n) em { color: #F8E7C3; }
.lh-narr p { color: #EDE3D1; }
.scene--lighthouse[data-step="0"] .lh-narr p:nth-child(1),
.scene--lighthouse[data-step="1"] .lh-narr p:nth-child(2),
.scene--lighthouse[data-step="2"] .lh-narr p:nth-child(3) { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: no-preference) and (min-height: 620px) and (min-width: 980px) {
  .js .ink-narr { grid-area: narr; display: grid; align-content: center; position: relative; z-index: 3; }
  .js .lh-narr { grid-area: chart; }
}

@media (min-width: 980px) {
  .scene--inkube .scene__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "word play" "narr play" "copy play"; column-gap: 2vw;
    padding: calc(var(--header-h) + 6vh) var(--edge) 8vh;
  }
  .ink-word { align-self: end; }
  /* The name overhangs into the play column, passing behind the blots and phone. */
  .ink-word .inkube-wordmark { width: min(60vw, 880px); max-width: none; }
  .ink-play { min-height: 480px; }
  .scene--inkube .scene__copy { align-self: end; max-width: 440px; padding-top: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .ink-word { translate: calc((.5 - var(--p, .5)) * 5vw) 0; }
}

/* -------------------------------------------------------- Lighthouse world */
.scene--lighthouse { color: #F8EEDC; background: #0A2027; }
.scene--lighthouse .scene__stage {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top" "window" "bottom"; row-gap: 12px;
  padding: calc(var(--header-h) + 10px) var(--gutter) 22px;
  background: radial-gradient(90% 60% at 0% 100%, rgb(88 167 163 / .12), transparent 70%), #0A2027;
}
.scene__copy--top { grid-area: top; position: relative; z-index: 3; }
.scene__copy--bottom { grid-area: bottom; position: relative; z-index: 3; }
.scene--lighthouse .scene__kind { color: #D3E6E1; }
.lh-name { margin: 0; line-height: 0; }
.scene--lighthouse .scene__tagline { margin-top: 12px; font: italic 500 1.4rem/1.2 var(--font-display); color: #FBEFD9; }
.scene--lighthouse .scene__blurb { color: #EDE3D1; }
.scene--lighthouse .store__soon { color: #F3CF86; }

/* The painting, as a window. It is laid on a stage with its own 2:3 ratio,
   sized to cover the window and placed so the lantern lands at (--lx, --ly);
   the beam and glow are anchored to the lantern at any size. */
.lh-window { grid-area: window; position: relative; min-height: 300px; margin-inline: calc(-1 * var(--gutter)); }
.lh-window::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #0A2027 0%, rgb(10 32 39 / 0) 16%, rgb(10 32 39 / 0) 78%, #0A2027 100%);
}
.lh-art { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.lh-stage {
  --fx: .627; --fy: .332;          /* lantern position within the painting */
  --lx: .56;  --ly: .42;           /* where the lantern should sit in the window */
  --w: max(100cqw, 66.6667cqh);
  --h: calc(var(--w) * 1.5);
  position: absolute; width: var(--w); height: var(--h);
  left: clamp(100cqw - var(--w), var(--lx) * 100cqw - var(--fx) * var(--w), 0px);
  top: clamp(100cqh - var(--h), var(--ly) * 100cqh - var(--fy) * var(--h), 0px);
  transform-origin: calc(var(--fx) * 100%) calc(var(--fy) * 100%);
}
.lh-stage img { display: block; width: 100%; height: 100%; }
.lh-grade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(4 14 30 / .15), rgb(4 12 26 / .6));
  opacity: calc(.25 + var(--p, .5) * .75);
}
.lh-glow, .lh-beam { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); pointer-events: none; mix-blend-mode: screen; }
.lh-glow {
  width: 10%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 240 190 / .95), rgb(255 205 120 / .35) 34%, transparent 70%);
  opacity: .9;
}
/* The beam points along --beam: at the pointer, or with the scroll. */
.lh-beam {
  width: 70%; height: 40%; translate: 0 -50%; transform-origin: 0 50%; rotate: var(--beam, 8deg);
  background: conic-gradient(from 76deg at 0% 50%,
    rgb(255 226 160 / 0) 0deg, rgb(255 226 160 / .6) 14deg, rgb(255 226 160 / 0) 28deg, transparent 28deg);
  -webkit-mask-image: linear-gradient(90deg, #000 6%, transparent 96%);
  mask-image: linear-gradient(90deg, #000 6%, transparent 96%);
  opacity: .8;
}
@keyframes lh-pulse { 0%, 100% { opacity: .78; scale: 1; } 50% { opacity: 1; scale: 1.12; } }

/* The island that solves itself: every mark appears at its own --t. */
.lh-chart {
  grid-area: window; align-self: end; justify-self: end; position: relative; z-index: 3;
  width: min(54vw, 250px); margin: 0 -6px -8px 0; padding: 10px 10px 6px;
  border-radius: 14px; background: rgb(7 22 28 / .86); border: 1px solid rgb(248 238 220 / .14);
  box-shadow: 0 24px 60px rgb(0 0 0 / .45);
}
.lh-chart__label {
  position: relative; margin: 0 0 8px; min-height: 2.6em;
  font: 500 .5625rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #D3E6E1;
}
.lh-chart__rule, .lh-chart__done { display: block; }
.lh-chart__rule { opacity: calc(1 - clamp(0, (var(--p, 1) - .72) * 10, 1)); }
.lh-chart__done { position: absolute; inset: 0; color: #FFD37A; opacity: clamp(0, (var(--p, 1) - .74) * 10, 1); }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart__cells rect { opacity: .8; }
.chart__solved { opacity: calc(clamp(0, (var(--p, 1) - .72) * 8, 1) * .22); mix-blend-mode: screen; }
.chart__grid { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 1.5; }
.chart__regions { fill: none; stroke: #F8EEDC; stroke-width: 4; stroke-linecap: square; opacity: .85; }
.chart__frame { fill: none; stroke: #F8EEDC; stroke-width: 5; }
.chart__count { font: 600 28px var(--font-mono); fill: rgb(248 238 220 / .4); text-anchor: middle; }
.chart__count--lit { fill: #FFD37A; opacity: clamp(0, (var(--p, 1) - var(--t)) * 14, 1); }
.chart__water { fill: none; stroke: #CDEFF6; stroke-width: 3.4; stroke-linecap: round; opacity: calc(clamp(0, (var(--p, 1) - var(--t)) * 14, 1) * .9); }
.chart__beam { opacity: calc(clamp(0, (var(--p, 1) - var(--t)) * 14, 1) * (1 - clamp(0, (var(--p, 1) - var(--t) - .05) * 5, .75))); }
.chart__lh { opacity: clamp(0, (var(--p, 1) - var(--t)) * 14, 1); scale: calc(.35 + .65 * clamp(0, (var(--p, 1) - var(--t)) * 10, 1)); }
.chart__pip { fill: rgb(248 238 220 / .2); }
.chart__pip--lit { fill: #FFD37A; opacity: clamp(0, (var(--p, 1) - var(--t)) * 14, 1); }

/* The phones version: one phone moving through the game's screens. Each
   screen shows while --p is between its --a and --b. */
.lh-phones {
  grid-area: window; align-self: end; justify-self: end; position: relative; z-index: 3;
  display: grid; justify-items: center; gap: 12px; margin: 0 4px 6px 0;
}
.lh-phone {
  width: min(38vw, 170px);
  transform-origin: 50% 60%;
  transform: perspective(1400px)
    rotateY(calc(12deg + var(--px, 0) * -8deg - var(--p, .5) * 16deg))
    rotateX(calc(4deg - var(--py, 0) * 4deg))
    rotateZ(calc(3deg - var(--p, .5) * 5deg));
}
.lh-screens { position: relative; aspect-ratio: 1206 / 2622; border-radius: 12% / 5.5%; overflow: hidden; background: #0A2027; }
.lh-screen { position: absolute; inset: 0; opacity: calc(clamp(0, (var(--p, 1) - var(--a)) * 12, 1) * clamp(0, (var(--b) - var(--p, 1)) * 12, 1)); }
.lh-screen img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.lh-steps {
  display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none;
  border-radius: 999px; background: rgb(7 22 28 / .8); border: 1px solid rgb(248 238 220 / .16);
  font: 500 .5625rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(248 238 220 / .78);
}
.lh-steps li { padding: 7px 9px; border-radius: 999px; white-space: nowrap; transition: color .3s, background-color .3s; }
.scene--lighthouse[data-step="0"] .lh-steps li:nth-child(1),
.scene--lighthouse[data-step="1"] .lh-steps li:nth-child(2),
.scene--lighthouse[data-step="2"] .lh-steps li:nth-child(3) { color: #0A2027; background: #F3CF86; }

@media (min-width: 980px) {
  .scene--lighthouse .scene__stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "top window" "chart window" "bottom window"; column-gap: 2vw;
    padding: calc(var(--header-h) + 6vh) 0 8vh var(--edge);
  }
  /* Bleeds to the top, right and bottom edges; fades in from the left. */
  .lh-window {
    min-height: 560px; margin: calc(-1 * (var(--header-h) + 6vh)) 0 -8vh;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
    mask-image: linear-gradient(90deg, transparent 0, #000 24%);
  }
  .lh-window::after { background: linear-gradient(180deg, rgb(10 32 39 / .5) 0%, rgb(10 32 39 / 0) 22%); }
  .lh-stage { --lx: .54; --ly: .4; }
  .lh-chart { grid-area: chart; align-self: center; justify-self: end; width: min(38vh, 330px); margin: 0 calc(-1 * min(9vw, 150px)) 0 0; padding: 14px 14px 8px; }
  /* The phone floats in the window, at the seam, left of the lighthouse. */
  .lh-phones { grid-area: window; align-self: center; justify-self: start; margin: 0 0 0 calc(-1 * min(3vw, 48px)); gap: 14px; }
  .lh-phone { width: auto; height: min(60vh, 520px); aspect-ratio: .4716; }
  .lh-steps { font-size: .625rem; }
  .lh-chart__label { font-size: .625rem; min-height: 1.4em; }
  .scene--lighthouse .scene__copy--bottom { max-width: 440px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .lh-stage { scale: calc(1 + var(--p, 0) * .12); }
  .motion-on .lh-glow { animation: lh-pulse 3.4s ease-in-out infinite; }
}

/* ------------------------------------------------------------ the horizon */
.horizon {
  position: relative; overflow: clip; text-align: center;
  padding: clamp(80px, 14vh, 160px) 0 clamp(64px, 10vh, 120px);
  background: linear-gradient(180deg, var(--night-900) 0%, #0D1122 55%, #15142B 100%);
}
.horizon__sky { position: relative; height: clamp(170px, 30vh, 300px); overflow: hidden; }
.horizon__sky::before { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: rgb(242 237 227 / .3); }
.horizon__sky::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: min(92vw, 900px); height: 80%; translate: -50% 0;
  background: radial-gradient(50% 100% at 50% 100%, rgb(255 107 61 / .24), transparent 70%);
  opacity: calc(.35 + var(--in, 1) * .65);
}
.horizon__star {
  position: absolute; left: 50%; bottom: 0; z-index: 1; width: 38px; height: 38px; margin: 0 0 -19px -19px;
  border-radius: 50%; border: 8px solid var(--signal);
  box-shadow: 0 0 36px rgb(255 107 61 / .55), inset 0 0 12px rgb(255 107 61 / .4);
  translate: 0 calc((1 - var(--in, 1)) * -24vh);
}
.horizon__line { margin: 28px auto 0; padding: 0 var(--gutter); font: italic 500 clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem)/1.2 var(--font-display); color: var(--chalk); }

/* ------------------------------------------------------------ game pages */
.page--inkube { background: #1A0C30; }
.page--lighthouse { background: #0A2027; }
.page--game main { padding-top: 0; }
.gp-title { margin: 0 0 12px; }
.page--inkube .gp-title { font: 900 clamp(2rem, 1.4rem + 2.4vw, 3.2rem)/1.05 "Nunito", var(--font-body); letter-spacing: -.01em; color: #fff; }
.page--lighthouse .gp-title { font: 700 clamp(1.9rem, 1.3rem + 2.2vw, 3rem)/1.1 "Cinzel", var(--font-display); letter-spacing: .02em; color: #F8E7C3; }
.gp-section { position: relative; padding: clamp(56px, 9vh, 110px) 0; }
.page--game .section-lede { color: inherit; opacity: .9; }
.gp-hero { position: relative; isolation: isolate; overflow: clip; }
.gp-hero__lede { margin: 18px 0 0; max-width: 34em; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.gp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }

/* Inkube */
.page--inkube { color: #F7F0FF; }
.gp-hero--inkube {
  min-height: 100vh; min-height: 100svh; display: grid; align-items: center;
  padding: calc(var(--header-h) + 24px) 0 56px;
  background:
    radial-gradient(90% 55% at 8% 0%, rgb(47 207 221 / .16), transparent 62%),
    radial-gradient(80% 60% at 100% 100%, rgb(255 78 170 / .22), transparent 66%),
    linear-gradient(165deg, #25113F 0%, #1A0C30 48%, #2B1152 100%);
}
.gp-hero__grid { display: grid; gap: 36px; align-items: center; }
.gp-hero--inkube .scene__kind { color: #D7C6F2; }
.gp-hero__title { margin: 4px 0 0; line-height: 0; font-family: var(--font-body); }
.gp-hero--inkube .inkube-wordmark { width: min(86vw, 560px); max-width: none; height: auto; filter: drop-shadow(0 0 22px rgb(255 92 168 / .3)); }
.gp-hero__tagline { margin: 14px 0 0; font: 700 1rem/1.3 var(--font-body); letter-spacing: .22em; color: #DCCFEF; }
.gp-hero--inkube .gp-hero__lede { color: #E6DCF5; }
.gp-hero--inkube .store__soon { color: #8FE9F2; }
.gp-hero__art { position: relative; display: grid; place-items: center; min-height: 440px; }
.gp-hero__art .blots { position: absolute; left: 50%; top: 50%; width: min(115%, 640px); max-width: none; translate: -58% -62%; overflow: visible; }
.gp-hero__phone {
  position: relative; z-index: 2; width: min(52vw, 280px);
  transform: perspective(1400px) rotateY(calc(-12deg + var(--px, 0) * 8deg)) rotateX(calc(4deg - var(--py, 0) * 4deg)) rotateZ(-3deg);
}
@media (min-width: 980px) { .gp-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.blot { transform-box: fill-box; transform-origin: 50% 92%; }
@keyframes blot-jiggle { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.05, .95); } 65% { transform: scale(.97, 1.04); } }
@media (prefers-reduced-motion: no-preference) {
  .motion-on .gp-hero--inkube .blot { animation: blot-jiggle 2.6s ease-in-out infinite; }
  .motion-on .gp-hero--inkube .blot--cyan { animation-duration: 3.1s; animation-delay: -.8s; }
  .motion-on .gp-hero--inkube .blot--amber { animation-duration: 2.2s; animation-delay: -1.3s; }
}

/* Inkube: how to play (the lab, pinned) */
.scene--how .scene__stage {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "copy" "play"; gap: 12px 3vw;
  padding: calc(var(--header-h) + 12px) var(--gutter) 24px;
  background: linear-gradient(170deg, #1E0E36, #150A28 60%, #22103F);
}
.how__copy { grid-area: copy; position: relative; z-index: 3; }
.scene--how .ink-play { grid-area: play; min-height: 280px; }
.how-steps { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.how-steps li { padding: 10px 14px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); color: #E6DCF5; font-size: .98rem; transition: background-color .3s, border-color .3s; }
.how-steps strong { font-family: "Nunito", var(--font-body); font-weight: 900; color: #fff; }
.scene--how[data-step="0"] .how-steps li:nth-child(1) { background: rgb(143 233 242 / .14); border-color: rgb(143 233 242 / .55); }
.scene--how[data-step="1"] .how-steps li:nth-child(2) { background: rgb(255 141 179 / .14); border-color: rgb(255 141 179 / .55); }
.scene--how[data-step="2"] .how-steps li:nth-child(3) { background: rgb(255 199 102 / .14); border-color: rgb(255 199 102 / .55); }
.scene--how[data-step="3"] .how-steps li:nth-child(4) { background: rgb(174 239 140 / .14); border-color: rgb(174 239 140 / .55); }
@media (min-width: 980px) {
  .scene--how .scene__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "copy play"; align-items: center; padding: calc(var(--header-h) + 6vh) var(--edge) 8vh; }
  .how-steps { gap: 12px; margin-top: 22px; }
  .how-steps li { padding: 14px 18px; font-size: 1.02rem; }
  .scene--how .ink-play { min-height: 480px; height: 100%; }
}
@media (max-width: 979px) { .how-steps li { padding: 8px 12px; font-size: .92rem; } }

/* Feature cards, the fair-play note, the gallery and questions */
.feature-grid { display: grid; gap: 18px; margin-top: 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.feature { padding: 22px; border-radius: 22px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); }
.feature h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.2; }
.feature p { margin: 0; opacity: .92; }
.feature__shot { margin: -8px -8px 18px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: rgb(0 0 0 / .2); }
.feature__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.page--inkube .feature h3 { font-family: "Nunito", var(--font-body); font-weight: 900; color: #fff; }
.page--inkube .feature p { color: #E6DCF5; }
.page--lighthouse .feature { background: rgb(7 22 28 / .62); border-color: rgb(248 238 220 / .13); }
.page--lighthouse .feature h3 { font-family: "Cinzel", var(--font-display); font-weight: 700; color: #F8E7C3; }
.page--lighthouse .feature p { color: #EDE3D1; }
.fair { max-width: 920px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; }
.fair p { max-width: 42em; margin: 0 0 12px; font-size: 1.1rem; }
.fair .fair__extra { margin: 0; font-size: 1rem; opacity: .85; }
.page--inkube .fair { background: linear-gradient(135deg, rgb(255 78 170 / .16), rgb(47 207 221 / .1)); border: 1px solid rgb(255 255 255 / .14); }
.page--inkube .fair p { color: #F2EAFF; }
.page--lighthouse .fair { background: linear-gradient(135deg, rgb(243 207 134 / .12), rgb(88 167 163 / .1)); border: 1px solid rgb(243 207 134 / .3); }
.page--lighthouse .fair p { color: #F4EADB; }

.gallery { position: relative; margin-top: 22px; }
.gallery__track {
  display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px var(--edge) 22px; scroll-padding-inline: var(--edge); scrollbar-width: thin;
}
.gallery__item { flex: 0 0 auto; width: min(58vw, 264px); margin: 0; scroll-snap-align: start; }
.gallery__item figcaption { margin-top: 12px; font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.gallery__nav { display: none; gap: 10px; justify-content: flex-end; padding: 0 var(--edge); }
.js .gallery__nav { display: flex; }
.gallery__btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  color: inherit; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .2);
}
.gallery__btn:hover { background: rgb(255 255 255 / .12); }

.gp-faq { display: grid; gap: 22px; }
@media (min-width: 980px) { .gp-faq { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; } }

.gp-end__card { display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 4vw, 48px); border-radius: 28px; }
.page--inkube .gp-end__card { background: linear-gradient(120deg, #2B1152, #1E0E36); border: 1px solid rgb(255 255 255 / .12); }
.page--lighthouse .gp-end__card { background: linear-gradient(120deg, #0F3C42, #0A2027); border: 1px solid rgb(243 207 134 / .28); }
.game-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
.game-links__list { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.game-links__list a { font-weight: 700; }
.page--inkube .store__soon { color: #8FE9F2; }
.page--lighthouse .store__soon { color: #F3CF86; }

/* Lighthouse */
.page--lighthouse { color: #F8EEDC; }
.gp-hero--lighthouse .gp-hero__stage {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 46svh) auto;
  grid-template-areas: "window" "copy"; row-gap: 8px;
  padding: var(--header-h) var(--gutter) 48px;
}
.gp-hero--lighthouse .lh-window { margin-top: calc(-1 * var(--header-h)); align-self: stretch; }
.gp-hero--lighthouse .gp-hero__copy { grid-area: copy; position: relative; z-index: 3; }
.gp-hero--lighthouse .scene__kind { color: #D3E6E1; }
.gp-hero--lighthouse .lh-name { margin: 0; }
.gp-hero--lighthouse .scene__tagline { margin-top: 12px; font: italic 500 1.4rem/1.2 var(--font-display); color: #FBEFD9; }
.gp-hero--lighthouse .gp-hero__lede { color: #EDE3D1; }
@media (min-width: 980px) {
  .gp-hero--lighthouse .gp-hero__stage {
    min-height: 100vh; min-height: 100svh;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "copy window"; align-items: center; column-gap: 2vw;
    padding: calc(var(--header-h) + 6vh) 0 8vh var(--edge);
  }
}

/* Lighthouse: how to play (the island that solves itself, pinned) */
@media (prefers-reduced-motion: no-preference) and (min-height: 620px) {
  .js .scene--short { height: 190vh; }
}
.scene--lh-how .scene__stage {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "copy" "chart"; gap: 14px 4vw; justify-items: center;
  padding: calc(var(--header-h) + 12px) var(--gutter) 24px;
  background: radial-gradient(80% 60% at 70% 60%, rgb(88 167 163 / .16), transparent 70%), linear-gradient(180deg, #0A2027, #0C2A31);
}
.scene--lh-how .how__copy { justify-self: stretch; }
.rules { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; counter-reset: rule; }
.rules li { counter-increment: rule; position: relative; padding: 10px 14px 10px 50px; border-radius: 14px; background: rgb(255 255 255 / .05); border: 1px solid rgb(248 238 220 / .12); color: #F4EADB; }
.rules li::before {
  content: counter(rule); position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 .85rem/1 "Cinzel", var(--font-display); color: #0A2027; background: #F3CF86;
}
.rules__note { margin: 14px 0 0; color: #FBEFD9; font: italic 500 1.15rem/1.3 var(--font-display); }
.lh-chart--big { grid-area: chart; position: relative; align-self: center; justify-self: center; width: min(86vw, 360px); margin: 0; }
@media (min-width: 980px) {
  .scene--lh-how .scene__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "copy chart"; align-items: center; padding: calc(var(--header-h) + 6vh) var(--edge) 8vh; }
  .rules { gap: 12px; margin-top: 22px; }
  .rules li { padding: 14px 18px 14px 56px; font-size: 1.05rem; }
  .lh-chart--big { width: min(66vh, 500px); padding: 16px 16px 10px; }
  .lh-chart--big .lh-chart__label { font-size: .6875rem; min-height: 1.4em; }
}
@media (max-width: 979px) and (max-height: 760px) { .rules li { padding-block: 7px; font-size: .95rem; } }

/* The coasts, as a route on a chart */
.coasts { display: grid; gap: 40px; align-items: center; }
.coasts__list { position: relative; display: grid; gap: 12px; margin: 28px 0 0; padding: 0 0 0 30px; list-style: none; }
.coasts__list::before { content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px; border-left: 2px dashed rgb(243 207 134 / .45); }
.coasts__list li { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 12px 16px; border-radius: 14px; background: rgb(255 255 255 / .04); border: 1px solid rgb(248 238 220 / .1); }
.coasts__list li::before { content: ""; position: absolute; left: -28px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #0A2027; border: 3px solid #F3CF86; }
.coasts__list li:first-child::before { background: #F3CF86; box-shadow: 0 0 14px rgb(243 207 134 / .6); }
.coasts__name { font: 700 1.1rem/1.2 "Cinzel", var(--font-display); color: #F8E7C3; }
.coasts__range { font: 500 .6875rem/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #D3E6E1; }
.coasts__phone { justify-self: center; width: min(62vw, 300px); transform: perspective(1400px) rotateY(calc(10deg + var(--px, 0) * -6deg)) rotateZ(2deg); }
@media (min-width: 980px) { .coasts { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }