/* ============================================================
   Holo Card Studio — SOTA holographic materials
   Recipes adapted verbatim from simeydotme/pokemon-cards-css
   (MIT/CC). Each material is a battle-tested production effect
   from the Pokémon TCG holofoil simulation.
   ============================================================ */

.card {
  /* ---- interaction vars (written by JS each frame) ---- */
  --pointer-x: 50%;
  --pointer-y: 50%;
  --background-x: 50%;
  --background-y: 50%;
  --pointer-from-center: 0;
  --pointer-from-top: 0.5;
  --pointer-from-left: 0.5;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --card-opacity: 0;

  /* ---- shared material vars ---- */
  --grain: url("../assets/grain.webp");
  --glitter: url("../assets/glitter.png");
  --glittersize: 25%;
  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  /* the canonical poke-holo "sunpillar" palette */
  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);
  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
  --sunpillar-clr-4: var(--sunpillar-4);
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);

  /* radiant 5-color band */
  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;

  /* user-tunable knobs */
  --card-w: 320px;
  --card-aspect: 0.66;
  --card-radius: 4.55% / 3.5%;
  --card-bg: #0e1230;
  --text-color: #ffffff;
  --accent: #7c6cff;
  --accent2: #36e0c8;
  --edge: hsl(47, 100%, 78%);
  --glow: hsl(265, 80%, 70%);
  --card-glow: var(--glow);
  --bg-image: none;
  --foil-image: url("../assets/illusion.png");

  --shine-strength: 1;       /* 0..1.6 user opacity multiplier */
  --glare-strength: 0.85;    /* 0..1.4 user opacity multiplier */

  width: var(--card-w);
  aspect-ratio: var(--card-aspect);
  transform-style: preserve-3d;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.card__translater {
  display: grid;
  width: 100%; height: 100%;
  perspective: 700px;
  transform-style: preserve-3d;
}

.card__rotator {
  display: grid;
  width: 100%; height: 100%;
  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  transform-style: preserve-3d;
  transition: box-shadow 0.4s ease;
  border-radius: var(--card-radius);
  box-shadow:
    0 22px 38px -22px rgba(0, 0, 0, 0.85),
    0 0 14px -10px var(--card-glow);
}
.card.is-flipped .card__rotator { transform: rotateY(calc(var(--rotate-x) + 180deg)) rotateX(var(--rotate-y)); }

.card__front,
.card__back {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  border-radius: var(--card-radius);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card__front {
  display: grid;
  isolation: isolate;
  background:
    var(--bg-image) center / cover no-repeat,
    radial-gradient(120% 120% at 30% 0%,
      color-mix(in srgb, var(--card-bg) 78%, #fff 12%),
      var(--card-bg) 72%);
  color: var(--text-color);
  /* visible edge stroke that uses the --edge token */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--edge) 70%, transparent),
    inset 0 0 0 2px rgba(0, 0, 0, 0.5);
}

/* "carrier" texture — provides rich pixel variation (true noise, not pattern) so
   color-dodge recipes have something to dodge against. Uses grain.webp like poke-holo. */
.card.foil--regular .card__front::before,
.card.foil--rainbow .card__front::before,
.card.foil--shinev .card__front::before,
.card.foil--cosmos .card__front::before,
.card.foil--radiant .card__front::before,
.card.foil--secret .card__front::before,
.card.foil--glitter .card__front::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 200% 200%;
  background-position: center;
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.card__back {
  transform: rotateY(180deg);
  background:
    repeating-linear-gradient(45deg,
      rgba(255, 255, 255, 0.025) 0 9px,
      transparent 9px 18px),
    radial-gradient(120% 120% at 50% 0%,
      color-mix(in srgb, var(--card-bg) 70%, #fff 6%),
      var(--card-bg));
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12% 10%;
  gap: clamp(14px, 6cqi, 28px);
  color: var(--text-color);
  font-family: "Inter", sans-serif;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.card__back::before {
  /* prismatic emblem ring — a thin holographic outline, not a filled disc */
  content: "";
  width: clamp(56px, 32cqi, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #ff5f6d, #ffc371, #5fff9f, #36e0c8, #7c6cff, #ff5f6d);
  -webkit-mask:
    radial-gradient(circle, transparent 38%, #000 41%, #000 49%, transparent 51%);
  mask:
    radial-gradient(circle, transparent 38%, #000 41%, #000 49%, transparent 51%);
  filter: saturate(0.85);
  opacity: 0.85;
}
.card__back::after {
  content: "HOLO · STUDIO";
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(9px, 3cqi, 11px);
  letter-spacing: 0.4em;
  color: color-mix(in srgb, var(--edge) 80%, transparent);
  text-indent: 0.4em;
}

/* content slot — sits ABOVE the foil (like real printed cards: art prints on top of holo)
   so text stays legible regardless of how bright the foil gets */
.card__content {
  grid-area: 1 / 1; z-index: 5; width: 100%; height: 100%;
  transform: translate3d(
    calc((0.5 - var(--pointer-from-left)) * var(--parallax-amt, 0px)),
    calc((0.5 - var(--pointer-from-top)) * var(--parallax-amt, 0px)),
    0.02px
  );
}

/* ============================================================
   SHINE + GLARE LAYERS (poke-holo .card__shine architecture)
   ============================================================ */
.card__shine,
.card__glare {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  border-radius: inherit;
  pointer-events: none;
  will-change: transform, opacity, background-image, background-size, background-position, filter;
}

/* base shine — each material overrides everything here */
.card__shine {
  z-index: 3;
  transform: translateZ(1px);
  display: grid;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  mix-blend-mode: color-dodge;
  opacity: calc(var(--shine-strength) * var(--card-opacity));
}
.card__shine::before,
.card__shine::after {
  grid-area: 1 / 1;
  border-radius: inherit;
  transform: translateZ(0.01px);
}

/* base glare — material overrides */
.card__glare {
  z-index: 4;
  transform: translateZ(1.2px);
  overflow: hidden;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.8) 10%,
    hsla(0, 0%, 100%, 0.65) 20%,
    hsla(0, 0%, 0%, 0.5) 90%
  );
  mix-blend-mode: overlay;
  opacity: calc(var(--glare-strength) * var(--card-opacity));
}

/* ============================================================
   MATERIAL: NONE (glossy laminate — glare only)
   ============================================================ */
.card.foil--none .card__shine { opacity: 0; }

/* ============================================================
   MATERIAL: MATTE (no foil, soft diffuse)
   ============================================================ */
.card.foil--matte .card__shine { opacity: 0; }
.card.foil--matte .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.22) 5%,
    hsla(0, 0%, 100%, 0.05) 45%,
    transparent 80%
  );
  mix-blend-mode: soft-light;
}

