/* Second State Games, the front page. Black, white and one line weight, like
   the logo, and built on the logo's idea: a body, and a second body that has
   stepped out of it. The big letters are drawn twice (an outline that stays
   put, and a second outline that drifts off it), each game's
   picture floats away from the dashed frame it left, and a silver cord runs
   down the page and back to the body. Only this page uses this file; the
   contact page keeps home.css. */

@font-face { font-family: "Bowlby One"; src: url("fonts/BowlbyOne-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Reenie Beanie"; src: url("fonts/ReenieBeanie.ttf") format("truetype"); font-display: swap; }

:root {
  --bg: #000;
  --fg: #fff;
  --dim: #9c9c9c;
  --line: 2px;
  --edge: clamp(16px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  position: relative; margin: 0; overflow-x: clip;
  color: var(--fg); background: var(--bg);
  font: 18px/1.5 Georgia, "Times New Roman", serif;
}
a { color: inherit; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg, video { display: block; }
:focus-visible { outline: var(--line) solid var(--fg); outline-offset: 5px; }
.hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- The cord: front.js draws it from the logo's feet, behind each
   picture, to the dot beside the last words ---------- */
.cord { position: absolute; top: 0; left: 0; width: 100%; height: 1px; overflow: visible; pointer-events: none; }
.cord path { fill: none; stroke: var(--fg); stroke-width: var(--line); stroke-linecap: round; }
.cord circle { fill: var(--bg); stroke: var(--fg); stroke-width: var(--line); }
.top, main, footer { position: relative; }
/* The top bar stays above the big letters, which drift up towards it. */
.top { z-index: 2; }

/* ---------- Along the top ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  max-width: 1400px; margin: 0 auto; padding: 20px var(--edge) 0;
}
.mark { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; font: 17px/1 "Bowlby One", "Arial Black", sans-serif; }
.mark svg { width: 28px; height: 36px; fill: currentColor; }
/* Each link has room around the word to click on; the line under it stays the width of the word. */
.top nav { display: flex; margin-right: -12px; }
.top nav a { padding: 10px 12px; text-decoration: none; }
.top nav a span { padding-bottom: 2px; border-bottom: var(--line) solid transparent; }
.top nav a:hover span, .top nav a:focus-visible span { border-color: currentColor; }

main { max-width: 1400px; margin: 0 auto; padding: 0 var(--edge); }

/* ---------- The two figures, and the name coming apart ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 18fr) minmax(0, 82fr); align-items: end; gap: 0 4.5%;
  padding-top: clamp(34px, 6vw, 84px);
}
.who { width: 100%; height: auto; fill: var(--fg); overflow: visible; }
/* Nothing in the letters is for clicking, and their boxes reach well above the ink. */
.name svg { width: 100%; height: auto; overflow: visible; pointer-events: none; }
.blk { font-family: "Bowlby One", Impact, "Arial Black", sans-serif; font-size: 262px; }
.blk.small { font-size: 62px; fill: var(--fg); }
.ln { fill: none; stroke: var(--fg); stroke-width: 4.5; stroke-linejoin: round; }
/* The copy in front is filled with the page's black, so it covers the outline behind it where they cross. */
.second.ln { fill: var(--bg); }
/* How far the second copy has drifted, in the drawing's own units. front.js
   moves it with the mouse and the scroll; without it, it rests here. */
.second {
  --sx: 20; --sy: -16;
  transform: translate(calc(var(--sx) * 1px), calc(var(--sy) * 1px)) rotate(-1.4deg);
  transform-origin: 608px 250px;
}
.say { grid-column: 2; padding-top: clamp(18px, 2.6vw, 36px); }
.tag { font-size: clamp(20px, 2vw, 27px); line-height: 1.3; font-style: italic; }

/* ---------- A game: the picture, floating off the frame it left ---------- */
.vision {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end;
  margin-top: clamp(100px, 13vw, 190px);
}
.pic { grid-column: 1 / span 8; grid-row: 1; position: relative; display: block; }
.pic::before { content: ""; position: absolute; inset: 0; border: var(--line) dashed rgb(255 255 255 / .55); }
.lift {
  display: block; position: relative;
  transform: translate(2.4%, -4.5%) rotate(1.1deg);
  transition: transform .4s cubic-bezier(.2, .8, .3, 1);
}
.shot {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1232 / 706; background: #111;
  border: var(--line) solid var(--fg);
  animation: bob 5.5s ease-in-out infinite alternate;
}
.shot img, .shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot video { opacity: 0; transition: opacity .3s; }
.pic.playing video { opacity: 1; }
@keyframes bob { to { transform: translateY(-10px); } }
@media (hover: hover) and (pointer: fine) {
  .pic:hover .lift, .pic:focus-visible .lift { transform: translate(3.8%, -8%) rotate(.3deg); }
  .vision.flip .pic:hover .lift, .vision.flip .pic:focus-visible .lift { transform: translate(-3.8%, -8%) rotate(-.3deg); }
}

.tell { grid-column: 9 / span 4; grid-row: 1; padding: 0 0 3% 14%; }
.vision.flip .pic { grid-column: 5 / span 8; }
.vision.flip .lift { transform: translate(-2.4%, -4.5%) rotate(-1.1deg); }
.vision.flip .shot { animation-delay: -2.7s; }
.vision.flip .tell { grid-column: 1 / span 4; padding: 0 14% 3% 0; }

/* Headings are hollow, like the figures: an outline with nothing inside. */
.hollow {
  margin: .25em 0 .4em;
  font: clamp(28px, 2.8vw, 42px)/1.08 "Bowlby One", "Arial Black", sans-serif; letter-spacing: .02em;
}
@supports (-webkit-text-stroke: 1px #fff) {
  .hollow { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
}
.hand { font: clamp(31px, 2.9vw, 41px)/.98 "Reenie Beanie", "Segoe Print", "Bradley Hand", cursive; }
.go { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding-top: 1.1em; }
.go a { text-decoration: underline; text-decoration-thickness: var(--line); text-underline-offset: 5px; }
.go a:hover { text-decoration-style: dashed; }
.go span { color: var(--dim); font-style: italic; }

/* ---------- Where the cord ends ---------- */
.home { position: relative; max-width: 760px; margin: clamp(120px, 15vw, 220px) 0 0 clamp(46px, 17%, 240px); }
.cord-end { position: absolute; left: -34px; top: clamp(14px, 1.4vw, 20px); width: 1px; height: 1px; }
.home .hand { font-size: clamp(33px, 3.3vw, 46px); }
.home .hand + .hand { padding-top: .35em; }

footer {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: 1400px; margin: clamp(80px, 10vw, 140px) auto 0; padding: 0 var(--edge) 30px;
  font-size: 15px; color: var(--dim);
}
footer a { text-underline-offset: 3px; }

/* ---------- Narrow: one column ---------- */
@media (max-width: 760px) {
  .top nav { margin-left: -12px; font-size: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  /* The figures go under the words, so the cord can drop straight from their feet to the first game. */
  .who { order: 3; width: 96px; margin-top: 30px; }
  .say { grid-column: 1; }
  .ln { stroke-width: 6.5; }
  .vision { display: block; }
  /* The words hang off the cord, which runs down the left edge here. */
  .tell, .vision.flip .tell { padding: 22px 0 0 30px; }
  .lift { transform: translate(1.6%, -3.5%) rotate(1deg); }
  .vision.flip .lift { transform: translate(-1.6%, -3.5%) rotate(-1deg); }
  .home { margin-left: 40px; }
  .cord-end { left: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}