/* Holographic card effect — subtle adaptation of simeydotme/pokemon-cards-css */

.holo-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-from-center: 0;
  --card-opacity: 0;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --background-x: 50%;
  --background-y: 50%;
  --card-radius: 4.55% / 3.5%;
  --seed: 0.42;

  position: relative;
  width: 100%;
  aspect-ratio: 0.716;
  perspective: 600px;
  z-index: 1;
  transform: translate3d(0, 0, 0.1px);
}

.holo-card__rotator {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  border-radius: var(--card-radius);
  will-change: transform;
  transition: transform 0.35s ease-out;
}

.holo-card.interacting .holo-card__rotator {
  transition: none;
}

.holo-card__front {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  background-color: #1a1520;
  box-shadow:
    0 0 3px -1px rgba(0, 0, 0, 0.4),
    0 4px 8px -2px rgba(0, 0, 0, 0.35),
    0 18px 28px -6px rgba(0, 0, 0, 0.28);
  transform: translate3d(0, 0, 0.01px);
}

.holo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* crop official scan corner padding */
  transform: scale(1.035);
  transform-origin: center;
  position: relative;
  z-index: 1;
}

/* Overlays — nearly invisible at rest, soft on hover */
.holo-card__shine,
.holo-card__glare {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.holo-card.interacting .holo-card__shine {
  opacity: calc(0.22 * var(--card-opacity));
}

.holo-card.interacting .holo-card__glare {
  opacity: calc(0.35 * var(--card-opacity));
}

.holo-card__shine {
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255, 180, 120, 0.35) 40%,
      rgba(160, 200, 255, 0.35) 55%,
      rgba(255, 140, 200, 0.3) 70%,
      transparent 85%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.12) 35%,
      transparent 65%
    );
  background-size: 200% 200%, 160% 160%;
  background-position:
    calc(var(--background-x) * 1%) calc(var(--background-y) * 1%),
    var(--pointer-x) var(--pointer-y);
}

.holo-card__glare {
  mix-blend-mode: overlay;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.08) 28%,
    transparent 55%
  );
}

/* SAR — slightly richer rainbow, still restrained */
.holo-card--sar.interacting .holo-card__shine {
  opacity: calc(0.32 * var(--card-opacity));
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(
      125deg,
      transparent 15%,
      rgba(255, 120, 100, 0.4) 35%,
      rgba(255, 220, 100, 0.35) 45%,
      rgba(100, 220, 180, 0.35) 55%,
      rgba(120, 160, 255, 0.4) 65%,
      rgba(220, 120, 255, 0.35) 75%,
      transparent 90%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.1) 30%,
      transparent 60%
    );
}

.holo-card--sar.interacting .holo-card__glare {
  opacity: calc(0.4 * var(--card-opacity));
}

/* Classic holo beam */
.holo-card--holo.interacting .holo-card__shine {
  opacity: calc(0.28 * var(--card-opacity));
  background-image:
    repeating-linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.15) 0.6%,
      rgba(255, 255, 255, 0.35) 1.1%,
      rgba(255, 255, 255, 0.15) 1.6%,
      transparent 2.2%,
      transparent 5%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 255, 255, 0.4) 0%,
      transparent 55%
    );
  background-size: 180% 180%, 160% 160%;
  background-position: var(--background-x) var(--background-y), var(--pointer-x) var(--pointer-y);
}

/* Reverse foil */
.holo-card--reverse.interacting .holo-card__shine {
  opacity: calc(0.25 * var(--card-opacity));
  background-image:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 40%,
      transparent 70%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 230, 160, 0.35) 0%,
      transparent 55%
    );
}

.holo-card--compact {
  max-width: 160px;
  width: 100%;
  margin: 0 auto;
}

.holo-card--compact .holo-card__front {
  box-shadow:
    0 0 2px rgba(0, 0, 0, 0.35),
    0 8px 18px -4px rgba(0, 0, 0, 0.28);
}

/* Booster pack — 3D tilt only; no shine/glare (leaks on transparent pack art) */
.holo-card--pack {
  --card-radius: 0;
  width: min(100%, 300px);
  max-width: 300px;
  aspect-ratio: 0.515;
  margin: 0 auto;
}

.holo-card--pack .holo-card__rotator {
  position: absolute;
  inset: 0;
  border-radius: 0;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.55));
}

.holo-card--pack .holo-card__front {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  outline: none;
  border: none;
}

.holo-card--pack .holo-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  background: transparent;
  filter: none;
}

.holo-card--pack .holo-card__shine,
.holo-card--pack .holo-card__glare {
  display: none !important;
  opacity: 0 !important;
}

.holo-card--pack.interacting .holo-card__shine,
.holo-card--pack.interacting .holo-card__glare {
  display: none !important;
  opacity: 0 !important;
}