/* ==========================================================================
   SIGHTQUEST TCG HOLOGRAPHIC & SPARKLE SHADERS
   3 Finish Tiers: standard (75%), glanz / holo (20%), glitzer / sparkle (5%)
   Driven by pointer/gyro CSS variables: --mx, --my, --rx, --ry, --hyp
   ========================================================================== */

.sq-card-shader-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  border-radius: inherit;
  overflow: hidden;
}

/* 1. STANDARD FINISH: Dynamic spotlight glare on tilt */
.sq-tcg-card[data-finish="standard"] .sq-card-shader-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0.12) 32%,
    transparent 65%
  );
  mix-blend-mode: screen;
  opacity: 0.88;
}

/* 2. GLANZEFFEKT (HOLO FOIL): Rainbow diffraction streaks shifting with tilt */
.sq-tcg-card[data-finish="glanz"] .sq-card-shader-layer::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(255, 0, 128, 0.45) 0%,
      rgba(255, 204, 0, 0.45) 14%,
      rgba(0, 255, 180, 0.45) 28%,
      rgba(0, 180, 255, 0.48) 42%,
      rgba(170, 80, 255, 0.48) 56%,
      rgba(255, 0, 128, 0.45) 70%
    ),
    radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.72) 0%,
      transparent 55%
    );
  background-size: 260% 260%, 100% 100%;
  background-position: var(--mx, 50%) var(--my, 50%), center;
  mix-blend-mode: color-dodge;
  opacity: 0.82;
  transition: background-position 0.08s linear;
}

.sq-tcg-card[data-finish="glanz"] .sq-card-shader-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 20%,
    rgba(255, 255, 255, 0.48) 46%,
    rgba(56, 189, 248, 0.42) 50%,
    transparent 76%
  );
  background-size: 220% 220%;
  background-position: var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* 3. GLITZEREFFEKT (COSMOS SPARKLE FOIL): Prismatic Holo + Twinkling Starfield */
.sq-tcg-card[data-finish="glitzer"] .sq-card-shader-layer::before {
  content: "";
  position: absolute;
  inset: -15%;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0px, transparent 3px),
    radial-gradient(circle at 76% 16%, rgba(253, 224, 71, 0.95) 0px, transparent 4px),
    radial-gradient(circle at 42% 48%, rgba(255, 255, 255, 0.9) 0px, transparent 3px),
    radial-gradient(circle at 84% 58%, rgba(56, 189, 248, 0.95) 0px, transparent 4px),
    radial-gradient(circle at 26% 72%, rgba(244, 114, 182, 0.95) 0px, transparent 4px),
    radial-gradient(circle at 64% 82%, rgba(255, 255, 255, 0.95) 0px, transparent 3px),
    radial-gradient(circle at 52% 28%, rgba(253, 224, 71, 0.9) 0px, transparent 3.5px),
    radial-gradient(circle at 14% 52%, rgba(56, 189, 248, 0.9) 0px, transparent 3.5px),
    repeating-conic-gradient(
      from 0deg at var(--mx, 50%) var(--my, 50%),
      rgba(255, 60, 172, 0.34) 0deg,
      rgba(255, 215, 0, 0.34) 60deg,
      rgba(0, 245, 212, 0.34) 120deg,
      rgba(56, 189, 248, 0.34) 180deg,
      rgba(168, 85, 247, 0.34) 240deg,
      rgba(255, 60, 172, 0.34) 360deg
    );
  background-size:
    130px 130px,
    150px 150px,
    110px 110px,
    170px 170px,
    140px 140px,
    120px 120px,
    160px 160px,
    125px 125px,
    200% 200%;
  background-position: var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: color-dodge;
  opacity: 0.85;
  animation: sparkleTwinkle 3.2s infinite alternate ease-in-out;
}

.sq-tcg-card[data-finish="glitzer"] .sq-card-shader-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 250, 200, 0.55) 0%,
    rgba(236, 72, 153, 0.25) 35%,
    transparent 68%
  );
  mix-blend-mode: screen;
}

@keyframes sparkleTwinkle {
  0% { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(45deg) brightness(1.22); }
}