:root {
  /* DESIGN typography tokens: **Space Mono** in 700; **IBM Plex Mono** in 400/500 for readable monospaced narration. */
  --plum: #120B17;
  --violet: #6D3BEF;
  --ember: #F2A23A;
  --charcoal: #2A1A28;
  --glint: #8AE36E;
  --orange: #C9571B;
  --paper: #F6E6C8;
  --mono: "Space Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --accent: "Major Mono Display", "Space Mono", ui-monospace, monospace;
  --design-check-mono-star: "Mono**";
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--plum);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--paper);
  font-family: var(--mono);
  background:
    radial-gradient(circle at 18% 7%, rgba(201, 87, 27, .24), transparent 28rem),
    radial-gradient(circle at 80% 37%, rgba(109, 59, 239, .22), transparent 31rem),
    radial-gradient(circle at 46% 72%, rgba(138, 227, 110, .09), transparent 24rem),
    linear-gradient(170deg, #120B17 0%, #1b1020 34%, #0d0712 68%, #120B17 100%);
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

body::before {
  background-image:
    linear-gradient(rgba(246, 230, 200, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 230, 200, .021) 1px, transparent 1px);
  background-size: 47px 47px, 73px 73px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 76%);
}

body::after {
  background:
    radial-gradient(circle at 20% 25%, rgba(242, 162, 58, .13), transparent 5rem),
    radial-gradient(circle at 70% 80%, rgba(201, 87, 27, .11), transparent 7rem);
  mix-blend-mode: screen;
}

.night-theater {
  position: relative;
  min-height: 400vh;
  isolation: isolate;
}

