@import url("data:text/css,");

:root {
  color-scheme: dark;
  --ink: #050706;
  --room-black: #090d0a;
  --wall: #111711;
  --wall-light: #1a2119;
  --line: #8e9980;
  --line-soft: rgba(155, 166, 141, .24);
  --chalk: #d8d5c5;
  --muted: #92988a;
  --amber: #d8a652;
  --red: #b95c48;
  --listen: 0;
  --chapter-progress: 0%;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body {
  color: var(--chalk);
  font-family: "Courier New", Courier, monospace;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 4px;
}

.experience,
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.scene {
  perspective: min(74vw, 860px);
  background:
    radial-gradient(circle at calc(56% + var(--listen) * 6%) 30%, rgba(132, 149, 118, .17), transparent 24%),
    linear-gradient(120deg, #040605, #0a0d0a 50%, #040605);
  transition: background-position 1.2s ease;
}

.grain {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 13% 42%, transparent 0 1px, rgba(255,255,255,.055) 1px 2px, transparent 2px 5px),
    repeating-linear-gradient(87deg, transparent 0 7px, rgba(255,255,255,.015) 8px 9px);
}

.room {
  position: absolute;
  inset: 7vh 7vw 9vh;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--listen) * -2.5deg)) translateX(calc(var(--listen) * -1.2vw));
  transition: transform 1.5s cubic-bezier(.2, .72, .18, 1);
}

.plane {
  position: absolute;
  transform-style: preserve-3d;
  backface-visibility: visible;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition:
    transform 3.2s cubic-bezier(.72, 0, .18, 1),
    opacity 1.4s ease,
    filter 1.4s ease;
}

.wall-back {
  inset: 8% 9% 15%;
  background:
    linear-gradient(105deg, rgba(255,255,255,.015), transparent 40%),
    repeating-linear-gradient(0deg, transparent 0 82px, rgba(151,162,138,.025) 83px 84px),
    var(--wall);
  transform: translateZ(-260px);
}

