:root {
  --ink: #101010;
  --paper: #f8e045;
  --hot: #f14b22;
  --cyan: #1589b7;
  --teal: #2f8d78;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #14110f;
  color: white;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
}

button {
  font: inherit;
}

.experience {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgb(255 229 75 / 0.12), transparent 38%),
    linear-gradient(180deg, #221d19, #090807 70%);
}

.scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 640ms ease, transform 900ms cubic-bezier(.2,.8,.15,1);
}

.scene.is-active {
  opacity: 1;
  pointer-events: auto;
}

.scene--front {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, #70c5eb 0%, #c8edf8 58%, #83b851 58%, #5e913b 77%, #34383d 77%, #181b1f 100%);
  transform-origin: 50% 58%;
}

.scene--front::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 23%;
  background:
    linear-gradient(90deg, transparent 0 43%, #efc846 43% 57%, transparent 57% 100%) 50% 68% / 190px 8px no-repeat,
    repeating-linear-gradient(106deg, transparent 0 128px, rgb(255 255 255 / 0.045) 128px 130px),
    radial-gradient(ellipse at 50% 0, #4d5257, #22262b 72%);
  clip-path: none;
}

.scene--front::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 73%;
  height: 5%;
  border-top: 2px solid #bfd2a5;
  border-bottom: 4px solid #6b7074;
  background:
    repeating-linear-gradient(90deg, #d9dde0 0 88px, #c5cacf 88px 90px);
}

.scene--front.is-entering {
  transform: scale(1.42) translateY(5vh);
  opacity: 0;
}

.front-stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 23%;
  width: min(82vw, calc(66dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  transform: translateX(-50%);
}

.front-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px rgb(0 0 0 / 0.38));
  user-select: none;
}

.front-shade {
  position: absolute;
  inset: auto 0 0;
  height: 24vh;
  background: linear-gradient(0deg, rgb(0 0 0 / 0.44), transparent);
  pointer-events: none;
}

.sky-clouds,
.front-landscape {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky-clouds {
  z-index: 0;
  overflow: hidden;
}

.cloud {
  position: absolute;
  left: -22vw;
  width: clamp(100px, 12vw, 190px);
  height: clamp(30px, 3.5vw, 56px);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.84);
  box-shadow:
    32px -18px 0 -4px rgb(255 255 255 / 0.84),
    72px -8px 0 -10px rgb(255 255 255 / 0.84);
  filter: drop-shadow(0 8px 8px rgb(68 131 160 / 0.12));
  animation: cloud-drift 28s linear infinite;
}

.cloud--one {
  top: 12%;
}

.cloud--two {
  top: 28%;
  opacity: 0.66;
  transform: scale(0.72);
  animation-duration: 39s;
  animation-delay: -14s;
}

.cloud--three {
  top: 7%;
  opacity: 0.48;
  transform: scale(0.55);
  animation-duration: 48s;
  animation-delay: -31s;
}

@keyframes cloud-drift {
  from {
    left: -24vw;
  }

  to {
    left: 112vw;
  }
}

.front-landscape {
  z-index: 1;
  bottom: 22%;
}

.tree {
  position: absolute;
  bottom: 22%;
  width: clamp(88px, 10vw, 158px);
  height: clamp(150px, 22vh, 240px);
}

.tree::before {
  content: "";
  position: absolute;
  left: 46%;
  bottom: 0;
  width: 10%;
  height: 48%;
  background: #614934;
}