/* ============================================================
   MATERIAL: REGULAR HOLO — verbatim recipe
   Repeating rainbow + scanlines + decorative bars + spotlight
   ============================================================ */
.card.foil--regular .card__shine {
  --scanlines-space: 1px;
  --scanlines-light: #666;
  --scanlines-dark: black;
  --bars: 3%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);

  background-image:
    repeating-linear-gradient(110deg,
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red),
      var(--violet), var(--blue), var(--green), var(--yellow), var(--red)),
    repeating-linear-gradient(90deg,
      var(--scanlines-dark) calc(var(--scanlines-space) * 0),
      var(--scanlines-dark) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 4));
  background-position:
    calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%),
    center center;
  background-size: 400% 400%, cover;
  background-blend-mode: overlay;
  filter: brightness(1.1) contrast(1.1) saturate(1.2);
  mix-blend-mode: color-dodge;
}
.card.foil--regular .card__shine::before {
  content: "";
  background-image:
    repeating-linear-gradient(90deg,
      var(--bar-bg) calc(var(--bars) * 2),
      var(--bar-color) calc(var(--bars) * 3),
      var(--bar-bg) calc(var(--bars) * 3.5),
      var(--bar-color) calc(var(--bars) * 4),
      var(--bar-bg) calc(var(--bars) * 5),
      var(--bar-bg) calc(var(--bars) * 14)),
    repeating-linear-gradient(90deg,
      var(--bar-bg) calc(var(--bars) * 2),
      var(--bar-color) calc(var(--bars) * 3),
      var(--bar-bg) calc(var(--bars) * 3.5),
      var(--bar-color) calc(var(--bars) * 4),
      var(--bar-bg) calc(var(--bars) * 5),
      var(--bar-bg) calc(var(--bars) * 10));
  background-position:
    calc((((50% - var(--background-x)) * 1.65) + 50%) + (var(--background-y) * 0.5)) var(--background-x),
    calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75)) var(--background-y);
  background-size: 200% 200%, 200% 200%;
  background-blend-mode: screen;
  filter: brightness(1.15) contrast(1.1);
  mix-blend-mode: hard-light;
}
.card.foil--regular .card__shine::after {
  content: "";
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 90%, 0.8) 0%,
    hsla(0, 0%, 78%, 0.1) 25%,
    hsl(0, 0%, 0%) 90%);
  mix-blend-mode: luminosity;
  filter: brightness(0.6) contrast(4);
}
.card.foil--regular .card__glare {
  filter: brightness(0.8) contrast(1.5);
  mix-blend-mode: overlay;
}
.card.foil--regular .card__glare::after {
  content: "";
  grid-area: 1 / 1;
  border-radius: inherit;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(180, 100%, 95%) 5%,
    hsla(0, 0%, 39%, 0.25) 55%,
    hsla(0, 0%, 0%, 0.36) 110%);
  mix-blend-mode: overlay;
  filter: brightness(0.6) contrast(3);
}

/* ============================================================
   MATERIAL: REVERSE HOLO — verbatim recipe
   Diagonal noise + spotlight via difference + soft-light
   ============================================================ */
