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

:root {
  --bg: #000;
  --fg: #e8e6e1;
  --dim: #2a2a2a;
  --glow: 0; /* driven by JS during shakes, 0..1 */
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}

body {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
}

/* ---------- layers ---------- */

.grain {
  position: fixed;
  inset: -50%;
  z-index: 4;
  pointer-events: none;
  opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.85) 100%);
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-5%, 3%); }
  40%  { transform: translate(4%, -6%); }
  60%  { transform: translate(-3%, 7%); }
  80%  { transform: translate(6%, 2%); }
  100% { transform: translate(-2%, -4%); }
}

/* ---------- content ---------- */

.stage {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: .4rem;
  user-select: none;
}

.logo-wrap {
  line-height: 0;
  animation: breathe 9s ease-in-out infinite;
}

.logo {
  display: block;
  width: min(78vw, 62vh, 620px);
  height: auto;
  /* black-on-light artwork -> light-on-black */
  filter: invert(1) brightness(calc(.55 + var(--glow) * .6)) drop-shadow(0 0 calc(var(--glow) * 30px) rgba(200, 215, 255, .6));
  mix-blend-mode: screen;
  /* the source PNG has generous whitespace; pull the text closer to the logo */
  margin: -14% 0 -18%;
  -webkit-user-drag: none;
}

.record {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-size: clamp(.95rem, 2.4vw, 1.35rem);
  letter-spacing: .9em;
  text-indent: .9em; /* keep centered despite trailing letter-spacing */
  text-transform: uppercase;
  color: rgba(232, 230, 225, calc(.22 + var(--glow) * .7));
}

.date {
  margin-top: 1.4rem;
  font-size: clamp(.75rem, 1.8vw, .95rem);
  font-weight: 300;
  letter-spacing: .55em;
  text-indent: .55em;
  /* nearly invisible until it shakes */
  color: rgba(232, 230, 225, calc(.035 + var(--glow) * .9));
  text-shadow: 0 0 calc(var(--glow) * 14px) rgba(200, 215, 255, .8);
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* ---------- shake ---------- */

.shake .stage { animation: shake .55s cubic-bezier(.36, .07, .19, .97) both; }
.shake-hard .stage { animation: shake-hard .8s cubic-bezier(.36, .07, .19, .97) both; }

@keyframes shake {
  10%, 90% { transform: translate(-1px, 1px) rotate(-.2deg); }
  20%, 80% { transform: translate(3px, -2px) rotate(.3deg); }
  30%, 50%, 70% { transform: translate(-5px, 2px) rotate(-.4deg); }
  40%, 60% { transform: translate(5px, -1px) rotate(.4deg); }
}

@keyframes shake-hard {
  5%  { transform: translate(-9px, 4px) rotate(-.8deg) scale(1.02); }
  15% { transform: translate(10px, -6px) rotate(.9deg); }
  25% { transform: translate(-8px, 5px) rotate(-.6deg); }
  35% { transform: translate(7px, -3px) rotate(.5deg); }
  45% { transform: translate(-5px, 3px) rotate(-.4deg); }
  55% { transform: translate(4px, -2px) rotate(.3deg); }
  70% { transform: translate(-2px, 1px); }
  85% { transform: translate(1px, 0); }
  100% { transform: none; }
}

/* ---------- sound toggle ---------- */

.sound {
  position: fixed;
  z-index: 6;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  background: none;
  border: 0;
  color: rgba(232, 230, 225, .28);
  font: 300 .7rem/1 "IBM Plex Mono", monospace;
  letter-spacing: .3em;
  padding: 10px 4px;
  cursor: pointer;
  transition: color .3s;
}
.sound:hover,
.sound:focus-visible { color: rgba(232, 230, 225, .8); outline: none; }
.sound[aria-pressed="true"] { color: rgba(232, 230, 225, .55); }

/* ---------- accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  .grain, .logo-wrap { animation: none; }
  .shake .stage, .shake-hard .stage { animation: none; }
}