@use 'sass:math';

@layer tokens {
  :root {
    --color-primary: rgba(220, 219, 219, 0.78);
    --color-surface: #242425;
    --time: 24s;
  }
}

@property --shadow-color {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}

@layer stars {
  .stars {
    position: absolute;
    width: 100vmax;
    height: 100vmax;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      filter: url(#stars) saturate(0) brightness(1.5);
      mix-blend-mode: overlay;
      opacity: 0.15;
      animation: stars-animation 20s ease-in-out infinite;
    }
  }

  .stars-highlights {
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0.6;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      filter: url(#stars-highlights) saturate(0) brightness(1.5);
      mix-blend-mode: lighten;
      opacity: 0.2;
      animation: stars-animation-2 20s ease-in-out infinite;
    }
  }

  @keyframes stars-animation {
    from {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
    30% {
      translate: 1vmin -2vmin;
    }
    50% {
      translate: -1vmin 2vmin;
      rotate: 10deg;
    }
    to {
      translate: 1vmin 2vmin;
      rotate: 0deg;
    }
  }

  @keyframes stars-animation-2 {
    from {
      translate: 1vmin -2vmin;
    }
    30% {
      translate: -1vmin -2vmin;
    }
    50% {
      translate: 1vmin -2vmin;
    }
    to {
      translate: 1vmin -2vmin;
    }
  }

  .startails {
    position: absolute;
    inset: 0;
    opacity: 0.6;

    > div {
      --distance: 20vmax;
      border-radius: 50%;
      width: 0.55vmax;
      aspect-ratio: 3 / 1;
      background: white;
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
      opacity: 0;
      animation: startails-animation 10s calc(var(--delay) * var(--time) * 6)
        linear infinite;
      box-shadow: 0 0 0.2vmax white;
    }

    @for $i from 0 through 200 {
      > div:nth-of-type(#{$i + 1}) {
        --x: #{math.random()};
        --y: #{math.random()};
        --x2: #{math.random() - 0.5};
        --y2: #{math.random() - 0.5};
        --delay: #{math.random()};
      }
    }
  }

  @keyframes startails-animation {
    from {
      opacity: 1;
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
      scale: 0.9;
    }
    2% {
      scale: 0.4;
    }
    5% {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance))
        calc(var(--y) * 100vh + var(--x2) * var(--distance));
      opacity: 0;
      scale: 1;
    }

    to {
      translate: calc(var(--x) * 100vw + var(--y2) * var(--distance))
        calc(var(--y) * 100vh + var(--x2) * var(--distance));

      scale: 1;
      opacity: 0;
    }
  }
}

@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);

    .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;
    }

    .front {
      width: var(--size);
      aspect-ratio: 1 / 2;
      background: linear-gradient(#5f595d, transparent 60%);
      opacity: 0.5;
      transform: translateZ(var(--size-h));
      position: absolute;
    }

    .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);
    }

    .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);

      &:nth-of-type(2) {
        animation-delay: calc(var(--duration) / 4);
      }

      &:nth-of-type(3) {
        animation-delay: calc(var(--duration) / 4 * 2);
      }

      &: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; // chrome bug workaround
    animation: moon-animation var(--time) ease-in-out infinite;

    --animation: move-to-left calc(var(--time) * 6) ease-in-out infinite;

    .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);
    }

    .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);
    }

    .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);
    }

    &::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;

    &::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);
    }

    &::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;

    > div {
      --distance: 20vmax;
      border-radius: 50%;
      width: 1.6vmax;
      aspect-ratio: 1;
      background: radial-gradient(
        90% 90% at 70% 50%,
        #bbbaba,
        #888586 38%,
        #121415 52%,
        #131617 60%,
        transparent 82%
      );
      opacity: 0.5;
      filter: blur(0.1rem);
      translate: calc(var(--x) * 100vw) calc(var(--y) * 100vh);
    }

    @for $i from 0 through 50 {
      > div:nth-of-type(#{$i + 1}) {
        --x: #{math.random()};
        --y: #{math.random()};
        --x2: #{math.random() - 0.5};
        --y2: #{math.random() - 0.5};
        --delay: #{math.random()};
      }
    }
  }

  .planets-2 {
    > div {
      width: 0.5vmax;
      opacity: 0.6;
      filter: unset;
    }
  }
}
@layer object {
  .object {
    position: absolute;
    display: grid;
    display: none;
    place-items: center;
    transform: rotateY(45deg) translateZ(6vmax);
    translate: 5vmax 5vmax;

    .body {
      position: absolute;
      display: grid;
      place-items: center;
      --content: "🏄‍♂️";
      --content: "🐋";
      //--content: '🐬';
      //--content: '🐚';
      //--content: '🕊️';
      //--content: '🌴';
      font-size: 6vmax;
      color: initial;
      z-index: 1111;

      &: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;
      }

      &: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;
    //border: 1px solid red;
    width: 6vmax;
    height: 14vmax;
    translate: 0 17vh;
    z-index: 111;

    &:not(.shadow) {
      filter: invert(0.04) drop-shadow(0 0 1.5vmax rgba(250, 250, 250, 0.6));
    }

    > div {
      position: absolute;
    }

    .head {
      background: white;
      width: 1.5vmax;
      height: 1.6vmax;
      border-radius: 50%;
      translate: 0.2vmax -6.2vmax;
      rotate: 355deg;

      &:before {
        content: ""; // nose
        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;
          }
        }
      }

