/* ==========================================================================
   Bavan — portfolio styles
   --------------------------------------------------------------------------
   1. Design tokens (colours, fonts, type scale, spacing, motion)
      ↳ Tweak the look here. Everything below uses these variables.
   2. Base
   3. Top bar
   4. Hero
   5. Cards
   6. Footer
   7. Dock
   8. Cursor canvas
   9. Simple pages (Works, Who dis, Fun Lab, 404)
   10. Reduced motion
   ========================================================================== */


/* Body font. Files live in assets/fonts/ (PP Neue Montreal, Pangram Pangram). */
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("/assets/fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}


/* 1. DESIGN TOKENS ======================================================== */
:root {
  /* Colours */
  --ink:      #0d0d0d;  /* page background */
  --surface:  #121212;  /* cards, bars */
  --bone:     #e8e2da;  /* main text */
  --white:    #ffffff;  /* hero headline only, so it stands out */
  --greige:   #b5aa9c;  /* secondary text */
  --grey:     #9f9f9f;  /* quiet text */
  --accent:      #2de1c2;  /* turquoise: circle, glow, cursor, icons, highlights */
  --accent-dark: #14b8a6;  /* darker turquoise for hovers */
  --on-accent:   var(--ink); /* text on top of --accent */

  --glass:        rgb(232 226 218 / 0.07); /* see-through fill */
  --glass-strong: rgb(18 18 18 / 0.72);    /* fill for bars over content */
  --line:         rgb(232 226 218 / 0.08); /* hairlines and borders */
  --line-strong:  rgb(232 226 218 / 0.16);
  --glow:         rgb(45 225 194 / 0.28);  /* turquoise haze behind the photo */

  /* Fonts. To use PP Mondwest instead, add its @font-face and put
     "PP Mondwest" first in --font-display. */
  --font-display: "Pixelify Sans", ui-monospace, monospace;
  --font-body:    "PP Neue Montreal", "Google Sans Flex", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale: phone size → desktop size (grows smoothly in between) */
  --text-hero:   clamp(3rem, 1.66rem + 5.49vw, 6.625rem);  /* 48 → 106 */
  --text-hero-phone: clamp(2.25rem, 10.5vw, 3rem);       /* 36 → 48, under 48rem */
  --text-h2:     clamp(2.5rem, 1.94rem + 2.29vw, 4rem);    /* 40 → 64 */
  --text-card:   clamp(2rem, 1.81rem + 0.76vw, 2.5rem);    /* 32 → 40 */
  --text-body:   clamp(1rem, 0.95rem + 0.19vw, 1.125rem);  /* 16 → 18 */
  --text-small:  0.875rem;                                 /* 14 */
  --text-meta:   0.8125rem;                                /* 13 */

  --leading-tight: 1;
  --leading-heading: 1.2;
  --leading-body: 1.65;

  /* Spacing (8px rhythm) */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 1rem;     /* 16 */
  --space-3: 1.5rem;   /* 24 */
  --space-4: 2.5rem;   /* 40 */
  --space-5: 4rem;     /* 64 */
  --space-6: 7.5rem;   /* 120 */

  --gutter: max(1rem, 2.78vw);          /* page side margin: 16 → 40 */
  --radius: 0.75rem;                    /* 12px, bars and buttons */
  --radius-card: 1.25rem;               /* 20px, teaser panels */
  --bar-height: 4rem;                   /* 64px top bar */
  --bar-top: 1.5rem;                    /* gap above the top bar */
  --dock-edge: 1.75rem;                 /* dock distance from the right and bottom edges */

  /* Hero */
  --hero-visual: clamp(15rem, 38vh, 28rem);  /* photo + circle size */

  /* Motion */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --duration: 600ms;
}

@media (max-width: 47.99rem) {
  :root { --bar-height: 3.5rem; --bar-top: 1rem; --dock-edge: 1rem; }
}


/* 2. BASE ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: var(--on-accent); }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--space-2); }

/* Glass button: 12px corners, see-through fill */
.button {
  display: inline-flex;
  align-items: center;
  height: 3.5rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(var(--glass), rgb(232 226 218 / 0.14));
  font-size: var(--text-small);
  font-weight: 500;
  transition: background-color 200ms, border-color 200ms;
}
.button:hover {
  background-color: var(--glass);
  border-color: var(--bone);
}


/* 3. TOP BAR =============================================================
   Glass pill: avatar · small divider · links. */
.topbar {
  position: fixed;
  top: var(--bar-top);
  left: 50%;
  translate: -50% 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);                     /* 32px around the divider */
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  height: var(--bar-height);
  padding: 0 var(--space-4) 0 .875rem;      /* left = space above/below the avatar (14px) */
  border: 1px solid rgb(255 255 255 / .08);
  border-radius: 100px;
  background:
    linear-gradient(rgb(255 255 255 / .06), rgb(255 255 255 / .06)),
    rgb(0 0 0 / .48);
  -webkit-backdrop-filter: blur(40px);
          backdrop-filter: blur(40px);
  font-size: 1rem;
}
.topbar__home { display: flex; align-items: center; flex: none; }
.topbar__mark {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent);
  object-fit: cover;
}
.topbar__divider {
  flex: none;
  width: 1px;
  height: 1rem;
  background: rgb(232 226 218 / .5);
}
.topbar__links {
  display: flex;
  gap: var(--space-4);
  color: var(--greige);
}
.topbar__links a {
  --c: var(--accent);
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transition: color 200ms;
}
.topbar__links a[href$="about.html"] { --c: #a6f05a; }
.topbar__links a[href$="lab.html"]   { --c: #5cc8f5; }
.topbar__links a:hover,
.topbar__links a[aria-current="page"] { color: var(--bone); }

/* Nav hover: pixel rocket lift-off (word rumbles + rises, exhaust flame below, sparkles around) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .topbar__links a::before,
  .topbar__links a::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 2px;
    margin-left: -1px;
    opacity: 0;
    pointer-events: none;
  }

  /* Exhaust flame under the word: hot bone core, section-colour sparks */
  .topbar__links a::before {
    top: calc(100% + 1px);
    background: var(--bone);
    box-shadow:
      -2px 0 var(--bone), 2px 0 var(--bone),
      0 2px var(--bone), -2px 2px var(--c), 2px 2px var(--c),
      -4px 4px var(--c), 0 4px var(--c), 3px 4px var(--c),
      -1px 6px var(--c), 4px 7px var(--c),
      -3px 9px var(--c), 2px 10px var(--c),
      0 13px var(--c);
  }

  /* Sparkles: two pixel plus-stars + three single pixels around the word */
  .topbar__links a::after {
    top: 50%;
    margin-top: -1px;
    background: transparent;
    box-shadow:
      -30px -10px var(--c), -32px -10px var(--c), -28px -10px var(--c), -30px -12px var(--c), -30px -8px var(--c),
      30px -6px var(--c), 28px -6px var(--c), 32px -6px var(--c), 30px -8px var(--c), 30px -4px var(--c),
      22px -14px var(--c), -20px 8px var(--c), 36px 6px var(--c);
  }

  .topbar__links a:hover,
  .topbar__links a:focus-visible {
    animation: nav-liftoff 640ms steps(1, end) forwards;
  }
  .topbar__links a:hover::before,
  .topbar__links a:focus-visible::before {
    animation: nav-thrust 360ms steps(4) 140ms infinite;
  }
  .topbar__links a:hover::after,
  .topbar__links a:focus-visible::after {
    animation: nav-twinkle 900ms steps(3) 200ms infinite;
  }
}

@keyframes nav-liftoff {
  0%       { translate: 0 0; }
  12%      { translate: -1px 0; }
  24%      { translate: 1px 0; }
  36%      { translate: -1px 0; }
  48%      { translate: 0 -1px; }
  64%      { translate: 0 -2px; }
  80%,100% { translate: 0 -3px; }
}
@keyframes nav-thrust {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(6px); }
}
@keyframes nav-twinkle {
  0%   { opacity: 0; }
  33%  { opacity: 1; }
  66%  { opacity: .5; }
  100% { opacity: 0; }
}

