/* gridlit.codehappens.dev · structure shared with hoplanet.codehappens.dev (hero scene, steps beside one
 * screenshot, screenshot strip, feature list) · idea: "a line fills, lights up and clears behind the title"
 * paper: #0E1330 · accent: #4DD9E8 + block colours · display: Unbounded · body: Figtree
 */
@import url("fonts/fonts.css");
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; color: var(--color-ink); font: 400 var(--text-base)/1.6 var(--font-body);
  background: linear-gradient(var(--color-paper), var(--color-paper-2)) fixed var(--color-paper);
}
a { color: var(--color-cyan); text-underline-offset: 0.18em; }
a:focus-visible { outline: 3px solid var(--color-cyan); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); font-style: normal; font-weight: 800; line-height: 1.05; margin: 0; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* Faint board grid behind everything. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--color-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: radial-gradient(ellipse at 50% 20%, black, transparent 75%);
}

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-gutter); }

.top { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); font-size: var(--text-sm); }
.top a { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.top a:hover { color: var(--color-ink); }

/* ---------- Hero: the game's loop behind the title ---------- */

.hero { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-lg); padding-block: var(--space-md) var(--space-2xl); }
.scene { width: 100%; max-width: 34rem; max-height: 62svh; margin-inline: auto; overflow: visible; }
.hero__title { font-size: var(--text-display); text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; min-width: 0; }
.hero__line { margin-top: var(--space-md); font-size: var(--text-lg); line-height: 1.25; font-weight: 600; max-width: 22ch; }
.hero__meta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); color: var(--color-muted); }
.get { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 999px; background: var(--color-cyan); color: var(--color-paper); font-weight: 700; text-decoration: none; white-space: nowrap; }
.get:hover { background: var(--color-cyan-hi); }
.get:focus-visible { border-radius: 999px; }
.ads__get { margin-top: var(--space-lg); }
@media (min-width: 56rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding-block: var(--space-xl) var(--space-3xl); }
  .hero__copy { order: -1; }
  .hero__title { font-size: clamp(2.5rem, 4.4vw, 3.75rem); }
  .scene { max-height: 72svh; }
}

.scene .board { fill: var(--color-board); }
.scene .cell { fill: var(--color-cell); }
.scene .gloss { fill: var(--color-ink); opacity: 0.28; }
.scene .c0 { fill: var(--block-0); } .scene .c1 { fill: var(--block-1); }
.scene .c2 { fill: var(--block-2); } .scene .c3 { fill: var(--block-3); }
.scene .c4 { fill: var(--block-4); } .scene .c5 { fill: var(--block-5); }
.scene .c6 { fill: var(--block-6); } .scene .c7 { fill: var(--block-7); }
.scene .clear { animation: clear var(--loop) ease-out infinite; transform-box: fill-box; transform-origin: center; }
.scene .drop { animation: drop var(--loop) cubic-bezier(0.3, 0, 0.2, 1) infinite; }
.scene .flash { fill: var(--color-ink); opacity: 0; animation: flash var(--loop) ease-out infinite; }
.soon { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 999px; border: 2px solid var(--color-cyan); color: var(--color-cyan); font-weight: 700; white-space: nowrap; }

/* ---------- How it plays ---------- */

.block { padding-block: var(--space-2xl); }
.block__title { font-size: var(--text-lg); letter-spacing: 0.01em; }

.play { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
.steps { margin: var(--space-lg) 0 0; padding: 0 0 0 1.4em; max-width: var(--read-max); display: grid; gap: var(--space-lg); }
.steps li::marker { color: var(--color-muted); font-weight: 600; }
.steps h3 { font-size: var(--text-md); color: var(--color-cyan); }
.steps p { margin-top: var(--space-xs); color: var(--color-muted); }
.play__more { margin-top: var(--space-lg); max-width: var(--read-max); }
.shot { margin: 0; }
.shot img { border-radius: var(--radius-shot); border: 1px solid var(--color-rule); }
.shot figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.play .shot { max-width: 17rem; }
@media (min-width: 56rem) {
  .play { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-2xl); }
}

/* ---------- Screenshot strip ---------- */

.strip { display: flex; gap: var(--space-md); margin-top: var(--space-lg); padding-bottom: var(--space-md); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--page-gutter); }
.strip::before, .strip::after { content: ""; flex: none; width: max(calc(var(--page-gutter) - var(--space-md)), calc((100vw - var(--page-max)) / 2 + var(--page-gutter) - var(--space-md))); }
.strip .shot { flex: none; width: min(62vw, 14rem); scroll-snap-align: start; }

/* ---------- What's in it ---------- */

.facts { margin: var(--space-lg) 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-2xl); }
.facts dt { font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
.facts dd { margin: var(--space-xs) 0 0; color: var(--color-muted); max-width: 38ch; }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ads { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); max-width: var(--read-max); color: var(--color-muted); }
.ads strong { color: var(--color-ink); font-weight: 600; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-xl); font-size: var(--text-sm); color: var(--color-muted); border-top: 1px solid var(--color-rule); }
.foot a { white-space: nowrap; }

/* ---------- Privacy policy ---------- */

.doc { max-width: calc(var(--read-max) + 2 * var(--page-gutter)); padding-bottom: var(--space-2xl); }
.doc__part + .doc__part { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.doc__title { font-size: var(--text-lg); margin-top: var(--space-lg); }
.doc__date { color: var(--color-muted); margin-top: var(--space-xs); }
.doc__langs { display: flex; gap: var(--space-md); margin-top: var(--space-md); }
.doc h2 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-md); line-height: 1.3; margin-top: var(--space-xl); }
.doc p { margin-top: var(--space-sm); color: var(--color-muted); }
.doc p strong { color: var(--color-ink); }
.doc a { overflow-wrap: anywhere; }

/* ---------- Motion ---------- */

/* 0–22%: the domino slides down into the gap · 28–38%: the full row flashes · 38–80%: row empty · then it refills. */
@keyframes drop {
  0%, 4% { transform: translateY(-300px); opacity: 0; }
  8% { opacity: 1; }
  22%, 100% { transform: translateY(0); }
}
@keyframes clear {
  0%, 28% { opacity: 1; transform: scale(1); }
  38% { opacity: 0; transform: scale(0.4); }
  80% { opacity: 0; transform: scale(0.4); }
  90%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes flash { 0%, 24% { opacity: 0; } 30% { opacity: 0.55; } 40%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .scene .clear, .scene .drop, .scene .flash { animation: none; }
}