/* cosmo-cards-holo.css — Holographic effects (reduced intensity R2)
   Key principle: cat photo is HERO. Holo = thin film on glass.
   Idle = very subtle. Hover/touch = slightly stronger.
   filter values kept LOW to prevent image burn from color-dodge.
*/

/* ============================================================
   SHARED VARIABLES & TEXTURE REPLACEMENTS
   ============================================================ */
.cosmo-card {
  --glitter: url("../img/holo/glitter.png");
  --glittersize: 25%;
  --foil: repeating-linear-gradient(105deg, transparent 0%, transparent 2%, rgba(255,255,255,0.03) 2%, rgba(255,255,255,0.03) 3%);
  --cosmos-bottom: url("../img/holo/cosmos-bottom.png");
  --cosmos-middle: url("../img/holo/cosmos-middle.png");
  --cosmos-top: url("../img/holo/cosmos-top.png");
  --sunpillar-clr-1: hsl(2, 100%, 73%);
  --sunpillar-clr-2: hsl(53, 100%, 69%);
  --sunpillar-clr-3: hsl(93, 100%, 69%);
  --sunpillar-clr-4: hsl(176, 100%, 76%);
  --sunpillar-clr-5: hsl(228, 100%, 74%);
  --sunpillar-clr-6: hsl(283, 100%, 73%);
  --violet: #7b2ff7;
  --blue: #2196f3;
  --green: #4caf50;
  --yellow: #ffc107;
  --red: #f44336;
  --card-glow: hsl(55, 100%, 50%);
  --angle: 110deg;
  --imgsize: cover;
}

/* ============================================================
   HOLO FILM — isolated layer that sits ON TOP of the img.
   isolation:isolate creates a new stacking context so all
   internal blend modes (color-dodge, overlay, etc.) only
   interact with each other inside the film, never with the
   cat photo pixels. The film itself blends with the image
   below via mix-blend-mode:screen + controlled opacity.
   Result: rainbow light plays on the surface, photo colors
   stay true underneath.
   ============================================================ */

.cosmo-card__holo-film {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;

  /* THE KEY: isolate so internal blends don't leak to img */
  isolation: isolate;

  /* How the film composites onto the image below */
  mix-blend-mode: screen;

  /* Near-invisible "vinyl film" base for internal blends to work against */
  background: rgba(0, 0, 0, 0.01);

  transition: opacity 0.3s ease;
}

/* Per-rarity film opacity: barely visible idle, slightly stronger on hover.
   Cat photo must be 100% clear — rainbow only as fine lines at tilted angles. */
.cosmo-card[data-rarity="common"] .cosmo-card__holo-film   { opacity: calc(0.08 + var(--card-opacity) * 0.05); }
.cosmo-card[data-rarity="rare"] .cosmo-card__holo-film      { opacity: calc(0.15 + var(--card-opacity) * 0.08); }
.cosmo-card[data-rarity="ultra_rare"] .cosmo-card__holo-film { opacity: calc(0.28 + var(--card-opacity) * 0.15); }
.cosmo-card[data-rarity="secret_rare"] .cosmo-card__holo-film { opacity: calc(0.40 + var(--card-opacity) * 0.15); }

/* Shared base for shine/glare inside the film */
.cosmo-card__shine,
.cosmo-card__shine::before,
.cosmo-card__shine::after,
.cosmo-card__glare,
.cosmo-card__glare::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.cosmo-card__shine { z-index: 1; }
.cosmo-card__shine::before,
.cosmo-card__shine::after { content: ""; display: block; }
.cosmo-card__glare { z-index: 2; pointer-events: none; }
.cosmo-card__glare::after { content: ""; display: block; }


/* ============================================================
   COMMON — Regular Holo
   Idle opacity ~0.3, hover ~0.4
   ============================================================ */