@media (max-width: 47.99rem) {
  .topbar { gap: 1.125rem; padding: 0 1.25rem 0 .75rem; font-size: .9375rem; }
  .topbar__links { gap: 1.125rem; }
  .topbar__mark { width: 2rem; height: 2rem; }
}


/* 4. HERO ================================================================= */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: calc(var(--bar-height) + var(--space-5)) var(--gutter) var(--space-5);
  text-align: center;
  isolation: isolate;
  overflow-x: clip; /* the glow is wider than a phone screen */
}

/* Photo block: a pixel-art portrait, shown uncropped, over the pixel water. */
.hero__visual {
  position: relative;
  width: min(100%, calc(var(--hero-visual) * 1.13));
  aspect-ratio: 800 / 716;
  margin-bottom: var(--space-4);
}

/* Pixel-art water behind the photo, centred on the circle (js/main.js) */
.hero__water {
  position: absolute; left: 50%; top: 45%; z-index: -1;
  width: 210%; aspect-ratio: 1; translate: -50% -50%;
  pointer-events: none;
  image-rendering: pixelated;
}
@media (max-width: 47.99rem) {
  .hero__water { width: 175%; opacity: .75; }   /* calmer on phones */
}

.hero__avatar {
  position: relative;
  width: 100%;
  height: auto;
  image-rendering: pixelated; /* keeps the pixels sharp when scaled */
  animation: settle 1200ms 200ms var(--ease-out) both;
}

/* Hero intro: small arcade name-plate under the portrait */
.hero__intro {
  --cut: 3px;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: var(--space-3);
  padding: .5rem .875rem .5rem .75rem;
  font-family: var(--font-display);
  font-size: .875rem;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
  background: rgb(18 18 18 / .9);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  clip-path: polygon(0 var(--cut), var(--cut) var(--cut), var(--cut) 0, calc(100% - var(--cut)) 0, calc(100% - var(--cut)) var(--cut), 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, var(--cut) calc(100% - var(--cut)), 0 calc(100% - var(--cut)));
  animation: settle 1000ms 350ms var(--ease-out) both;
}
.hero__dot {
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--accent);
  animation: intro-dot 2.4s steps(1) infinite;
}
@keyframes intro-dot { 0% { opacity: 1; } 85% { opacity: .25; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__dot { animation: none; } }

/* Phones: roomier plate, slightly tighter type so it stays on one row;
   dot lines up with the first text line if it ever wraps */
@media (max-width: 47.99rem) {
  .hero__intro {
    align-items: flex-start;
    max-width: 100%;
    padding: .75rem .875rem;
    font-size: .8125rem;
    letter-spacing: .08em;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
  }
  .hero__dot { margin-top: calc((1.4em - 6px) / 2); }
}

.hero__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  color: var(--white);
  font-size: var(--text-hero-phone); /* phones: each line fits on one row */
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
  animation: settle 1000ms 450ms var(--ease-out) both;
}

.hero__line { display: block; }

@media (min-width: 48rem) {
  .hero__title { font-size: var(--text-hero); }
}

/* "Say hi": chunky game-style button (glossy face, 3D base, press effect) */
.game-btn {
  --face: #2de1c2;
  --face-top: #5ff2d9;
  --band: #0f9a87;        /* darker turquoise base = the 3D depth */
  --text: #0b2b27;
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 9.5rem; height: 3.75rem; padding: 0 1.75rem 6px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.375rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text); text-shadow: 0 1px 0 rgb(255 255 255 / .35);
  text-decoration: none; user-select: none;
  background: linear-gradient(var(--face-top), var(--face) 55%);
  border: 3px solid #06221f; border-radius: 14px;
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / .5),
    inset 0 -8px 0 var(--band),
    0 0 0 1px rgb(45 225 194 / .35),
    0 10px 22px rgb(0 0 0 / .5);
  transition: translate 120ms cubic-bezier(.3, 1.6, .5, 1), box-shadow 120ms, filter 120ms, padding 120ms;
  -webkit-tap-highlight-color: transparent;
  animation: settle 1000ms 550ms var(--ease-out) both;
}

