/* Full-card holographic variants. One holo-* class is resolved in packs.js. */

.pack-card.holo-legacy {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.34) 12%, transparent 34%),
    conic-gradient(
      from 215deg at 50% 42%,
      color-mix(in srgb, var(--pack-rarity) 62%, #f5f1e7) 0deg,
      color-mix(in srgb, #85e9ff 48%, #e7e3d7) 62deg,
      color-mix(in srgb, #f595dd 52%, #e7e3d7) 128deg,
      color-mix(in srgb, #ffe27b 50%, #e7e3d7) 198deg,
      color-mix(in srgb, #9d8dff 48%, #e7e3d7) 270deg,
      color-mix(in srgb, var(--pack-rarity) 62%, #f5f1e7) 360deg
    );
}

.pack-card.rarity-legendary.holo-legacy {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 252, 234, 0.92) 0%, rgba(255, 213, 103, 0.4) 12%, transparent 34%),
    conic-gradient(
      from 220deg at 50% 42%,
      #7e5411 0deg,
      #694300 50deg,
      #ecac2c 104deg,
      #f5d470 154deg,
      #956000 218deg,
      #f4c34e 282deg,
      #825b1c 360deg
    );
  color: #fffbed;
}

.pack-card.rarity-mythic.holo-legacy {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 245, 247, 0.9) 0%, rgba(255, 116, 140, 0.38) 12%, transparent 34%),
    conic-gradient(
      from 220deg at 50% 42%,
      #9a1e32 0deg,
      #650919 50deg,
      #d21f3c 104deg,
      #fa4c69 154deg,
      #870e27 218deg,
      #e33155 282deg,
      #9a1e32 360deg
    );
  color: #fff5f7;
}

.pack-card.holo-legacy .pack-card__hologram {
  background:
    radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 255, 255, 0.72) 0%,
      rgba(153, 240, 255, 0.5) 6%,
      rgba(255, 108, 213, 0.34) 13%,
      rgba(255, 228, 104, 0.22) 21%,
      transparent 37%
    ),
    repeating-linear-gradient(
      122deg,
      rgba(255, 50, 142, 0.36) 0%,
      rgba(255, 174, 59, 0.34) 7%,
      rgba(255, 234, 90, 0.3) 14%,
      rgba(69, 232, 211, 0.34) 21%,
      rgba(83, 177, 255, 0.36) 28%,
      rgba(160, 105, 255, 0.34) 35%,
      rgba(255, 50, 142, 0.36) 42%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 1px,
      transparent 1px,
      transparent 5px
    );
  background-position: center, var(--holo-x) var(--holo-y), 0 0;
  background-size: 100% 100%, 230% 230%, 5px 5px;
  mix-blend-mode: color-dodge;
  filter: saturate(1.45) contrast(1.08);
}

.pack-card.holo-legacy.is-tilting .pack-card__hologram {
  filter: saturate(1.65) contrast(1.1) brightness(1.04);
}

/* Prism: broad spectral bands with a sharp, angle-responsive refractor. */
.pack-card.holo-prism {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.2) 15%, transparent 35%),
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--pack-rarity) 30%, #f2eee3) 0%,
      #d7e3e6 26%,
      #ead8e6 51%,
      #e9e2c7 73%,
      color-mix(in srgb, var(--pack-rarity) 40%, #e8e5dc) 100%
    );
}

.pack-card.rarity-legendary.holo-prism {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 249, 221, 0.86) 0%, rgba(255, 217, 114, 0.25) 16%, transparent 36%),
    linear-gradient(145deg, #6b4305 0%, #d79822 28%, #f4d57a 51%, #9d6509 74%, #eab943 100%);
  color: #fffbed;
}

.pack-card.rarity-mythic.holo-prism {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 235, 240, 0.82) 0%, rgba(255, 86, 119, 0.25) 16%, transparent 36%),
    linear-gradient(145deg, #220108 0%, #760d21 29%, #cf2a46 51%, #5d0717 75%, #a81430 100%);
  color: #fff5f7;
}

.pack-card.holo-prism .pack-card__hologram {
  background:
    radial-gradient(ellipse 65% 48% at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.9) 0%, rgba(182, 239, 255, 0.38) 18%, transparent 56%),
    repeating-linear-gradient(
      118deg,
      transparent 0%,
      rgba(255, 65, 156, 0.72) 7%,
      rgba(255, 205, 82, 0.58) 14%,
      rgba(120, 255, 218, 0.62) 21%,
      rgba(91, 181, 255, 0.68) 28%,
      rgba(188, 103, 255, 0.65) 35%,
      transparent 42%,
      transparent 49%
    ),
    repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.25) 0 1px, transparent 1px 7px);
  background-position: center, var(--holo-x) var(--holo-y), 0 0;
  background-size: 100% 100%, 245% 245%, 7px 7px;
  mix-blend-mode: color-dodge;
  filter: saturate(1.25) contrast(1.12);
}

