@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/bodoni-moda-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/bodoni-moda.woff2") format("woff2");
}

:root {
  --void: #000000;
  --bone: #edeff7;
  --corona: #fff3d6;
  --ultraviolet: #6b4bff;
  --ice: #7fe3ff;
  --signal: #ff1744;
  --whisper-top: 70vh;
}

* { box-sizing: border-box; }

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

body {
  font-family: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  cursor: crosshair;
}

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

#signal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.fallback {
  display: none;
  position: fixed;
  left: 50%;
  top: 44%;
  width: min(80vw, 980px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(127, 227, 255, .35));
}
.no-webgl .fallback { display: block; }
.no-webgl #signal { display: none; }

/* The single line of text. Set as a whisper beneath the sigil. */
.whisper {
  position: fixed;
  left: 50%;
  top: var(--whisper-top);
  width: min(88vw, 34em);
  margin: 0;
  transform: translateX(-50%);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, .9rem + .6vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: .01em;
  text-align: center;
  color: var(--bone);
  opacity: 0;
  text-shadow: 0 0 18px rgba(107, 75, 255, .45);
  transition: opacity 1.2s ease;
}
.whisper.on { opacity: .82; }
.whisper .g { font-style: normal; color: var(--ice); opacity: .9; }

/* Glitch burst on the text: sliced, displaced copies driven by the same clock as the shader. */
.whisper.glitching {
  animation: slice .09s steps(2) infinite;
  text-shadow: -3px 0 rgba(127, 227, 255, .8), 3px 0 rgba(255, 23, 68, .7);
}
@keyframes slice {
  0%   { clip-path: inset(0 0 55% 0); transform: translateX(calc(-50% - 6px)); }
  50%  { clip-path: inset(40% 0 0 0); transform: translateX(calc(-50% + 5px)); }
  100% { clip-path: inset(10% 0 30% 0); transform: translateX(calc(-50% - 2px)); }
}

.hold, .sound {
  position: fixed;
  font: inherit;
  color: var(--bone);
  background: none;
  border: 0;
  padding: .75rem 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.hold {
  left: 50%;
  bottom: max(6vh, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-size: .95rem;
  letter-spacing: .08em;
  opacity: 0;
  transition: opacity 1.4s ease, letter-spacing 1.8s cubic-bezier(.2, .7, .1, 1);
}
.hold.on { opacity: .48; }
.hold.on:hover { opacity: .8; }
.hold.pressing { opacity: .9; letter-spacing: .42em; }
.hold.quiet { opacity: .22; }

.sound {
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  font-size: .8rem;
  font-style: italic;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.sound.on { opacity: .35; }
.sound.on:hover, .sound[aria-pressed="true"] { opacity: .75; }

.hold:focus-visible, .sound:focus-visible, a:focus-visible {
  outline: 1px solid var(--ice);
  outline-offset: 4px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .whisper.glitching { animation: none; text-shadow: 0 0 18px rgba(107, 75, 255, .45); }
  .hold, .whisper, .sound { transition: none; }
  .hold.pressing { letter-spacing: .08em; }
}

/* 404 */
.lost {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 2rem;
  text-align: center;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 50% 45%, rgba(107, 75, 255, .14), transparent 55%),
    var(--void);
}
.lost p {
  margin: 0;
  font-style: italic;
  font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  text-shadow: -2px 0 rgba(127, 227, 255, .55), 2px 0 rgba(255, 23, 68, .45);
  animation: flicker 4s steps(1) infinite;
}
.lost a {
  color: var(--bone);
  opacity: .55;
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 239, 247, .3);
  justify-self: center;
  padding-bottom: .15em;
}
.lost a:hover { opacity: .9; }
@keyframes flicker {
  0%, 91%, 95%, 100% { opacity: 1; transform: none; }
  92% { opacity: .3; transform: translateX(-4px) skewX(8deg); }
  94% { opacity: .8; transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .lost p { animation: none; } }