/* Hero cards, as the game's summon reveal draws them: 40 x 56 art pixels at --scale.
   js/cards.js fills each .card from its data-rarity and data-skin, and turns it. */

.card { --frame: 0; --rarity: var(--common); --scale: 3; }
.card[data-rarity="uncommon"] { --frame: 1; --rarity: var(--uncommon); }
.card[data-rarity="rare"] { --frame: 2; --rarity: var(--rare); }
.card[data-rarity="epic"] { --frame: 3; --rarity: var(--epic); }
.card[data-rarity="legendary"] { --frame: 4; --rarity: var(--legendary); }
.card[data-rarity="mythic"] { --frame: 5; --rarity: var(--mythic); }

.card {
  position: relative;
  isolation: isolate;
  display: block;
  flex: none;
  width: calc(40px * var(--scale));
  height: calc(56px * var(--scale));
  padding: 0;
  border: 0;
  background: none;
  transition: transform .14s ease-in, translate .2s, filter .2s;
}
button.card:not(.is-face):hover { translate: 0 -6px; filter: drop-shadow(0 0 12px #ffffff40); }

.card-back, .card-face, .card-face > * { position: absolute; inset: 0; display: block; image-rendering: pixelated; }
.card-back { background: url("../assets/ui/card-back.png") 0 0 / 100% 100% no-repeat; }
.card-face { display: none; }
.card.is-face .card-back { display: none; }
.card.is-face .card-face { display: block; }

.card-glow { inset: calc(5px * var(--scale)); background: radial-gradient(ellipse 70% 55% at 50% 44%, color-mix(in srgb, var(--rarity) 42%, transparent), #10131a 82%); }
.card-face .hero-sprite { --scale: 5; inset: auto; left: 50%; top: 46%; translate: -50% -50%; }
.card-frame { background: url("../assets/ui/rarity-frames.png") calc(-40px * var(--scale) * var(--frame)) 0 / calc(240px * var(--scale)) calc(56px * var(--scale)) no-repeat; }
.card-holo, .card-gloss { background-repeat: no-repeat; background-size: calc(1000px * var(--scale)) 100%; mix-blend-mode: screen; opacity: 0; }
.card-holo { background-image: url("../assets/ui/card-holo-anim.png"); }
.card-gloss { background-image: url("../assets/ui/card-gloss.png"); }
.card[data-rarity="legendary"] .card-holo, .card[data-rarity="mythic"] .card-holo { opacity: .28; animation: card-holo 2.5s steps(25) infinite; }
@keyframes card-holo { to { background-position-x: calc(-1000px * var(--scale)); } }

/* The turn: the card charges (white and trembling, the same for every rarity), narrows to its edge, swaps to its face and widens again. */
.card.is-charging { animation: card-charge .4s steps(8) both; }
@keyframes card-charge {
  0% { filter: brightness(1); translate: 0 0; }
  25% { translate: -2px 0; }
  50% { filter: brightness(1.9) saturate(.4); translate: 2px -1px; }
  75% { translate: -1px 1px; }
  100% { filter: brightness(2.4) saturate(0); translate: 0 0; }
}
.card.is-turning { transform: scaleX(0); }
.card.is-revealed { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rarity) 55%, transparent)); }
.card.is-revealed .card-gloss { opacity: .7; animation: card-gloss 1s steps(25) forwards; }
@keyframes card-gloss { from { background-position-x: 0; } to { background-position-x: calc(-1000px * var(--scale)); opacity: 0; } }

/* Epic and rarer faces bring rays that stay. */
.card::before { position: absolute; z-index: -1; inset: -40%; content: ""; opacity: 0; pointer-events: none; }
.card.is-revealed:is([data-rarity="epic"], [data-rarity="legendary"], [data-rarity="mythic"])::before {
  opacity: .55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rarity) 70%, transparent) 0 7deg, transparent 7deg 22deg);
  mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: card-rays 14s linear infinite;
  transition: opacity .4s;
}
@keyframes card-rays { to { rotate: 1turn; } }

/* A Legendary or Mythic face shakes the row it lands in. */
.is-shaking { animation: row-shake .38s steps(6); }
@keyframes row-shake { 0%, 100% { translate: 0 0; } 20% { translate: -5px 2px; } 40% { translate: 5px -2px; } 60% { translate: -3px -1px; } 80% { translate: 3px 1px; } }