/* ── the backrooms — presentation layer ─────────────────────────────────── */

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

body {
  background: #000;
  overflow: hidden;
  cursor: none;
}

canvas {
  display: block;
}

/* ── start screen — the only text in the whole experience ───────────────── */

#ov {
  position: fixed;
  inset: 0;
  background: #060604;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  color: #8a7c46;
  font-family: 'Courier New', monospace;
  letter-spacing: .3em;
  transition: opacity 2s;
}

#ov.gone {
  opacity: 0;
  pointer-events: none;
}

#ov h1 {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 400;
  text-transform: lowercase;
  margin-bottom: 2.2rem;
  opacity: .8;
}

#ov p {
  font-size: .6rem;
  color: #4e452a;
  margin-bottom: .4rem;
  letter-spacing: .25em;
  text-transform: lowercase;
}

#ov .go {
  margin-top: 2.4rem;
  font-size: .65rem;
  color: #6e6236;
  animation: pulse 2.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .35; }
  50%      { opacity: .9; }
}

/* ── analog layers — deliberately subtle ─────────────────────────────────── */

#vg {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.34) 100%);
  pointer-events: none;
  z-index: 20;
}

#scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 21;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.07) 0px,
    rgba(0,0,0,.07) 1px,
    transparent 1px,
    transparent 3px
  );
}

#noise {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 22;
  opacity: .024;
  image-rendering: pixelated;
  transition: opacity .15s;
}

#noise.glitch {
  opacity: .92;
}

#flash {
  position: fixed;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  transition: opacity .09s;
}

#flash.on {
  opacity: .8;
}

#track {
  position: fixed;
  left: 0;
  width: 100%;
  height: 60px;
  top: -80px;
  pointer-events: none;
  z-index: 23;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255,255,255,.045) 45%,
    rgba(200,200,220,.06) 50%,
    rgba(255,255,255,.045) 55%,
    transparent
  );
  filter: blur(1px);
}

#track.on {
  animation: trk .7s linear forwards;
}

@keyframes trk {
  0%   { top: 110%; }
  100% { top: -10%; }
}