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

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

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

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


body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  background-color: #ccc;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

* {
  user-select: none;
  box-sizing: border-box;
}

.bg{
  width: 100%;
  height: 100%;
  position: absolute;
  --offset: calc(7% + sin(var(--progress) * 360deg) * 3%);
  background-image: radial-gradient(circle at center, var(--start-color) var(--offset), var(--end-color) 75%);

  opacity: 1;
  --start-color: oklch(from white l c h / 25%);
  --end-color:  oklch(from white l c h / 30%);
  transition: --start-color 0.5s ease-in-out, --end-color 0.5s ease-in-out;
  animation: pulse 1s linear infinite;
}

.bg.dark{
  filter: brightness(1.55) contrast(0.8);

  --start-color: oklch(from white l c h / 50%));
  --end-color:  oklch(from black l c h / 100%);
}

.bg::after{
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.07;
  filter: saturate(0) brightness(2);
  background-image: url(https://as2.ftcdn.net/v2/jpg/03/37/08/65/1000_F_337086574_uXbsZ1Hp8ct74pDsH7zauxXSMo9kNlX7.jpg);
  mask: radial-gradient(circle at 50% 50%, transparent, black);
}

.off-screen{
  visibility: hidden !important;
  transform: translateY(100dvh) !important;
  opacity: 0 !important;
}

.controller-shadow{
  z-index: 0;
  filter: saturate(0) brightness(0) blur(calc(10px + 10px * var(--size)));
  transform-origin: center top;
  transform: scaleY(calc(0.83 + var(--size) * 0.55)) translateY(25%) !important;
  mask: linear-gradient(0.5turn, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
  opacity: calc(0.6 - var(--size) * 0.45);
}

.container {
  display: flex;
  perspective: 750px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 3px 15px rgba(0, 0, 0, 0.12));
  position: relative;
  --size: 0;
  transition: all 0.5s ease-in-out, --size 0.5s ease-in-out, transform 0.8s ease-in-out;
  padding: 30px;
  visibility: visible;
  /*	drop-shadow(0 8px 20px rgba(0, 0, 0, 0.05));*/
}

.shadow{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


.controller {
  display: block;
  transform-style: preserve-3d;

  --pos-x: -20px;
  --pos-y: -20px;
  --max-size: 25%;
  --angleX: 0deg;
  --angleY: 0deg;
  --blowoutDistance: 16px;

  transition: all 0.5s ease-in-out, --size 0.5s ease-in-out, transform 0.75s ease-in-out;
  transform: rotateY(var(--angleX)) rotateX(var(--angleY)) translateZ(-10px);
  cursor: crosshair;
}

.debug {
  --pos-x: 50% !important;
  --pos-y: 50% !important;
  --size: 1;
  --max-size: 25% !important;
}

.container:hover{
  --size: 1;
  transition: all 0.5s ease-in-out, --size 0.1s ease-in-out, transform 0.5s ease-in-out;
}

.container:hover .controller {
  transition: all 0.5s ease-in-out, --size 0.5s ease-in-out, transform 0s ease-in-out;
  transform: rotateY(var(--angleX)) rotateX(var(--angleY));
}

.container:hover .controller {
  transition: all 0.5s ease-in-out, --size 0.5s ease-in-out, transform 0s ease-in-out;
  transform: rotateY(var(--angleX)) rotateX(var(--angleY));
}

.controller-img:nth-child(2) {
  position: relative;
}

.controller-img {
  width: auto;
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  z-index: sibling-index();
}


.controller-img svg{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.backdrop {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  z-index: 0;
  top: 0;
  border-radius: 2rem;
  scale: 1.2;

  background-color: #8882;
  box-shadow:
    0 0 12px rgba(0, 0, 0, 0.12),
    0 0 1px 1px rgba(0, 0, 0, 0.12);
}

.controller-img__inside {
  opacity: 0.8;
}
.controller-img__edges {
  opacity: 0;
  filter: hue-rotate(-90deg) saturate(100%);
}
.controller-img__cover {
}

.controller-img__electronics{
  opacity: 0.8;
  filter: sepia(1) hue-rotate(121deg) saturate(2) contrast(1);
}

.pulse {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
  top: 0;
  border-radius: 2rem;

  --ringSize: calc(var(--progress) * 25%);
  --band-color: oklch(from orange calc(l * 0.5) calc(c * 0.2) h / 0%);
  background-image: radial-gradient(
    circle at var(--pos-x) var(--pos-y),
    var(--band-color) calc(var(--ringSize) - 10% + (var(--progress) * 10%)),
    lab(90 -65.5 20.16 / 0.5) calc(var(--ringSize)),
    var(--band-color) calc(var(--ringSize) + 2%)
  );

  mask: url("ps5-cover.png");
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.controller:hover .backdrop {
  opacity: 1;
  transform: translateZ(calc(var(--size) * -3 * var(--blowoutDistance)));
  transition: opacity 0.75s ease-in-out;
}
/*
.controller .controller-img__inside {
  transform: translateZ(calc(var(--size) * -1 * var(--blowoutDistance)));
}

.controller .controller-img__electronics {
  transform: translateZ(calc(var(--size) * -0.5 * var(--blowoutDistance)));
}

.controller .controller-img__edges {
  transform: translateZ(calc(var(--size) * 0.1 * var(--blowoutDistance)));
}

 */
.controller .controller-img {
  --i: calc(sibling-index() - 2);
  transform: translateZ(calc(var(--size) * var(--i) * var(--blowoutDistance)));
}
/*

.controller .controller-img__cover {
  transform: translateZ(calc(var(--size) * var(--blowoutDistance)));
}*/

.controller:hover .controller-img__cover {
  mask-image: radial-gradient(
    circle at var(--pos-x) var(--pos-y),
    transparent calc(var(--size) * (var(--max-size) - 15%)),
    rgba(0, 0, 0, 0.5) calc(var(--size) * var(--max-size)),
    rgba(0, 0, 0, 1) calc(var(--size) * (var(--max-size) + 10%))
  );
}

.controller:hover .controller-img__edges {
  opacity: 1;
  mask-image: radial-gradient(
    circle at var(--pos-x) var(--pos-y),
    transparent 0%,
    rgba(0, 0, 0, 0.5) 10%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 0.3) 50%
  );
}

.controller:hover .pulse {
  transform: translateZ(calc(var(--size) * var(--blowoutDistance)));
  opacity: 1;
  animation: scan 1s ease-in-out infinite;
}

@keyframes pulse{
  0%{
    --progress: 0;
  }

  100%{
    --progress: 1;
  }
}

@keyframes scan {
  0% {
    --progress: 0;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  75% {
    --progress: 1;
  }

  100% {
    opacity: 0;
    --progress: 1;
  }
}

{/* This requires more setup*/}
#blue-path{
  stroke-dasharray: 100%;
  stroke-dashoffset: 50%;
  stroke: yellow;
  stroke-width: 10px;
}