      &:after {
        content: ""; // chin
        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;
          }
        }
      }
    }

    .neck {
      background: white;
      width: 0.8vmax;
      height: 1.5vmax;
      border-radius: 50%;
      translate: 0.2vmax -5.4vmax;

      &:before {
        content: ""; // right
        position: absolute;
        width: 0.3vmax;
        height: 1.5vmax;
        background: white;
        border-radius: 50%;
        translate: 0.6vmax 0.4vmax;
        rotate: 352deg;
      }
    }

    .body {
      z-index: 11;

      > div {
        position: absolute;
      }

      .shoulder {
        &:before {
          content: "";
          position: absolute;
          width: 1.3vmax;
          height: 0.5vmax;
          background: white;
          border-radius: 50%;
          translate: -1.1vmax -5vmax;
          rotate: 330deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 1.3vmax;
          height: 0.5vmax;
          background: white;
          border-radius: 50%;
          translate: 0.4vmax -4.9vmax;
          rotate: 24deg;
        }
      }

      .back {
        width: 1.3vmax;
        height: 4.1vmax;
        background: rgb(250, 250, 250);
        border-radius: 20%;
        translate: -0.2vmax -4.9vmax;
        rotate: 357deg;

        &: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;
        }

        &:after {
          content: "";
          position: absolute;
          width: 2.6vmax;
          height: 1vmax;
          background: rgb(250, 250, 250);
          border-radius: 50%;
          translate: 0.1vmax 1.1vmax;
          rotate: 96deg;
        }
      }

      .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;
        }

        &:before {
          content: ""; // left
          position: absolute;
          width: 1.6vmax;
          height: 2.2vmax;
          background: radial-gradient(white, #e7e4e4);
          border-radius: 46.5%;
          translate: -0.6vmax -2.5vmax;
          rotate: 8deg;
        }

        &:after {
          content: ""; // right
          position: absolute;
          width: 1.3vmax;
          height: 2.2vmax;
          background: radial-gradient(white, #f6f5f5);
          border-radius: 41.1%;
          translate: 0.3vmax -2.2vmax;
          rotate: 161deg;
        }
      }
    }

    .leg {
      &.right {
        width: 1.1vmax;
        height: 2.9vmax;
        background: white;
        border-radius: 50%;
        translate: 1.2vmax 0.4vmax;
        rotate: 348deg;

        &:after {
          content: "";
          position: absolute;
          width: 0.7vmax;
          height: 2.9vmax;
          background: white;
          border-radius: 50%;
          translate: 0.5vmax 0.2vmax;
          rotate: 13deg;
        }

        .knee {
          position: absolute;
          height: 1.7vmax;
          width: 0.75vmax;
          background: white;
          border-radius: 39.6%;
          translate: 0vmax 2.2vmax;
          rotate: 15deg;
        }

        .lower {
          position: absolute;
          height: 3.2vmax;
          width: 0.8vmax;
          background: white;
          border-radius: 50%;
          translate: -0.3vmax 2.4vmax;
          rotate: 15deg;

          &:before {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: white;
            border-radius: 67.8%;
            translate: 0.5vmax 2.6vmax;
            rotate: 66deg;
          }

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: white;
            border-radius: 27.8%;
            translate: 0.1vmax 2.3vmax;
            rotate: 0deg;
          }
        }
      }

      &.left {
        width: 1.1vmax;
        height: 2.9vmax;
        background: #f4efef;
        border-radius: 50%;
        translate: -0.3vmax 0.4vmax;
        rotate: 2deg;
        filter: invert(0.04);
        z-index: -1;

        &:after {
          content: "";
          position: absolute;
          width: 0.7vmax;
          height: 2.9vmax;
          background: #f4efef;
          border-radius: 50%;
          translate: 0.5vmax 0.2vmax;
          rotate: 13deg;
        }

        .knee {
          position: absolute;
          height: 1.7vmax;
          width: 0.75vmax;
          background: #e7e4e4;
          border-radius: 39.6%;
          translate: 0vmax 2.2vmax;
          rotate: 5deg;
        }

        .lower {
          position: absolute;
          height: 3.2vmax;
          width: 0.8vmax;
          background: #eae6e6;
          border-radius: 50%;
          translate: -0.1vmax 1.9vmax;
          rotate: 5deg;

          &:before {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.5vmax;
            background: #e7e4e4;
            border-radius: 67.8%;
            translate: 0.5vmax 2.6vmax;
            rotate: 47deg;
          }

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 1.55vmax;
            background: #e7e4e4;
            border-radius: 27.8%;
            translate: 0.1vmax 2.3vmax;
            rotate: 0deg;
          }
        }
      }
    }

    .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;
          }
        }

        &:before {
          content: "";
          position: absolute;
          width: 0.3vmax;
          height: 2.45vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 2.1vmax;
          rotate: 6deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 0.4vmax;
          height: 2.15vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.1vmax 2.1vmax;
          rotate: 351deg;
        }

        .hand {
          position: absolute;
          width: 0.3vmax;
          height: 0.85vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 3.7vmax;
          rotate: 353deg;

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 0.55vmax;
            background: white;
            border-radius: 39.2%;
            translate: -0.2vmax 0.6vmax;
            rotate: 65deg;
          }
        }
      }

      &.left {
        width: 0.7vmax;
        height: 2.5vmax;
        background: white;
        border-radius: 59.8%;
        translate: -0.9vmax -3.4vmax;
        rotate: 359deg;
        filter: invert(0.1);
        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;
          }
        }

        &:before {
          content: "";
          position: absolute;
          width: 0.3vmax;
          height: 2.45vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 1.8vmax;
          rotate: 6deg;
        }

        &:after {
          content: "";
          position: absolute;
          width: 0.4vmax;
          height: 2.15vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.2vmax 2.1vmax;
          rotate: 351deg;
        }

        .hand {
          position: absolute;
          width: 0.3vmax;
          height: 0.85vmax;
          background: white;
          border-radius: 27.8%;
          translate: 0.3vmax 3.7vmax;
          rotate: 353deg;

          &:after {
            content: "";
            position: absolute;
            width: 0.5vmax;
            height: 0.55vmax;
            background: white;
            border-radius: 39.2%;
            translate: -0.1vmax 0.2vmax;
            rotate: 65deg;
          }
        }
      }
    }

    &.shadow {
      transform: scaleY(-1) translateY(-9vmax);
      filter: invert(0.2);
      opacity: 0.5;
      z-index: 0;
      mask: linear-gradient(to top, black 25%, transparent 35%);

      .leg.left {
        .lower {
          &:before {
            rotate: 102deg;
          }
        }
      }

      .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%,
    rgb(50 56 92 / 27%),
    rgb(152 75 132 / 7%),
    rgb(150 75 152 / 4%),
    rgb(50 56 92 / 27%)
  );
  mix-blend-mode: color;
  pointer-events: none;
}

