* {
  padding: 0;
  margin: 0;
}
@font-face {
  font-display: swap;
  font-family: "Nixie One";
  font-style: normal;
  font-weight: 400;
  src:
    url("./fonts/nixie-one-v17-latin-regular.woff2") format("woff2"),
    url("./fonts/nixie-one-v17-latin-regular.ttf") format("truetype");
}

:root {
  --color-thing: 30 70% 50%;
  --color-cat: 70 0% 70%;
  --color-bg-primary: 210 25% 10%;
  --base-font-size: 20px;
  --heading-primary:
    bold calc(2.5 * var(--base-font-size)) / 1.5 "Nixie One", serif;
}

body {
  background-color: hsl(var(--color-bg-primary));
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
}

#thing-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 50vh;
  left: 50vw;
  position: absolute;
  z-index: 10;
  transition:
    top 0.3s ease-out,
    left 0.3s ease-out;
}

#cat-box {
  position: absolute;
  left: 10vw;
  bottom: 0vh;
  z-index: 666;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  transition:
    bottom 0.3s ease-out,
    left 0.3s ease-out;
}

#thing-cat {
  color: hsl(var(--color-cat));
  text-shadow: 0 0 10px white;
  user-select: none;
  z-index: 666;
  transition: color 0.8s ease-in-out;
  --h-opacity: 0;
  &::after {
    content: "˗ˏˋ ♡ ˎˊ˗";
    opacity: var(--h-opacity);
    position: relative;
    transition: all 0.8s ease-in-out;
    top: -10rem;
    left: 1rem;
    margin-right: 5rem;
    vertical-align: super;
    text-shadow: 0 0 5px red;
    color: hsl(4 60% 70%);
  }
}
#thing {
  font: var(--heading-primary);
  color: hsl(var(--color-thing));
  transition: color 0.8s ease-in-out;
  user-select: none;
}

.balloon {
  --balloon-height: -380px;
  --balloon-sideways: 100px;
  --balloon-color: hsl(0 100% 30%);
  position: relative;
  top: calc(-15vh + 220px);
  left: 55px;
  width: 53px;
  height: 52px;
  opacity: 1;
  transition: opacity 0.3s ease-out;
  background: radial-gradient(
    circle at 50% 40%,
    hsl(from var(--balloon-color) h s 70%),
    var(--balloon-color)
  );
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0px 0px 10px hsl(from var(--balloon-color) h s 70%);
  z-index: 99;
}
.balloon.animate {
  animation: balloon-float 3s cubic-bezier(0.47, 0, 0.745, 0.715) forwards;
}

.balloon.flop {
  animation: balloon-flop 0.3s steps(100) forwards;
}

/* Balloon Animation */
@keyframes balloon-float {
  0% {
    transform: translateY(0px) translateX(0px) rotateZ(0deg);
  }
  20% {
    transform: translateY(-300px) translateX(15px) rotateZ(45deg);
  }
  100% {
    transform: translateY(-1200px) translateX(0px) rotateZ(-20deg);
  }
}
@keyframes balloon-flop {
  0% {
    transform: translateY(0px) translateX(0px) rotateZ(0deg);
  }
  20% {
    transform: translateY(-150px) translateX(30px) rotateZ(45deg);
  }
  40% {
    transform: translateY(-200px) translateX(70px) rotateZ(45deg);
  }
  80% {
    transform: translateY(-200px) translateX(120px) rotateZ(45deg);
  }
  100% {
    transform: translateY(-150px) translateX(140px) rotateZ(-20deg);
  }
}

/* Door Thing  */

.doorthing__door {
  box-sizing: border-box;
  position: relative;
  top: -295px;
  background-color: hsl(var(--color-bg-primary));
  height: 80px;
  width: 140px;
  left: 85px;
  z-index: 95;
  transform: var(--floor-transform);
  transform-origin: top;
  &.open {
    animation: door-open 0.5s forwards;
  }
  &.closed {
    animation: door-closed 0.5s forwards;
  }
}

.doorthing__backwall {
  box-sizing: border-box;
  position: relative;
  top: 40px;
  background-color: #2b3a46;
  height: 100px;
  width: 125px;
  left: 25px;
  z-index: 90;
}

.doorthing__frontwall {
  box-sizing: border-box;
  position: relative;
  top: -100px;
  background-color: hsl(var(--color-bg-primary));
  height: 190px;
  width: 180px;
  left: -20px;
  z-index: 100;
}

.doorthing {
  --floor-transform: perspective(500px) translate3d(-72px, 251px, -36px)
    rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: top;
  position: absolute;
  left: 30%;
  top: 65vh;
  z-index: 101;
  height: 15vh;
  width: 15vh;
}

.doorthing.open .doorthing__door {
  animation: door-open 2s forwards;
}
@keyframes door-open {
  0% {
    transform: var(--floor-transform) translate3d(0px, 0px, 0px) rotateY(0deg);
    background-color: hsl(var(--color-bg-primary));
    box-shadow: none;
    border-left: 0;
  }
  100% {
    transform: var(--floor-transform) translate3d(-15px, 0px, -45px)
      rotateY(40deg);

    background-color: #1d252d;
    box-shadow: -15px 7px 40px -7px #181c20 inset;
    border-left: 2px outset #2e3b46;
  }
}
@keyframes door-closed {
  0% {
    transform: var(--floor-transform) translate3d(-15px, 0px, -45px)
      rotateY(40deg);

    background-color: #1d252d;
    box-shadow: -15px 7px 40px -7px #181c20 inset;
    border-left: 2px outset #2e3b46;
  }
  100% {
    transform: var(--floor-transform) translate3d(0px, 0px, 0px) rotateY(0deg);
    background-color: hsl(var(--color-bg-primary));
    box-shadow: none;
    border-left: 0;
  }
}