@view-transition { navigation: auto; }

:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #040404;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* a single soft pool of light, washed down a dark wall */
#room {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(128% 82% at 50% 4%, rgba(240,238,228,0.38) 0%, rgba(240,238,228,0.13) 27%, rgba(0,0,0,0) 58%),
    radial-gradient(64% 52% at 50% 50%, rgba(232,230,220,0.22) 0%, rgba(0,0,0,0) 64%);
}
#room.breathe { animation: breathe 12s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { opacity: 0.84; }
  50%      { opacity: 1; }
}

/* the one way out — a faintly lit doorway in the wall */
.door {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(24vw, 132px);
  height: min(54vh, 306px);
  border: 1px solid rgba(228,226,214,0.55);
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg,
    rgba(236,234,224,0.11) 0%,
    rgba(236,234,224,0.04) 62%,
    rgba(0,0,0,0) 100%);
  box-shadow:
    0 0 26px rgba(226,224,212,0.16),
    inset 0 0 36px rgba(226,224,212,0.10);
  display: block;
  text-decoration: none;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.door:hover,
.door:focus-visible {
  border-color: rgba(238,236,226,0.56);
  box-shadow:
    0 0 30px rgba(232,230,218,0.16),
    inset 0 0 36px rgba(232,230,218,0.085);
  outline: none;
}

/* the label, dim and restrained */
.tag {
  position: fixed;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.42em;
  color: rgba(210,208,198,0.42);
  user-select: none;
  -webkit-user-select: none;
}

#fade {
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 1;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
#fade.out { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  #room.breathe { animation: none; }
}