.cosmo-card[data-rarity="common"] .cosmo-card__shine {
  --scanlines-space: 0.5px;
  --bars: 1.5%;
  --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,
      black calc(var(--scanlines-space) * 0), black calc(var(--scanlines-space) * 2),
      #666 calc(var(--scanlines-space) * 2), #666 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: 800% 800%, cover;
  background-blend-mode: overlay;
  filter: brightness(1.02) contrast(1.02) saturate(1.05);
  mix-blend-mode: color-dodge;
}

.cosmo-card[data-rarity="common"] .cosmo-card__shine::before {
  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.05) contrast(1.05);
  mix-blend-mode: hard-light;
}

.cosmo-card[data-rarity="common"] .cosmo-card__shine::after {
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 90%, 0.5) 0%,
      hsla(0, 0%, 78%, 0.05) 25%,
      hsl(0, 0%, 0%) 90%
    );
  background-size: cover;
  mix-blend-mode: luminosity;
  filter: brightness(0.7) contrast(2);
}

@media screen and (max-width: 900px) {
  .cosmo-card[data-rarity="common"] .cosmo-card__shine { --scanlines-space: 0; }
}

.cosmo-card[data-rarity="common"] .cosmo-card__glare {
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(180, 100%, 95%) 5%,
      hsla(0, 0%, 39%, 0.15) 55%,
      hsla(0, 0%, 0%, 0.2) 110%
    );
  opacity: calc(0.3 + var(--card-opacity) * 0.4);
  filter: brightness(0.9) contrast(1.2);
  mix-blend-mode: overlay;
}

.cosmo-card[data-rarity="common"] .cosmo-card__glare::after {
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(180, 100%, 95%) 5%,
      hsla(0, 0%, 39%, 0.15) 55%,
      hsla(0, 0%, 0%, 0.2) 110%
    );
  mix-blend-mode: overlay;
  filter: brightness(0.8) contrast(1.5);
}


/* ============================================================
   RARE — Cosmos Holo
   Idle opacity ~0.35, hover ~0.45
   ============================================================ */

.cosmo-card[data-rarity="rare"] .cosmo-card__shine {
  --space: 4%;
  background-image:
    var(--cosmos-bottom),
    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.3) 5%, hsla(180,14%,57%,0.15) 40%, hsl(0,0%,0%) 130%
    );
  background-blend-mode: color-burn, multiply;
  background-position:
    center center,
    calc(10% + (var(--pointer-from-left) * 80%)) calc(10% + (var(--pointer-from-top) * 80%)),
    center center;
  background-size: cover, 400% 900%, cover;
  filter: brightness(1.1) contrast(1.2) saturate(0.9);
  mix-blend-mode: color-dodge;
}

.cosmo-card[data-rarity="rare"] .cosmo-card__shine::before {
  z-index: 2;
  background-image:
    var(--cosmos-middle),
    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:
    center center,
    calc(15% + (var(--pointer-from-left) * 70%)) calc(15% + (var(--pointer-from-top) * 70%)),
    center center;
  background-size: cover, 400% 900%, cover;
  filter: brightness(1.1) contrast(1.2) saturate(0.9);
  mix-blend-mode: overlay;
}

.cosmo-card[data-rarity="rare"] .cosmo-card__shine::after {
  z-index: 3;
  background-image:
    var(--cosmos-top),
    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:
    center center,
    calc(20% + (var(--pointer-from-left) * 60%)) calc(20% + (var(--pointer-from-top) * 60%)),
    center center;
  background-size: cover, 400% 900%, cover;
  filter: brightness(1.1) contrast(1.2) saturate(0.9);
  mix-blend-mode: multiply;
}

.cosmo-card[data-rarity="rare"] .cosmo-card__glare {
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(204,100%,95%,0.5) 5%, hsla(250,15%,20%,0.6) 150%
    );
  filter: brightness(0.85) contrast(1.3) saturate(1.2);
  mix-blend-mode: overlay;
  opacity: calc(0.3 + var(--card-opacity) * 0.4);
}

.cosmo-card[data-rarity="rare"] .cosmo-card__glare::after {
  background-image:
    radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(280,100%,96%) 5%, hsl(0,0%,10%) 60%
    );
  filter: brightness(0.85) contrast(1.5) saturate(1.2);
  mix-blend-mode: soft-light;
  opacity: calc(0.2 + var(--card-opacity) * 0.3);
}