.card.foil--reverse .card__shine {
  --foil-brightness: 0.55;
  background-image:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),
      #fff 5%, #000 50%, #fff 80%),
    linear-gradient(-45deg, #000 15%, #fff, #000 85%),
    var(--foil-image);
  background-blend-mode: soft-light, difference;
  background-size: 120% 120%, 200% 200%, cover;
  background-position:
    center center,
    calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)),
    center center;
  filter: brightness(var(--foil-brightness)) contrast(1.5) saturate(1);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--shine-strength) * ((1.5 * var(--card-opacity)) - var(--pointer-from-center)));
}
.card.foil--reverse .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.8) 10%,
    hsla(0, 0%, 100%, 0.5) 20%,
    hsla(0, 0%, 0%, 0.75) 90%);
  filter: brightness(0.7) contrast(1.5);
}
.card.foil--reverse .card__glare::after {
  content: "";
  grid-area: 1 / 1;
  border-radius: inherit;
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 10%,
    hsla(0, 0%, 100%, 0.5) 20%,
    hsla(0, 0%, 0%, 0.5) 120%);
  filter: brightness(1) contrast(1.5);
}

/* ============================================================
   MATERIAL: RAINBOW (Secret Rare Rainbow) — verbatim recipe
   Glitter + dark-rainbow gradient + foil over illusion
   ============================================================ */
.card.foil--rainbow .card__shine {
  --r-clr-1: hsl(0, 57%, 37%);
  --r-clr-2: hsl(40, 53%, 39%);
  --r-clr-3: hsl(90, 60%, 35%);
  --r-clr-4: hsl(180, 60%, 35%);
  --r-clr-5: hsl(180, 60%, 35%);
  --r-clr-6: hsl(210, 57%, 39%);
  --r-clr-7: hsl(280, 55%, 31%);

  background-image:
    linear-gradient(-45deg, var(--r-clr-1), var(--r-clr-5)),
    var(--glitter),
    linear-gradient(-30deg,
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1));
  background-blend-mode: luminosity, soft-light;
  background-size: 200% 200%, var(--glittersize) var(--glittersize), 400% 400%;
  background-position:
    calc(25% + (50% * var(--pointer-from-left))) calc(25% + (50% * var(--pointer-from-top))),
    center center,
    calc(25% + (var(--pointer-x) / 2)) calc(25% + (var(--pointer-y) / 2));
  filter: brightness(calc((var(--pointer-from-center) * 0.25) + 0.6)) contrast(2.2) saturate(0.75);
}
.card.foil--rainbow .card__shine::after {
  content: "";
  background-image:
    var(--glitter),
    linear-gradient(-60deg,
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1), var(--r-clr-2), var(--r-clr-3), var(--r-clr-4), var(--r-clr-5), var(--r-clr-6), var(--r-clr-7),
      var(--r-clr-1));
  background-blend-mode: soft-light;
  background-size: var(--glittersize) var(--glittersize), 400% 400%;
  background-position: center center, var(--pointer-x) var(--pointer-y);
  filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.55)) contrast(2) saturate(1);
  mix-blend-mode: color-dodge;
}
.card.foil--rainbow .card__shine::before {
  content: "";
  background-image: var(--foil-image);
  background-size: 33%;
  background-position: center center;
  filter: brightness(2.5) contrast(1);
  opacity: calc((var(--pointer-from-center) + 0.4) * 0.6);
  background-blend-mode: difference;
  mix-blend-mode: darken;
}
.card.foil--rainbow .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 80%),
    hsla(187, 10%, 85%, 0.25) 30%,
    hsl(197, 6%, 25%) 120%);
  filter: brightness(0.9) contrast(1.75);
  opacity: calc(var(--glare-strength) * var(--pointer-from-center) * 0.9);
  mix-blend-mode: hard-light;
}

/* ============================================================
   MATERIAL: GALAXY / COSMOS — verbatim 3-layer cosmos recipe
   ============================================================ */
