*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  /* background-image: radial-gradient(#000, #321);  */
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;

  --mx: 0; --my: 0;
  
  * {
    transform-style: preserve-3d;
  }
}

.scene {
  position: relative;
  
  * { position: absolute; }
}

.floor {
  inset: -40em;
  background-color: #fff;
  background: 
    radial-gradient(closest-side at 45% 50%, transparent, #000),
    repeating-conic-gradient(from 0deg, #321 0, #654 120deg) 0 0 / 2em 2em;
  ;
  transform: 
    rotateX(90deg)
    translateZ(-15em);
}

.floor-objects {
  inset: 50%;
  /* transform-style: flat; */
  filter: blur(2em);
  opacity: 0.75;
}

.floor-line {
  inset: -2em -10em;
  background-color: #000;
  border-radius: 1em;
  transform:
    translateX(-1em)
    rotateZ(calc(var(--mx) * -60deg));
}

.floor-card {
  inset: -9em -11em;
  background-color: #000;
  border-radius: 1em;
  transform:
    translateX(-1em)
    rotateX(calc(var(--my) * -60deg - 60deg))
    rotateY(calc(var(--mx) * 60deg));
}

.floor-ball {
  inset: -3em;
  border-radius: 50%;
  background-color: #000;
  translate: 0 2em;
  translate:
    calc(var(--mx) * 2.5em - 2em)
    calc(var(--my) * 1em + 3em);
}

.card {
  transform: 
    rotateX(calc(var(--my) * -60deg + 30deg))
    rotateY(calc(var(--mx) * 60deg));
}

.card-back {
  inset: -8em -10em;
  background-color: #333;
  border-radius: 1em;
  background-image: linear-gradient(20deg, #0005, transparent, #fffa);
  background-size: 300% 300%;
  background-position:
    calc(var(--mx) * 50% + 50%) 
    calc(var(--my) * 50% + 50%);
  transform: translateZ(-2em);
}

.ball {
  inset: -2em;
  border-radius: 50%;
  background-color: #f00;
  background-image: radial-gradient(circle at 65% 15%, red, black);
  transform:
    translateZ(2em)
    rotateY(calc(var(--mx) * -60deg))
    rotateX(calc(var(--my) * 60deg - 30deg));
}

.ball-shadow {
  inset: calc(50% - 2.5em);
  background-color: #000;
  border-radius: 50%;
  translate:
    calc(var(--mx) * 6em - 1.5em)
    calc(var(--my) * 6em + 3em);
  filter: blur(2em);
  opacity: max(0, 1 - var(--my));
}