*:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

a,
button {
  cursor: revert;
}

ol,
ul,
menu {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

table {
  border-collapse: collapse;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
       appearance: revert;
}

::-moz-placeholder {
  color: unset;
}

::placeholder {
  color: unset;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  line-break: after-white-space;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

:root {
  --cave: #1c0a2f;
  --shadow: drop-shadow(0 6px 0px rgba(12, 5, 20, 0.25));
}

body {
  background: black;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}
body:not(.unlocked) {
  max-height: 100dvh;
  overflow: hidden;
}

#The-Kings-Utilipee {
  position: relative;
  overflow: hidden;
  transform-origin: top;
}

#Utilipee-Sign {
  width: min(520px, 30%);
  position: absolute;
  top: 19vw;
  left: 1.5%;
  z-index: 4;
  filter: var(--shadow) saturate(1.25);
  transform-origin: top;
}
@media (max-width: 840px) {
  #Utilipee-Sign {
    top: 4vw;
    left: auto;
    width: 75%;
    align-self: center;
  }
}

#Down-Down {
  width: min(420px, 11%);
  position: absolute;
  bottom: 49.75vw;
  right: 26%;
  z-index: 4;
  filter: var(--shadow);
  cursor: pointer;
  transition: filter 0.5s ease, transform 0.25s ease;
  transform-origin: 32% 100%;
  isolation: isolate;
}
#Down-Down::before {
  content: "";
  background: black;
  width: 12%;
  height: 4%;
  border-radius: 100%;
  position: absolute;
  bottom: -2.5%;
  opacity: 0.75;
  left: 20%;
  filter: blur(2px);
  pointer-events: none;
  animation: shadow-scale 1s forwards infinite ease;
}
#Down-Down img {
  animation: big-bounce 1s forwards infinite ease;
}
#Down-Down:hover {
  filter: drop-shadow(0 8px 4px rgba(12, 5, 20, 0.25)) saturate(2);
  transform: scale(1.1);
}

@keyframes big-bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-20%);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(-4px);
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}
@keyframes shadow-scale {
  0% {
    transform: scale(1, 1);
    filter: blur(2px);
  }
  10% {
    transform: scale(1.1, 0.9);
    filter: blur(3px);
    opacity: 0.75;
  }
  30% {
    transform: scale(1.75, 1);
    filter: blur(5px);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05, 0.95);
    filter: blur(3px);
    opacity: 0.75;
  }
  57% {
    transform: scale(0.75, 0.75);
    filter: blur(3px);
  }
  64% {
    transform: scale(0.75, 0.75);
    filter: blur(3px);
  }
  100% {
    transform: scale(0.75, 0.75);
    filter: blur(3px);
  }
}
#Underground {
  --scroll-duration: 750;
  position: relative;
  background: var(--cave) url("i/background.jpg") no-repeat bottom/cover;
  margin-top: -50vw;
}
#Underground.b-1 #Elevator {
  bottom: 72%;
}
#Underground.b-2 #Elevator {
  bottom: 52%;
}
#Underground.b-3 #Elevator {
  bottom: 32%;
}
#Underground.b-4 #Elevator {
  bottom: 0.125%;
}
@media (max-width: 840px) {
  #Underground {
    margin-top: -13vw;
  }
  #Underground.b-1 #Elevator {
    bottom: 79%;
  }
  #Underground.b-2 #Elevator {
    bottom: 59%;
  }
  #Underground.b-3 #Elevator {
    bottom: 39%;
  }
  #Underground.b-4 #Elevator {
    bottom: -0.325%;
  }
}

#Goblintown {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#Goblintown > img {
  transform-origin: bottom right;
}
@media (max-width: 840px) {
  #Goblintown > img {
    transform: scale(1.1);
  }
}

#The-Kings-Mansion {
  z-index: 2;
  position: relative;
  filter: var(--shadow);
  transform-origin: top;
}
@media (max-width: 840px) {
  #The-Kings-Mansion {
    transform: scale(1.75);
  }
}

