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

:root {
  --hue: 223;
  --primary100: hsl(var(--hue) 90% 95%);
  --primary300: hsl(var(--hue) 90% 75%);
  --primary500: hsl(var(--hue) 90% 55%);
  --primary900: hsl(var(--hue) 90% 15%);
  --trans-dur: 0.3s;
  color-scheme: light dark;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
}

body {
  background-color: var(--primary900);
  color: var(--primary100);
  font: 1em/1.5 sans-serif;
  display: grid;
  place-items: center;
  height: 100vh;
}

.stack {
  --stack-dur: 2s;
  --stack-delay: 0.05;
  --stack-spacing: 15%;
  overflow: hidden;
  position: relative;
  width: 14em;
  height: 32em;
}
.stack__card {
  aspect-ratio: 1;
  position: absolute;
  inset: 0;
  top: var(--stack-spacing);
  margin: auto;
  width: 70%;
  transform: rotateX(45deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}
.stack__card::before {
  animation: card var(--stack-dur) infinite;
  background-color: var(--primary500);
  border-radius: 7.5%;
  box-shadow: -0.5em 0.5em 1.5em hsl(var(--hue), 90%, 15%, 0.1);
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}
.stack__card:nth-child(2) {
  top: 0;
}
.stack__card:nth-child(2)::before {
  animation-delay: calc(var(--stack-dur) * (-1 + var(--stack-delay)));
  background-color: var(--primary300);
}
.stack__card:nth-child(3) {
  top: calc(var(--stack-spacing) * -1);
}
.stack__card:nth-child(3)::before {
  animation-delay: calc(var(--stack-dur) * (-1 + var(--stack-delay) * 2));
  background-color: var(--primary100);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0L1.03553 6.96447C0.372492 7.62751 0 8.52678 0 9.46447V9.54584C0 11.4535 1.54648 13 3.45416 13C4.1361 13 4.80278 12.7981 5.37019 12.4199L7.125 11.25L6 15V16H10V15L8.875 11.25L10.6298 12.4199C11.1972 12.7981 11.8639 13 12.5458 13C14.4535 13 16 11.4535 16 9.54584V9.46447C16 8.52678 15.6275 7.62751 14.9645 6.96447L8 0Z' fill='hsl(0 0% 0% / 0.9)' /%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 45% 45%;
}

/* Animations */
@keyframes card {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(0);
  }
  11% {
    animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
    opacity: 1;
    transform: translateZ(0.125em);
  }
  34% {
    animation-timing-function: steps(1);
    opacity: 0;
    transform: translateZ(-12em);
  }
  48% {
    animation-timing-function: linear;
    opacity: 0;
    transform: translateZ(12em);
  }
  57% {
    animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
    opacity: 1;
    transform: translateZ(0);
  }
  61% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(-1.8em);
  }
  74% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(0.6em);
  }
  87% {
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    transform: translateZ(-0.2em);
  }
}