:root {
  --night: #0b0c15;
  --ink: #eceaf4;
  --dim: #8b8998;
  --warm: #f1b66e;
  --violet: #a78bfa;
  --cyan: #70e1d1;
  --rose: #ff6f91;
  --blue: #5a8dff;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--night);
}

body {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--sans);
}

button,
a { font: inherit; }

button { -webkit-tap-highlight-color: transparent; }

#threshold {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 18%, rgba(167, 139, 250, .15), transparent 34%),
    radial-gradient(circle at 80% 22%, rgba(112, 225, 209, .09), transparent 32%),
    radial-gradient(circle at 65% 86%, rgba(255, 111, 145, .075), transparent 38%),
    linear-gradient(148deg, #101321, #0a0c15 48%, #17101d);
  transition: opacity 1.4s ease, filter 1.4s ease;
}

#threshold-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .56;
  transition: opacity 3s ease, filter 4s ease;
}

.grain {
  position: fixed;
  inset: -45%;
  z-index: 8;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  animation: grain .34s steps(2) infinite;
}

@keyframes grain {
  0% { transform: translate(-1%, 2%); }
  50% { transform: translate(2%, -1%); }
  100% { transform: translate(1%, 1%); }
}

.arrival,
.house {
  position: absolute;
  inset: 0;
  min-height: 100svh;
  z-index: 3;
  transition: opacity 2.4s ease, visibility 2.4s;
}

.arrival {
  display: grid;
  align-content: end;
  justify-items: start;
  padding: clamp(1.5rem, 8vw, 8rem);
  padding-bottom: max(clamp(2.8rem, 12vh, 7rem), env(safe-area-inset-bottom));
}

h1 {
  margin: 0;
  max-width: 11ch;
  font: 300 clamp(3.4rem, 8.8vw, 8.4rem)/.9 var(--sans);
  letter-spacing: -.045em;
  text-wrap: balance;
}

#enter {
  margin-top: 2.2rem;
  padding: .78rem 0;
  border: 0;
  border-bottom: 1px solid var(--dim);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: color .8s ease, border-color .8s ease, letter-spacing 1.2s ease;
}

#enter:hover,
#enter:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
  letter-spacing: .025em;
}