.tree::after {
  content: "";
  position: absolute;
  inset: 0 0 30%;
  border-radius: 48% 52% 45% 55%;
  background:
    radial-gradient(circle at 35% 32%, #7db557 0 24%, transparent 25%),
    radial-gradient(circle at 68% 34%, #5f9b47 0 28%, transparent 29%),
    radial-gradient(circle at 50% 66%, #477f3c 0 38%, transparent 39%);
  filter: drop-shadow(0 8px 8px rgb(26 66 31 / 0.18));
}

.tree--one {
  left: 2%;
}

.tree--two {
  left: 14%;
  transform: scale(0.82);
}

.tree--three {
  right: 13%;
  transform: scale(0.88);
}

.tree--four {
  right: 1%;
}

.shrubs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20%;
  height: 10%;
  background:
    radial-gradient(ellipse at 5% 100%, #3f7e3b 0 48%, transparent 50%) 0 100% / 130px 72px repeat-x,
    radial-gradient(ellipse at 65% 100%, #5d9a43 0 48%, transparent 50%) 45px 100% / 150px 64px repeat-x;
}

.door-hotspot {
  position: absolute;
  left: 50.05%;
  top: 63%;
  width: 18.1%;
  height: 42.8%;
  border: 0;
  padding: 0;
  background:
    linear-gradient(90deg, rgb(246 223 81 / 0.54), transparent 8% 92%, rgb(246 223 81 / 0.54)),
    linear-gradient(180deg, rgb(246 223 81 / 0.32), transparent 12% 88%, rgb(246 223 81 / 0.42)),
    url("assets/wall-front.png") center / cover no-repeat;
  cursor: pointer;
  perspective: 1200px;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 3px rgb(16 16 16 / 0.8),
    0 14px 26px rgb(0 0 0 / 0.42);
  transition: transform 860ms cubic-bezier(.16,.84,.16,1), opacity 420ms ease;
}

.door-hotspot::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 3px solid rgb(255 236 90 / 0);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.door-hotspot:hover::after,
.door-hotspot:focus-visible::after {
  border-color: rgb(255 236 90 / 0.8);
  box-shadow: 0 0 22px rgb(255 236 90 / 0.65);
}

.door-leaf {
  position: absolute;
  top: 4px;
  width: 50%;
  height: calc(100% - 8px);
  border: 2px solid rgb(246 223 81 / 0.86);
  background:
    linear-gradient(125deg, rgb(255 255 255 / 0.34), transparent 30%),
    linear-gradient(180deg, rgb(9 31 35 / 0.86), rgb(2 6 8 / 0.94));
  transition:
    transform 1060ms cubic-bezier(.16,.84,.16,1),
    filter 620ms ease,
    opacity 620ms ease;
  transform-style: preserve-3d;
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 20px rgb(255 255 255 / 0.08);
}

.door-leaf--left {
  left: 4px;
  transform-origin: 0 50%;
}

.door-leaf--right {
  right: 4px;
  transform-origin: 100% 50%;
}

.door-leaf::after {
  content: "";
  position: absolute;
  top: 48%;
  width: 5px;
  height: 32px;
  border-radius: 999px;
  background: rgb(255 231 92 / 0.95);
  box-shadow: 0 0 10px rgb(255 231 92 / 0.4);
}

.door-leaf--left::after {
  right: 10px;
}

.door-leaf--right::after {
  left: 10px;
}

.door-glow {
  position: absolute;
  inset: 8%;
  background: radial-gradient(circle, rgb(255 232 82 / 0.64), transparent 68%);
  opacity: 0;
  filter: blur(14px);
  transition: opacity 420ms ease;
}

.scene--front.is-opening .door-leaf--left {
  transform: rotateY(-104deg);
  filter: brightness(1.35);
}

.scene--front.is-opening .door-leaf--right {
  transform: rotateY(104deg);
  filter: brightness(1.35);
}

.scene--front.is-opening .door-glow {
  opacity: 1;
}

.scene--front.is-opening .door-hotspot {
  transform: translate(-50%, -50%) scale(1.12);
}

.scene--inside {
  background:
    radial-gradient(circle at 50% 42%, rgb(255 206 39 / 0.12), transparent 38%),
    linear-gradient(180deg, #211f1b, #090909);
  transform: scale(0.9);
}

.scene--inside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 50%, rgb(0 0 0 / 0.48) 100%),
    linear-gradient(180deg, rgb(0 0 0 / 0.38), transparent 18% 82%, rgb(0 0 0 / 0.58));
}

.scene--inside.is-active {
  transform: scale(1);
}

.room {
  --wall-width: min(72vw, calc(72dvh * 16 / 9), 1040px);
  --wall-height: calc(var(--wall-width) * 0.5625);
  --room-depth: var(--wall-width);
  position: relative;
  width: min(96vw, calc(88dvh * 16 / 9), 1440px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  perspective: 1050px;
  perspective-origin: 50% 48%;
  transform-style: preserve-3d;
  transform: scale(1);
  background: #111;
  box-shadow:
    0 0 0 4px var(--ink),
    0 28px 58px rgb(0 0 0 / 0.55);
}

.room-shell {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50% calc(var(--room-depth) / -2);
  transition: transform 1450ms cubic-bezier(.42,0,.24,1);
  will-change: transform;
}

.room[data-view="front"] .room-shell {
  transform: translateZ(310px) rotateX(-1.5deg) rotateY(0deg);
}

.room[data-view="left"] .room-shell {
  transform: translateX(2%) translateZ(555px) rotateX(-0.5deg) rotateY(-90deg);
}

.room[data-view="right"] .room-shell {
  transform: translateX(-2%) translateZ(555px) rotateX(-0.5deg) rotateY(90deg);
}

.room.is-close[data-view="front"] .room-shell {
  transform: translateZ(610px) rotateX(-1.5deg) rotateY(0deg);
  transition-duration: 1200ms;
  transition-timing-function: cubic-bezier(.22,.68,.2,1);
}

.room.is-close[data-view="left"] .room-shell {
  transform: translateX(2%) translateZ(880px) rotateX(-0.5deg) rotateY(-90deg);
  transition-duration: 1350ms;
  transition-timing-function: cubic-bezier(.22,.68,.2,1);
}

.room.is-close[data-view="right"] .room-shell {
  transform: translateX(-2%) translateZ(880px) rotateX(-0.5deg) rotateY(90deg);
  transition-duration: 1350ms;
  transition-timing-function: cubic-bezier(.22,.68,.2,1);
}

.room-surface {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  overflow: hidden;
  background: #d6d3ce;
  backface-visibility: visible;
  transform-style: preserve-3d;
  will-change: transform;
  outline: 2px solid #d6d3ce;
  box-shadow: inset 0 0 0 1px rgb(20 20 20 / 0.18);
}

.room-surface img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
}

.room-wall--left,
.room-wall--right {
  backface-visibility: hidden;
}

.wall-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.wall-face--reverse {
  transform: rotateY(180deg) translateZ(1px);
}

.room-wall {
  width: calc(var(--wall-width) + 4px);
  height: calc(var(--wall-height) + 4px);
}

.room-wall--front {
  transform:
    translate(-50%, -50%)
    translateZ(calc(var(--room-depth) * -1));
}

.room-wall--back {
  backface-visibility: hidden;
  background:
    linear-gradient(180deg, #efb900 0 9%, #f4f3f0 9% 68%, #b9b9b9 68% 100%);
  transform:
    translate(-50%, -50%)
    rotateY(180deg)
    translateZ(1px);
}

.room-wall--left,
.room-wall--right {
  width: calc(var(--room-depth) + 4px);
}

.room-wall--left {
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--wall-width) / -2))
    translateZ(calc(var(--room-depth) / -2))
    rotateY(90deg);
}

.room-wall--right {
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--wall-width) / 2))
    translateZ(calc(var(--room-depth) / -2))
    rotateY(-90deg);
}