#The-Kings-Shaft {
  pointer-events: none;
  position: absolute;
  right: 20%;
  bottom: 7vw;
  width: 28%;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  transform-origin: bottom left;
}
#The-Kings-Shaft::before {
  content: "";
  background: transparent url("i/elevator-shaft.png") repeat-y top/100%;
  position: absolute;
  inset: 0 0 58.125vw;
  mix-blend-mode: overlay;
}
@media (max-width: 840px) {
  #The-Kings-Shaft {
    right: -4.5%;
    width: 52%;
  }
  #The-Kings-Shaft::before {
    inset: 0 0 105.65vw;
  }
}

#Hideout {
  position: absolute;
  right: 1px;
  top: 40%;
  width: 34%;
  transform: scaleY(0.65);
  z-index: 5;
}
@media (max-width: 840px) {
  #Hideout {
    width: 52%;
    right: -30vw;
  }
}

#Elevator {
  position: absolute;
  z-index: -1;
  bottom: 100%;
  width: 21%;
  transform: translateX(-12%) scaleY(0.9);
  transition: bottom calc(var(--scroll-duration) * 1.1ms) ease-in-out;
}

#The-Root {
  position: absolute;
  bottom: 0;
  transform: translateY(2vw);
  mix-blend-mode: overlay;
}
@media (max-width: 840px) {
  #The-Root {
    transform: translateY(6vw);
  }
}

#Contact {
  position: absolute;
  bottom: 10.75%;
  width: 35%;
  cursor: pointer;
  z-index: 0;
  left: 29%;
  transition: filter 0.5s ease;
  transform-origin: bottom;
}
#Contact:hover {
  filter: saturate(1.5);
}
@media (max-width: 840px) {
  #Contact {
    bottom: 9.75%;
    transform: scale(1.5);
  }
}

#The-Descent {
  padding-block: 28vw 80vw;
  padding-inline: max(5vw, 24px);
  width: 63%;
}
@media (max-width: 840px) {
  #The-Descent {
    width: 72%;
    padding-block: 72vw;
  }
}

.buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.buttons:hover .button {
  transform: scale(0.9);
}

.button {
  cursor: pointer;
  transition: transform 0.1s ease;
  width: min(52%, 560px);
}
.button:hover {
  filter: drop-shadow(0 8px 4px rgba(12, 5, 20, 0.25)) saturate(2);
  transform: scale(1.1) !important;
}

.step {
  position: relative;
  --step-timing: 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(2.5vw, 24px);
  transition: opacity var(--step-timing) ease-in-out, transform var(--step-timing) ease-in-out;
  transform-origin: top;
  margin-top: 32vw;
  z-index: 2;
}
.step:not(.observed), .step.hidden {
  opacity: 0;
  transform: scale(1.125);
}
@media (max-width: 840px) {
  .step {
    margin-top: 0;
    height: 75dvh;
  }
  .step .buttons {
    flex-direction: column;
  }
  .step .button,
  .step .title {
    width: 100% !important;
  }
  .step .title {
    transform: none !important;
  }
}

.title {
  transition: filter 0.5s ease, transform 0.25s ease;
  filter: var(--shadow);
}

#Step-1 .title {
  width: 64%;
}

#Step-2 .title {
  width: 44%;
  transform: translateX(-22%);
}

#Step-3 .title {
  width: 64%;
}

@media (max-width: 840px) {
  #Step-3 {
    display: none;
  }
}

#Volume {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: max(5vw, 40px);
  aspect-ratio: 1;
  cursor: pointer;
  z-index: 9;
  transform: scale(1.075);
  animation: wiggle 0.5s linear infinite;
  transition: 0.5s ease;
}
#Volume #Off {
  position: absolute;
  inset: 0;
  opacity: 0;
}
#Volume.off {
  animation: none;
}
#Volume.off #Off {
  opacity: 1;
}
#Volume.hidden {
  transform: translateY(100%);
  opacity: 0;
}

@keyframes wiggle {
  50% {
    transform: rotate(-3deg);
  }
}