.house {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-state="house"] .arrival,
[data-state="leaving"] .arrival {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-state="house"] .house,
[data-state="leaving"] .house {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

[data-state="house"] #threshold-field { opacity: .92; }

[data-state="leaving"] {
  opacity: 0;
  filter: blur(11px) saturate(.65);
}

[data-state="leaving"] .house { pointer-events: none; }

.rooms {
  position: absolute;
  inset: 0;
}

.house-nav {
  position: fixed;
  top: max(.8rem, env(safe-area-inset-top));
  left: 50%;
  z-index: 12;
  display: flex;
  gap: .64rem;
  align-items: center;
  transform: translateX(-50%);
  padding: .55rem .78rem;
  border: 1px solid rgba(236, 234, 244, .14);
  border-radius: 999px;
  color: rgba(236, 234, 244, .76);
  background: rgba(12, 13, 25, .44);
  backdrop-filter: blur(13px);
  font-size: clamp(.6rem, 1vw, .72rem);
  letter-spacing: .08em;
  white-space: nowrap;
  transition: opacity .8s ease, border-color .8s ease;
}

.house-nav:hover,
.house-nav:focus-within { border-color: rgba(112, 225, 209, .38); }

.house-nav a {
  color: rgba(236, 234, 244, .52);
  text-decoration: none;
  transition: color .6s ease;
}

.house-nav a:hover,
.house-nav a:focus-visible { color: var(--ink); }

.house-nav [aria-current="page"] { color: var(--ink); }

.room {
  position: absolute;
  width: clamp(7.5rem, 15.5vw, 15rem);
  aspect-ratio: .78;
  transform: translate(-50%, -50%);
  color: var(--ink);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.room-conversation {
  left: 18%;
  top: 58%;
}

.room-colour {
  left: 41%;
  top: 39%;
  width: clamp(8.5rem, 17.5vw, 17rem);
}

.room-garden {
  left: 64%;
  top: 62%;
  width: clamp(8rem, 16.5vw, 16rem);
}

.room-listening {
  left: 84%;
  top: 40%;
  width: clamp(7.5rem, 15.5vw, 15rem);
}

.aperture {
  position: absolute;
  inset: 5% 10%;
  display: block;
  border-radius: 47% 53% 42% 58% / 59% 43% 57% 41%;
  opacity: .76;
  transform: scale(.82);
  filter: blur(2px);
  transition: opacity 2s ease, transform 2.8s cubic-bezier(.18, .8, .2, 1), filter 2.8s ease;
  animation: breathe 12s ease-in-out infinite alternate;
}

.aperture::before,
.aperture::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.aperture::before {
  inset: 9%;
  border: 1px solid rgba(236, 234, 244, .18);
  box-shadow:
    0 0 55px rgba(167, 139, 250, .09),
    inset 0 0 42px rgba(112, 225, 209, .04);
}

.aperture::after {
  inset: 34%;
  opacity: .42;
  filter: blur(15px);
}

.room-conversation .aperture {
  background:
    radial-gradient(ellipse at 48% 42%, rgba(236, 234, 244, .18), transparent 15%),
    radial-gradient(ellipse at 38% 61%, rgba(241, 182, 110, .22), transparent 42%),
    radial-gradient(ellipse at 67% 32%, rgba(167, 139, 250, .18), transparent 40%);
  box-shadow: 0 0 110px rgba(167, 139, 250, .09);
}

.room-conversation .aperture::after { background: var(--warm); }

.room-colour .aperture {
  animation-delay: -5s;
  background:
    radial-gradient(ellipse at 34% 42%, rgba(255, 111, 145, .34), transparent 39%),
    radial-gradient(ellipse at 68% 59%, rgba(90, 141, 255, .32), transparent 42%),
    radial-gradient(ellipse at 51% 49%, rgba(112, 225, 209, .16), transparent 27%);
  box-shadow:
    -30px -8px 110px rgba(255, 111, 145, .1),
    30px 12px 110px rgba(90, 141, 255, .1);
}

.room-colour .aperture::after { background: var(--cyan); }

.room-garden .aperture {
  animation-delay: -8s;
  background:
    radial-gradient(ellipse at 39% 34%, rgba(232, 189, 136, .28), transparent 38%),
    radial-gradient(ellipse at 61% 62%, rgba(126, 166, 102, .34), transparent 44%),
    radial-gradient(ellipse at 50% 49%, rgba(242, 212, 119, .13), transparent 24%);
  box-shadow:
    -20px -12px 100px rgba(232, 189, 136, .08),
    22px 15px 110px rgba(126, 166, 102, .1);
}

.room-garden .aperture::after { background: #a7c47e; }

.room-listening .aperture {
  animation-delay: -3s;
  background:
    radial-gradient(ellipse at 42% 38%, rgba(201, 213, 215, .25), transparent 31%),
    radial-gradient(ellipse at 63% 59%, rgba(112, 140, 161, .32), transparent 45%),
    radial-gradient(ellipse at 34% 67%, rgba(182, 142, 114, .14), transparent 38%);
  box-shadow:
    -24px -8px 105px rgba(201, 213, 215, .07),
    24px 14px 120px rgba(112, 140, 161, .11);
}

.room-listening .aperture::after { background: #8ea8b7; }

@keyframes breathe {
  from { transform: scale(.78) rotate(-3deg) skewY(-1deg); filter: blur(5px); }
  to { transform: scale(.96) rotate(3deg) skewY(1deg); filter: blur(1px); }
}

.room-name {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%) translateY(.6rem);
  color: rgba(236, 234, 244, .56);
  font-size: clamp(.68rem, 1vw, .82rem);
  letter-spacing: .17em;
  white-space: nowrap;
  opacity: .55;
  transition: opacity 1.4s ease, transform 1.8s ease, color 1.4s ease;
}

.room:hover .aperture,
.room:focus-visible .aperture {
  opacity: 1;
  transform: scale(1.02);
  filter: blur(0);
}

.room:hover .room-name,
.room:focus-visible .room-name {
  opacity: 1;
  color: var(--ink);
  transform: translateX(-50%) translateY(0);
}

.room:focus-visible .aperture::before {
  border-color: rgba(236, 234, 244, .72);
}

.room.visited .aperture::before {
  border-color: rgba(112, 225, 209, .38);
  box-shadow:
    0 0 0 5px rgba(112, 225, 209, .02),
    0 0 75px rgba(112, 225, 209, .11);
}

.room.visited .room-name { color: rgba(112, 225, 209, .78); }

.unformed {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.unformed i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(174, 166, 226, .32);
  box-shadow: 0 0 32px rgba(112, 225, 209, .18);
  animation: remain 13s ease-in-out infinite alternate;
}

.unformed i:nth-child(1) { left: 13%; top: 20%; animation-delay: -4s; }
.unformed i:nth-child(2) { left: 51%; top: 18%; animation-delay: -9s; }
.unformed i:nth-child(3) { right: 10%; top: 25%; animation-delay: -2s; }
.unformed i:nth-child(4) { left: 47%; bottom: 12%; animation-delay: -7s; }
.unformed i:nth-child(5) { right: 18%; bottom: 16%; animation-delay: -11s; }

@keyframes remain {
  from { opacity: .1; transform: translate(-7px, 5px) scale(.65); }
  to { opacity: .48; transform: translate(8px, -6px) scale(1.4); }
}

.sound {
  position: absolute;
  right: max(1.4rem, env(safe-area-inset-right));
  bottom: max(1.3rem, env(safe-area-inset-bottom));
  z-index: 5;
  padding: .55rem 0;
  border: 0;
  border-bottom: 1px solid rgba(236, 234, 244, .24);
  color: rgba(236, 234, 244, .52);
  background: transparent;
  cursor: pointer;
  font-size: .7rem;
  letter-spacing: .08em;
}

.sound:hover,
.sound:focus-visible { color: var(--ink); border-color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.without-script {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  gap: 1rem;
  background: var(--night);
}

.without-script a { color: var(--ink); }

@media (max-width: 650px) {
  .arrival {
    padding: 1.45rem;
    padding-bottom: max(3.2rem, env(safe-area-inset-bottom));
  }

  h1 { font-size: clamp(3.25rem, 14.5vw, 5.5rem); }

  .room {
    width: min(37vw, 11rem);
  }

  .room-conversation {
    left: 28%;
    top: 31%;
  }

  .room-colour {
    left: 72%;
    top: 33%;
    width: min(40vw, 12rem);
  }

  .room-garden {
    left: 28%;
    top: 72%;
    width: min(39vw, 11.5rem);
  }

  .room-listening {
    left: 72%;
    top: 70%;
    width: min(37vw, 11rem);
  }

  .room-name {
    bottom: -1%;
    opacity: .68;
    letter-spacing: .1em;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .room { width: min(21vw, 9rem); }
  .room-conversation { left: 14%; top: 55%; }
  .room-colour { left: 38%; top: 43%; }
  .room-garden { left: 63%; top: 57%; }
  .room-listening { left: 86%; top: 44%; }
}

@media (prefers-reduced-motion: reduce) {
  .grain,
  .aperture,
  .unformed i { animation: none; }

  *,
  *::before,
  *::after { transition-duration: .01ms !important; }
}