.audio-icon-button {
  border: 0.0625rem white solid;
  padding: 0.5rem;
  width: 2.265rem;
  height: 2.265rem;
  border-radius: 50%;
  background: transparent;
  position: fixed;
  right: 2rem;
  top: 2rem;
  z-index: 4200;

  aspect-ratio: 1;
  display: flex;
  gap: 0.125rem;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.3s ease;

  @media (hover) {
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }

  .bar {
    background: white;
    height: 1.5rem;
    width: 0.0825rem;

    &:nth-of-type(1),
    &:nth-of-type(5) {
      height: 0.5rem;
    }

    &:nth-of-type(2),
    &:nth-of-type(4) {
      height: 1rem;
    }
  }
}

@layer global {
  body {
    width: 100vw;
    height: 100vh;
    display: grid;
    place-items: center;
    background-color: var(--color-surface);
    color: var(--color-primary);
    position: absolute;
    inset: 0;
    perspective: 80vmax;
    margin: 0;
    overflow: hidden;

    &:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 111;
      pointer-events: none;
      background: rgba(0, 0, 0, 0.1);
      mask: linear-gradient(
        black 10%,
        transparent 30%,
        transparent 70%,
        black 80%
      );
      backdrop-filter: blur(5vmin) invert(0);
    }
  }

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

// center at bottom
a.labs-follow-me {
  left: 2rem;
  right: 2rem;
  bottom: 1rem;
  top: unset;
  text-align: center;
}