.card.foil--cosmos .card__shine {
  --space: 4%;
  background-image:
    url("../assets/cosmos-bottom.png"),
    repeating-linear-gradient(82deg,
      hsl(53, 65%, 60%) calc(var(--space) * 1),
      hsl(93, 56%, 50%) calc(var(--space) * 2),
      hsl(176, 54%, 49%) calc(var(--space) * 3),
      hsl(228, 59%, 55%) calc(var(--space) * 4),
      hsl(283, 60%, 55%) calc(var(--space) * 5),
      hsl(326, 59%, 51%) calc(var(--space) * 6),
      hsl(326, 59%, 51%) calc(var(--space) * 7),
      hsl(283, 60%, 55%) calc(var(--space) * 8),
      hsl(228, 59%, 55%) calc(var(--space) * 9),
      hsl(176, 54%, 49%) calc(var(--space) * 10),
      hsl(93, 56%, 50%) calc(var(--space) * 11),
      hsl(53, 65%, 60%) calc(var(--space) * 12)),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(180, 100%, 89%, 0.5) 5%,
      hsla(180, 14%, 57%, 0.3) 40%,
      hsl(0, 0%, 0%) 130%);
  background-blend-mode: color-burn, multiply;
  background-position:
    var(--cosmosbg, center),
    calc(10% + var(--pointer-from-left) * 80%) calc(10% + var(--pointer-from-top) * 80%),
    center;
  background-size: cover, 400% 900%, cover;
  filter: brightness(1) contrast(1) saturate(0.8);
  mix-blend-mode: color-dodge;
}
.card.foil--cosmos .card__shine::before {
  content: "";
  z-index: 2;
  background-image:
    url("../assets/cosmos-middle-trans.png"),
    repeating-linear-gradient(82deg,
      hsl(53, 65%, 60%) calc(var(--space) * 1),
      hsl(93, 56%, 50%) calc(var(--space) * 2),
      hsl(176, 54%, 49%) calc(var(--space) * 3),
      hsl(228, 59%, 55%) calc(var(--space) * 4),
      hsl(283, 60%, 55%) calc(var(--space) * 5),
      hsl(326, 59%, 51%) calc(var(--space) * 6),
      hsl(326, 59%, 51%) calc(var(--space) * 7),
      hsl(283, 60%, 55%) calc(var(--space) * 8),
      hsl(228, 59%, 55%) calc(var(--space) * 9),
      hsl(176, 54%, 49%) calc(var(--space) * 10),
      hsl(93, 56%, 50%) calc(var(--space) * 11),
      hsl(53, 65%, 60%) calc(var(--space) * 12));
  background-blend-mode: lighten, multiply;
  background-position:
    var(--cosmosbg, center),
    calc(15% + var(--pointer-from-left) * 70%) calc(15% + var(--pointer-from-top) * 70%),
    center;
  background-size: cover, 400% 900%, cover;
  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: overlay;
}
.card.foil--cosmos .card__shine::after {
  content: "";
  z-index: 3;
  background-image:
    url("../assets/cosmos-top-trans.png"),
    repeating-linear-gradient(82deg,
      hsl(53, 65%, 60%) calc(var(--space) * 1),
      hsl(93, 56%, 50%) calc(var(--space) * 2),
      hsl(176, 54%, 49%) calc(var(--space) * 3),
      hsl(228, 59%, 55%) calc(var(--space) * 4),
      hsl(283, 60%, 55%) calc(var(--space) * 5),
      hsl(326, 59%, 51%) calc(var(--space) * 6),
      hsl(326, 59%, 51%) calc(var(--space) * 7),
      hsl(283, 60%, 55%) calc(var(--space) * 8),
      hsl(228, 59%, 55%) calc(var(--space) * 9),
      hsl(176, 54%, 49%) calc(var(--space) * 10),
      hsl(93, 56%, 50%) calc(var(--space) * 11),
      hsl(53, 65%, 60%) calc(var(--space) * 12));
  background-blend-mode: multiply, multiply;
  background-position:
    var(--cosmosbg, center),
    calc(20% + var(--pointer-from-left) * 60%) calc(20% + var(--pointer-from-top) * 60%),
    center;
  background-size: cover, 400% 900%, cover;
  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: multiply;
}
.card.foil--cosmos .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(204, 100%, 95%, 0.8) 5%,
    hsla(250, 15%, 20%, 1) 150%);
  filter: brightness(0.75) contrast(2) saturate(2);
  mix-blend-mode: overlay;
  opacity: calc(var(--glare-strength) * (0.25 + var(--pointer-from-center)));
}

/* ============================================================
   MATERIAL: SHINE V (Shiny Rare / V-Full-Art) — verbatim
   Foil over illusion + sunpillar stripes + diagonal navy stripes
   + exclusion blend. The most sophisticated holo.
   ============================================================ */
