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

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

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