/* PurrBucket Games. Colours and type follow the brand book (assets/Branding). */

@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --navy: #06153d;
  --cream: #fff9f3;
  --pink: #dca9bc;
  --blue: #3c48ea;
  --gradient: linear-gradient(135deg, var(--pink), var(--blue));

  /* Derived tints */
  --blush: #f8e9e8; /* 20% pink into cream */
  --white: #fff;
  --ink-muted: #515973; /* 70% navy into cream, 6.6:1 on cream */
  --cream-muted: rgb(255 249 243 / 0.72);
  --rule: rgb(6 21 61 / 0.16);
  --rule-on-navy: rgb(255 249 243 / 0.14);

  /* Type: Poppins throughout, bold headings, regular body */
  --font: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --step-4: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);

  /* Space */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-space: clamp(4.5rem, 10vw, 8rem);
  --measure: 38rem;

  color-scheme: light;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--navy);
  background: var(--navy);
}

img,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p,
dl,
dd {
  margin: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

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

.container {
  position: relative;
  max-width: 68rem;
  margin-inline: auto;
}

/* Skip link + header */

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: var(--gutter);
  z-index: 10;
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  background: var(--cream);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem var(--gutter);
}

.site-nav {
  display: flex;
  gap: clamp(1.1rem, 3vw, 2.25rem);
  font-size: var(--step--1);
  font-weight: 600;
}

.site-nav a {
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  color: var(--cream);
  text-decoration: none;
}

.site-nav a:hover {
  border-bottom-color: var(--pink);
}

/* Hero: the intro splash plays once, like the game booting up */

/* The video fills the whole hero, so video navy never sits next to CSS navy
   (browsers render video colour slightly differently). The frame shape and
   the hero's aspect ratio switch together at 40rem; see scripts/build-media.sh. */
.hero {
  position: relative;
  container-type: inline-size;
  /* 12:5 like the wide frame, capped on very wide screens. (Not aspect-ratio:
     with it, max-height would also cap the width.) */
  height: min(100vw * 5 / 12, 48rem);
  overflow: hidden;
  background: var(--navy);
  color: var(--cream);
  text-align: center;
}

.intro-video,
.intro-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js .intro-still,
.is-still .intro-video {
  visibility: hidden;
}

.is-still .intro-still {
  visibility: visible;
}

/* Positions below are in hero widths (cqi): the logo scales with the width. */
.intro-replay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44cqi;
  height: 11cqi;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pink);
  cursor: pointer;
  translate: -50% -50%;
}

.hero-tagline {
  position: absolute;
  top: calc(50% + 7.5cqi);
  right: 0;
  left: 0;
  padding-inline: var(--gutter);
  font-size: clamp(var(--step-1), 1rem + 1vw, var(--step-2));
}

@media (max-width: 40rem) {
  .hero {
    height: calc(100vw * 12 / 11);
  }

  .intro-replay {
    width: 80cqi;
    height: 20cqi;
  }

  .hero-tagline {
    top: calc(50% + 14cqi);
  }
}

.js .hero-tagline {
  opacity: 0;
}

.has-played .hero-tagline {
  animation: tagline-in 0.8s ease-out 1.4s both;
}

.tagline-static .hero-tagline {
  opacity: 1;
  animation: none;
}

