/* ==========================================================================
   Stradek Games: stylesheet ("Cold open": the first frame of a trailer).
   Part 1: base (tokens, reset, a11y, draft marker).
   Part 2: page (letterbox bars, hero, about, links, footer).
   Mobile-first. Source of truth for look and copy: BRIEF.md.
   ========================================================================== */

/* ---- Part 1: base ------------------------------------------------------- */

/* Anton (SIL OFL 1.1, fonts/OFL-Anton.txt). The only web font; self-hosted. */
@font-face {
  font-family: "Anton";
  src: url("fonts/anton-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --black: #0b0b0c;
  --ink: #141416;
  --line: rgb(242 239 234 / 0.14);
  --text: #f2efea;
  --muted: #9a9aa0;      /* 7.0:1 on --black */
  --accent: #ff3d1f;     /* 5.5:1 on --black; use BLACK text on accent fills */

  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  --bar-h: clamp(3.25rem, 9vh, 5rem);   /* letterbox bar height */
  /* How much of the next section shows below the hero: the "About" label and
     the top edge of the photo still. It's the only "keep scrolling" cue. */
  --peek: clamp(6.5rem, 14svh, 9rem);
  --snap: cubic-bezier(0.2, 0.9, 0.1, 1); /* fast in, hard stop */
  --dur: 180ms;
  --slowmo: 2.6s;                          /* the "time slows" beat */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
svg { display: block; }

a { color: inherit; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

::selection { background: var(--accent); color: var(--black); }

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

.skip-link {
  position: absolute;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* Copy that still needs Peter's sign-off. Remove the marker once approved. */
.draft {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.2rem 0.5rem;
  border: 1px dashed var(--muted);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Part 2: page ------------------------------------------------------- */

/* Shared small label */
.label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

/* Letterbox bars ---------------------------------------------------------- */
.bar {
  position: absolute;
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--bar-h);
  padding-inline: var(--gutter);
  background: #000;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em; /* 0.3em from 30rem up; tighter so the bar fits one line on phones */
  text-transform: uppercase;
  animation: bar-in 520ms var(--snap) both;
}

@media (min-width: 30rem) {
  .bar { letter-spacing: 0.3em; }
}

.bar--top { top: 0; --from: -100%; }
.bar--bottom { bottom: 0; --from: 100%; }

.bar__mark {
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.bar__nav {
  display: flex;
  gap: clamp(0.9rem, 3vw, 2rem);
}

.bar__nav a {
  display: inline-block;
  padding-block: 0.75rem;
  text-decoration: none;
  transition: color var(--dur) var(--snap);
}

.bar__timecode {
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

@keyframes bar-in {
  from { transform: translateY(var(--from)); }
}

/* Hero -------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--peek));
  padding: calc(var(--bar-h) + 2rem) var(--gutter);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgb(255 61 31 / 0.14), transparent 70%),
    var(--black);
}

.hero__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 6vw, 5rem);
  text-align: center;
}

/* Viewfinder corners */
.hero__corner {
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  border: 0 solid var(--muted);
}
.hero__corner--tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.hero__corner--tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.hero__corner--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.hero__corner--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

/* Says "game studio" before the title, like an opening credit */
.hero__kicker {
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  animation: fade-in 300ms var(--snap) 620ms both;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(4.25rem, 21vw, 13rem);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  animation: cut-in 420ms var(--snap) 160ms backwards;
  /* "Time slows": leaving the hover snaps back fast... */
  transition: transform 220ms var(--snap), letter-spacing 220ms var(--snap);
}

/* ...but hovering the frame (or tapping it on touch, slowmo.js) drifts in slow
   motion. Hover only where it's real: on phones :hover sticks after a tap. */
.hero__frame.is-slow .hero__title {
  transform: scale(1.035);
  letter-spacing: 0.05em;
  transition-duration: var(--slowmo);
  transition-timing-function: cubic-bezier(0.1, 0.6, 0.2, 1);
}

@media (hover: hover) {
  .hero__frame:hover .hero__title {
    transform: scale(1.035);
    letter-spacing: 0.05em;
    transition-duration: var(--slowmo);
    transition-timing-function: cubic-bezier(0.1, 0.6, 0.2, 1);
  }
}

/* No grey tap flash on the touch-reactive parts (hero, timecode bar, still). */
.hero__frame,
.bar--bottom,
.still {
  -webkit-tap-highlight-color: transparent;
}

.hero__rule {
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 clamp(1rem, 2.5vw, 1.25rem);
  background: var(--accent);
  animation: rule-in 300ms var(--snap) 480ms both;
}

.hero__tagline {
  font-size: clamp(0.72rem, 2.4vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  animation: fade-in 300ms var(--snap) 620ms both;
}

/* 404 page: full-height hero (nothing below to peek) + a way back */
.hero--full {
  min-height: 100svh;
}

.hero__back {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: fade-in 300ms var(--snap) 760ms both;
}

.hero__back a {
  display: inline-block;
  padding-block: 0.5rem;
  text-underline-offset: 0.4em;
}

@keyframes cut-in {
  from { clip-path: inset(-20% -20% 100% -20%); transform: translateY(0.15em); }
  to { clip-path: inset(-20% -20% -20% -20%); }
}
@keyframes rule-in { from { transform: scaleX(0); } }
@keyframes fade-in { from { opacity: 0; } }

/* About: intertitle ------------------------------------------------------- */
.about {
  width: min(100% - 2 * var(--gutter), 40rem);
  margin: 0 auto;
  padding-block: 2.75rem clamp(6rem, 18vw, 11rem); /* short top so the peek lands on the label */
  text-align: center;
}

.about__title {
  margin: 1.25rem 0 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 9vw, 5rem);
  font-weight: 400;
  line-height: 0.95;
  text-transform: uppercase;
}

/* Story: Peter's path as a short story. Left-aligned prose in a readable column;
   the opening is always visible, the rest folds out (native <details>). */
.story {
  max-width: 34rem;
  margin: 0 auto;
  font-size: clamp(1.02rem, 2vw, 1.12rem);
  line-height: 1.75;
  text-align: left;
}

.story p + p,
.story__rest p {
  margin-top: 1.25rem;
}

/* Last line of the full story lands like a final title card */
.story__rest .story__end {
  margin-top: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
}

/* Jumps to the Links section. Accent underline marks it as a link. */
.story__end a {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
  transition: color var(--dur) var(--snap);
}

.story__more {
  margin-top: 1.5rem;
}

.story__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.6rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur) var(--snap);
}

.story__toggle::-webkit-details-marker { display: none; }

/* + / − indicator */
.story__toggle::before {
  content: "+";
  width: 1ch;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0;
}

.story__more[open] .story__toggle::before { content: "−"; }

.story__toggle:hover { color: var(--text); }

.story__toggle-close,
.story__more[open] .story__toggle-open { display: none; }
.story__more[open] .story__toggle-close { display: inline; }

/* Open and close: the story unrolls to its height and rolls back up, in CSS
   only. A one-row grid going 0fr -> 1fr animates to the content's height in
   every current browser (Safari included, unlike interpolate-size);
   allow-discrete keeps the content rendered until the close finishes. */
.story__more::details-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 380ms var(--snap),
    opacity 380ms var(--snap),
    content-visibility 380ms allow-discrete;
}

.story__more[open]::details-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.story__more .story__rest {
  min-height: 0;
  overflow: hidden;
}

/* Browsers without ::details-content: fade in on open, close instantly */
@supports not selector(::details-content) {
  .story__more[open] .story__rest {
    animation: story-in 260ms var(--snap);
  }
}

@keyframes story-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
}

/* Still: a frame from the film (photo of Peter) ---------------------------- */
.still {
  position: relative;
  width: min(100%, 26rem);
  margin: 1.75rem auto 3rem;
  aspect-ratio: 1; /* square, like the photo */
  overflow: hidden;
  background: var(--ink);
}

.still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.1) brightness(0.95);
  /* Holding a finger on it tilts the card (tilt.js), so no image callout or selection. */
  -webkit-touch-callout: none;
  user-select: none;
}

