.earth {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  picture {
    width: 100%;

    img {
      width: 100%; 
      height: 100%;
    }
  }
}

.space {
  perspective: 1000px;
  display: grid;
  place-content: center;
  height: 400px;
  background: rgb(1, 5, 25);

  .earth {
    display: grid;
    transform-style: preserve-3d;
    width: 200px;
    height: 200px;
    animation: rotate 20s linear forwards infinite;

    picture {
      grid-area: 1 /1;
      transform-style: preserve-3d;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
      }
    }

    [alt="top"]{
      transform: rotateX(-90deg) translateZ(100px);
    }
    [alt="bottom"]{
      transform: rotateX(90deg) translateZ(100px);
    }
    [alt="left"]{
      transform: rotateY(-90deg) translateZ(100px);
    }
    [alt="right"]{
      transform: rotateY(90deg) translateZ(100px);
    }
    [alt="front"]{
      transform: rotateX(0deg) translateZ(100px);
    }
    [alt="back"]{
      transform: rotateY(180deg) translateZ(100px);
    }
  }
}

@keyframes rotate {
  from {
    transform: rotateY(0turn) rotateX(0turn);
  }
  to {
    transform: rotateY(4turn) rotateX(1turn);
  }
}


.brightness-demo {
  display: grid;
  place-content: center;
  picture {
    img {
      max-width: 200px;
      max-height: 200px;
      animation: brightness-demo 5s infinite alternate;
    }
  }
}

@keyframes brightness-demo {
  from {
    filter: brightness(0);
  }
  to {
    filter: brightness(2);
  }
}

.static-light {
  [alt="top"]{
    filter: brightness(1);
  }
  [alt="bottom"]{
    filter: brightness(0.2);
  }
  [alt="left"]{
    filter: brightness(0.3);
  }
  [alt="right"]{
    filter: brightness(0.9);
  }
  [alt="front"]{
    filter: brightness(0.5);
  }
  [alt="back"]{
    filter: brightness(0.8);
  }
}



.phong-light {
  --ambient-light: 0.3;
  img {
    --brightness: calc(var(--ambient-light, 0) + var(--diffuse-light, 0) + var(--specular-light, 0));
    filter: brightness(var(--brightness, 0));
  }
}

.space.vectorized-cube {
  .earth {
    --d: 0.5;

    img {
      transform: rotateX(asin(var(--y))) rotateY(calc(atan2(var(--x), var(--z)))) translateZ(100px);
      --diffuse-light: max(0, var(--d) * calc(var(--x) + var(--y) + var(--z)));
    }
    
    [alt="top"]{
      --x: 0;
      --y: -1;
      --z: 0;
    }
    [alt="bottom"]{
      --x: 0;
      --y: 1;
      --z: 0;
    }
    [alt="left"]{
      --x: -1;
      --y: 0;
      --z: 0;
    }
    [alt="right"]{
      --x: 1;
      --y: 0;
      --z: 0;
    }
    [alt="front"]{
      --x: 0;
      --y: 0;
      --z: 1;
    }
    [alt="back"]{
      --x: 0;
      --y: 0;
      --z: -1;
    }
  }
}

@property --difuse-light {
  syntax: "<number>";
  inherits: true;
}

@property --rot-x {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}


@property --rot-y {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}


@keyframes rotate-y {
  from {
    --rot-y: 0turn;
  }
  to {
    --rot-y: 1turn;
  }
}

@keyframes rotate-x {
  from {
    --rot-x: 0turn;
  }
  to {
    --rot-x: 1turn;
  }
}



.space {
  .earth.rotate-y {
    animation: rotate-y 5s linear forwards infinite;
    transform: rotateY(var(--rot-y));
    --earth-x: cos(var(--rot-y));
    --earth-y: 0;
    --earth-z: sin(var(--rot-y));
    
    img {
      --diffuse-light: max(0, var(--d) * calc(calc(var(--earth-x) * var(--x)) + calc(var(--earth-z) * var(--z))));
    }
  }
}



.space {
  .earth.rotate-xy {
    animation: rotate-xy 20s linear forwards infinite;
    transform: rotateY(var(--rot-y)) rotateX(var(--rot-x));
    --earth-x: cos(var(--rot-y));
    --earth-y: calc(0 - sin(var(--rot-x)))* sin(var(--rot-y));
    --earth-z: calc(cos(var(--rot-x)) * sin(var(--rot-y)));
    
    img {
      --diffuse-light: max(
        0, 
        var(--d) * calc(
          calc(var(--earth-x) * var(--x)) + 
          calc(var(--earth-y) * var(--y)) + 
          calc(var(--earth-z) * var(--z))
        )
      );
    }
  }
}

@keyframes rotate-xy {
  from {
    --rot-y: 0turn;
    --rot-x: 0turn;
  }
  to {
    --rot-y: 4turn;
    --rot-x: 1turn;
  }
}

.space.specular-light {
  --s: 1;
  --alpha: 20;
  .earth {
    --view-x: calc(0 - sin(var(--rot-y)));
    --view-y: calc(0 - sin(var(--rot-x)))* cos(var(--rot-y));
    --view-z: calc(0 + cos(var(--rot-x)) * cos(var(--rot-y)));

    img {
      --light-normal-dp: calc(
        calc(var(--earth-x) * var(--x)) + 
        calc(var(--earth-y) * var(--y)) + 
        calc(var(--earth-z) * var(--z))
      );
      --r-x: calc(2 * var(--light-normal-dp) * var(--x) - var(--earth-x));
      --r-y: calc(2 * var(--light-normal-dp) * var(--y) - var(--earth-y));
      --r-z: calc(2 * var(--light-normal-dp) * var(--z) - var(--earth-z));

      --specular-light: calc(var(--s) * pow(
        max(
          0,
          calc(var(--view-x) * var(--r-x)) + 
          calc(var(--view-y) * var(--r-y)) + 
          calc(var(--view-z) * var(--r-z))
        ),
        var(--alpha)
      ));
    }
  }
}

@property --specular-light {
  syntax: "<number>";
  inherits: false;
  initial-value: 0
}

.scroller {
  overflow: scroll;
  height: 400px;
  position: relative;
  scroll-timeline: --scroller-x y, --scroller-y x;

  &::after {
    content: '';
    display: block;
    width: 300%;
    height: 300%;
  }

  @supports not (scroll-timeline: --square-timeline) {

    &::after {
      content: "Your browser doesn't support the `scroll-timeline` property.";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1em;
      width: unset;
      height: unset;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }
  }

  .space {
    position: sticky;
    top: 0;
    left: 0;

    .earth {
      animation: rotate-x 1ms linear, rotate-y 1ms linear;
      animation-timeline: --scroller-x, --scroller-y;
    }
  }
}