.pack-card.holo-prism .pack-card__hologram::before,
.pack-card.holo-prism .pack-card__hologram::after,
.pack-card.holo-v-foil .pack-card__hologram::before,
.pack-card.holo-v-foil .pack-card__hologram::after,
.pack-card.holo-v-spectrum .pack-card__hologram::before,
.pack-card.holo-v-spectrum .pack-card__hologram::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.pack-card.holo-prism .pack-card__hologram::before {
  background:
    linear-gradient(128deg, transparent 18%, rgba(255, 255, 255, 0.62) 30%, transparent 42%),
    linear-gradient(52deg, transparent 35%, rgba(132, 235, 255, 0.45) 49%, transparent 63%);
  background-position:
    var(--holo-x) var(--holo-y),
    var(--pointer-x) var(--pointer-y);
  background-size: 210% 210%, 170% 170%;
  mix-blend-mode: screen;
  opacity: 0.34;
}

.pack-card.holo-prism .pack-card__hologram::after {
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.12) 18%, transparent 42%);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.pack-card.holo-prism.is-tilting .pack-card__hologram {
  filter: saturate(1.52) contrast(1.12) brightness(1.06);
}

/* V Foil: restrained spectral pillars over narrow, dark metallic bands. */
.pack-card.holo-v-foil {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(235, 249, 255, 0.45) 0%, rgba(140, 179, 195, 0.12) 20%, transparent 43%),
    linear-gradient(145deg, #11182a 0%, #495a66 28%, #182435 54%, #637078 75%, #101725 100%);
  color: #f7f9fb;
}

.pack-card.holo-v-foil .pack-card__season,
.pack-card.holo-v-foil .pack-card__description,
.pack-card.holo-v-foil .pack-card__sponsor-note,
.pack-card.holo-v-foil .pack-card__copyright,
.pack-card.holo-v-spectrum .pack-card__season,
.pack-card.holo-v-spectrum .pack-card__description,
.pack-card.holo-v-spectrum .pack-card__sponsor-note,
.pack-card.holo-v-spectrum .pack-card__copyright {
  color: #f0f3f6;
}

.pack-card.holo-v-foil .pack-card__sponsor-note,
.pack-card.holo-v-spectrum .pack-card__sponsor-note {
  border-top-color: rgba(226, 238, 244, 0.58);
}

.pack-card.holo-v-foil .pack-card__hologram {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.28) 0 0.45px, transparent 0.75px),
    repeating-linear-gradient(
      0deg,
      rgba(255, 63, 153, 0.82) 0% 5%,
      rgba(255, 185, 66, 0.74) 5% 10%,
      rgba(248, 231, 88, 0.68) 10% 15%,
      rgba(67, 225, 194, 0.73) 15% 20%,
      rgba(78, 165, 255, 0.8) 20% 25%,
      rgba(163, 92, 255, 0.78) 25% 30%,
      rgba(255, 63, 153, 0.82) 30% 35%
    ),
    repeating-linear-gradient(
      133deg,
      #0e152e 0% 3.5%,
      #899b9d 3.8%,
      #b3d0d2 4.5%,
      #829496 5.2%,
      #0e152e 9.5% 12%
    ),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.12) 8%, rgba(70, 81, 91, 0.25) 46%, rgba(0, 0, 0, 0.62) 125%);
  background-blend-mode: soft-light, screen, hue, hard-light;
  background-position:
    var(--holo-x) var(--holo-y),
    0 var(--holo-y),
    var(--holo-x) var(--holo-y),
    var(--pointer-x) var(--pointer-y);
  background-size: 3px 3px, 200% 700%, 300% 100%, 200% 100%;
  mix-blend-mode: color-dodge;
  filter: brightness(0.82) contrast(2.25) saturate(0.72);
}

.pack-card.holo-v-foil .pack-card__hologram::before {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(242, 64, 147, 0.5) 0% 5%,
      rgba(255, 204, 91, 0.48) 5% 10%,
      rgba(74, 226, 198, 0.5) 10% 15%,
      rgba(81, 169, 255, 0.54) 15% 20%,
      rgba(179, 98, 255, 0.5) 20% 25%,
      rgba(242, 64, 147, 0.5) 25% 30%
    ),
    repeating-linear-gradient(133deg, #111a34 0% 4%, #c1d5d6 4.5%, #75888b 5.2%, #111a34 10% 12%);
  background-position: 0 var(--pointer-y), var(--pointer-x) var(--pointer-y);
  background-size: 200% 430%, 195% 100%;
  mix-blend-mode: soft-light;
  filter: brightness(1.05) contrast(2.15) saturate(1.55);
  opacity: 0.72;
}