/* ============================================================
   ULTRA RARE — Radiant Holo
   Idle opacity ~0.4, hover ~0.55
   ============================================================ */

.cosmo-card[data-rarity="ultra_rare"] .cosmo-card__shine {
  --space: 6%;
  --angle: 133deg;
  background-image:
    url("../img/holo/vmaxbg.jpg"),
    repeating-linear-gradient(-33deg,
      hsl(2, 70%, 47%) calc(var(--space)*1),
      hsl(228, 60%, 64%) calc(var(--space)*2),
      hsl(176, 55%, 39%) calc(var(--space)*3),
      hsl(123, 68%, 35%) calc(var(--space)*4),
      hsl(283, 75%, 57%) calc(var(--space)*5),
      hsl(2, 70%, 47%) calc(var(--space)*6)),
    repeating-linear-gradient(var(--angle),
      hsla(227, 53%, 12%, 0.5) 0%,
      hsl(180, 10%, 50%) 2.5%,
      hsl(83, 50%, 35%) 5%,
      hsl(180, 10%, 50%) 7.5%,
      hsla(227, 53%, 12%, 0.5) 10%,
      hsla(227, 53%, 12%, 0.5) 15%),
    radial-gradient(farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsla(189, 76%, 77%, 0.6) 0%,
      hsla(147, 59%, 77%, 0.6) 25%,
      hsla(271, 55%, 69%, 0.6) 50%,
      hsla(355, 56%, 72%, 0.6) 75%);
  background-blend-mode: difference, luminosity, soft-light;
  background-size: 60% 30%, 1100% 1100%, 600% 600%, 200% 200%;
  background-position:
    center,
    calc(var(--pointer-from-left, 0.5) * 100%) calc(var(--pointer-from-top, 0.5) * 100%),
    calc(var(--pointer-from-left, 0.5) * 100%) calc(var(--pointer-from-top, 0.5) * 100%),
    calc(var(--pointer-from-left, 0.5) * 100%) calc(var(--pointer-from-top, 0.5) * 100%);
  filter: brightness(calc((var(--pointer-from-center, 0.5) * 0.4) + 0.5)) contrast(1.8) saturate(1.1);
}

.cosmo-card[data-rarity="ultra_rare"] .cosmo-card__shine::after {
  content: "";
  background-image:
    repeating-linear-gradient(0deg,
      hsl(2, 100%, 73%) calc(var(--space)*1),
      hsl(53, 100%, 69%) calc(var(--space)*2),
      hsl(93, 100%, 69%) calc(var(--space)*3),
      hsl(176, 100%, 76%) calc(var(--space)*4),
      hsl(228, 100%, 74%) calc(var(--space)*5),
      hsl(283, 100%, 73%) calc(var(--space)*6),
      hsl(2, 100%, 73%) 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%);
  background-blend-mode: hue, hard-light;
  background-size: 200% 700%, 300% 100%;
  background-position:
    0% calc(var(--pointer-from-top, 0.5) * 100%),
    calc(var(--pointer-from-left, 0.5) * 100%) calc(var(--pointer-from-top, 0.5) * 100%);
  mix-blend-mode: lighten;
  opacity: calc(0.35 + var(--card-opacity, 1) * var(--pointer-from-center, 0.5) * 0.4);
  filter: saturate(1.4);
}

.cosmo-card[data-rarity="ultra_rare"] .cosmo-card__shine::before {
  content: "";
  background-image:
    url("../img/holo/glitter.png"),
    radial-gradient(farthest-corner circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
      hsl(0, 0%, 100%) 0%,
      hsla(0, 0%, 0%, 0) 40%);
  background-size: 25%, cover;
  background-position: center, center;
  mix-blend-mode: overlay;
  opacity: 0.6;
  z-index: 1;
}