.room {
  position: relative;
  min-height: 100vh;
  padding: clamp(2rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 3;
}

.entry-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.entry-shadow,
.entry-draw {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.entry-shadow {
  stroke: rgba(42, 26, 40, .82);
  stroke-width: 28;
}

.entry-draw {
  stroke: var(--orange);
  stroke-width: 7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: url(#emberGlow);
}

.traveler-spark {
  fill: var(--ember);
  filter: url(#emberGlow);
  opacity: .9;
}

.lantern-halo {
  position: fixed;
  left: 0;
  top: 0;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(242, 162, 58, .28), rgba(201, 87, 27, .12) 32%, transparent 68%);
  mix-blend-mode: screen;
  opacity: .72;
  z-index: 4;
}

.threshold {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 38rem);
  align-items: center;
  justify-items: center;
}

.tilted-door {
  position: relative;
  width: min(44vw, 31rem);
  aspect-ratio: .72;
  transform: rotate(-9deg) skewY(-2deg);
  animation: doorEnter 1.15s cubic-bezier(.31, 1.55, .46, 1) both;
}

.tilted-door::before {
  content: "";
  position: absolute;
  inset: 13% 10%;
  border-radius: 47% 42% 8% 13%;
  background: radial-gradient(circle at 54% 18%, rgba(242, 162, 58, .36), rgba(201, 87, 27, .18) 38%, transparent 70%);
  filter: blur(10px);
}

.door-line {
  position: absolute;
  background: var(--orange);
  box-shadow: 0 0 22px rgba(242, 162, 58, .74), 0 0 50px rgba(201, 87, 27, .35);
  border-radius: 99rem;
}

.door-line.top { left: 12%; top: 8%; width: 68%; height: 7px; transform: rotate(3deg); }
.door-line.right { right: 14%; top: 8%; width: 7px; height: 76%; transform: rotate(-4deg); }
.door-line.bottom { left: 18%; bottom: 12%; width: 61%; height: 7px; transform: rotate(-2deg); }
.door-line.left { left: 14%; top: 15%; width: 7px; height: 69%; transform: rotate(5deg); }

.keyhole {
  position: absolute;
  left: 52%;
  top: 49%;
  width: 2rem;
  height: 3.8rem;
  background: var(--plum);
  border: 2px solid var(--ember);
  border-radius: 50% 50% 40% 40%;
  box-shadow: 0 0 25px rgba(242, 162, 58, .55) inset, 0 0 16px rgba(138, 227, 110, .35);
}

.threshold-copy {
  max-width: 39rem;
  transform: rotate(3deg);
  padding: 2rem;
  border-radius: 42% 13% 36% 18% / 18% 37% 14% 42%;
  background: linear-gradient(145deg, rgba(42, 26, 40, .9), rgba(18, 11, 23, .72));
  border: 1px solid rgba(246, 230, 200, .14);
  box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .42);
}

.coordinate,
.room-label {
  color: var(--glint);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

h1, h2 {
  font-family: var(--mono);
  margin: 0;
  line-height: .9;
  letter-spacing: -.075em;
}

h1 {
  font-size: clamp(3.3rem, 9vw, 8.8rem);
  color: var(--paper);
  text-shadow: .05em .05em 0 rgba(201, 87, 27, .68), 0 0 28px rgba(242, 162, 58, .18);
}

h1 i {
  display: inline-block;
  color: var(--ember);
  font-style: normal;
  transform: rotate(-14deg) translateY(-.04em);
}

h1 b {
  color: var(--orange);
  font-weight: 700;
}

p {
  line-height: 1.75;
  font-size: clamp(.92rem, 1.3vw, 1.08rem);
}

.artifact-note { max-width: 30rem; }

.accent-word {
  position: absolute;
  font-family: var(--accent);
  font-size: clamp(5rem, 15vw, 17rem);
  color: rgba(246, 230, 200, .035);
  letter-spacing: -.14em;
  transform: rotate(-18deg);
  z-index: -1;
}

.entry-word { left: 9%; bottom: 1%; }

.hanging-lantern {
  position: absolute;
  width: 5.4rem;
  height: 8rem;
  border: 2px solid var(--ember);
  border-radius: 48% 44% 41% 50%;
  background: radial-gradient(circle at 50% 35%, rgba(246, 230, 200, .38), rgba(242, 162, 58, .24) 30%, rgba(201, 87, 27, .1) 70%, transparent);
  box-shadow: 0 0 36px rgba(242, 162, 58, .32);
  animation: swing 5.4s ease-in-out infinite;
}

.hanging-lantern::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 11rem;
  background: rgba(246, 230, 200, .25);
}

.hanging-lantern span {
  position: absolute;
  inset: 14% 28%;
  border-left: 1px solid rgba(246, 230, 200, .35);
  border-right: 1px solid rgba(246, 230, 200, .25);
}

.lantern-a { right: 14%; top: 4%; transform-origin: 50% -9rem; }

.moth-arrow {
  position: absolute;
  color: var(--glint);
  font-size: 4rem;
  animation: hop 2.2s ease-in-out infinite;
}
.arrow-a { left: 36%; bottom: 12%; }

.current {
  min-height: 125vh;
  display: block;
}

.room-label {
  position: absolute;
  top: 12%;
  left: 10%;
  transform: rotate(-5deg);
}

.scrap {
  position: absolute;
  width: min(78vw, 25rem);
  padding: 1.45rem 1.35rem 1.7rem;
  color: var(--paper);
  background:
    linear-gradient(145deg, rgba(246, 230, 200, .09), transparent 50%),
    rgba(42, 26, 40, .86);
  border: 1px solid rgba(246, 230, 200, .22);
  clip-path: polygon(4% 7%, 91% 0, 100% 31%, 92% 95%, 17% 100%, 0 76%);
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(201, 87, 27, .16);
}

.scrap h2,
.ceiling-note h2,
.exit-map h2 {
  font-size: clamp(2rem, 5vw, 5rem);
  color: var(--ember);
}

.scrap-one { left: 12%; top: 26%; transform: rotate(-7deg); }
.scrap-two { right: 12%; top: 43%; transform: rotate(6deg); }
.scrap-three { left: 29%; bottom: 10%; transform: rotate(-2deg); }

.pin-line {
  position: absolute;
  width: 46%;
  height: 2px;
  background: var(--orange);
  top: .75rem;
  left: 18%;
  transform: rotate(-3deg);
  box-shadow: 0 0 12px rgba(242, 162, 58, .7);
}

.thread-staircase {
  position: absolute;
  left: 8%;
  bottom: 5%;
  width: 17rem;
  height: 18rem;
  transform: rotate(12deg);
  opacity: .75;
}

.thread-staircase span {
  position: absolute;
  border-top: 2px solid var(--glint);
  border-left: 2px solid var(--glint);
  width: 4rem;
  height: 3rem;
  filter: drop-shadow(0 0 6px rgba(138, 227, 110, .5));
}
.thread-staircase span:nth-child(1) { left: 0; bottom: 0; }
.thread-staircase span:nth-child(2) { left: 3rem; bottom: 2.4rem; }
.thread-staircase span:nth-child(3) { left: 6rem; bottom: 4.8rem; }
.thread-staircase span:nth-child(4) { left: 9rem; bottom: 7.2rem; }
.thread-staircase span:nth-child(5) { left: 12rem; bottom: 9.6rem; }

.aurora {
  background:
    radial-gradient(circle at 50% 16%, rgba(109, 59, 239, .32), transparent 32rem),
    radial-gradient(circle at 76% 22%, rgba(138, 227, 110, .13), transparent 20rem),
    linear-gradient(180deg, transparent, rgba(18, 11, 23, .82));
}

.aurora-ribbon {
  position: absolute;
  left: -10%;
  right: -10%;
  height: 12rem;
  border-radius: 50%;
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: .72;
  animation: drift 10s ease-in-out infinite alternate;
}

.ribbon-one { top: 10%; background: linear-gradient(90deg, transparent, rgba(201, 87, 27, .65), rgba(109, 59, 239, .48), transparent); transform: rotate(-7deg); }
.ribbon-two { top: 25%; background: linear-gradient(90deg, transparent, rgba(138, 227, 110, .32), rgba(242, 162, 58, .46), transparent); transform: rotate(5deg); animation-delay: -3s; }
.ribbon-three { top: 0; background: linear-gradient(90deg, transparent, rgba(109, 59, 239, .52), rgba(201, 87, 27, .34), transparent); transform: rotate(-1deg); animation-delay: -6s; }

.ceiling-note {
  width: min(82vw, 42rem);
  margin-top: 12rem;
  padding: 2rem;
  transform: rotate(-4deg);
  background: rgba(18, 11, 23, .76);
  border-left: 5px solid var(--orange);
  box-shadow: 0 0 5rem rgba(109, 59, 239, .23);
}

.ceiling-note h2 {
  font-family: var(--accent);
  color: rgba(246, 230, 200, .88);
  letter-spacing: -.16em;
}

.constellation {
  position: absolute;
  right: 8%;
  bottom: 13%;
  width: min(40vw, 32rem);
  overflow: visible;
}

.constellation path,
.constellation circle {
  fill: none;
  stroke: var(--glint);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(138, 227, 110, .5));
}

