:root {
  --paper: #ffffff;
  --ink: #111111;
  --magenta: #ff00e6;
  --green: #00ff6a;
  --logo-size: clamp(120px, 24vmin, 320px);
}

@media (max-width: 700px) {
  :root { --logo-size: min(56vw, 300px); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
}

#stage {
  position: fixed;
  inset: 0;
  background: var(--paper);
  display: grid;
  place-items: center;
}

/* Whole-site blink: everything flips to its negative for a few frames. */
#stage.flash { filter: invert(1) grayscale(1) contrast(1.6); }
#stage.flash-hard { filter: grayscale(1) contrast(40); }

#scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#noise { pointer-events: none; z-index: 2; }

.logo {
  position: relative;
  width: var(--logo-size);
  aspect-ratio: 821 / 762;
  z-index: 1;
  will-change: transform;
  /* Pivot at the neck: bottom centre of the head. */
  transform-origin: 50% 100%;
  /* The white half of the face sits on the particles, never on bare page. */
  filter: drop-shadow(0 0 calc(var(--logo-size) * 0.06) var(--paper));
}

/* 404: the head is a wide "404" instead of the panda. */
.logo.is-404 {
  width: min(calc(var(--logo-size) * 1.7), 88vw);
  aspect-ratio: 1000 / 420;
}

.logo .head {
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

@media (prefers-reduced-motion: reduce) {
  #stage.flash, #stage.flash-hard { filter: none; }
}