.wall-left {
  left: -17%;
  top: 8%;
  bottom: 15%;
  width: 27%;
  transform-origin: right;
  transform: rotateY(79deg) translateZ(-260px);
  background: linear-gradient(90deg, #080c09, #151b14);
}

.wall-right {
  right: -17%;
  top: 8%;
  bottom: 15%;
  width: 27%;
  transform-origin: left;
  transform: rotateY(-79deg) translateZ(-260px);
  background: linear-gradient(-90deg, #080c09, #151b14);
}

.floor {
  left: 9%;
  right: 9%;
  bottom: -29%;
  height: 45%;
  transform-origin: top;
  transform: rotateX(73deg) translateZ(-260px);
  background:
    repeating-linear-gradient(90deg, transparent 0 10.7%, rgba(158, 167, 143, .10) 10.85% 11%),
    linear-gradient(#131914, #080b09);
}

.ceiling {
  left: 9%;
  right: 9%;
  top: -26%;
  height: 43%;
  transform-origin: bottom;
  transform: rotateX(-73deg) translateZ(-260px);
  background:
    repeating-linear-gradient(90deg, transparent 0 23%, rgba(158, 167, 143, .05) 23.2% 23.35%),
    linear-gradient(#151b15, #090c0a);
}

.paper {
  position: absolute;
  display: block;
  height: 1px;
  background: var(--line-soft);
}

.scar-a {
  width: 29%;
  left: 11%;
  top: 31%;
  transform: rotate(-1.5deg);
}

.scar-b {
  width: 15%;
  right: 10%;
  top: 64%;
  transform: rotate(1deg);
}

.door,
.new-door {
  position: absolute;
  left: 61%;
  bottom: -1px;
  width: 18%;
  height: 68%;
  border: 1px solid rgba(161, 173, 148, .35);
  background: linear-gradient(100deg, #0d120e, #171e16);
  transform-origin: bottom;
  transition: transform 3s cubic-bezier(.65, 0, .2, 1), opacity 1.2s ease;
}

.door-line {
  position: absolute;
  left: 9%;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: rgba(166, 175, 153, .15);
}

.knob {
  position: absolute;
  right: 9%;
  top: 53%;
  width: 7px;
  aspect-ratio: 1;
  border: 1px solid var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(216, 166, 82, .2);
}

.door-dark {
  position: absolute;
  inset: 0;
  background: #010202;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.new-door {
  left: 11%;
  width: 15%;
  height: 57%;
  opacity: 0;
  transform: translateX(-12%) rotateY(8deg);
}

.frame {
  position: absolute;
  left: 25%;
  top: 23%;
  width: 15%;
  aspect-ratio: 1.34;
  border: 1px solid rgba(172, 180, 160, .35);
  padding: 5px;
  transform: rotate(-.7deg);
  transition: transform 2.7s cubic-bezier(.5,0,.2,1), opacity 1s;
}

.frame-picture {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(153deg, transparent 0 42%, rgba(192, 183, 151, .12) 43% 47%, transparent 48%),
    #0a0e0b;
}

.radiator {
  position: absolute;
  right: 5%;
  bottom: 6%;
  width: 21%;
  height: 17%;
  display: flex;
  gap: 4%;
  padding: 2%;
  border-top: 1px solid rgba(165, 173, 150, .22);
  border-bottom: 1px solid rgba(165, 173, 150, .17);
}

.radiator i {
  flex: 1;
  border-left: 1px solid rgba(165, 173, 150, .25);
  border-right: 1px solid rgba(165, 173, 150, .12);
}

.chair {
  position: absolute;
  left: 42%;
  bottom: 4%;
  width: 11%;
  height: 25%;
  transition: transform 2.5s cubic-bezier(.18,.7,.12,1);
}

.chair-back,
.chair-seat {
  position: absolute;
  left: 13%;
  width: 74%;
  border: 1px solid rgba(171, 180, 158, .32);
  background: #0b0f0c;
}

.chair-back {
  top: 0;
  height: 53%;
}

.chair-seat {
  top: 53%;
  height: 13%;
  transform: skewX(-13deg);
}

.chair i {
  position: absolute;
  top: 64%;
  bottom: 0;
  width: 1px;
  background: rgba(171, 180, 158, .4);
}

.chair i:first-of-type { left: 20%; transform: rotate(3deg); }
.chair i:last-of-type { right: 20%; transform: rotate(-3deg); }

.pipe {
  position: absolute;
  display: block;
  background: rgba(177, 185, 164, .22);
  box-shadow: 0 0 0 1px rgba(0,0,0,.8);
}

.pipe-one {
  left: 38%;
  top: -5%;
  width: 7px;
  height: 82%;
}

.pipe-two {
  left: 38%;
  bottom: 22%;
  width: 49%;
  height: 7px;
}

.pipe-joint {
  position: absolute;
  left: calc(38% - 5px);
  bottom: calc(22% - 4px);
  width: 17px;
  aspect-ratio: 1;
  border: 1px solid rgba(177,185,164,.35);
  border-radius: 50%;
}

.new-frame {
  position: absolute;
  left: 21%;
  top: 23%;
  width: 41%;
  height: 24%;
  border: 1px solid rgba(172,180,160,.3);
  opacity: 0;
  transition: opacity 1.4s;
}

.seam-vertical {
  left: 49%;
  top: 6%;
  bottom: 7%;
  width: 1px;
  height: auto;
}

.listening-mark {
  position: absolute;
  left: 16%;
  bottom: 11%;
  width: 40%;
  aspect-ratio: 1;
  border: 1px solid rgba(162,173,148,.15);
  border-radius: 50%;
  transform: scale(.4);
  opacity: 0;
  transition: transform 1.5s, opacity .8s;
}

.floorboard {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(163, 174, 150, .08);
}

.f1 { left: 20%; }
.f2 { left: 40%; }
.f3 { left: 60%; }
.f4 { left: 80%; }

.floor-vent {
  position: absolute;
  left: 21%;
  top: 25%;
  width: 17%;
  height: 21%;
  border: 1px solid rgba(163,174,150,.2);
  background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(163,174,150,.16) 10% 12%);
  transition: transform 2.2s, opacity 1s;
}

.ceiling-seam {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 22%;
  height: 1px;
  background: rgba(197, 189, 151, .23);
  box-shadow: 0 0 16px rgba(197, 189, 151, .15);
}

.step-path {
  position: absolute;
  left: 14%;
  right: 13%;
  bottom: 15%;
  height: 52%;
  border-top: 1px dotted rgba(216, 166, 82, .42);
  border-right: 1px dotted rgba(216, 166, 82, .42);
  opacity: 0;
  transition: opacity 1s;
}

.step-path i {
  position: absolute;
  top: -3px;
  width: 5px;
  height: 7px;
  border: 1px solid rgba(216,166,82,.55);
  border-radius: 50%;
  opacity: .15;
}

.step-path i:nth-child(1) { left: 5%; }
.step-path i:nth-child(2) { left: 19%; }
.step-path i:nth-child(3) { left: 34%; }
.step-path i:nth-child(4) { left: 49%; }
.step-path i:nth-child(5) { left: 64%; }
.step-path i:nth-child(6) { left: 79%; }
.step-path i:nth-child(7) { left: 97%; top: 35%; }

.new-wall-paper {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(203,198,170,.035)),
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(154,164,142,.05) 45px 46px);
  transition: opacity 1.2s;
}

.lamp {
  position: absolute;
  left: 49%;
  top: -2%;
  width: 70px;
  height: 42%;
  transform: translateZ(-105px);
  transform-origin: top;
  transition: transform 3.2s cubic-bezier(.68,0,.18,1);
}

.cord {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 56%;
  background: rgba(190, 196, 178, .42);
}

.shade {
  position: absolute;
  top: 54%;
  left: 16%;
  width: 68%;
  height: 14%;
  border: 1px solid rgba(205, 194, 158, .48);
  background: #141a14;
  clip-path: polygon(32% 0,68% 0,100% 100%,0 100%);
}

.bulb {
  position: absolute;
  top: 67%;
  left: 45%;
  width: 10%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #d9b46b;
  box-shadow: 0 0 10px #d9b46b, 0 0 28px rgba(217,180,107,.35);
  opacity: .55;
  transition: opacity 1.2s, box-shadow 1.2s;
}

.lamp-halo {
  position: absolute;
  top: 50%;
  left: -100%;
  width: 300%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,166,82,.12), transparent 62%);
  opacity: .45;
  transition: opacity 1.2s, transform 2s;
}