.cosmo-card[data-rarity="ultra_rare"] .cosmo-card__glare {
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0,0%,100%,0.2) 0%, hsl(0,0%,25%) 110%
    );
  filter: brightness(1) contrast(1.2);
  mix-blend-mode: hard-light;
  opacity: calc(0.3 + var(--card-opacity) * 0.4);
}


/* ============================================================
   SECRET RARE — Full Prismatic
   Idle opacity ~0.5, hover ~0.65
   Most vivid, but photo still clearly visible
   ============================================================ */

/* Secret Rare shine: thin prismatic film — cat photo must be fully visible.
   Key fixes vs R2: radial gradient alphas slashed, no saturation blend on ::after,
   overall opacity capped at 0.4, filter values gentle. */

.cosmo-card[data-rarity="secret_rare"] .cosmo-card__shine {
  background-image:
    var(--glitter),
    var(--glitter),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(150,20%,10%,0.15) 10%, hsla(177,22%,80%,0.03) 50%, hsla(0,0%,95%,0.08) 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, soft-light;
  filter: brightness(1) contrast(1) saturate(1);
  mix-blend-mode: color-dodge;
  animation: secretIdle 6s ease-in-out infinite;
}

@keyframes secretIdle {
  0%   { background-position: 40% 45%, 55% 55%, center center; }
  50%  { background-position: 45% 40%, 50% 60%, center center; }
  100% { background-position: 40% 45%, 55% 55%, center center; }
}

.cosmo-card[data-rarity="secret_rare"] .cosmo-card__shine::before {
  background-image:
    var(--foil),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(50,20%,90%,0.15) 10%, rgba(181,139,164,0.08) 50%, hsla(0,0%,0%,0.1) 60%
    );
  background-size: cover, cover;
  background-position: center center, center center;
  background-blend-mode: screen;
  mix-blend-mode: overlay;
  filter: brightness(1) contrast(1) saturate(1);
  opacity: 0.25;
}

.cosmo-card[data-rarity="secret_rare"] .cosmo-card__shine::after {
  --space: 5%;
  background-image:
    repeating-linear-gradient(
      calc(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(1) contrast(1) saturate(0.8);
  mix-blend-mode: color-dodge;
  opacity: calc(0.15 + var(--card-opacity) * 0.1);
}

/* Gold base overlay — inside holo-film via ::after on the film itself */
.cosmo-card[data-rarity="secret_rare"] .cosmo-card__holo-film::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from var(--angle) at var(--pointer-x) var(--pointer-y),
    hsl(48,100%,50%), hsl(43,100%,45%), hsl(48,100%,60%), hsl(48,100%,50%)
  );
  mix-blend-mode: color-dodge;
  opacity: 0.15;
  pointer-events: none;
  z-index: 3;
}

.cosmo-card[data-rarity="secret_rare"] .cosmo-card__glare {
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(50,20%,90%,0.2) 0%, hsla(150,20%,30%,0.1) 45%, transparent 120%
    );
  filter: none;
  mix-blend-mode: overlay;
  opacity: calc(0.3 + var(--card-opacity) * 0.4);
}

.cosmo-card[data-rarity="secret_rare"] .cosmo-card__glare::after {
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(50,20%,90%,0.3) 0%, hsla(150,20%,30%,0.15) 45%, transparent 90%
    );
  filter: none;
  mix-blend-mode: overlay;
  opacity: calc(0.2 + var(--card-opacity) * 0.3);
}


/* ============================================================
   CARD BACK — No holo, light reflection only
   ============================================================ */

/* Card back — light glare only, zero holo */
.cosmo-card__back .cosmo-card__shine,
.cosmo-card__back .cosmo-card__shine::before,
.cosmo-card__back .cosmo-card__shine::after {
  display: none;
}
.cosmo-card__back .cosmo-card__glare {
  background-image: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    rgba(255,255,255,0.12) 0%, transparent 55%
  );
  mix-blend-mode: overlay;
  opacity: 0.7;
  filter: none;
}
.cosmo-card__back .cosmo-card__glare::after { display: none; }