/* MINT holo card: a real card scan shown as a slowly tilting 3D card with a holo foil sheen.
   Seedance refuses to animate real Pokémon cards, so the cards move in the browser instead.

   <div class="holo-stage">
     <figure class="holo-card holo-base" style="--delay: -3s">
       <img src="assets/cards/base1-004-charizard-holo.webp" width="600" height="825" alt="...">
       <span class="holo-foil" aria-hidden="true"></span>
       <span class="holo-glare" aria-hidden="true"></span>
     </figure>
   </div>

   .holo-base fits the foil to the Base Set art window (Charizard, Blastoise, Venusaur, Mewtwo).
   Cards without a holo window (Base Set Pikachu, Neo layouts) drop .holo-foil and keep .holo-glare.
   Matte card stock (the vintage baseball cards) uses .holo-matte: no .holo-foil, and the glare
   layer is held down to a faint paper sheen. Size with --card-w; desynchronise neighbours with
   a negative --delay. */

.holo-stage {
  perspective: 1400px;
}

.holo-card {
  --card-w: clamp(150px, 22vw, 300px);
  --dur: 10s;
  --delay: 0s;
  position: relative;
  width: var(--card-w);
  aspect-ratio: 600 / 825;
  margin: 0;
  border-radius: 4.8% / 3.5%;
  overflow: hidden;
  transform: rotateX(3deg) rotateY(-6deg);
  box-shadow: 0 28px 48px -18px rgba(0, 0, 0, 0.45), 0 6px 14px -6px rgba(0, 0, 0, 0.3);
  animation: holo-tilt var(--dur) cubic-bezier(0.45, 0, 0.55, 1) var(--delay) infinite alternate;
}

.holo-card img {
  display: block;
  width: 100%;
  height: 100%;
}

.holo-foil,
.holo-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.holo-foil {
  background: linear-gradient(115deg, #ff6b6b 0%, #ffd36b 16%, #8cff9e 33%, #6bd8ff 50%, #b26bff 66%, #ff6bd6 83%, #ff6b6b 100%);
  background-size: 300% 300%;
  mix-blend-mode: color-dodge;
  opacity: 0.3;
  animation: holo-sweep var(--dur) linear var(--delay) infinite alternate;
}

.holo-base .holo-foil {
  inset: 11.6% 10.3% auto 10.7%;
  height: 40.3%;
}

.holo-glare {
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 66%);
  background-size: 260% 260%;
  mix-blend-mode: soft-light;
  animation: holo-sweep var(--dur) cubic-bezier(0.45, 0, 0.55, 1) var(--delay) infinite alternate;
}

.holo-matte .holo-glare {
  background-image: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.18) 48%, transparent 62%);
}

@keyframes holo-tilt {
  from { transform: rotateX(4deg) rotateY(-9deg); }
  to { transform: rotateX(-2deg) rotateY(9deg); }
}

@keyframes holo-sweep {
  from { background-position: 100% 50%; }
  to { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .holo-card,
  .holo-foil,
  .holo-glare {
    animation: none;
  }
}