@keyframes tagline-in {
  from {
    opacity: 0;
    transform: translateY(0.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Poste No. 37, laid out as a 19th-century Belgian postcard */

.game {
  padding: var(--section-space) var(--gutter);
  background: var(--blush);
}

.postcard {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head stamp"
    "message message"
    "address address";
  gap: 1.75rem 1rem;
  max-width: 60rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 6px;
  background: var(--cream);
  box-shadow:
    0 1px 2px rgb(6 21 61 / 0.06),
    0 32px 60px -32px rgb(6 21 61 / 0.45);
}

.postcard-head {
  grid-area: head;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.postcard-message {
  grid-area: message;
}

.postcard-title {
  font-size: var(--step-4);
  letter-spacing: -0.025em;
}

.postcard-note {
  margin-top: 0.4rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.postcard-lead {
  max-width: 28rem;
  margin-top: 1.75rem;
  font-size: var(--step-1);
  line-height: 1.5;
}

/* Footage sits on the card like a small photo print. */
.postcard-footage {
  max-width: 28rem;
  margin: 1.75rem 0 0;
}

.footage-video {
  width: 100%;
  height: auto;
  border: 5px solid var(--white);
  border-radius: 2px;
  background: var(--navy);
  box-shadow: 0 1px 3px rgb(6 21 61 / 0.22);
}

.postcard-footage figcaption {
  margin-top: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.postcard-address {
  grid-area: address;
}

.postcard-address div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 1rem;
  padding: 0.65rem 0 0.4rem;
  border-bottom: 1px solid var(--rule);
}

.postcard-address dt {
  flex: 0 0 5.5rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
}

.postcard-address dd {
  font-weight: 600;
}

/* Stamp: perforations are holes cut with a mask, so the shadow follows them. */

.postcard-stamp {
  grid-area: stamp;
  justify-self: end;
  rotate: 3deg;
  filter:
    drop-shadow(0 1px 1px rgb(6 21 61 / 0.22))
    drop-shadow(0 6px 10px rgb(6 21 61 / 0.12));
}

.stamp {
  --hole: 4px;
  --pitch: 12px;
  --edge: 8px;
  /* Keep both sides a multiple of --pitch so holes land evenly on every edge. */
  width: 96px;
  height: 120px;
  padding: var(--edge);
  background: var(--white);
  -webkit-mask:
    linear-gradient(#000 0 0) var(--edge) var(--edge) / calc(100% - 2 * var(--edge)) calc(100% - 2 * var(--edge)) no-repeat,
    radial-gradient(circle var(--hole), #0000 calc(100% - 0.5px), #000) calc(var(--pitch) / -2) calc(var(--pitch) / -2) / var(--pitch) var(--pitch);
  mask:
    linear-gradient(#000 0 0) var(--edge) var(--edge) / calc(100% - 2 * var(--edge)) calc(100% - 2 * var(--edge)) no-repeat,
    radial-gradient(circle var(--hole), #0000 calc(100% - 0.5px), #000) calc(var(--pitch) / -2) calc(var(--pitch) / -2) / var(--pitch) var(--pitch);
}

.stamp-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0.5rem 0.25rem 0.45rem;
  background: var(--gradient);
  color: var(--cream);
  outline: 1px solid rgb(255 249 243 / 0.55);
  outline-offset: -4px;
}

.stamp-small {
  font-size: 0.5625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stamp-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 52rem) {
  .postcard {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "head head"
      "message stamp"
      "message address";
    gap: 1.5rem 0;
    rotate: -0.75deg;
  }

  .postcard-head {
    justify-content: center;
  }

  .postcard-message {
    padding-right: clamp(2rem, 4vw, 3rem);
    border-right: 1px solid var(--rule);
  }

  .postcard-stamp,
  .postcard-address {
    margin-left: clamp(2rem, 4vw, 3rem);
  }

  .postcard-address {
    align-self: end;
  }

  .stamp {
    width: 120px;
    height: 144px;
  }

  .stamp-value {
    font-size: 2.75rem;
  }
}

/* Studio */

.studio {
  position: relative;
  overflow: hidden;
  padding: var(--section-space) var(--gutter);
  background: var(--navy);
  color: var(--cream);
}

/* The oversized, faint cat from the brand book cover. */
.studio::after {
  content: "";
  position: absolute;
  right: -5rem;
  bottom: -3rem;
  width: min(28rem, 70vw);
  aspect-ratio: 607 / 489;
  background: url("/media/emblem-cream.svg") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}

.studio-intro {
  max-width: var(--measure);
}

.studio-intro h2 {
  font-size: var(--step-3);
}

.studio-intro p {
  margin-top: 1.25rem;
  font-size: var(--step-1);
  line-height: 1.5;
}

/* Footer */

.site-footer {
  padding: 0 var(--gutter) 2.5rem;
  background: var(--navy);
  color: var(--cream-muted);
  font-size: var(--step--1);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-on-navy);
}

.footer-logo {
  width: 180px;
  height: auto;
}

/* 404 */

.not-found {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  min-height: 100svh;
  padding: var(--gutter);
  color: var(--cream);
  text-align: center;
}

.not-found img {
  width: 5.5rem;
  height: auto;
}

.not-found h1 {
  font-size: var(--step-3);
}

.not-found p {
  max-width: 26rem;
  color: var(--cream-muted);
}

.not-found a {
  font-weight: 600;
  color: var(--pink);
  text-underline-offset: 0.2em;
}