.card.foil--shinev .card__shine,
.card.foil--shinev .card__shine::after {
  --space: 5%;
  --angle: 133deg;

  background-image:
    var(--foil-image),
    repeating-linear-gradient(0deg,
      var(--sunpillar-clr-1) calc(var(--space) * 1),
      var(--sunpillar-clr-2) calc(var(--space) * 2),
      var(--sunpillar-clr-3) calc(var(--space) * 3),
      var(--sunpillar-clr-4) calc(var(--space) * 4),
      var(--sunpillar-clr-5) calc(var(--space) * 5),
      var(--sunpillar-clr-6) calc(var(--space) * 6),
      var(--sunpillar-clr-1) calc(var(--space) * 7)),
    repeating-linear-gradient(var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 0%, 0.1) 12%,
      hsla(0, 0%, 0%, 0.15) 20%,
      hsla(0, 0%, 0%, 0.25) 120%);
  background-position:
    center center,
    0% var(--background-y),
    calc(var(--background-x) + (var(--background-y) * 0.2)) var(--background-y),
    var(--background-x) var(--background-y);
  background-blend-mode: exclusion, hue, hard-light;
  background-size: 33%, 200% 700%, 300% 100%, 200% 100%;
  filter: brightness(calc((var(--pointer-from-center) * 0.3) + 0.35)) contrast(2) saturate(1.5);
}
.card.foil--shinev .card__shine::after {
  content: "";
  background-position:
    center center,
    0% var(--background-y),
    calc((var(--background-x) + (var(--background-y) * 0.2)) * -1) calc(var(--background-y) * -1),
    var(--background-x) var(--background-y);
  background-size: 33%, 200% 400%, 195% 100%, 200% 100%;
  filter: brightness(calc((var(--pointer-from-center) * 0.4) + 0.5)) contrast(1.4) saturate(1.2);
  mix-blend-mode: difference;
}
.card.foil--shinev .card__shine::before {
  content: "";
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 0%,
    hsla(0, 0%, 0%, 0) 40%);
  background-size: cover;
  mix-blend-mode: overlay;
  opacity: 0.75;
}
.card.foil--shinev .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsl(0, 0%, 100%) 0%,
    hsl(320, 5%, 15%) 150%);
  mix-blend-mode: multiply;
  filter: brightness(1.2) contrast(1) saturate(0.7);
  opacity: calc(var(--glare-strength) * var(--pointer-from-center));
}

/* ============================================================
   MATERIAL: SECRET / GOLD — verbatim secret-rare recipe
   ============================================================ */
.card.foil--secret .card__shine {
  --shift: 1px;
  background-image:
    var(--glitter),
    var(--glitter),
    conic-gradient(
      var(--sunpillar-clr-4),
      var(--sunpillar-clr-5),
      var(--sunpillar-clr-6),
      var(--sunpillar-clr-1),
      var(--sunpillar-clr-4)),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(150, 0%, 0%, 0.98) 10%,
      hsla(0, 0%, 95%, 0.15) 90%);
  background-size:
    var(--glittersize) var(--glittersize),
    var(--glittersize) var(--glittersize),
    cover, cover;
  background-position: 45% 45%, 55% 55%, center center, center center;
  background-blend-mode: soft-light, hard-light, overlay;
  mix-blend-mode: color-dodge;
  filter: brightness(calc(0.3 + (var(--pointer-from-center) * 0.3))) contrast(2) saturate(0.75);
}
.card.foil--secret .card__shine::before {
  content: "";
  background-image:
    url("../assets/geometric.png"),
    linear-gradient(45deg, hsl(46, 95%, 50%), hsl(52, 100%, 69%)),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(10, 20%, 90%, 0.95) 10%,
      hsl(0, 0%, 0%) 70%);
  background-size: 33%, cover, cover;
  background-position: center, center, center;
  background-blend-mode: hard-light, multiply;
  mix-blend-mode: lighten;
  filter: brightness(1.25) contrast(1.25) saturate(0.35);
  opacity: 0.8;
}
.card.foil--secret .card__shine::after {
  content: "";
  background-image: var(--glitter);
  background-size: var(--glittersize) var(--glittersize);
  background-position:
    calc(50% - ((var(--shift) * 2) * var(--pointer-from-left)) + var(--shift))
    calc(50% - ((var(--shift) * 2) * var(--pointer-from-top)) + var(--shift));
  filter: brightness(calc((var(--pointer-from-center) * 0.6) + 0.6)) contrast(1.5);
  mix-blend-mode: overlay;
}
.card.foil--secret .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(45, 8%, 80%, 0.3) 0%,
    hsl(22, 15%, 12%) 180%);
  filter: brightness(1.3) contrast(1.5);
  mix-blend-mode: hard-light;
}

/* ============================================================
   MATERIAL: RADIANT — verbatim radiant-holo recipe
   Crosshatch metal bars + pastel-rainbow stripes + glitter
   ============================================================ */
