*{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:.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:.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:-.5em .5em 1.5em hsl(var(--hue),90%,15%,.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%}@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);
  }
}