/* Hover only on devices with a real mouse (prevents "sticky" hover on phones) */
@media (hover: hover) {
  .game-btn:hover {
    translate: 0 -2px;
    filter: brightness(1.08);
    box-shadow:
      inset 0 3px 0 rgb(255 255 255 / .6),
      inset 0 -8px 0 var(--band),
      0 0 0 1px rgb(45 225 194 / .5),
      0 0 0 6px rgb(45 225 194 / .14),
      0 14px 26px rgb(0 0 0 / .5);
  }
}

/* Pressed: works for mouse click and finger tap */
.game-btn:active {
  translate: 0 4px;
  padding-bottom: 2px;
  filter: brightness(.96);
  transition-duration: 60ms;
  box-shadow:
    inset 0 3px 0 rgb(255 255 255 / .35),
    inset 0 -3px 0 var(--band),
    0 0 0 1px rgb(45 225 194 / .3),
    0 3px 8px rgb(0 0 0 / .4);
}

.game-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 6px; }

@media (prefers-reduced-motion: reduce) {
  .game-btn { transition: none; }
}

@keyframes settle {
  from { transform: translateY(1.5rem); opacity: 0; }
}

/* Desktop: fit the hero to the window height so "Say hi" is always above the
   fold on laptops. These come last so they win over the rules above. */
@media (min-width: 48rem) {
  .hero {
    padding-top: calc(var(--bar-height) + clamp(2.5rem, 6svh - 1rem, 4rem));
    padding-bottom: clamp(1.5rem, 4svh, 4rem);
  }
  .hero__title {
    /* full size on tall screens, shrinks a little on short laptop windows */
    font-size: min(var(--text-hero), 12.5svh);
    margin: 0 0 clamp(.75rem, 2.5svh, 1.5rem);
  }
  .hero__visual {
    /* the portrait takes whatever height is left, so the button always fits */
    height: clamp(11rem, 62.5svh - 11.5rem, 30rem);
    width: auto;
    margin-bottom: clamp(1.25rem, 3.5svh, 2.5rem);
  }
}


/* 5. CARDS ================================================================
   Grey at rest. On hover (desktop) or while on screen (phones) each card
   reveals its own colour: a dark gradient, the pixel wave pattern, a
   coloured animated icon and a "label + arrow" pill. */