.card.foil--radiant .card__shine {
  --barwidth: 1.2%;
  background-image:
    radial-gradient(farthest-corner ellipse
      at calc(((var(--pointer-x)) * 0.5) + 25%) calc(((var(--pointer-y)) * 0.5) + 25%),
      hsl(0, 0%, 95%) 20%, var(--card-glow) 130%),
    repeating-linear-gradient(45deg,
      hsl(0,0%,10%) 0%, hsl(0,0%,10%) 1%,
      hsl(0,0%,10%) var(--barwidth),
      hsl(0,0%,20%) calc(var(--barwidth) + 0.01%), hsl(0,0%,20%) calc(var(--barwidth) * 2),
      hsl(0,0%,35%) calc(var(--barwidth) * 2 + 0.01%), hsl(0,0%,35%) calc(var(--barwidth) * 3),
      hsl(0,0%,42.5%) calc(var(--barwidth) * 3 + 0.01%), hsl(0,0%,42.5%) calc(var(--barwidth) * 4),
      hsl(0,0%,50%) calc(var(--barwidth) * 4 + 0.01%), hsl(0,0%,50%) calc(var(--barwidth) * 5),
      hsl(0,0%,42.5%) calc(var(--barwidth) * 5 + 0.01%), hsl(0,0%,42.5%) calc(var(--barwidth) * 6),
      hsl(0,0%,35%) calc(var(--barwidth) * 6 + 0.01%), hsl(0,0%,35%) calc(var(--barwidth) * 7),
      hsl(0,0%,20%) calc(var(--barwidth) * 7 + 0.01%), hsl(0,0%,20%) calc(var(--barwidth) * 8),
      hsl(0,0%,10%) calc(var(--barwidth) * 8 + 0.01%), hsl(0,0%,10%) calc(var(--barwidth) * 9),
      hsl(0,0%,0%) calc(var(--barwidth) * 9 + 0.01%), hsl(0,0%,0%) calc(var(--barwidth) * 10)),
    repeating-linear-gradient(-45deg,
      hsl(0,0%,10%) 0%, hsl(0,0%,10%) 1%,
      hsl(0,0%,10%) var(--barwidth),
      hsl(0,0%,20%) calc(var(--barwidth) + 0.01%), hsl(0,0%,20%) calc(var(--barwidth) * 2),
      hsl(0,0%,35%) calc(var(--barwidth) * 2 + 0.01%), hsl(0,0%,35%) calc(var(--barwidth) * 3),
      hsl(0,0%,42.5%) calc(var(--barwidth) * 3 + 0.01%), hsl(0,0%,42.5%) calc(var(--barwidth) * 4),
      hsl(0,0%,50%) calc(var(--barwidth) * 4 + 0.01%), hsl(0,0%,50%) calc(var(--barwidth) * 5),
      hsl(0,0%,42.5%) calc(var(--barwidth) * 5 + 0.01%), hsl(0,0%,42.5%) calc(var(--barwidth) * 6),
      hsl(0,0%,35%) calc(var(--barwidth) * 6 + 0.01%), hsl(0,0%,35%) calc(var(--barwidth) * 7),
      hsl(0,0%,20%) calc(var(--barwidth) * 7 + 0.01%), hsl(0,0%,20%) calc(var(--barwidth) * 8),
      hsl(0,0%,10%) calc(var(--barwidth) * 8 + 0.01%), hsl(0,0%,10%) calc(var(--barwidth) * 9),
      hsl(0,0%,0%) calc(var(--barwidth) * 9 + 0.01%), hsl(0,0%,0%) calc(var(--barwidth) * 10));
  background-size: cover, 210% 210%, 210% 210%;
  background-position:
    center,
    calc(((var(--background-x) - 50%) * 1.5) + 50%) calc(((var(--background-y) - 50%) * 1.5) + 50%),
    calc(((var(--background-x) - 50%) * 1.5) + 50%) calc(((var(--background-y) - 50%) * 1.5) + 50%);
  background-blend-mode: exclusion, darken, color-dodge;
  filter: brightness(0.5) contrast(2) saturate(1.75);
  mix-blend-mode: color-dodge;
}
.card.foil--radiant .card__shine::after {
  content: "";
  --space: 200px;
  background-image:
    url("../assets/trainerbg.png"),
    repeating-linear-gradient(55deg,
      hsl(3, 95%, 85%) calc(var(--space) * 1),
      hsl(207, 100%, 84%) calc(var(--space) * 2),
      hsl(29, 100%, 85%) calc(var(--space) * 3),
      hsl(160, 100%, 86%) calc(var(--space) * 4),
      hsl(309, 94%, 87%) calc(var(--space) * 5),
      hsl(188, 95%, 85%) calc(var(--space) * 6),
      hsl(3, 95%, 85%) calc(var(--space) * 7));
  background-size: 25% auto, 400% 100%;
  background-position: center,
    calc(((var(--background-x) - 50%) * -2.5) + 50%) calc(((var(--background-y) - 50%) * -2.5) + 50%);
  filter: brightness(0.6) contrast(3) saturate(2);
  mix-blend-mode: color-dodge;
  background-blend-mode: difference;
}
.card.foil--radiant .card__shine::before {
  content: "";
  z-index: 2;
  background-image:
    var(--glitter),
    radial-gradient(farthest-corner ellipse at calc(((var(--pointer-x)) * 0.5) + 25%) calc(((var(--pointer-y)) * 0.5) + 25%),
      hsla(0, 0%, 58%, 0.8) 10%,
      hsla(0, 0%, 20%, 0.9) 20%,
      hsla(0, 0%, 20%, 0.5) 50%);
  background-position: center;
  background-size: 15% 15%, 350% 350%;
  background-blend-mode: color-dodge;
  mix-blend-mode: overlay;
  filter: brightness(0.66) contrast(2) saturate(0.5);
}
.card.foil--radiant .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.33) 0%,
    hsl(0, 0%, 25%) 110%);
  filter: brightness(1) contrast(1.5);
  mix-blend-mode: hard-light;
}

