.k-card {
  /* padding: 10px 7px; */
  display: flex;
  justify-content: center;
  position: relative;
  box-sizing: content-box;
  z-index: 1;
  border-radius: 5px;

  --frame-width: 10px;
  --frame-height: 8px;
  width: fit-content;
  overflow: hidden;

  transition: box-shadow 0.4s ease;
  user-select: none;
}

.k-card__frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-image: url("/assets/frame--blue-05c5bb5a.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: pixelated;
  border-radius: 5px;
}

.k-card.k-card--entrance .k-card__frame {
  filter: contrast(1.2) brightness(0.5);
}

.k-card__artwork {
  transition: transform 0.4s ease;
  z-index: 0;
  border-radius: 5px;
}

.k-card--theme .k-card__artwork,
.k-card--entrance .k-card__artwork {
  image-rendering: pixelated;
}


.k-card.k-card--complete .k-card__frame,
.k-card.k-card--just-completed .k-card__frame {
  filter: hue-rotate(200deg);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.k-card.k-card--active .k-card__frame {
  /* box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); */
  /* filter: hue-rotate(170deg); */
}

.k-card__frame--with-progress:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    #ffc100 0%,
    #ffc100 calc(var(--progress, 0) * 1% - 10%),
    transparent calc(var(--progress, 0) * 1% + 10%),
    transparent 100%
  );
  mix-blend-mode: color;
  z-index: -1;
  opacity: 1;
  border-radius: 5px;
  mask-image: url("/assets/frame--blue-05c5bb5a.webp");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

.k-card--interactive:hover {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}
.k-card--interactive:hover .k-card__artwork {
  transform: scale(1.05);
}

.k-card--unavailable {
  cursor: not-allowed;
}

.k-card__central-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(212, 175, 55, 0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 4;
}

.k-card--unavailable .k-card__central-glow {
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0%, transparent 90%);
}

.k-card:hover .k-card__central-glow {
  opacity: 1;
}

.k-card--attracts-attention .k-card__central-glow {
  animation: heartbeat 1s 7s infinite ease-out alternate;
}

/**
 * ENTRANCE CARD
 *
 * - attract attention by glowing the edges, not the center
 * - try to align the central glow with the star inside the card
 */
.k-card--entrance.k-card--attracts-attention {
  animation: glowEdge 0.7s ease-in-out infinite alternate;
  animation-delay: 5s;
}

.k-card--entrance.k-card--attracts-attention .k-card__central-glow {
  animation: none;
}

.k-card--entrance.k-card--attracts-attention:hover {
  animation: none;
}

.k-card--entrance .k-card__central-glow {
  top: 2rem;
}

@keyframes heartbeat {
  0%   { opacity: 0; }
  60%  { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes glowEdge {
  0%   { box-shadow: none; }
  100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); }
}

.k-card__shimmer {
  inset: 10px;
  background: linear-gradient(
    -60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 70%
  );

  background-position: 125% 100%;
  background-size: 300% 100%;
  background-repeat: no-repeat;

  animation: k-card-shimmer 4s infinite;
  animation-delay: 1s;


  position: absolute;
  top: var(--frame-height);
  left: var(--frame-width);
  right: var(--frame-width);
  bottom: var(--frame-height);
  z-index: 1;
}

@keyframes k-card-shimmer {
  60% { background-position: -50% 100%; }
  100% { background-position: -50% 100%; }
}

.k-card__unavailable-sign {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  z-index: 1;
  mix-blend-mode: luminosity;
}

.khuloq-emblem {
  width: 32px;
  height: 32px;
  background-image: url("/assets/emblems-57fbaa73.webp");
  background-size: 96px 64px;
  image-rendering: pixelated;
}

/* Variants */
.emblem--gem         { background-position:    0    0; }
.emblem--star        { background-position: -32px  0; }
.emblem--flame       { background-position: -64px  0; }
.emblem--wing        { background-position:    0  -32px; }
.emblem--cracked     { background-position: -32px -32px; }

.virtue-completion-emblem,
.virtue-active-emblem {
  display: block;
  position: absolute;
  z-index: 1;
  top: -32px;
}

.virtue-active-emblem {
  filter: grayscale(1);
}


[data-anchor="true"] .k-card {
  animation-duration: 3s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-name: flash-once;
  animation-timing-function: ease-in-out;
}