.pack-card.holo-v-foil .pack-card__hologram::after {
  background: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.96) 0%, rgba(150, 159, 164, 0.28) 44%, rgba(10, 12, 16, 0.76) 130%);
  mix-blend-mode: hard-light;
  filter: brightness(0.92) contrast(1.7);
  opacity: 0.38;
}

.pack-card.holo-v-foil.is-tilting .pack-card__hologram {
  filter: brightness(0.9) contrast(2.4) saturate(0.88);
}

/* V Spectrum: the same foil construction with broader, more saturated refraction. */
.pack-card.holo-v-spectrum {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(249, 249, 255, 0.52) 0%, rgba(147, 126, 207, 0.14) 21%, transparent 45%),
    linear-gradient(145deg, #161328 0%, #563c69 27%, #183e52 53%, #67552f 76%, #171326 100%);
  color: #fbf9ff;
}

.pack-card.holo-v-spectrum .pack-card__hologram {
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.3) 0 0.5px, transparent 0.8px),
    repeating-linear-gradient(
      0deg,
      rgba(255, 36, 132, 0.92) 0% 5%,
      rgba(255, 145, 45, 0.86) 5% 10%,
      rgba(255, 232, 63, 0.82) 10% 15%,
      rgba(51, 234, 177, 0.84) 15% 20%,
      rgba(42, 158, 255, 0.9) 20% 25%,
      rgba(155, 64, 255, 0.9) 25% 30%,
      rgba(255, 36, 132, 0.92) 30% 35%
    ),
    repeating-linear-gradient(
      133deg,
      #11162f 0% 3.1%,
      #8e9fa4 3.6%,
      #d2e2e2 4.4%,
      #87999d 5.2%,
      #11162f 9.2% 12%
    ),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.18) 5%, rgba(44, 46, 62, 0.22) 43%, rgba(0, 0, 0, 0.66) 128%);
  background-blend-mode: soft-light, screen, hue, hard-light;
  background-position:
    var(--pointer-x) var(--holo-y),
    0 var(--holo-y),
    var(--holo-x) var(--pointer-y),
    var(--pointer-x) var(--pointer-y);
  background-size: 3px 3px, 190% 620%, 270% 100%, 190% 100%;
  mix-blend-mode: color-dodge;
  filter: brightness(0.88) contrast(2.18) saturate(0.92);
}

.pack-card.holo-v-spectrum .pack-card__hologram::before {
  background-image:
    repeating-linear-gradient(
      47deg,
      transparent 0% 7%,
      rgba(255, 73, 158, 0.56) 9%,
      rgba(255, 218, 85, 0.5) 14%,
      rgba(79, 229, 207, 0.54) 19%,
      rgba(82, 156, 255, 0.58) 24%,
      rgba(185, 94, 255, 0.56) 29%,
      transparent 36% 43%
    ),
    repeating-linear-gradient(133deg, #10172f 0% 4%, #d1e0df 4.5%, #78898c 5.3%, #10172f 10% 12%);
  background-position: var(--holo-x) var(--pointer-y), var(--pointer-x) var(--holo-y);
  background-size: 225% 225%, 190% 100%;
  mix-blend-mode: soft-light;
  filter: brightness(1.08) contrast(2.1) saturate(1.7);
  opacity: 0.76;
}

.pack-card.holo-v-spectrum .pack-card__hologram::after {
  background:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, 0.98) 0%, rgba(192, 190, 205, 0.24) 43%, rgba(12, 8, 20, 0.78) 132%),
    linear-gradient(118deg, transparent 23%, rgba(255, 255, 255, 0.42) 42%, transparent 59%);
  background-position: center, var(--holo-x) var(--holo-y);
  background-size: 100% 100%, 210% 210%;
  mix-blend-mode: hard-light;
  filter: contrast(1.55);
  opacity: 0.42;
}

.pack-card.holo-v-spectrum.is-tilting .pack-card__hologram {
  filter: brightness(0.96) contrast(2.32) saturate(1.16);
}

.pack-card.is-full-art.holo-legacy,
.pack-card.is-full-art.holo-prism,
.pack-card.is-full-art.holo-v-foil,
.pack-card.is-full-art.holo-v-spectrum {
  background: transparent;
}

/* Concept art supplies the base palette even when another card treatment adds foil. */
.pack-card.is-concept-edition.has-holographic-effect {
  border-color: var(--concept-border);
  background:
    radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.1) 15%,
      transparent 36%
    ),
    repeating-linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.025) 0,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      28deg,
      rgba(0, 0, 0, 0.035) 0,
      rgba(0, 0, 0, 0.035) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(
      148deg,
      color-mix(in srgb, var(--concept-color-1) 80%, #111218) 0%,
      color-mix(in srgb, var(--concept-color-2) 73%, #111218) 48%,
      color-mix(in srgb, var(--concept-color-3) 74%, #111218) 100%
    );
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .pack-card.has-holographic-effect .pack-card__hologram {
    transition: none;
  }
}