.card-loader {
  --loader-main: #3646A1;
  --loader-accessory: #C0842A;
  --loader-highlight: #674D22;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-loader__stack {
  position: relative;
  width: 70px;
  aspect-ratio: 5 / 7;
}

.card-loader__card {
  position: absolute;
  inset: 0;
  background: var(--loader-accessory);
  border: 2px solid var(--loader-highlight);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  animation: card-loader-cycle 2.4s ease-in-out infinite;
}

.card-loader__card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 4px;
  background: var(--loader-main);
}

.card-loader__card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  background: var(--loader-accessory);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.card-loader__card:nth-child(1) { --tx: -70px; --rot: -18deg; --shuffle: -6px; z-index: 1; animation-delay: 0s; }
.card-loader__card:nth-child(2) { --tx: -35px; --rot: -9deg;  --shuffle: 4px;  z-index: 2; animation-delay: .04s; }
.card-loader__card:nth-child(3) { --tx: 0px;   --rot: 0deg;   --shuffle: -4px; z-index: 3; animation-delay: .08s; }
.card-loader__card:nth-child(4) { --tx: 35px;  --rot: 9deg;   --shuffle: 6px;  z-index: 4; animation-delay: .12s; }
.card-loader__card:nth-child(5) { --tx: 70px;  --rot: 18deg;  --shuffle: -3px; z-index: 5; animation-delay: .16s; }

@keyframes card-loader-cycle {
  0%, 8% {
    transform: translateX(0) rotate(0deg);
  }
  16% {
    transform: translateX(var(--shuffle)) rotate(2deg);
  }
  24% {
    transform: translateX(calc(var(--shuffle) * -1)) rotate(-2deg);
  }
  32% {
    transform: translateX(var(--shuffle)) rotate(2deg);
  }
  40%, 48% {
    transform: translateX(0) rotate(0deg);
  }
  65%, 78% {
    transform: translateX(var(--tx)) rotate(var(--rot));
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--main, #3646A1);
  transition: opacity .5s ease;
}

.preloader[hidden] { display: none; }

.preloader--hidden { opacity: 0; pointer-events: none; }

.preloader-label {
  font-size: 13px;
  letter-spacing: .5px;
  color: var(--text-light, #f5f1e6);
  opacity: .8;
}