:root { --pdlc-accent: #575FAA; }

.pdlc-overlay{
  position:fixed; inset:0; z-index:999999;
  display:grid; place-items:center;
  background:#fff;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility 0s linear .18s;
}
.pdlc-overlay.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .18s ease;
}
.pdlc-stage{width:110px;height:110px;display:grid;place-items:center;perspective:500px}
.pdlc-cube{position:relative;width:64px;height:64px;transform:rotate(30deg);animation:pdlc-bob 1.05s ease-in-out infinite}
.pdlc-face{position:absolute;width:42px;height:42px;display:block}
.pdlc-top{
  left:11px;top:-4px;background:var(--pdlc-accent);
  transform:skewY(-30deg) scaleY(.86) rotate(30deg);
  transform-origin:center;
  animation:pdlc-top 1.05s ease-in-out infinite;
}
.pdlc-left{
  left:0;top:31px;background:#000;
  transform:skewY(30deg) scaleX(.86);
  transform-origin:right top;
  animation:pdlc-left 1.05s ease-in-out infinite;
}
.pdlc-right{
  right:0;top:31px;background:color-mix(in srgb,var(--pdlc-accent) 62%,white);
  transform:skewY(-30deg) scaleX(.86);
  transform-origin:left top;
  animation:pdlc-right 1.05s ease-in-out infinite;
}
@keyframes pdlc-top{
  0%,100%{translate:0 -15px;opacity:.75} 38%,68%{translate:0 0;opacity:1}
}
@keyframes pdlc-left{
  0%,100%{translate:-13px 8px;opacity:.75} 38%,68%{translate:0 0;opacity:1}
}
@keyframes pdlc-right{
  0%,100%{translate:13px 8px;opacity:.75} 38%,68%{translate:0 0;opacity:1}
}
@keyframes pdlc-bob{
  0%,100%{transform:rotate(30deg) scale(.96)}
  50%{transform:rotate(120deg) scale(1)}
}
@media (prefers-reduced-motion:reduce){
 .pdlc-cube,.pdlc-face{animation:none!important}
}