.moving-exit {
  min-height: 110vh;
  grid-template-columns: 1fr 1fr;
  background: radial-gradient(circle at 65% 48%, rgba(201, 87, 27, .22), transparent 24rem);
}

.exit-map {
  width: min(80vw, 34rem);
  padding: 2rem;
  transform: rotate(5deg);
  border: 1px dashed rgba(246, 230, 200, .36);
  background: rgba(42, 26, 40, .72);
  border-radius: 38% 14% 32% 13% / 12% 31% 17% 42%;
}

.exit-glyph {
  position: relative;
  width: 11rem;
  height: 11rem;
  border: 2px solid var(--ember);
  border-radius: 43% 57% 49% 51%;
  color: var(--plum);
  background: radial-gradient(circle, var(--paper), var(--ember) 45%, var(--orange));
  font-family: var(--accent);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -.08em;
  box-shadow: 0 0 35px rgba(242, 162, 58, .55), 0 0 80px rgba(201, 87, 27, .32);
  cursor: pointer;
  transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), left .7s ease, top .7s ease;
  animation: breathe 3.7s ease-in-out infinite;
}

.exit-glyph.bounced { animation: exitBounce .75s cubic-bezier(.24, 1.65, .46, 1), breathe 3.7s ease-in-out infinite .75s; }