.cards {
  display: grid;
  grid-template-columns: 5fr 7fr;          /* row 2: Fun Lab a bit wider than Who dis */
  gap: var(--space-3);
  width: min(100% - 2 * var(--gutter), 64rem);
  margin: 0 auto var(--space-6);
}
.card--work  { --c: #2de1c2; grid-column: 1 / -1; min-height: 26rem; }   /* full row */
.card--about { --c: #a6f05a; }
.card--lab   { --c: #5cc8f5; }

.card {
  --play: paused;
  --ease: cubic-bezier(.2, .8, .2, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  padding: var(--space-4);
  border: 1.5px solid rgb(255 255 255 / .04);
  border-radius: 40px;
  background: #141414;
  color: var(--bone);
  text-decoration: none;
}

/* hidden colour layers: gradient + pixel water (drawn by js/main.js) */
.card__glow,
.card__water {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms var(--ease);
  pointer-events: none;
}
.card__glow {
  background: linear-gradient(64deg,
    color-mix(in srgb, var(--c) 8%, #0d0d0d) 0%,
    color-mix(in srgb, var(--c) 26%, #0d0d0d) 100%);
}
.card__water { image-rendering: pixelated; }

/* text */
.card__body { position: relative; display: flex; flex-direction: column; gap: var(--space-1); max-width: 26rem; }
.card__meta {
  font-size: var(--text-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgb(232 226 218 / .4);
}
.card__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 400;
  line-height: 1.05;
}
.card__text { color: var(--greige); max-width: 24rem; }

/* pixel icon: grey at rest, coloured + animated on hover */
.card__art {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: auto;
  height: clamp(4rem, 3rem + 3vw, 5.5rem);
  fill: color-mix(in srgb, var(--bone) 26%, #141414);
  shape-rendering: crispEdges;
  overflow: hidden;
  transition: fill 450ms var(--ease), translate 450ms var(--ease);
}
/* Who dis + Fun Lab: bigger icon in the bottom-right corner */
.card--about .card__art,
.card--lab .card__art { top: auto; bottom: var(--space-4); height: clamp(5.5rem, 4rem + 4vw, 8rem); }
.card__art .liq   { fill: color-mix(in srgb, var(--bone) 13%, #141414); transition: fill 450ms var(--ease); }
.card__art .smoke { fill: var(--bone); }
/* At rest the icons sit in their default pose; hover/focus (or on screen on phones) starts them from the beginning */
.card:not(:hover, :focus-visible, .is-on-screen) .card__art * { animation: none !important; }

/* Works: retro screen for screenshots, bottom-right, also grey until hover */
.card--work .teaser__screen {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: min(36%, 21rem);
  margin: 0;
  filter: grayscale(1) brightness(.7);
  transition: filter 450ms var(--ease), translate 450ms var(--ease);
}

/* ---- the reveal: hover/focus on desktop, on-screen on phones ---------- */
.card:is(:hover, :focus-visible),
.card.is-on-screen { --play: running; }
.card:is(:hover, :focus-visible) .card__glow,
.card.is-on-screen .card__glow { opacity: 1; }
.card:is(:hover, :focus-visible) .card__art,
.card.is-on-screen .card__art { fill: var(--c); translate: 0 -6px; }
.card:is(:hover, :focus-visible) .card__art .liq,
.card.is-on-screen .card__art .liq { fill: color-mix(in srgb, var(--c) 50%, transparent); }
.card:is(:hover, :focus-visible) .teaser__screen,
.card.is-on-screen .teaser__screen { filter: none; translate: 0 -6px; }
.card:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }

/* phones: one column, slightly smaller corners */
@media (max-width: 47.99rem) {
  .cards { grid-template-columns: 1fr; gap: var(--space-2); }
  .card { min-height: 22rem; padding: var(--space-3); border-radius: 28px; }
  .card--work { min-height: 0; }
  .card__art { top: var(--space-3); right: var(--space-3); height: 3.5rem; }
  .card--about .card__art,
  .card--lab .card__art { bottom: var(--space-3); height: 5rem; }
  .card--work .card__body { padding-right: 4rem; }          /* keep text clear of the icon */
  .card--work .teaser__screen { position: relative; inset: auto; width: 100%; margin: var(--space-3) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card__art *, .teaser__shots img { animation: none !important; }
}

/* More breathing room between the hero and the cards */
.cards { margin-top: clamp(4rem, 1.5rem + 7vw, 9rem); }

/* Pixel water: quieter, and kept clear of the icon */
.card:is(:hover, :focus-visible) .card__water,
.card.is-on-screen .card__water { opacity: .32; }
.card--work .card__water {
  -webkit-mask-image: radial-gradient(circle at calc(100% - 4.5rem) 4.5rem, transparent 3.5rem, #000 7rem);
          mask-image: radial-gradient(circle at calc(100% - 4.5rem) 4.5rem, transparent 3.5rem, #000 7rem);
}
.card--about .card__water,
.card--lab .card__water {
  -webkit-mask-image: radial-gradient(circle at calc(100% - 5.5rem) calc(100% - 5.5rem), transparent 4.5rem, #000 8.5rem);
          mask-image: radial-gradient(circle at calc(100% - 5.5rem) calc(100% - 5.5rem), transparent 4.5rem, #000 8.5rem);
}

/* Card button: small arcade key (same family as the dock "+" key and Say hi).
   Dark at rest; lights up in the card colour (--c) when the card is hovered/focused/on screen. */
.card__btn {
  --face: #1f1e1c;
  --face-top: #2a2826;
  --band: #121110;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: .625rem;
  margin-top: auto;
  height: 2.75rem;
  padding: 0 .875rem 5px 1.125rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--greige);
  background: linear-gradient(var(--face-top), var(--face) 60%);
  border: 2px solid #050505;
  border-radius: 10px;
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / .07),
    inset 0 -5px 0 var(--band),
    0 0 0 1px rgb(232 226 218 / .08);
  transition:
    color 300ms var(--ease),
    box-shadow 300ms var(--ease),
    translate 120ms cubic-bezier(.3, 1.6, .5, 1),
    filter 120ms,
    padding 120ms;
}

/* Lit face in the card colour, cross-faded with opacity */
.card__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px;
  background: linear-gradient(color-mix(in srgb, var(--c) 62%, #fff), var(--c) 58%);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / .45),
    inset 0 -5px 0 color-mix(in srgb, var(--c) 55%, #000);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.card__btn svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: currentColor;
  shape-rendering: crispEdges;
}

.card:is(:hover, :focus-visible) .card__btn,
.card.is-on-screen .card__btn {
  color: color-mix(in srgb, var(--c) 18%, #061210);
  text-shadow: 0 1px 0 rgb(255 255 255 / .3);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / .07),
    inset 0 -5px 0 var(--band),
    0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),
    0 8px 20px color-mix(in srgb, var(--c) 18%, transparent);
}
.card:is(:hover, :focus-visible) .card__btn::before,
.card.is-on-screen .card__btn::before { opacity: 1; }

/* Chevron dashes forward in pixel steps while the card is hovered/focused */
.card:is(:hover, :focus-visible) .card__btn svg { animation: btn-dash 720ms steps(1) infinite; }

/* Pressed */
.card:active .card__btn { translate: 0 3px; padding-bottom: 2px; }
.card:active .card__btn::before {
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / .35),
    inset 0 -2px 0 color-mix(in srgb, var(--c) 55%, #000);
}

/* Same hover as the hero Say hi (.game-btn:hover): lift, brighten, colour halo */
@media (hover: hover) {
  .card .card__btn:hover, .card:focus-visible .card__btn {
    translate: 0 -2px;
    filter: brightness(1.08);
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .07),
      inset 0 -5px 0 var(--band),
      0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent),
      0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent),
      0 12px 24px rgb(0 0 0 / .5);
  }
  .card .card__btn:hover::before, .card:focus-visible .card__btn::before {
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .6),
      inset 0 -5px 0 color-mix(in srgb, var(--c) 55%, #000);
  }

  /* Pressed beats hover (same as .game-btn:active) */
  .card:active .card__btn {
    translate: 0 3px;
    padding-bottom: 2px;
    filter: brightness(.96);
    transition-duration: 60ms;
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .07),
      inset 0 -2px 0 var(--band),
      0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),
      0 3px 8px rgb(0 0 0 / .4);
  }
  .card:active .card__btn::before {
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .35),
      inset 0 -2px 0 color-mix(in srgb, var(--c) 55%, #000);
  }
}

@keyframes btn-dash {
  0%   { translate: 0 0; }
  33%  { translate: 2px 0; }
  66%  { translate: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card__btn svg { animation: none !important; }
}

/* Card icon + screen animations ------------------------------------------ */
/* WORKS: two crossed wrenches give a small "tightening" tilt, then rest */
.art-work .wr { transform-box: view-box; transform-origin: 8px 8px; }
.art-work .wr-a { animation: wr-a 3.6s steps(1, end) infinite; }
.art-work .wr-b { animation: wr-b 3.6s steps(1, end) infinite; }
@keyframes wr-a { 0%, 54% { transform: none; } 55%, 62% { transform: rotate(6deg); } 63%, 68% { transform: none; } 69%, 76% { transform: rotate(6deg); } 77%, 100% { transform: none; } }
@keyframes wr-b { 0%, 54% { transform: none; } 55%, 62% { transform: rotate(-6deg); } 63%, 68% { transform: none; } 69%, 76% { transform: rotate(-6deg); } 77%, 100% { transform: none; } }

/* WHO DIS: calm idle. Blinks, glances left and right, then a wink with a wider smile */
.art-who .eyes-shut, .art-who .wink-r, .art-who .m-grin { opacity: 0; }
.art-who .eyes      { animation: who-look 6s steps(1, end) infinite; }
.art-who .eye-r     { animation: who-eye-r 6s steps(1, end) infinite; }
.art-who .eye-l     { animation: who-eye-l 6s steps(1, end) infinite; }
.art-who .eyes-shut { animation: who-shut 6s steps(1, end) infinite; }
.art-who .wink-r    { animation: who-wink 6s steps(1, end) infinite; }
.art-who .m-smile   { animation: who-smile 6s steps(1, end) infinite; }
.art-who .m-grin    { animation: who-grin 6s steps(1, end) infinite; }
@keyframes who-look  { 0%, 34% { transform: none; } 35%, 47% { transform: translateX(-1px); } 48%, 60% { transform: translateX(1px); } 61%, 100% { transform: none; } }
@keyframes who-eye-l { 0%, 19% { opacity: 1; } 20%, 22% { opacity: 0; } 23%, 100% { opacity: 1; } }
@keyframes who-eye-r { 0%, 19% { opacity: 1; } 20%, 22% { opacity: 0; } 23%, 77% { opacity: 1; } 78%, 89% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes who-shut  { 0%, 19% { opacity: 0; } 20%, 22% { opacity: 1; } 23%, 100% { opacity: 0; } }
@keyframes who-wink  { 0%, 77% { opacity: 0; } 78%, 89% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes who-smile { 0%, 77% { opacity: 1; } 78%, 89% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes who-grin  { 0%, 77% { opacity: 0; } 78%, 89% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* default (static) frames, also used for reduced motion */
.art-lab .lab-tip, .art-lab .drop, .art-lab .puddle, .art-lab .smoke { opacity: 0; }

/* FUN LAB: bubbles, a wobble, tips over, pours drops into a puddle that smokes */
.art-lab .lab-up  { animation: lab-up 5s infinite; }
.art-lab .lab-tip { animation: lab-tip 5s infinite; }
.art-lab .b1 { animation: bub 1s infinite; }
.art-lab .b2 { animation: bub 1s .5s infinite; }
@keyframes bub { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lab-up { 0%, 25% { opacity: 1; transform: none; } 26% { transform: translateX(1px); } 28% { transform: translateX(-1px); } 30% { transform: translateX(1px); } 32% { transform: none; } 33%, 82% { opacity: 0; transform: none; } 83%, 100% { opacity: 1; } }
@keyframes lab-tip { 0%, 32% { opacity: 0; } 33%, 82% { opacity: 1; } 83%, 100% { opacity: 0; } }
.art-lab .drop { animation: drop 5s infinite; }
.art-lab .d2 { animation-delay: .45s; }
.art-lab .d3 { animation-delay: .9s; }
@keyframes drop {
  0%, 35% { opacity: 0; transform: translateY(0); }
  36% { opacity: 1; transform: translateY(0); }
  38% { transform: translateY(1px); } 40% { transform: translateY(2px); } 42% { transform: translateY(3px); }
  44%, 100% { opacity: 0; transform: translateY(3px); }
}
.art-lab .p1 { animation: p1 5s infinite; }
.art-lab .p2 { animation: p2 5s infinite; }
@keyframes p1 { 0%, 44% { opacity: 0; } 45%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes p2 { 0%, 54% { opacity: 0; } 55%, 90% { opacity: 1; } 91%, 100% { opacity: 0; } }
.art-lab .smoke { animation: smoke 5s infinite; }
.art-lab .s2 { animation-delay: .5s; }
.art-lab .s3 { animation-delay: 1s; }
@keyframes smoke {
  0%, 54% { opacity: 0; transform: translateY(0); }
  55% { opacity: .75; transform: translateY(0); }
  58% { transform: translateY(-1px); } 61% { opacity: .6; transform: translateY(-2px); }
  64% { transform: translateY(-3px); } 67% { opacity: .4; transform: translateY(-4px); }
  70% { opacity: .2; transform: translateY(-5px); } 73%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* --- screenshot "screen" (works with 0, 1, 2 or 3 images) ---------------- */
.teaser__screen {
  --n: 4px;
  position: relative; z-index: 1;
  display: block;
  width: min(100%, 22rem);
  aspect-ratio: 16 / 10;
  padding-top: 12px;                         /* window bar */
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c) 70%, transparent) 1.5px, transparent 2px) 6px 3px / 7px 6px repeat-x,
    color-mix(in srgb, var(--c) 22%, #0b0d0d);
  background-size: 7px 6px, auto;
  background-repeat: no-repeat;
  outline: 2px solid color-mix(in srgb, var(--c) 40%, transparent); outline-offset: -2px;
  clip-path: polygon(0 var(--n), var(--n) var(--n), var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)));
  transition: translate 160ms steps(2);
}
.teaser__shots { position: absolute; inset: 12px 2px 2px; overflow: hidden; background: #0b0d0d; }
.teaser__shots::after {                      /* scanlines on the screen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .18) 0 1px, transparent 1px 3px);
}
.teaser__shots img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  opacity: 0;
  animation: shot3 7.5s steps(1, end) infinite; animation-play-state: var(--play);
}
.teaser__shots img:first-child { opacity: 1; }
.teaser__shots img:nth-child(2) { animation-delay: 2.5s; }
.teaser__shots img:nth-child(3) { animation-delay: 5s; }
.teaser__shots img:only-child { animation: none; }
.teaser__shots:has(img:nth-child(2):last-child) img { animation-name: shot2; animation-duration: 5s; }
@keyframes shot3 { 0% { opacity: 1; } 33.33%, 100% { opacity: 0; } }
@keyframes shot2 { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* placeholder until screenshots are added: an arcade test pattern */
.teaser__shots:not(:has(img)) {
  display: grid; place-items: center;
  background:
    linear-gradient(90deg, #2de1c2 0 14.3%, #a6f05a 0 28.6%, #5cc8f5 0 42.9%, #e8e2da 0 57.2%, #2de1c2 0 71.5%, #a6f05a 0 85.8%, #5cc8f5 0) top / 100% 62% no-repeat,
    repeating-linear-gradient(90deg, #1a1d1d 0 8px, #0b0d0d 8px 16px) bottom / 100% 38% no-repeat;
  filter: saturate(.45) brightness(.4);
}
.teaser__shots:not(:has(img))::before {
  content: "SCREENS LOADING"; position: relative; z-index: 1;
  padding: .3em .7em; background: #0b0d0d; color: var(--bone);
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em;
  filter: saturate(1.8) brightness(1.8);
}


/* 6. FOOTER: arcade "Continue?" screen ======================================= */
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--gutter) calc(var(--space-4) + var(--bar-height));
  text-align: center;
}

.footer__kicker {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: var(--leading-tight);
}

.footer__text {
  max-width: 30rem;
  color: var(--greige);
  text-wrap: pretty;
}

.footer .game-btn { margin-top: var(--space-2); }

.footer__alt {
  color: var(--grey);
  font-size: var(--text-small);
}
.footer__alt a {
  color: var(--bone);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
  transition: color 200ms;
}
.footer__alt a:hover { color: var(--accent); }

/* arcade score bar */
.footer__hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  width: min(100%, 60rem);
  margin-top: var(--space-5);
  padding-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
}
@media (max-width: 40rem) {
  .footer__hud { flex-direction: column; align-items: center; }
}


/* Footer background: moonlit pixel forest (behind the content) */
.footer { position: relative; isolation: isolate; overflow: hidden; }
/* Bigger, brighter moon; a little UFO crosses it every so often */
.footer__scene {
  --moon-size: clamp(4.5rem, 3rem + 5vw, 8rem);
  --moon-top: clamp(2.5rem, 9%, 5rem);
  --moon-right: max(1.25rem, 11%);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* the sky layers live here so their top edge can fade out (no hard line) */
.footer__scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at calc(100% - var(--moon-right) - var(--moon-size) / 2) calc(var(--moon-top) + var(--moon-size) / 2),
      rgb(244 239 230 / .14), rgb(244 239 230 / .04) 16rem, transparent 30rem),
    url("/assets/images/footer-forest.svg") center bottom / auto clamp(11rem, 7rem + 13vw, 20rem) repeat-x,
    linear-gradient(transparent 35%, rgb(45 225 194 / .04));
  -webkit-mask-image: linear-gradient(transparent, #000 6rem);
          mask-image: linear-gradient(transparent, #000 6rem);
}
.footer__moon {
  position: absolute;
  top: var(--moon-top);
  right: var(--moon-right);
  width: var(--moon-size);
  height: auto;
  fill: #f4efe6;
  shape-rendering: crispEdges;
  filter: drop-shadow(0 0 1.25rem rgb(244 239 230 / .28));
}
.footer__moon .moon-shade { fill: #ddd5c9; }
.footer__moon .crater     { fill: #d3cabd; }
.footer__moon .ufo        { animation: ufo-fly 8s infinite; }
.footer__moon .ufo__bob   { animation: ufo-bob .8s steps(1) infinite; }
.footer__moon .ufo__body  { fill: var(--ink); }
.footer__moon .ufo__light { fill: var(--accent); }
.footer__moon .ufo__light.b { animation: es-blink .4s steps(1) infinite; }
.footer__moon .ufo__light.a { animation: es-blink .4s steps(1) -.2s infinite; }
/* flight first, so it starts the moment the footer scrolls into view */
@keyframes ufo-fly {
  0%      { transform: translate(-14px, 13px); opacity: 1; animation-timing-function: steps(46, end); }
  50%     { transform: translate(32px, 9px); opacity: 1; animation-timing-function: steps(1); }
  51%, 100% { transform: translate(32px, 9px); opacity: 0; }
}
@keyframes ufo-bob { 0% { translate: 0 0; } 50%, 100% { translate: 0 -1px; } }
@media (prefers-reduced-motion: reduce) {
  .footer__moon .ufo { opacity: 0; }
}
.footer__sky { position: absolute; inset: 0; width: 100%; height: 100%; shape-rendering: crispEdges; }
.footer__sky .star { fill: var(--bone); opacity: .3; }
.footer__sky .star.t1 { animation: twinkle 3.6s steps(1) infinite; }
.footer__sky .star.t2 { animation: twinkle 5s steps(1) -2s infinite; }
.footer__sky .fly { fill: var(--accent); opacity: 0; animation: firefly 4.2s steps(1) infinite; }
.footer__sky .fly.t1 { animation-delay: -1.4s; }
.footer__sky .fly.t2 { animation-delay: -2.8s; }
.footer:not(.is-on-screen) .footer__scene * { animation-play-state: paused; }
@keyframes twinkle { 0% { opacity: .3; } 70% { opacity: .75; } 85%, 100% { opacity: .3; } }
@keyframes firefly { 0% { opacity: 0; } 15% { opacity: .9; } 30% { opacity: .4; } 40%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .footer__scene * { animation: none !important; }
  .footer__sky .fly { opacity: .6; }
}


/* 7. DOCK ================================================================
   Little contact bar, bottom-right corner, always visible. On phones it
   folds behind a "+" button (js/main.js toggles .is-open). */
.dock {
  position: fixed;
  left: auto;
  right: var(--dock-edge);
  bottom: var(--dock-edge);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: .75rem;
  background: rgb(13 13 13 / .88);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px rgb(0 0 0 / .5);
  transition: translate 500ms var(--ease-out), opacity 500ms;
}

.dock__menu-inner { display: flex; gap: .25rem; align-items: center; }
.dock__toggle { display: none; }

@media (max-width: 47.99rem) {
  .dock { gap: 0; }

  /* Small gray arcade key: raised 3D look, presses down like .game-btn */
  .dock__toggle {
    --face: #1f1e1c;
    --face-top: #2a2826;
    --band: #121110;          /* darker base = 3D depth */
    display: grid; place-items: center;
    width: 2.75rem; height: 2.75rem;
    padding: 0 0 4px;
    color: var(--greige);
    background: linear-gradient(var(--face-top), var(--face) 60%);
    border: 2px solid #050505;
    border-radius: 10px;
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .07),
      inset 0 -5px 0 var(--band),
      0 0 0 1px rgb(232 226 218 / .08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: translate 120ms cubic-bezier(.3, 1.6, .5, 1), box-shadow 120ms, padding 120ms, color 120ms;
  }

  /* Press: squashes down like an arcade button */
  .dock__toggle:active {
    translate: 0 3px;
    padding-bottom: 1px;
    transition-duration: 60ms;
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .05),
      inset 0 -2px 0 var(--band),
      0 0 0 1px rgb(232 226 218 / .08);
  }

  /* Open: stays slightly pressed in, icon brightens */
  .dock.is-open .dock__toggle {
    translate: 0 2px;
    padding-bottom: 2px;
    color: var(--bone);
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .05),
      inset 0 -3px 0 var(--band),
      0 0 0 1px rgb(232 226 218 / .14);
  }

  .dock__toggle svg { width: 1.125rem; height: 1.125rem; transition: rotate 160ms steps(3); }
  .dock.is-open .dock__toggle svg { rotate: 45deg; }   /* + turns into × */

  .dock__menu {
    display: grid; grid-template-columns: 0fr;
    opacity: 0; visibility: hidden;
    transition: grid-template-columns 220ms var(--ease-out), opacity 160ms, visibility 0s 220ms;
  }
  .dock__menu-inner { overflow: hidden; min-width: 0; }
  .dock.is-open .dock__menu {
    grid-template-columns: 1fr; opacity: 1; visibility: visible;
    transition: grid-template-columns 220ms var(--ease-out), opacity 160ms;
  }
  .dock.is-open .dock__menu-inner { padding-right: .25rem; }
}

/* Hover only for devices with a real mouse */
@media (max-width: 47.99rem) and (hover: hover) {
  .dock__toggle:hover { translate: 0 -1px; color: var(--bone); }
}

@media (prefers-reduced-motion: reduce) {
  .dock__menu, .dock__toggle, .dock__toggle svg { transition: none; }
}

.dock__item {
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.625rem;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--greige);
  font: inherit;
  font-size: var(--text-small);
  cursor: pointer;
  transition: background-color 200ms, color 200ms;
}
.dock__item:hover {
  background: var(--glass);
  color: var(--bone);
}
.dock__item svg {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dock__copy {
  padding: 0 1.125rem;
  font-size: .9375rem;
  background: var(--glass);
  color: var(--bone);
}
.dock__copy[hidden] { display: none; }


/* ---- Sound key (dock) ---- */
.dock__sound {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: var(--greige);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms, color 200ms;
}
.dock__sound[hidden] { display: none; }
.dock__sound::before {                      /* thin divider before the key (desktop row) */
  content: "";
  position: absolute;
  left: -.125rem;
  top: .75rem;
  bottom: .75rem;
  width: 1px;
  background: rgb(232 226 218 / .14);
}
.dock__sound:hover { background: var(--glass); color: var(--bone); }
.dock__sound:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.dock__sound svg { width: 1.25rem; height: 1.25rem; fill: currentColor; shape-rendering: crispEdges; }
.dock__sound .snd-on { display: none; }
.dock__sound[aria-pressed="true"] { color: var(--accent); }
.dock__sound[aria-pressed="true"] .snd-on { display: inline; }
.dock__sound[aria-pressed="true"] .snd-off { display: none; }

/* small blinking pixel until the visitor has used the key once */
.dock__sound-dot {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 4px;
  height: 4px;
  background: var(--accent);
  animation: snd-blink 1.6s steps(1) infinite;
}
.dock__sound[data-seen] .dock__sound-dot,
.dock__sound[aria-pressed="true"] .dock__sound-dot { display: none; }
@keyframes snd-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }

/* ---- One-time hint chip ---- */
.sound-hint {
  position: fixed;
  right: var(--dock-edge);
  bottom: calc(var(--dock-edge) + 3.25rem + .75rem);
  z-index: 21;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .875rem;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: .75rem;
  background: rgb(13 13 13 / .88);
  backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px rgb(0 0 0 / .5);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 320ms steps(4), translate 320ms steps(4);
}
.sound-hint[hidden] { display: none; }
.sound-hint.is-shown { opacity: 1; translate: 0 0; }
.sound-hint:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.sound-hint__note { width: 10px; height: 10px; fill: var(--accent); shape-rendering: crispEdges; }
.sound-hint__on { color: var(--accent); }
/* pixel pointer under the chip, towards the sound key (desktop) */
.sound-hint::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  bottom: -6px;
  width: 2px;
  height: 2px;
  background: rgb(13 13 13 / .88);
  box-shadow:
    -2px -2px rgb(13 13 13 / .88), 0 -2px rgb(13 13 13 / .88), 2px -2px rgb(13 13 13 / .88),
    -4px -4px rgb(13 13 13 / .88), -2px -4px rgb(13 13 13 / .88), 0 -4px rgb(13 13 13 / .88),
    2px -4px rgb(13 13 13 / .88), 4px -4px rgb(13 13 13 / .88);
}

/* Phones: key becomes its own small square above the dock; hint sits to its left */
@media (max-width: 47.99rem) {
  /* Same arcade key as the "+" (.dock__toggle), centred directly above it */
  .dock__sound {
    --face: #1f1e1c;
    --face-top: #2a2826;
    --band: #121110;
    position: absolute;
    left: 50%;
    right: auto;
    bottom: calc(100% + .5rem);
    translate: -50% 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 0 4px;
    border: 2px solid #050505;
    border-radius: 10px;
    background: linear-gradient(var(--face-top), var(--face) 60%);
    backdrop-filter: none;
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .07),
      inset 0 -5px 0 var(--band),
      0 0 0 1px rgb(232 226 218 / .08),
      0 10px 30px rgb(0 0 0 / .5);
    transition: translate 120ms cubic-bezier(.3, 1.6, .5, 1), box-shadow 120ms, padding 120ms, color 120ms;
  }
  .dock__sound:hover { background: linear-gradient(var(--face-top), var(--face) 60%); }
  .dock__sound svg { width: 1.125rem; height: 1.125rem; }
  .dock__sound:active {
    translate: -50% 3px;
    padding-bottom: 1px;
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .05),
      inset 0 -2px 0 var(--band),
      0 0 0 1px rgb(232 226 218 / .08);
  }
  .dock__sound[aria-pressed="true"] {
    box-shadow:
      inset 0 2px 0 rgb(255 255 255 / .07),
      inset 0 -5px 0 var(--band),
      0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
      0 10px 30px rgb(0 0 0 / .5);
  }
  .dock__sound-dot { top: .375rem; right: .375rem; }
  .dock__sound::before { display: none; }
  /* Hint: to the left of the key, vertically centred on it */
  .sound-hint {
    right: calc(var(--dock-edge) + 3.0625rem + .5rem);
    bottom: calc(var(--dock-edge) + 4.1875rem);
    padding: .5rem .625rem;
    font-size: .6875rem;
    letter-spacing: .04em;
  }
  .sound-hint::after {                       /* pointer on the right side, towards the key */
    right: -6px;
    bottom: auto;
    top: 50%;
    margin-top: -1px;
    box-shadow:
      -2px -2px rgb(13 13 13 / .88), -2px 0 rgb(13 13 13 / .88), -2px 2px rgb(13 13 13 / .88),
      -4px -4px rgb(13 13 13 / .88), -4px -2px rgb(13 13 13 / .88), -4px 0 rgb(13 13 13 / .88),
      -4px 2px rgb(13 13 13 / .88), -4px 4px rgb(13 13 13 / .88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock__sound-dot { animation: none; }
  .dock__sound, .sound-hint { transition: none; }
}

/* 8. CURSOR CANVAS ======================================================== */
.cursor-canvas {
  position: fixed;
  inset: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Touch screens: no full-screen blend while scrolling (big scroll-performance cost on phones) */
@media (hover: none) {
  .cursor-canvas { mix-blend-mode: normal; }
}


/* 9. SIMPLE PAGES ========================================================= */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-3);
  min-height: 80svh;
  padding: calc(var(--bar-height) + var(--space-5)) var(--gutter) var(--space-5);
}

.page__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: var(--leading-tight);
}

.page__text {
  max-width: 32rem;
  color: var(--greige);
}


/* 9b. EMPTY STATES ========================================================== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 100svh;
  padding: calc(var(--bar-height) + var(--space-4)) var(--gutter) var(--space-5);
  text-align: center;
}
.empty__art {
  width: clamp(8.5rem, 5rem + 12vw, 12rem);
  height: auto;
  margin-bottom: var(--space-3);
  fill: var(--c);
  shape-rendering: crispEdges;
  overflow: hidden;
}
.art-space { width: clamp(15rem, 8rem + 22vw, 22rem); }
.empty__kicker {
  font-family: var(--font-display);
  font-size: .875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c);
}
.empty__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  line-height: 1.05;
  text-wrap: balance;
}
.empty__text {
  max-width: 28rem;
  color: var(--greige);
  text-wrap: pretty;
}
.empty .game-btn { margin-top: var(--space-3); }

/* shared sprite bits */
.empty__art .dim  { fill: color-mix(in srgb, var(--c) 35%, transparent); }
.empty__art .gap  { fill: var(--ink); }

/* Works: loading bar fills in 8 steps, flashes, restarts */
.art-build .fill {
  transform-box: fill-box; transform-origin: left;
  animation: es-load 4s infinite;
}
.art-build .cursor { animation: es-blink 1s steps(1) infinite; }
@keyframes es-load {
  0%   { transform: scaleX(0); animation-timing-function: steps(8, end); }
  60%  { transform: scaleX(1); opacity: 1; animation-timing-function: steps(1); }
  70%  { opacity: 0; } 78% { opacity: 1; } 86% { opacity: 0; } 94%, 100% { opacity: 1; transform: scaleX(1); }
}

/* Who dis: select brackets blink, the "?" bobs */
.art-mystery .brackets { animation: es-blink 1.2s steps(1) infinite; }
.art-mystery .q { animation: es-bob 1.6s steps(1) infinite; }

/* Fun Lab: coin spins, drops into the slot, slot lights up */
.art-coin .panel { fill: var(--surface); }
.art-coin .coin  { animation: es-drop 3.2s infinite; }
.art-coin .f     { opacity: 0; animation: es-frame .64s steps(1) infinite; }
.art-coin .f1    { opacity: 1; }
.art-coin .f2    { animation-delay: -.48s; }
.art-coin .f3    { animation-delay: -.32s; }
.art-coin .f4    { animation-delay: -.16s; }
.art-coin .glow  { fill: var(--bone); opacity: 0; animation: es-glow 3.2s steps(1) infinite; }
.art-coin .arrow { animation: es-blink 1s steps(1) infinite; }
@keyframes es-frame { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes es-drop {
  0%, 50% { transform: translateY(0); animation-timing-function: steps(1); }
  52%     { transform: translateY(-1px); animation-timing-function: steps(13, end); }
  72%     { transform: translateY(12px); animation-timing-function: steps(1); }
  73%, 99% { transform: translateY(12px); opacity: 0; }
  100%    { transform: translateY(0); opacity: 0; }
}
@keyframes es-glow { 0%, 72% { opacity: 0; } 74% { opacity: 1; } 80% { opacity: 0; } 84% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* 404: astronaut drifts around, waving; stars twinkle */
.art-space .suit  { fill: var(--bone); }
.art-space .shade { fill: var(--greige); }
.art-space .visor { fill: var(--accent); }
.art-space .shine { fill: var(--bone); }
.art-space .star  { fill: var(--bone); animation: es-twinkle 2.4s steps(1) infinite; }
.art-space .star.s1 { animation-delay: -.8s; }
.art-space .star.s2 { animation-delay: -1.6s; }
.art-space .star.big { fill: var(--accent); }
.art-space .planet { fill: color-mix(in srgb, var(--accent) 45%, transparent); }
.art-space .ring   { fill: var(--greige); }
.art-space .astro  { animation: es-drift 14s infinite; }
.art-space .arm-b  { opacity: 0; animation: es-wave .9s steps(1) infinite; }
.art-space .arm-a  { animation: es-wave .9s steps(1) infinite reverse; }
@keyframes es-drift {
  0%   { transform: translate(14px, 8px);  animation-timing-function: steps(8); }
  25%  { transform: translate(22px, 4px);  animation-timing-function: steps(8); }
  50%  { transform: translate(26px, 11px); animation-timing-function: steps(10); }
  75%  { transform: translate(16px, 13px); animation-timing-function: steps(6); }
  100% { transform: translate(14px, 8px); }
}
@keyframes es-wave { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes es-twinkle { 0% { opacity: 1; } 60% { opacity: .25; } 80%, 100% { opacity: 1; } }

@keyframes es-blink { 0% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes es-bob   { 0% { transform: translateY(0); } 50%, 100% { transform: translateY(-1px); } }

@media (prefers-reduced-motion: reduce) {
  .empty__art * { animation: none !important; }
  .art-space .astro { transform: translate(16px, 8px); }
}


/* 10. REDUCED MOTION ======================================================
   If someone asks their device for less motion, everything is instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}