@keyframes flash-once {
    0% { filter: brightness(1.5); }
  100% { filter: brightness(1); }
}

/** FOLDING */

.k-card--folding {
  /* transform-style: preserve-3d; */
  perspective: 100vh;
  overflow: visible; /* must not be hidden if you want to see the fold */
  touch-action: none;
}
/*
@media (hover: none) {
  .k-card__fold {
    pointer-events: none;
  }
} */

.k-card__fold {
  --open-transform: translateY(-5px) rotateX(-15deg) rotateY(-45deg);
  --shut-transform: translateY(-3px) rotateX(-15deg) rotateY(-15deg);

  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.6s ease;
  z-index: 5;
  width: 192px;
  height: 298px;
  background-size: 100% 100%;
  background-position: top left;
  transform: var(--open-transform);
  transform-origin: 0;
  backface-visibility: visible;
  background-color: rgba(0, 0, 0, 0.5);
}

.k-card__fold:before {
  content: '';
  background: url("/assets/frame--blue-05c5bb5a.webp");
  background-position: 0;
  background-size: inherit;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  background-repeat: no-repeat;
  /* transition: filter 0.3s linear; */
  filter: saturate(0.5);
}

.k-card--folded .k-card__artwork {
  filter: blur(2px);
}

.k-card__fold:hover,
.k-card__fold--folding {
  transform: var(--shut-transform);
}

.k-card--attracts-attention .k-card__fold {
  animation: fold-cue 3s ease-in-out;
  animation-iteration-count: 1;
  animation-delay: 1s;
}

.k-card--attracts-attention .k-card__fold:hover {
  animation-play-state: paused;
}

@keyframes fold-cue {
  000%,
  070%,
  100% { transform: var(--open-transform); }
  030%,
  085% { transform: var(--shut-transform); }
}

/* </FOLDING> */

.k-card--painting .k-card__frame {
  filter: hue-rotate(200deg) brightness(0.5);
}

.k-card--painting .k-card__artwork {
  object-fit: cover;
}

.k-card-deck {
  position: relative;
  z-index: 1;
  perspective: 100vh;
  /* transform-style: preserve-3d; */
}

.k-card-deck__back {
  position: absolute;
  top: 0;
}

.k-card-deck__front {
  /* transition: 0.3s transform ease-out; */
  /* transform: translateZ(1rem); */

  /* transition: 0.3s opacity ease; */
  /* position: relative; */
}

.k-card-deck__front:has(+ .k-card-deck__back:hover) {
  /* transform: translateX(50%) rotateX(0deg) rotateY(80deg) scale(1.0); */
  /* transform: translateX(55%) rotateX(0deg) rotateY(116deg) translateZ(2rem) scale(1.09); */
  /* transform: translateX(42%) rotateX(0deg) rotateY(115deg) translateZ(2rem) translateY(-1rem) scale(1.0); */
}

.k-card-deck__back-card {
  position: absolute;

  transition: 0.4s transform ease-out;
  padding-top: 1rem;
  /* transform: rotateX(15deg) rotateY(15deg) translateY(-2rem) translateX(0); */
  z-index: calc(-1 * var(--card-index));

  transform:
    translateY(calc(-0.5rem - (1rem * var(--card-index))))
    translateX(calc(-0.2rem * var(--card-index)))
    translateZ(calc(1rem * var(--card-index)))
    rotateX(calc(10deg * var(--card-index)))
    rotateY(calc(20deg * var(--card-index)))
    rotateZ(calc(7deg * var(--card-index)))
  ;
}

.k-card-deck__back-card:hover {
  /* transform: rotateX(-5deg) rotateY(15deg) translateY(-3rem) translateX(0); */
  transform: rotateX(5deg) rotateY(15deg) rotateZ(0deg) translateY(-2.5rem) translateX(0);
  /* transform: rotateY(10deg) translateX(0%) translateY(-1rem); */
  /* transform: rotateY(15deg) translateX(0%) translateY(-2rem) translateZ(-2rem); */
  /* transform: rotateX(25deg) rotateY(22deg) translateY(-2.5rem) translateX(-100%); */
}

.k-card-deck__back .k-card__frame {
  transition: filter 0.4s ease;
}
.k-card-deck__back-card:hover .k-card__frame {
  filter: hue-rotate(200deg) brightness(1.3);
}

.k-card--pinned-illustration {
  padding: 0 1rem;
  z-index: 2;
}