.room-ceiling,
.room-floor {
  width: calc(var(--wall-width) + 4px);
  height: calc(var(--room-depth) + 4px);
}

.room-ceiling {
  transform:
    translate(-50%, -50%)
    translateY(calc(var(--wall-height) / -2))
    translateZ(calc(var(--room-depth) / -2))
    rotateX(-90deg);
}

.room-floor {
  transform:
    translate(-50%, -50%)
    translateY(calc(var(--wall-height) / 2))
    translateZ(calc(var(--room-depth) / -2))
    rotateX(90deg);
}

.room-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translateZ(700px);
  background:
    radial-gradient(ellipse at 50% 48%, transparent 68%, rgb(0 0 0 / 0.27)),
    linear-gradient(180deg, rgb(0 0 0 / 0.14), transparent 15% 84%, rgb(0 0 0 / 0.22));
}

.view-zones {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.view-zone {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.view-zone:focus-visible {
  outline: 0;
}

.back-zone {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.back-zone:focus-visible {
  outline: 0;
}

@media (max-width: 720px) {
  .front-stage {
    width: 132vw;
  }

  .door-hotspot {
    top: 63%;
    width: 18.1%;
    height: 42.8%;
  }

  .room {
    --wall-width: min(98vw, calc(64dvh * 16 / 9));
    width: min(132vw, calc(78dvh * 16 / 9));
  }
}