/* ============================================================
   MATERIAL: METAL — adapted from amazing rare base
   Glitter + metallic sheen + spotlight
   ============================================================ */
.card.foil--metal .card__shine {
  background-image:
    var(--glitter),
    url("../assets/metal.png"),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 95%, 0.95) 10%,
      hsla(0, 0%, 60%, 0.5) 50%,
      hsl(0, 0%, 5%) 120%);
  background-size: var(--glittersize) var(--glittersize), cover, cover;
  background-position: 45% 45%, center, center;
  background-blend-mode: soft-light, hard-light;
  filter: brightness(1) contrast(1.4) saturate(0.5);
  mix-blend-mode: hard-light;
}
.card.foil--metal .card__shine::after {
  content: "";
  background-image: linear-gradient(115deg,
    transparent 30%,
    hsla(0, 0%, 100%, 0.85) 48%,
    hsla(0, 0%, 100%, 0.4) 52%,
    transparent 70%);
  background-size: 250% 100%;
  background-position: calc((var(--pointer-from-left) - 0.5) * 220% + 50%) center;
  mix-blend-mode: overlay;
}
.card.foil--metal .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 0.9) 5%,
    hsla(0, 0%, 0%, 0.4) 90%);
  filter: brightness(0.95) contrast(1.4);
}

/* ============================================================
   MATERIAL: GLITTER (Amazing Rare) — verbatim
   ============================================================ */
.card.foil--glitter .card__shine {
  background-image:
    var(--glitter),
    var(--glitter),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(150, 20%, 10%, 1) 10%,
      hsla(177, 22%, 80%, 0.1) 50%,
      hsla(0, 0%, 95%, 0.98) 90%);
  background-size: var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover;
  background-position: 40% 45%, 55% 55%, center center;
  background-blend-mode: soft-light, color-burn;
  filter: brightness(1) contrast(1) saturate(0.9);
}
.card.foil--glitter .card__shine::before {
  content: "";
  background-image:
    var(--foil-image),
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(50, 20%, 90%, 0.95) 10%,
      rgba(181, 139, 164, 0.5) 50%,
      hsl(0, 0%, 0%) 60%);
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: color-burn;
  mix-blend-mode: lighten;
  filter: brightness(1) contrast(1) saturate(1);
  opacity: 0.5;
}
.card.foil--glitter .card__shine::after {
  content: "";
  background-image: repeating-linear-gradient(var(--angle),
    var(--sunpillar-clr-1) calc(var(--space) * 1),
    var(--sunpillar-clr-2) calc(var(--space) * 2),
    var(--sunpillar-clr-3) calc(var(--space) * 3),
    var(--sunpillar-clr-4) calc(var(--space) * 4),
    var(--sunpillar-clr-5) calc(var(--space) * 5),
    var(--sunpillar-clr-6) calc(var(--space) * 6),
    var(--sunpillar-clr-1) calc(var(--space) * 7));
  background-size: 400% 800%;
  background-position:
    calc(50% + (50% - var(--background-x)) * 3)
    calc(50% + (50% - var(--background-y)) * 3);
  filter: brightness(calc(0.75 - (var(--pointer-from-center) * 0.5))) contrast(1) saturate(1);
  mix-blend-mode: saturation;
}
.card.foil--glitter .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(0, 0%, 100%, 1) 10%,
    hsla(0, 0%, 100%, 0.85) 20%,
    hsla(0, 0%, 0%, 0.35) 90%);
  mix-blend-mode: multiply;
}

/* ============================================================
   CONTENT TEMPLATES (clean, neutral, text-readable on foils)
   ============================================================ */
.cc {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  box-sizing: border-box;
  font-family: "Inter", system-ui, -apple-system, "PingFang SC", sans-serif;
  --pad: clamp(12px, 6cqi, 22px);
  padding: var(--pad);
  container-type: inline-size;
  position: relative;
}
.cc * { box-sizing: border-box; }

/* shadow readability on bright foils */
.cc__name, .cc__role, .cc__event, .cc__meta, .cc__id, .cc__logo,
.cc__hp, .cc__chip, .cc__stat b, .cc__stat small {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4);
}

.cc__logo {
  font-family: "Inter", sans-serif;
  font-weight: 700; font-size: clamp(11px, 4cqi, 15px);
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 6px;
}
.cc__avatar {
  border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08) center / cover no-repeat;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, 0.55); font-weight: 700;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.65), inset 0 0 0 1px rgba(255, 255, 255, 0.10);
}
/* placeholder avatar — soft accent gradient + bolder letterform when no photo uploaded */
.cc__avatar.is-empty {
  background:
    radial-gradient(120% 120% at 30% 25%,
      color-mix(in srgb, var(--accent) 35%, transparent),
      color-mix(in srgb, var(--accent) 8%, transparent) 60%,
      transparent 100%),
    color-mix(in srgb, var(--text-color) 8%, transparent);
  color: color-mix(in srgb, var(--text-color) 85%, transparent);
  letter-spacing: -0.04em;
  font-weight: 800;
}
.cc__avatar img { width: 100%; height: 100%; object-fit: cover; }
.cc__name { font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.cc__role { color: color-mix(in srgb, var(--text-color) 70%, transparent); font-weight: 500; }
.cc__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font-size: clamp(9px, 3cqi, 11px); font-weight: 600;
}
.cc__qr, .cc__barcode { image-rendering: pixelated; opacity: 0.92; }
.cc__id {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(8px, 2.8cqi, 10px);
  letter-spacing: 0.08em; opacity: 0.7;
}

