@charset "UTF-8";
@layer tokens {
  :root {
    --color-primary: rgb(36, 34, 34);
    --color-surface: #000000;
    --time: 24s;
  }
}
@property --shadow-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}
@layer scene {
  .scene {
    display: grid;
    place-items: center;
    position: absolute;
    animation: scene-zoom-in-out var(--time) ease-in-out infinite;
    transform-style: preserve-3d;
}
  @keyframes scene-zoom-in-out {
    from {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(0.9);
    }
  }
}
@property --space {
  syntax: "<length>";
  initial-value: 0;
  inherits: true;
}
@layer cuboid {
  .cuboid {
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateY(312deg) rotateX(350deg) rotateZ(10deg) translateY(20vh);
    --size: 8vmax;
    --size-h: calc(var(--size) / 2);
    --size-h-n: calc(var(--size) / -2);
  }
  .cuboid .top {
    width: var(--size);
    aspect-ratio: 1;
    background: linear-gradient(135deg, #e8dbdd, #989699);
    transform-style: preserve-3d;
    transform: rotateX(90deg) translateZ(var(--size-h-n));
    opacity: 0.9;
  }
  .cuboid .front {
    width: var(--size);
    aspect-ratio: 1/2;
    background: linear-gradient(#5f595d, transparent 60%);
    opacity: 0.5;
    transform: translateZ(var(--size-h));
    position: absolute;
  }
  .cuboid .right {
    width: var(--size);
    aspect-ratio: 1/2;
    background: linear-gradient(#5f595d 10%, transparent 90%);
    transform: translate3d(var(--size-h), 0, 0) rotateY(90deg);
    position: absolute;
    opacity: 0.7;
    mask: radial-gradient(150% 120% at 0% 0%, black, transparent);
  }
  .cuboid .outline {
    --space: 0vmax;
    --space-h: calc(var(--size) / 2);
    position: absolute;
    width: var(--size);
    aspect-ratio: 1;
    border: 0.0125vmax solid white;
    transition: all 3s ease-in-out;
    translate: calc(-50% + var(--space-h)) calc(-50% + var(--space-h));
    padding: var(--space);
    --duration: 16s;
    animation: outline-animation var(--duration) 0s cubic-bezier(0.68, 0.27, 0.26, 0.91) infinite;
    opacity: 0;
    box-shadow: inset 0 0 0.5vmax rgba(255, 255, 255, 0.4), 0 0 0.5vmax rgba(255, 255, 255, 0.4);
    --initial-space: var(--size-h);
  }
  .cuboid .outline:nth-of-type(2) {
    animation-delay: calc(var(--duration) / 4);
  }
  .cuboid .outline:nth-of-type(3) {
    animation-delay: calc(var(--duration) / 4 * 2);
  }
  .cuboid .outline:nth-of-type(4) {
    animation-delay: calc(var(--duration) / 4 * 3);
  }
  @keyframes outline-animation {
    from {
      --space: var(--initial-space, 0vmax);
      opacity: 0;
      filter: blur(0vmax);
    }
    5% {
      opacity: 0.2;
    }
    40% {
      opacity: 0.5;
    }
    60% {
      opacity: 0.05;
      filter: blur(0vmax);
    }
    80% {
      opacity: 0;
    }
    to {
      --space: calc(var(--initial-space, 0vmax) + 25vmax);
      opacity: 0;
      filter: blur(0.6vmax);
    }
  }
}
@layer planets {
  @property --moon-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
  }
  @keyframes moon-animation {
    from {
      --moon-angle: 180deg;
    }
    50% {
      --moon-angle: 200deg;
    }
    to {
      --moon-angle: 180deg;
    }
  }
  .sun {
    border-radius: 50%;
    width: 25vmax;
    aspect-ratio: 1;
    background: radial-gradient(circle at 60% 60%, #f6f6f6, #e8dbdd, #d9d9d9);
    position: absolute;
    transform: translateY(-20vmax);
    box-shadow: 0 0 14vmax rgba(255, 255, 255, 0.5), 0 0 22vmax rgba(255, 255, 255, 0.05), 0 0 42vmax rgba(255, 255, 255, 0.4);
    transform-style: preserve-3d;
  }
  .planet {
    border-radius: 50%;
    width: 17vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 60% 55%, #252525, #2a2f33 52%, #ede9ea 62%), #ede9ea;
    position: absolute;
    --r: 15vmax;
    --y: calc(-10vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * -1);
    transform: translateY(var(--y)) translateX(10vmax) translateZ(var(--z));
    animation: moon-animation var(--time) ease-in-out infinite;
    box-shadow: 0 0 2.5vmax rgba(255, 255, 255, 0.12);
    filter: blur(0.05vmax);
    transform-style: preserve-3d;
  }
  .planet-2 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 13vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 60% 55%, #e3e3e3, #d2c6c8 52%, #212528 62%, transparent 82%);
    position: absolute;
    --r: 2vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(-20vmax) translateZ(var(--z));
    animation: moon-animation var(--time) ease-in-out infinite;
  }
  .planet-3 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 2vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #eeeeee 16%, #b7aeb0 38%, #3c4144 52%, #2d3134 60%, transparent 82%);
    position: absolute;
    transform: translateY(-10vmax) translateX(-20vmax);
    opacity: 0.6;
  }
  .planet-4 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 1vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 70% 50%, #d0d0d0, #b7aeb0 38%, #121415 52%, #131617 60%, transparent 82%);
    position: absolute;
    transform: translateY(-11vmax) translateX(-22vmax);
    opacity: 0.5;
  }
  .planet-5 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 10vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 30% 55%, #797777, #515051 52%, #212528 62%, transparent 82%);
    position: absolute;
    --r: 5vmax;
    --y: calc(-35vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(18vmax) translateZ(var(--z));
    clip-path: circle();
    overflow: clip;
    animation: moon-animation var(--time) ease-in-out infinite;
    --animation: move-to-left calc(var(--time) * 6) ease-in-out infinite;
  }
  .planet-5 .structure-1 {
    position: absolute;
    inset: -20vmax;
    filter: url(#planet-structure) saturate(0);
    mix-blend-mode: lighten;
    opacity: 0.4;
    transform: scale(4) translateX(1vmax);
    animation: var(--animation);
  }
  .planet-5 .structure-2 {
    position: absolute;
    inset: -20vmax;
    filter: url(#planet-structure) saturate(0);
    mix-blend-mode: lighten;
    opacity: 0.5;
    transform: scale(7.5);
    animation: var(--animation);
  }
  .planet-5 .structure-3 {
    position: absolute;
    inset: -20vmax;
    filter: url(#planet-structure) saturate(0);
    mix-blend-mode: lighten;
    opacity: 0.1;
    transform: scale(0.2) translateX(1vmax);
    animation: var(--animation);
  }
  .planet-5::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 5% 20%, transparent 30%, #171a1c 60%);
  }
  @keyframes move-to-left {
    from {
      translate: 0 0;
    }
    50% {
      translate: -100% 0;
    }
    to {
      translate: 0 0;
    }
  }
  .planet-6 {
    transform-style: preserve-3d;
    border-radius: 50%;
    width: 7vmax;
    aspect-ratio: 1;
    background: radial-gradient(90% 90% at 30% 55%, #f3ecec, #7a7a7a 52%, #212528 72%, transparent);
    position: absolute;
    --r: 6vmax;
    --y: calc(-39.6vmax + sin(var(--moon-angle)) * var(--r));
    --z: calc(cos(var(--moon-angle)) * var(--r) * 1);
    transform: translateY(var(--y)) translateX(23vmax) translateZ(var(--z));
    animation: moon-animation var(--time) ease-in-out infinite;
    display: grid;
    place-items: center;
  }
  .planet-6::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 12vmax;
    height: 1vmax;
    border: 1vmax solid #5e5e5e;
    box-shadow: inset 0 0 1rem black;
    transform: rotate(25deg);
    mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
    clip-path: ellipse(47% 22% at 50% 50%);
    filter: blur(0.5vmax);
  }
  .planet-6::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 12vmax;
    height: 1vmax;
    border: 2.6vmax solid #43484c;
    box-shadow: inset 0 0 1rem black;
    transform: rotate(25deg);
    mask: radial-gradient(circle at 50% -20%, transparent 30%, black);
    clip-path: ellipse(47% 22% at 50% 50%);
  }
  .planets,
  .planets-2 {
    position: absolute;
    inset: 0;
  }
  .planets > div,
  .planets-2 > div {
    --distance: 20vmax;
    border-radius: 50%;
    width: 1.6vmax;
    aspect-ratio: 1;
    background: red;
    opacity: 0.5;
    filter: blur(0.1rem);
    translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
  }
  .planets-2 > div {
    width: 0.5vmax;
    opacity: 0.6;
    filter: unset;
    background: green;
  }
}
@layer object {
  .object {
    position: absolute;
    display: grid;
    display: none;
    place-items: center;
    transform: rotateY(45deg) translateZ(6vmax);
    translate: 5vmax 5vmax;
  }
  .object .body {
    position: absolute;
    display: grid;
    place-items: center;
    --content: "🏄‍♂️";
    --content: "🐋";
    font-size: 6vmax;
    color: initial;
    z-index: 1111;
  }
  .object .body:before {
    content: var(--content);
    transform: scaleX(-1);
    filter: saturate(0) brightness(1.1) drop-shadow(0 0 1vmax rgba(0, 0, 0, 0.4));
    z-index: 1111;
  }
  .object .body:after {
    content: var(--content);
    transform: scaleX(-1) scaleY(-1) translateY(2.5vmax);
    filter: saturate(0) brightness(0);
    mask: linear-gradient(to bottom, transparent 60%, black 80%);
    z-index: 115;
  }
}
@layer human {
  .human {
    position: absolute;
    display: grid;
    place-items: center;
    width: 6vmax;
    height: 14vmax;
    translate: 0 17vh;
    z-index: 111;
  }
  .human:not(.shadow) {
    filter: drop-shadow(0 0 1.5vmax rgba(250, 250, 250, 0.6));
  }
  .human > div {
    position: absolute;
  }
  .human .head {
    background: white;
    width: 1.5vmax;
    height: 1.6vmax;
    border-radius: 50%;
    translate: 0.2vmax -6.2vmax;
    rotate: 355deg;
  }
  .human .head:before {
    content: "";
    position: absolute;
    background: white;
    width: 0.27vmax;
    height: 0.7vmax;
    border-radius: 50%;
    translate: 1.19vmax 0.5vmin;
    rotate: 136deg;
    animation: head-nose calc(var(--time) / 4) ease-in-out infinite;
  }
  @keyframes head-nose {
    from {
      translate: 1.19vmax 0.5vmin;
    }
    50% {
      translate: 1.06vmax 0.5vmin;
    }
    to {
      translate: 1.19vmax 0.5vmin;
    }
  }
  .human .head:after {
    content: "";
    position: absolute;
    background: white;
    width: 1.1vmax;
    height: 0.9vmax;
    border-radius: 50%;
    translate: 0.45vmax 0.66vmax;
    rotate: 45deg;
    animation: head-chin calc(var(--time) / 4) ease-in-out infinite;
  }
  @keyframes head-chin {
    from {
      translate: 0.45vmax 0.66vmax;
    }
    50% {
      translate: 0.2vmax 0.66vmax;
    }
    to {
      translate: 0.45vmax 0.66vmax;
    }
  }
  .human .neck {
    background: white;
    width: 0.8vmax;
    height: 1.5vmax;
    border-radius: 50%;
    translate: 0.2vmax -5.4vmax;
  }
  .human .neck:before {
    content: "";
    position: absolute;
    width: 0.3vmax;
    height: 1.5vmax;
    background: white;
    border-radius: 50%;
    translate: 0.6vmax 0.4vmax;
    rotate: 352deg;
  }
  .human .body {
    z-index: 11;
  }
  .human .body > div {
    position: absolute;
  }
  .human .body .shoulder:before {
    content: "";
    position: absolute;
    width: 1.3vmax;
    height: 0.5vmax;
    background: white;
    border-radius: 50%;
    translate: -1.1vmax -5vmax;
    rotate: 330deg;
  }
  .human .body .shoulder:after {
    content: "";
    position: absolute;
    width: 1.3vmax;
    height: 0.5vmax;
    background: white;
    border-radius: 50%;
    translate: 0.4vmax -4.9vmax;
    rotate: 24deg;
  }
  .human .body .back {
    width: 1.3vmax;
    height: 4.1vmax;
    background: rgb(250, 250, 250);
    border-radius: 20%;
    translate: -0.2vmax -4.9vmax;
    rotate: 357deg;
  }
  .human .body .back:before {
    content: "";
    position: absolute;
    width: 2.9vmax;
    height: 1.5vmax;
    background: rgb(250, 250, 250);
    border-radius: 50%;
    translate: -1.4vmax 0.7vmax;
    rotate: 69deg;
    z-index: -1;
  }
  .human .body .back:after {
    content: "";
    position: absolute;
    width: 2.6vmax;
    height: 1vmax;
    background: rgb(250, 250, 250);
    border-radius: 50%;
    translate: 0.1vmax 1.1vmax;
    rotate: 96deg;
  }
  .human .body .hip .center {
    position: absolute;
    width: 1.6vmax;
    height: 1.8vmax;
    background: radial-gradient(white, #f5f5f5);
    border-radius: 39.6%;
    translate: -0.3vmax -3vmax;
    rotate: 267deg;
    display: grid;
  }
  .human .body .hip:before {
    content: "";
    position: absolute;
    width: 1.6vmax;
    height: 2.2vmax;
    background: radial-gradient(white, #e7e4e4);
    border-radius: 46.5%;
    translate: -0.6vmax -2.5vmax;
    rotate: 8deg;
  }
  .human .body .hip:after {
    content: "";
    position: absolute;
    width: 1.3vmax;
    height: 2.2vmax;
    background: radial-gradient(white, #f6f5f5);
    border-radius: 41.1%;
    translate: 0.3vmax -2.2vmax;
    rotate: 161deg;
  }
  .human .leg.right {
    width: 1.1vmax;
    height: 2.9vmax;
    background: white;
    border-radius: 50%;
    translate: 1.2vmax 0.4vmax;
    rotate: 348deg;
  }
  .human .leg.right:after {
    content: "";
    position: absolute;
    width: 0.7vmax;
    height: 2.9vmax;
    background: white;
    border-radius: 50%;
    translate: 0.5vmax 0.2vmax;
    rotate: 13deg;
  }
  .human .leg.right .knee {
    position: absolute;
    height: 1.7vmax;
    width: 0.75vmax;
    background: white;
    border-radius: 39.6%;
    translate: 0vmax 2.2vmax;
    rotate: 15deg;
  }
  .human .leg.right .lower {
    position: absolute;
    height: 3.2vmax;
    width: 0.8vmax;
    background: white;
    border-radius: 50%;
    translate: -0.3vmax 2.4vmax;
    rotate: 15deg;
  }
  .human .leg.right .lower:before {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.5vmax;
    background: white;
    border-radius: 67.8%;
    translate: 0.5vmax 2.6vmax;
    rotate: 66deg;
  }
  .human .leg.right .lower:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.5vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.1vmax 2.3vmax;
    rotate: 0deg;
  }
  .human .leg.left {
    width: 1.1vmax;
    height: 2.9vmax;
    background: #f4efef;
    border-radius: 50%;
    translate: -0.3vmax 0.4vmax;
    rotate: 2deg;
    filter: none;
    z-index: -1;
  }
  .human .leg.left:after {
    content: "";
    position: absolute;
    width: 0.7vmax;
    height: 2.9vmax;
    background: #f4efef;
    border-radius: 50%;
    translate: 0.5vmax 0.2vmax;
    rotate: 13deg;
  }
  .human .leg.left .knee {
    position: absolute;
    height: 1.7vmax;
    width: 0.75vmax;
    background: #e7e4e4;
    border-radius: 39.6%;
    translate: 0vmax 2.2vmax;
    rotate: 5deg;
  }
  .human .leg.left .lower {
    position: absolute;
    height: 3.2vmax;
    width: 0.8vmax;
    background: #eae6e6;
    border-radius: 50%;
    translate: -0.1vmax 1.9vmax;
    rotate: 5deg;
  }
  .human .leg.left .lower:before {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.5vmax;
    background: #e7e4e4;
    border-radius: 67.8%;
    translate: 0.5vmax 2.6vmax;
    rotate: 47deg;
  }
  .human .leg.left .lower:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 1.55vmax;
    background: #e7e4e4;
    border-radius: 27.8%;
    translate: 0.1vmax 2.3vmax;
    rotate: 0deg;
  }
  .human .arm.right {
    position: absolute;
    width: 0.7vmax;
    height: 2.9vmax;
    background: white;
    border-radius: 27.8%;
    translate: 1.6vmax -3.1vmax;
    rotate: 346deg;
    animation: arm-right calc(var(--time) / 4) ease-in-out infinite;
  }
  @keyframes arm-right {
    from {
      rotate: 346deg;
    }
    50% {
      rotate: 350deg;
    }
    to {
      rotate: 346deg;
    }
  }
  .human .arm.right:before {
    content: "";
    position: absolute;
    width: 0.3vmax;
    height: 2.45vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 2.1vmax;
    rotate: 6deg;
  }
  .human .arm.right:after {
    content: "";
    position: absolute;
    width: 0.4vmax;
    height: 2.15vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.1vmax 2.1vmax;
    rotate: 351deg;
  }
  .human .arm.right .hand {
    position: absolute;
    width: 0.3vmax;
    height: 0.85vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 3.7vmax;
    rotate: 353deg;
  }
  .human .arm.right .hand:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 0.55vmax;
    background: white;
    border-radius: 39.2%;
    translate: -0.2vmax 0.6vmax;
    rotate: 65deg;
  }
  .human .arm.left {
    width: 0.7vmax;
    height: 2.5vmax;
    background: white;
    border-radius: 59.8%;
    translate: -0.9vmax -3.4vmax;
    rotate: 359deg;
    filter: none;
    z-index: -2;
    animation: arm-left calc(var(--time) / 4) ease-in-out infinite;
  }
  @keyframes arm-left {
    from {
      rotate: 359deg;
    }
    50% {
      rotate: 364deg;
    }
    to {
      rotate: 359deg;
    }
  }
  .human .arm.left:before {
    content: "";
    position: absolute;
    width: 0.3vmax;
    height: 2.45vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 1.8vmax;
    rotate: 6deg;
  }
  .human .arm.left:after {
    content: "";
    position: absolute;
    width: 0.4vmax;
    height: 2.15vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.2vmax 2.1vmax;
    rotate: 351deg;
  }
  .human .arm.left .hand {
    position: absolute;
    width: 0.3vmax;
    height: 0.85vmax;
    background: white;
    border-radius: 27.8%;
    translate: 0.3vmax 3.7vmax;
    rotate: 353deg;
  }
  .human .arm.left .hand:after {
    content: "";
    position: absolute;
    width: 0.5vmax;
    height: 0.55vmax;
    background: white;
    border-radius: 39.2%;
    translate: -0.1vmax 0.2vmax;
    rotate: 65deg;
  }
  .human.shadow {
    transform: scaleY(-1) translateY(-9vmax);
    filter: none;
    opacity: 0.5;
    z-index: 0;
    mask: linear-gradient(to top, black 25%, transparent 35%);
  }
  .human.shadow .leg.left .lower:before {
    rotate: 102deg;
  }
  .human.shadow .leg.right .lower:before {
    rotate: 102deg;
  }
}
.highlight {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: radial-gradient(50vmin 70vmin at 70% 70%, rgba(255, 255, 255, 0.12), transparent),
              radial-gradient(40vmin 30vmin at 70% 70%, rgba(255, 255, 255, 0.12), transparent),
              radial-gradient(40vmin 60vmin at 10% 70%, rgba(255, 255, 255, 0.14), transparent),
              radial-gradient(80vmin 100vh at 30% 70%, rgba(255, 255, 255, 0.1), transparent);
  filter: blur(5vmin);
  pointer-events: none;
}

.color-filter {
  position: absolute;
  height: 100vh;
  width: 100vw;
  background: conic-gradient(at 50% 60%, rgba(50, 56, 92, 0.27), rgba(152, 75, 132, 0.07), rgba(150, 75, 152, 0.04), rgba(50, 56, 92, 0.27));
  mix-blend-mode: color;
  pointer-events: none;
}

.space-container {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: black;
  color: var(--color-primary);
  position: relative;
  perspective: 80vmax;
  margin: 0;
  overflow: visible;
  transform: scale(0.65) translateY(25vh);
  margin-bottom: 4rem; 



}

.space-container:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 111;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.1);
  mask: linear-gradient(transparent 0%, transparent 100%);
  backdrop-filter: blur(5vmin);
  display: none; 

}
* {
  box-sizing: border-box;
}