/* Tilt (tilt.js): the still turns like a card in your hand, the side under
   the mouse sinking back. Follows the mouse tightly, snaps back on leave. */
.still[data-tilt] {
  transform: perspective(60rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 450ms var(--snap);
}

.still[data-tilt].is-tilting {
  transform: perspective(60rem) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03);
  transition-duration: 90ms;
}

/* Gloss: a wide, soft reflection slides across the print as it turns.
   Shows only while tilting. */
.still__gloss {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 35%,
    color-mix(in srgb, var(--text) 40%, transparent) 50%,
    transparent 65%);
  background-size: 200% 200%;
  background-position: var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--snap);
}

.is-tilting .still__gloss {
  opacity: 1;
  transition-duration: var(--dur);
}

/* The fade keeps the accent name readable (AA) over a bright photo. */
.still__caption {
  position: absolute;
  inset: auto 0 0;
  padding: 2.5rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, color-mix(in srgb, var(--black) 90%, transparent));
  color: var(--accent);
  text-align: left;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-shadow: 0 1px 3px #000;
  text-transform: uppercase;
}

/* Links: laid out like film end credits ----------------------------------- */
.credits {
  padding: 0 var(--gutter) clamp(6rem, 16vw, 10rem);
  text-align: center;
}

.credits__list {
  margin: 2.5rem 0 0;
}

/* Role (left) and names (right) share one size, like film credits.
   The names are just a notch bolder and brighter than the role. */
.credits__row {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  line-height: 1.6;
  text-transform: uppercase;
}

.credits__row dt {
  color: var(--muted);
  font-weight: 500;
}

.credits__row dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
}

.credits__names li + li {
  margin-top: 0.35rem;
}

.credits__row a {
  display: inline-block;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--snap);
}

@media (min-width: 40rem) {
  .credits__row {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    align-items: baseline;
  }
  .credits__row dt { text-align: right; }
  .credits__row dd { text-align: left; }
}

/* Footer ------------------------------------------------------------------ */
.footer {
  display: grid;
  gap: 0.5rem;
  padding: 2rem var(--gutter) 3.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.footer__tag {
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}