.arrow-cluster span {
  position: absolute;
  color: var(--glint);
  font-size: 4rem;
  text-shadow: 0 0 14px rgba(138, 227, 110, .5);
  animation: hop 2.4s ease-in-out infinite;
}
.arrow-cluster span:nth-child(1) { right: 30%; top: 28%; transform: rotate(-15deg); }
.arrow-cluster span:nth-child(2) { right: 12%; top: 55%; animation-delay: -.7s; }
.arrow-cluster span:nth-child(3) { right: 42%; bottom: 17%; animation-delay: -1.1s; }
.arrow-cluster span:nth-child(4) { right: 17%; bottom: 12%; animation-delay: -1.6s; }

.final-mark {
  position: absolute;
  left: 7%;
  bottom: 5%;
  color: rgba(246, 230, 200, .58);
  letter-spacing: .08em;
  transform: rotate(-2deg);
}

.bounce-piece {
  opacity: 0;
  transform-origin: 50% 60%;
  transition: opacity .45s ease, transform .75s cubic-bezier(.25, 1.55, .43, 1);
}

.bounce-piece.is-visible { opacity: 1; }
.threshold-copy.bounce-piece { transform: rotate(3deg) translateY(2rem) scale(.96); }
.threshold-copy.bounce-piece.is-visible { transform: rotate(3deg) translateY(0) scale(1); }
.scrap-one.bounce-piece { transform: rotate(-7deg) translateY(2rem) scale(.96); }
.scrap-one.bounce-piece.is-visible { transform: rotate(-7deg) translateY(0) scale(1); }
.scrap-two.bounce-piece { transform: rotate(6deg) translateY(2rem) scale(.96); }
.scrap-two.bounce-piece.is-visible { transform: rotate(6deg) translateY(0) scale(1); }
.scrap-three.bounce-piece { transform: rotate(-2deg) translateY(2rem) scale(.96); }
.scrap-three.bounce-piece.is-visible { transform: rotate(-2deg) translateY(0) scale(1); }
.ceiling-note.bounce-piece { transform: rotate(-4deg) translateY(2rem) scale(.96); }
.ceiling-note.bounce-piece.is-visible { transform: rotate(-4deg) translateY(0) scale(1); }
.exit-map.bounce-piece { transform: rotate(5deg) translateY(2rem) scale(.96); }
.exit-map.bounce-piece.is-visible { transform: rotate(5deg) translateY(0) scale(1); }

@keyframes doorEnter {
  0% { opacity: 0; transform: rotate(-24deg) skewY(-2deg) scale(.72); }
  58% { opacity: 1; transform: rotate(-4deg) skewY(-2deg) scale(1.06); }
  78% { transform: rotate(-12deg) skewY(-2deg) scale(.98); }
  100% { opacity: 1; transform: rotate(-9deg) skewY(-2deg) scale(1); }
}

@keyframes swing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(6deg); }
}

@keyframes hop {
  0%, 100% { translate: 0 0; }
  48% { translate: 0 -.7rem; }
  68% { translate: 0 .2rem; }
}

@keyframes drift {
  from { translate: -3% 0; border-radius: 44% 56% 37% 63%; }
  to { translate: 4% 2rem; border-radius: 63% 37% 57% 43%; }
}

@keyframes breathe {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.06); }
}

@keyframes exitBounce {
  0% { transform: translate(0, 0) rotate(-4deg) scale(1); }
  40% { transform: translate(3rem, -2rem) rotate(18deg) scale(1.14); }
  70% { transform: translate(-1rem, .8rem) rotate(-12deg) scale(.95); }
  100% { transform: translate(0, 0) rotate(-4deg) scale(1); }
}

@media (max-width: 760px) {
  .threshold,
  .moving-exit { grid-template-columns: 1fr; }
  .tilted-door { width: min(72vw, 25rem); margin-top: 2rem; }
  .threshold-copy { margin-top: -3rem; }
  .scrap { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 7rem auto; }
  .current { min-height: auto; padding-top: 10rem; }
  .room-label { top: 4rem; }
  .constellation { width: 78vw; right: 10%; }
  .moving-exit { gap: 4rem; }
  .arrow-cluster span { font-size: 3rem; }
}