:root {
  --yTime: 59s; 
  --zTime: 99s;
  --pTime: 31s;
  --bbsize: 90px;
}

@property --h {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@property --s {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 80%;
}

@property --l {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 33%;
}

@property --a {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

body {
  background: #222;
  overflow: hidden;
  cursor: crosshair;
}

#stage, #rotZ, #sphere, .positioner {
  transform-style: preserve-3d;
}

#stage {
  perspective: 280px;
  position: absolute;
  left: 50%;
  top: 50%;
  animation: breatheDepth var(--pTime) ease-in-out infinite alternate;
}

@keyframes breatheDepth {
  from {
    perspective: 100px;
  }
  to {
    perspective: 800px;
  }
}

#sphere {
  position: relative;
  transform-style: preserve-3d;
  animation: rotY var(--yTime) linear infinite;
}

.positioner {
 position:absolute;
}

.billboard {
  width: var(--bbsize);
  height: var(--bbsize);
  transform: rotateY(calc(var(--rotY) * -1));
  backface-visibility: hidden; /* Fixed typo here! */
  pointer-events:none;
  padding: 10px;
  
  /* Variables */
  --r: 0;
  --a: -90deg;
  
  /* Smooth transitions for variables */
  transition: --s 0.2s ease, --l 0.2s ease, filter 0.2s ease;
  border-radius: 100%;
}

.billboard:not(.finished) {
    --s: 0% !important;
  --l: 10% !important;
}

/* Outer drop-shadow goes on the wrapper so it outlines the clipped child */
.billboard:not(.finished):hover {
  --s: 100% !important;
  --l: 50% !important;
    border: 1px dotted hsl(var(--h), var(--s), 20%);

  filter: drop-shadow(0 0 4px hsl(var(--h), var(--s), 60%)) 
          drop-shadow(0 0 4px hsl(var(--h), var(--s), 60%));
}

.billboard.finished {
  --s: 100% !important;
  --l: 50% !important;
  pointer-events: none;
}

.remove > .content {
  transition: all 0.2s ease;
  transform-origin: 50% 50%;
  transform: scale(0);
}

/* --- THE SHAPE (Handles Clip-Path, Colors, & Inset Shadows) --- */
.content {
  pointer-events: all;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--h), var(--s), var(--l));
  box-shadow: inset 5px -5px 40px 2px #777; /* Base inset shadow */
  
  /* Geometric Constants for Pentagon */
  --_a: (36deg * var(--r));
  --_r: (50% * cos(36deg) / cos((36deg * (1 - var(--r)))));

  clip-path: shape(
    from calc(50% + var(--_r) * cos(var(--a) - var(--_a)))
      calc(50% + var(--_r) * sin(var(--a) - var(--_a))),
    curve to calc(50% + var(--_r) * cos(var(--a) + var(--_a)))
      calc(50% + var(--_r) * sin(var(--a) + var(--_a))) with
      calc(50% + 50% * cos(var(--a))) calc(50% + 50% * sin(var(--a))),
    line to calc(50% + var(--_r) * cos(72deg + var(--a) - var(--_a)))
      calc(50% + var(--_r) * sin(72deg + var(--a) - var(--_a))),
    curve to calc(50% + var(--_r) * cos(72deg + var(--a) + var(--_a)))
      calc(50% + var(--_r) * sin(72deg + var(--a) + var(--_a))) with
      calc(50% + 50% * cos(72deg + var(--a)))
      calc(50% + 50% * sin(72deg + var(--a))),
    line to calc(50% + var(--_r) * cos(144deg + var(--a) - var(--_a)))
      calc(50% + var(--_r) * sin(144deg + var(--a) - var(--_a))),
    curve to calc(50% + var(--_r) * cos(144deg + var(--a) + var(--_a)))
      calc(50% + var(--_r) * sin(144deg + var(--a) + var(--_a))) with
      calc(50% + 50% * cos(144deg + var(--a)))
      calc(50% + 50% * sin(144deg + var(--a))),
    line to calc(50% + var(--_r) * cos(216deg + var(--a) - var(--_a)))
      calc(50% + var(--_r) * sin(216deg + var(--a) - var(--_a))),
    curve to calc(50% + var(--_r) * cos(216deg + var(--a) + var(--_a)))
      calc(50% + var(--_r) * sin(216deg + var(--a) + var(--_a))) with
      calc(50% + 50% * cos(216deg + var(--a)))
      calc(50% + 50% * sin(216deg + var(--a))),
    line to calc(50% + var(--_r) * cos(288deg + var(--a) - var(--_a)))
      calc(50% + var(--_r) * sin(288deg + var(--a) - var(--_a))),
    curve to calc(50% + var(--_r) * cos(288deg + var(--a) + var(--_a)))
      calc(50% + var(--_r) * sin(288deg + var(--a) + var(--_a))) with
      calc(50% + 50% * cos(288deg + var(--a)))
      calc(50% + 50% * sin(288deg + var(--a)))
  );
  
  transition: box-shadow 0.2s ease;
}

/* When the parent is finished, target the child's inset shadows */
.billboard.finished .content {
  box-shadow: inset 0 0 15px 12px hsl(var(--h), var(--s), 73%), 
              inset 0 0 25px 10px hsl(var(--h), var(--s), 73%), 
              0 0 0 7px hsla(var(--h), var(--s), 70%, 0.5);
}
@property --rotY {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@keyframes rotY {
  from {
    --rotY: 0deg;
    transform: rotateY(0deg);
  }
  to {
    --rotY: 360deg;
    transform: rotateY(360deg);
  }
}

#rotZ {
  animation: rotZ var(--zTime) linear infinite;
}

@keyframes rotZ {
  to {
    transform: translateX(20px) rotateZ(360deg);
  }
}