.k-card--pinned-illustration .k-card__frame {
  background-image: url("/assets/frame--blue-y-1901237c.webp");
  /* transform: scale(1.5) rotateZ(90deg); */
  background-size: contain;
}

.k-card__verse {
  font-size: 1rem;
  color: #ddd;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  box-sizing: border-box;
  background: rgba(0,0,0,0.5) url("/assets/blank-card-a720543f.webp") no-repeat;
  background-size: cover;
  background-blend-mode: hue;

  font-family: 'Amiri', 'Noto Naskh Arabic', serif;
}

.k-card-deck--just-completed .k-card-deck__front {
  animation: flip-front-in 1.4s ease, flash 2.4s ease forwards;
  animation-delay: 0.5s, 1.9s;
  filter: brightness(1.3) contrast(1.1);
}

[data-anchor="true"] .k-card-deck--just-completed .k-card-deck__front .k-card {
  animation: none;
}

@keyframes flip-front-in {
  0%   { transform: rotateX(0deg);   }
  20%  { transform: rotateX(-15deg); }
  80%  { transform: rotateX(-15deg); }
  100% { transform: rotateX(0deg);   }
}

@keyframes flash {
  0%   { filter: contrast(1.1) brightness(1.3); }
  90%  { filter: contrast(1.1) brightness(1.3); }
  100% { filter: contrast(1) brightness(1); }
}

.k-card-deck--just-completed {
  z-index: 3;
}
.k-card-deck--just-completed .k-card-deck__back-card {
  animation: tuck-back-in 1.4s ease-out;
  /* animation-delay: 0.5s; */
  /* transform: rotateZ(10deg) translateY(-2rem) translateX(3rem); */
  z-index: -1;
}

.k-card-deck--just-completed .k-card-deck__back-card:hover {
  animation-play-state: paused;
}

@keyframes tuck-back-in {
  0%   { transform: translateY(-100vh); }
 60%   { transform: translateY(-100vh); }
 70% {
   transform:
     translateY(calc(-0.5rem - (1rem * var(--card-index))))
     translateX(calc(-0.2rem * var(--card-index)))
     translateZ(calc(1rem * var(--card-index)))
     rotateX(calc(10deg * var(--card-index)))
     rotateY(calc(20deg * var(--card-index)))
     rotateZ(calc(15deg * var(--card-index)));
 }
 80% {
  transform:
     translateY(calc(-1.5rem - (1rem * var(--card-index))))
     translateX(calc(-0.2rem * var(--card-index)))
     translateZ(calc(1rem * var(--card-index)))
     rotateX(calc(10deg * var(--card-index)))
     rotateY(calc(20deg * var(--card-index)))
     rotateZ(calc(0deg * var(--card-index)));
 }

 90% {
  transform:
     translateY(calc(-0.5rem - (1rem * var(--card-index))))
     translateX(calc(-0.2rem * var(--card-index)))
     translateZ(calc(1rem * var(--card-index)))
     rotateX(calc(10deg * var(--card-index)))
     rotateY(calc(20deg * var(--card-index)))
     rotateZ(calc(15deg * var(--card-index)));
 }

 100% {
  transform:
     translateY(calc(-0.5rem - (1rem * var(--card-index))))
     translateX(calc(-0.2rem * var(--card-index)))
     translateZ(calc(1rem * var(--card-index)))
     rotateX(calc(10deg * var(--card-index)))
     rotateY(calc(20deg * var(--card-index)))
     rotateZ(calc(7deg * var(--card-index)));
  }
}


.k-card-deck__spotlight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  background: color-mix(in srgb, var(--glow), rgba(255,255,255,0.2) 60%);
  margin: -3rem -2rem;
  z-index: 3;
  filter: blur(35px);
  pointer-events: none;
  animation: spotlight-fade 3s ease forwards;
}

@keyframes spotlight-fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* assuming 5 images always */
.k-card__random {
  background-size: cover;
  animation: rotate-backgrounds 3s linear infinite;
}

@keyframes rotate-backgrounds {
  0%, 100% { background-image: var(--img-0); }
  20% { background-image: var(--img-1); }
  40% { background-image: var(--img-2); }
  60% { background-image: var(--img-3); }
  80% { background-image: var(--img-4); }
}
/*
@keyframes rotate-backgrounds-crossfade {
  0% {
    background-image: cross-fade(var(--img-1) 11.6167%, var(--img-2));
  }
} */