.sound-ring {
  position: absolute;
  z-index: 6;
  width: clamp(70px, 10vw, 160px);
  aspect-ratio: 1;
  border: 1px solid rgba(216,166,82,.58);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.ring-a { left: 8%; top: 32%; }
.ring-b { right: 7%; top: 23%; }
.ring-c { left: 48%; top: 5%; }

.room.sound-west .ring-a,
.room.sound-east .ring-b,
.room.sound-above .ring-c {
  animation: listen-ring 1.5s ease-out;
}

@keyframes listen-ring {
  0% { opacity: .7; transform: scale(.2); }
  100% { opacity: 0; transform: scale(1.35); }
}

.listening-axis {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(220px, 36vw);
  height: 14px;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(211,211,196,.38);
  font-size: 9px;
  letter-spacing: .2em;
  opacity: 0;
  transition: opacity .8s;
}

.listening-axis i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  aspect-ratio: 1;
  border: 1px solid var(--amber);
  border-radius: 50%;
  transform: translate(calc(-50% + var(--listen) * 92px), -50%);
  transition: transform .25s ease-out;
}

.mast,
.transcript,
.utility,
.progress,
.keyboard-hint {
  position: fixed;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s;
}

.mast {
  top: max(22px, env(safe-area-inset-top));
  left: 3vw;
  right: 3vw;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  color: rgba(217,215,200,.55);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mast p {
  margin: 0;
}

.chapter-number {
  font-variant-numeric: tabular-nums;
}

.transcript {
  left: clamp(18px, 3vw, 46px);
  bottom: clamp(78px, 10vh, 108px);
  width: min(42ch, calc(100vw - 36px));
  text-wrap: balance;
}

.direction,
.caption {
  margin: 0;
}

.direction {
  margin-bottom: 8px;
  color: var(--amber);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.caption {
  color: rgba(221,219,203,.88);
  font: clamp(14px, 1.25vw, 18px)/1.45 Georgia, serif;
}

.utility {
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(75px, 9vh, 100px);
  display: flex;
  gap: 7px;
}

.utility button,
.enter {
  min-height: 48px;
  border: 1px solid rgba(159,170,146,.36);
  border-radius: 0;
  background: rgba(8,12,9,.78);
  cursor: pointer;
}

.utility button {
  min-width: 78px;
  padding: 0 13px;
  color: rgba(215,215,201,.7);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#restart {
  display: none;
}

.progress {
  left: 3vw;
  right: 3vw;
  bottom: max(27px, env(safe-area-inset-bottom));
  height: 1px;
  background: rgba(159,170,146,.13);
  overflow: hidden;
}

.progress span {
  display: block;
  width: var(--chapter-progress);
  height: 100%;
  background: var(--amber);
  transition: width .5s linear;
}

.keyboard-hint {
  right: 3vw;
  bottom: max(34px, calc(env(safe-area-inset-bottom) + 7px));
  margin: 0;
  color: rgba(215,215,201,.34);
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.threshold {
  position: fixed;
  z-index: 14;
  left: clamp(24px, 7vw, 110px);
  bottom: clamp(32px, 9vh, 90px);
  width: min(520px, calc(100vw - 48px));
  transition: opacity 1.2s, transform 1.2s;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--amber);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  max-width: 11ch;
  font: 400 clamp(38px, 4.7vw, 70px)/.9 Georgia, serif;
  letter-spacing: -.055em;
}

h1 span {
  display: block;
  color: rgba(214,213,199,.62);
  font-size: .45em;
  letter-spacing: -.03em;
}

.threshold-copy {
  max-width: 42ch;
  margin: 22px 0 18px;
  color: rgba(215,215,201,.72);
  font: clamp(14px, 1.2vw, 17px)/1.5 Georgia, serif;
}

.enter {
  min-width: 220px;
  padding: 11px 16px;
  text-align: left;
}

.enter span {
  display: block;
}

.enter-main {
  color: var(--chalk);
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.enter-note,
.privacy {
  color: rgba(215,215,201,.42);
  font-size: 8px;
  letter-spacing: .05em;
}

.enter-note {
  margin-top: 4px;
}

.privacy {
  margin: 10px 0 0;
  text-transform: uppercase;
}

html:not([data-state="threshold"]) .threshold {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

html:not([data-state="threshold"]) .mast,
html:not([data-state="threshold"]) .transcript,
html:not([data-state="threshold"]) .utility,
html:not([data-state="threshold"]) .progress,
html:not([data-state="threshold"]) .listening-axis,
html:not([data-state="threshold"]) .keyboard-hint {
  opacity: 1;
  pointer-events: auto;
}

html[data-state="complete"] #pauseToggle {
  display: none;
}

html[data-state="complete"] #restart {
  display: block;
}

html[data-state="paused"] .scene {
  filter: saturate(.55);
}

html[data-chapter="1"] .pipe-joint {
  animation: pipe-knock .48s ease-out 2;
}

html[data-chapter="2"] .chair {
  transform: translateX(9vw) rotate(3deg);
}

html[data-chapter="2"] .frame {
  transform: rotate(2.5deg) translateY(-4px);
}

html[data-chapter="3"] .floor-vent {
  transform: translateX(32vw) rotate(90deg);
}

html[data-chapter="3"] .listening-mark {
  opacity: .55;
  transform: scale(1);
}

html[data-chapter="4"] .door {
  transform: perspective(400px) rotateY(-34deg);
}

html[data-chapter="4"] .door-dark {
  opacity: .85;
}

html[data-chapter="4"] .new-door {
  opacity: .55;
  transform: translateX(0) rotateY(0);
}

html[data-chapter="5"] .step-path {
  opacity: 1;
}

html[data-chapter="5"] .step-path i {
  animation: step-flare .48s ease-out;
}

html[data-chapter="5"] .step-path i:nth-child(2) { animation-delay: .25s; }
html[data-chapter="5"] .step-path i:nth-child(3) { animation-delay: .5s; }
html[data-chapter="5"] .step-path i:nth-child(4) { animation-delay: .75s; }
html[data-chapter="5"] .step-path i:nth-child(5) { animation-delay: 1s; }
html[data-chapter="5"] .step-path i:nth-child(6) { animation-delay: 1.25s; }
html[data-chapter="5"] .step-path i:nth-child(7) { animation-delay: 1.5s; }

html[data-chapter="6"] .ceiling {
  transform: rotateY(86deg) translateX(31%) translateZ(-102px);
  border-color: rgba(216, 166, 82, .7);
  background: #1d251d;
  box-shadow: 0 0 36px rgba(216, 166, 82, .18);
}

html[data-chapter="6"] .new-wall-paper {
  opacity: 1;
}

html[data-chapter="6"] .wall-back {
  transform: rotateY(-8deg) translateX(-4%) translateZ(-218px);
  border-color: rgba(174, 185, 160, .48);
  filter: brightness(1.3);
}

html[data-chapter="6"] .wall-left {
  transform: rotateY(84deg) translateX(7%) translateZ(-218px);
}

html[data-chapter="6"] .door {
  opacity: 0;
  transform: rotateY(-70deg);
}

html[data-chapter="6"] .new-door {
  opacity: 1;
  transform: translateX(0);
}

html[data-chapter="6"] .frame {
  opacity: 0;
  transform: translateY(-40px) rotate(4deg);
}

html[data-chapter="6"] .new-frame {
  opacity: .9;
}

html[data-chapter="6"] .lamp {
  transform: translate3d(-31vw, 19vh, -80px) rotateZ(88deg);
}

html[data-chapter="6"] .bulb {
  opacity: .95;
  box-shadow: 0 0 12px #d9b46b, 0 0 55px rgba(217,180,107,.52);
}

html[data-chapter="6"] .lamp-halo {
  opacity: .8;
  transform: scale(1.3);
}

.room.source-found {
  filter: brightness(1.34);
}

@keyframes pipe-knock {
  50% { transform: scale(1.8); border-color: var(--amber); }
}

@keyframes step-flare {
  0% { opacity: .2; transform: scale(.4); }
  45% { opacity: 1; border-color: var(--amber); transform: scale(1.6); }
  100% { opacity: .28; transform: scale(1); }
}

@media (max-width: 720px) {
  .scene {
    perspective: 430px;
  }

  .room {
    inset: 8vh 0 16vh;
  }

  .wall-back {
    inset: 8% 3% 18%;
    transform: translateZ(-160px);
  }

  .wall-left,
  .wall-right {
    width: 21%;
  }

  .wall-left {
    left: -17%;
    transform: rotateY(76deg) translateZ(-160px);
  }

  .wall-right {
    right: -17%;
    transform: rotateY(-76deg) translateZ(-160px);
  }

  .floor {
    left: 3%;
    right: 3%;
    bottom: -25%;
    transform: rotateX(71deg) translateZ(-160px);
  }

  .ceiling {
    left: 3%;
    right: 3%;
    top: -23%;
    transform: rotateX(-71deg) translateZ(-160px);
  }

  .lamp {
    height: 38%;
  }

  .threshold {
    left: 24px;
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 22px));
  }

  h1 {
    max-width: 9ch;
    font-size: clamp(42px, 13vw, 58px);
  }

  .threshold-copy {
    max-width: 32ch;
  }

  .mast {
    left: 18px;
    right: 18px;
  }

  .mast-title {
    max-width: 24ch;
  }

  .transcript {
    bottom: max(128px, calc(env(safe-area-inset-bottom) + 118px));
  }

  .utility {
    left: 18px;
    right: 18px;
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 54px));
  }

  .utility button {
    flex: 1;
    min-height: 50px;
  }

  .progress {
    left: 18px;
    right: 18px;
  }

  .keyboard-hint {
    display: none;
  }

  .listening-axis {
    bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px));
    width: 50vw;
  }

  html[data-chapter="6"] .lamp {
    transform: translate3d(-34vw, 18vh, -50px) rotateZ(88deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}