/* BADGE (conference / event) */
.cc--badge { gap: clamp(8px, 3cqi, 14px); }
.cc--badge .cc__top { display: flex; align-items: center; justify-content: space-between; }
.cc--badge .cc__event {
  font-size: clamp(9px, 3cqi, 11px); letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; opacity: 0.7;
}
.cc--badge .cc__avatar {
  width: clamp(64px, 34cqi, 120px); aspect-ratio: 1;
  margin: clamp(2px, 2cqi, 8px) 0; align-self: flex-start;
}
.cc--badge .cc__avatar.is-empty { font-size: clamp(22px, 12cqi, 40px); }
.cc--badge .cc__name { font-size: clamp(20px, 10cqi, 36px); }
.cc--badge .cc__role { font-size: clamp(12px, 4.4cqi, 17px); margin-top: 2px; }
.cc--badge .cc__meta { font-size: clamp(10px, 3.4cqi, 13px); opacity: 0.6; margin-top: 2px; }
.cc--badge .cc__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.cc--badge .cc__qr { width: clamp(38px, 18cqi, 60px); aspect-ratio: 1; border-radius: 6px; }

/* MEMBER (Arc-style user card, landscape) */
.cc--member { gap: 10px; }
.cc--member .cc__head { display: flex; align-items: center; gap: clamp(10px, 4cqi, 16px); }
.cc--member .cc__avatar { width: clamp(48px, 22cqi, 78px); aspect-ratio: 1; border-radius: 50%; }
.cc--member .cc__namewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc--member .cc__name { font-size: clamp(17px, 7cqi, 27px); }
.cc--member .cc__role { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: clamp(11px, 4cqi, 14px); }
.cc--member .cc__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cc--member .cc__stats { display: flex; gap: clamp(10px, 5cqi, 20px); }
.cc--member .cc__stat { display: flex; flex-direction: column; }
.cc--member .cc__stat b { font-size: clamp(14px, 5cqi, 20px); }
.cc--member .cc__stat small { font-size: clamp(8px, 2.8cqi, 10px); opacity: 0.55; text-transform: uppercase; letter-spacing: 0.08em; }

/* ID CARD (工牌) */
.cc--idcard { gap: 0; padding: 0; }
.cc--idcard .cc__band {
  background: color-mix(in srgb, var(--accent) 55%, var(--card-bg));
  padding: clamp(10px, 4cqi, 16px) var(--pad);
  display: flex; align-items: center; justify-content: space-between;
}
.cc--idcard .cc__body {
  padding: var(--pad); display: flex; flex-direction: column;
  gap: clamp(6px, 2.5cqi, 12px); flex: 1; align-items: center; text-align: center;
}
.cc--idcard .cc__avatar {
  width: clamp(70px, 38cqi, 128px); aspect-ratio: 0.82;
  border-radius: 10px; margin-top: clamp(4px, 2cqi, 10px);
}
.cc--idcard .cc__name { font-size: clamp(18px, 9cqi, 32px); }
.cc--idcard .cc__role { font-size: clamp(11px, 4cqi, 15px); }
.cc--idcard .cc__foot {
  margin-top: auto; width: 100%; padding: var(--pad);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.cc--idcard .cc__barcode { width: 78%; height: clamp(22px, 9cqi, 38px); }

/* TRADING CARD (Pokémon-style) */
.cc--trading { padding: clamp(8px, 3cqi, 12px); gap: 8px; }
.cc--trading .cc__top {
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--card-bg) 40%, #000 10%);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 6px 11px;
}
.cc--trading .cc__name { font-size: clamp(14px, 6cqi, 22px); }
.cc--trading .cc__hp { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: clamp(12px, 5cqi, 18px); color: var(--accent2); }
.cc--trading .cc__art {
  flex: 1; border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, 0.06) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  display: grid; place-items: center; color: rgba(255, 255, 255, 0.4); font-size: 30px;
}
.cc--trading .cc__art img { width: 100%; height: 100%; object-fit: cover; }
.cc--trading .cc__desc {
  background: color-mix(in srgb, var(--card-bg) 35%, #000 12%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px;
  padding: 8px 11px; font-size: clamp(9px, 3.4cqi, 12px); line-height: 1.4; opacity: 0.88;
}
.cc--trading .cc__foot { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }