/* the button is only the middle half of the sprite window, as tall as the sprite, so no two cards
   overlap where they take a tap; the rest of the window and the middle hero's text hang outside it */
.hero-card {
  --accent: var(--color-hero-moss);
  --scale: 1;
  --glow-edge: calc(var(--px) * 0.5px);
  --glow-spread: calc(var(--px) * 3px);

  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: calc(var(--px) * 64px);
  height: calc(var(--px) * 80px);
  padding: 0;
  color: var(--color-text);
  background: none;
  border: 0;
  cursor: pointer;
  transform: translateX(calc(-50% + var(--offset, 0px))) scale(var(--scale));
  transform-origin: 50% var(--card-middle);
  transition:
    transform var(--duration-slow) var(--easing-standard),
    opacity var(--duration-slow) var(--easing-standard),
    filter var(--duration-slow) var(--easing-standard);
}

.hero-card.wrap {
  transition: none;
}

.hero-card[data-hero='firefly'] {
  --accent: var(--color-hero-firefly);
}

.hero-card[data-hero='antler'] {
  --accent: var(--color-hero-antler);
}

.hero-card[data-hero='blue'] {
  --accent: var(--color-hero-blue);
}

.hero-card[data-hero='ember'] {
  --accent: var(--color-hero-ember);
}

.hero-card[data-hero='bokator'] {
  --accent: var(--color-hero-bokator);
}

.hero-card[data-hero='angkor'] {
  --accent: var(--color-hero-angkor);
}

/* the middle hero stands in a pool of their own light */
.hero-card[data-depth='0'] {
  z-index: 3;
  background:
    radial-gradient(
      calc(var(--px) * 30px) calc(var(--px) * 5px) at 50% calc(var(--px) * 76px),
      color-mix(in srgb, var(--accent) 60%, transparent),
      transparent
    ),
    radial-gradient(
      calc(var(--px) * 32px) calc(var(--px) * 40px) at 50% calc(var(--px) * 44px),
      color-mix(in srgb, var(--accent) 16%, transparent),
      transparent
    );
}

/* the side heroes stand back in grey, like the ones not picked on an arcade select screen; each card
   is as far out as it takes to leave the same gap after the card before it, whatever their scales */
.hero-card[data-depth='1'] {
  --scale: var(--near-scale);
  --offset: calc(var(--slot) * var(--reach-near));

  z-index: 2;
  filter: grayscale(0.75) brightness(0.8);
}

.hero-card[data-depth='2'] {
  --scale: var(--far-scale);
  --offset: calc(var(--slot) / 2 * var(--reach-far));

  z-index: 1;
  filter: grayscale(1) brightness(0.55);
}

.hero-card[data-depth='1']:hover,
.hero-card[data-depth='2']:hover {
  filter: grayscale(0.3) brightness(1);
}

/* a card going out of sight fades out fast, as quick presses can bring it round the loop at once */
.hero-card[data-depth='3'] {
  --scale: var(--far-scale);
  --offset: calc(var(--slot) / 3 * var(--reach-out));

  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--duration-slow) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-out);
}

/* one whole 128x80 frame of the sword row, so no blade or flame is cut off at the edge */
.hero-art {
  flex: none;
  pointer-events: none;
  width: calc(var(--px) * 128px);
  height: calc(var(--px) * 80px);
  margin-inline: calc(var(--px) * -32px);
  background-image: var(--idle);
  background-size: calc(var(--px) * 768px) calc(var(--px) * 80px);
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: hero-idle var(--duration-sprite-idle) var(--easing-step-6) infinite;
}

/* the middle hero glows in their own light; a hard outline a sprite pixel wide turned every spark,
   spore and wisp drawn round a hero into a blob of the accent color */
.hero-card[data-depth='0'] .hero-art {
  background-image: var(--win);
  background-size: calc(var(--px) * 512px) calc(var(--px) * 80px);
  animation: hero-win var(--duration-sprite-win) var(--easing-step-4) infinite;
  filter: drop-shadow(0 0 var(--glow-edge) var(--accent))
    drop-shadow(0 0 var(--glow-spread) color-mix(in srgb, var(--accent) 55%, transparent));
}

/* Bokator's and the Angkor Warrior's frames are 112 px tall with their feet in the same place, so
   their window starts 32 px lower; on the side cards they bounce in their guard, one row of six
   drawn frames (card_idle.png, from tools/hero_cards) */
.hero-card[data-hero='bokator'] .hero-art,
.hero-card[data-hero='angkor'] .hero-art {
  background-size: calc(var(--px) * 768px) calc(var(--px) * 112px);
  background-position: 0 calc(var(--px) * -32px);
}

/* standing up each is a head taller than the crouch he fights in, so the middle card shows a flourish
   drawn smaller (card_pose.png) to stand as tall as the Shades on theirs, at the side cards' pace;
   it is drawn over the crest, which his raised blade reaches */
.hero-card[data-hero='bokator'][data-depth='0'] .hero-art,
.hero-card[data-hero='angkor'][data-depth='0'] .hero-art {
  position: relative;
  z-index: 1;
  animation: hero-idle var(--duration-sprite-idle) var(--easing-step-6) infinite;
}

/* the Angkor Warrior's dav, raised, burns up above the window, so his starts 18 px higher, over the
   top of the frame, to show the star that flares at its point */
.hero-card[data-hero='angkor'][data-depth='0'] .hero-art {
  height: calc(var(--px) * 98px);
  margin-top: calc(var(--px) * -18px);
  background-position: 0 calc(var(--px) * -14px);
}

@keyframes hero-idle {
  to {
    background-position-x: calc(var(--px) * -768px);
  }
}

@keyframes hero-win {
  to {
    background-position-x: calc(var(--px) * -512px);
  }
}

.hero-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: calc(var(--px) * 112px);
  margin-inline: calc(var(--px) * -24px);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--easing-out);
}

.hero-card[data-depth='0'] .hero-info {
  visibility: visible;
  opacity: 1;
}

.hero-name {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  line-height: var(--leading-tight);
  white-space: nowrap;
  color: var(--accent);
  text-align: center;
  text-shadow: var(--text-shadow-pixel-sm);
}