/* ══════════════════════════════════════════
   HOLOGRAPHIC EFFECTS
   Adapted from simeydotme/pokemon-cards-css
   ══════════════════════════════════════════ */

/* ── Pet Card Container (3D tilt system) ── */
.pet-card {
  transform: translate3d(0px, 0px, 0.01px);
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}

.pet-card,
.pet-card * {
  outline: 1px solid transparent;
}

.pet-card__translater {
  display: grid;
  perspective: 600px;
  will-change: transform, box-shadow;
  transform-origin: center;
  transform-style: preserve-3d;
  transform:
    translate3d(var(--translate-x), var(--translate-y), 0.01px)
    scale(var(--card-scale));
  transition: transform 0.15s ease-out;
}

.pet-card__rotator {
  display: grid;
  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  transform-style: preserve-3d;
  border-radius: 24px;
  transition: box-shadow 0.4s ease, transform 0.1s ease-out;
  position: relative;
}

/* ── Glow box-shadow (idle state) ── */
.pet-card__rotator {
  box-shadow:
    0 0 3px -1px transparent,
    0 0 2px 1px transparent,
    0 0 5px 0px transparent,
    0px 10px 20px -5px hsla(0, 0%, 0%, 0.4),
    0 2px 15px -5px hsla(0, 0%, 0%, 0.3),
    0 0 20px 0px transparent;
}

/* ── Glow box-shadow (active/hover) — subtler ── */
.pet-card.active .pet-card__rotator,
.pet-card__rotator:hover {
  box-shadow:
    0 0 3px -1px white,
    0 0 3px 1px hsl(47, 100%, 78%),
    0 0 10px 2px var(--pet-glow),
    0px 10px 20px -5px hsla(0, 0%, 0%, 0.4),
    0 0 30px -15px var(--pet-glow);
}

/* ── Shared grid stacking for layers ── */
.pet-card__rotator > * {
  grid-area: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  transform-style: preserve-3d;
}

/* ── Scene layer (the pet + environment) ── */
.pet-card__scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
}

/* ══════════════════════════════════════════
   SHINE LAYER — Holographic rainbow
   ══════════════════════════════════════════ */
.pet-card__shine {
  z-index: 3;
  opacity: 0;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.4s ease;

  /* Base shine: repeating rainbow gradient */
  background-image:
    repeating-linear-gradient(
      110deg,
      var(--holo-violet),
      var(--holo-blue),
      var(--holo-green),
      var(--holo-yellow),
      var(--holo-red),
      var(--holo-violet),
      var(--holo-blue),
      var(--holo-green),
      var(--holo-yellow),
      var(--holo-red),
      var(--holo-violet),
      var(--holo-blue),
      var(--holo-green),
      var(--holo-yellow),
      var(--holo-red)
    ),
    /* Scanline overlay */
    repeating-linear-gradient(
      90deg,
      hsla(0, 0%, 0%, 0.7) 0px,
      hsla(0, 0%, 0%, 0.7) 1px,
      hsla(0, 0%, 50%, 0.5) 1px,
      hsla(0, 0%, 50%, 0.5) 2px
    );

  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) contrast(1.2) saturate(1.1);
  mix-blend-mode: color-dodge;
}

/* Active state — show shine (subtler) */
.pet-card.active .pet-card__shine {
  opacity: calc(var(--card-opacity, 0.5) * 0.7);
}

/* Shine :: before — light bar streaks */
.pet-card__shine::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background-image:
    repeating-linear-gradient(
      90deg,
      hsla(0, 0%, 0%, 1) 6%,
      hsla(0, 0%, 70%, 1) 9%,
      hsla(0, 0%, 0%, 1) 10.5%,
      hsla(0, 0%, 70%, 1) 12%,
      hsla(0, 0%, 0%, 1) 15%,
      hsla(0, 0%, 0%, 1) 42%
    ),
    repeating-linear-gradient(
      90deg,
      hsla(0, 0%, 0%, 1) 6%,
      hsla(0, 0%, 70%, 1) 9%,
      hsla(0, 0%, 0%, 1) 10.5%,
      hsla(0, 0%, 70%, 1) 12%,
      hsla(0, 0%, 0%, 1) 15%,
      hsla(0, 0%, 0%, 1) 30%
    );

  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;
}

/* Shine :: after — radial highlight (spotlight) */
.pet-card__shine::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;

  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%
    );

  background-position: center center;
  background-size: cover;
  mix-blend-mode: luminosity;
  filter: brightness(0.6) contrast(4);
}

/* ══════════════════════════════════════════
   GLARE LAYER — Specular highlight
   ══════════════════════════════════════════ */
.pet-card__glare {
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;

  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 100%, 0.75) 10%,
      hsla(0, 0%, 100%, 0.55) 20%,
      hsla(0, 0%, 0%, 0.4) 90%
    );

  mix-blend-mode: overlay;
  filter: brightness(0.9) contrast(1.5);
}

.pet-card.active .pet-card__glare {
  opacity: calc(var(--pointer-from-center, 0) * 0.45);
}

/* ══════════════════════════════════════════
   RARITY TIERS — unlock better effects
   ══════════════════════════════════════════ */

/* Tier 0: Common (bad care) — no effects */
.pet-card[data-rarity="common"] .pet-card__shine,
.pet-card[data-rarity="common"] .pet-card__glare {
  display: none;
}

/* Tier 1: Uncommon — subtle scanlines only */
.pet-card[data-rarity="uncommon"] .pet-card__shine {
  filter: brightness(0.6) contrast(0.8) saturate(0.3);
}

/* Tier 2: Rare Holo — full rainbow (default styles above) */

/* Tier 3: Secret Rare — rainbow + enhanced brightness */
.pet-card[data-rarity="secret"].active .pet-card__shine {
  filter: brightness(1.2) contrast(1.3) saturate(1.2);
  opacity: calc(var(--card-opacity, 0.5) * 0.9);
}

.pet-card[data-rarity="secret"].active .pet-card__glare {
  opacity: calc(var(--pointer-from-center, 0) * 0.6);
}

.pet-card[data-rarity="secret"].active .pet-card__rotator {
  box-shadow:
    0 0 6px -1px white,
    0 0 6px 2px hsl(47, 100%, 78%),
    0 0 25px 5px var(--pet-glow),
    0px 12px 30px -5px hsla(0, 0%, 0%, 0.5),
    0 0 70px -20px var(--pet-glow),
    0 0 90px -10px var(--pet-glow);
}

/* Tier 4: Cosmic — full rainbow + conic sunpillars */
.pet-card[data-rarity="cosmic"].active .pet-card__shine {
  background-image:
    conic-gradient(
      from 0deg at var(--pointer-x) var(--pointer-y),
      var(--sunpillar-1),
      var(--sunpillar-2),
      var(--sunpillar-3),
      var(--sunpillar-4),
      var(--sunpillar-5),
      var(--sunpillar-6),
      var(--sunpillar-1)
    ),
    repeating-linear-gradient(
      110deg,
      var(--holo-violet),
      var(--holo-blue),
      var(--holo-green),
      var(--holo-yellow),
      var(--holo-red),
      var(--holo-violet),
      var(--holo-blue),
      var(--holo-green),
      var(--holo-yellow),
      var(--holo-red)
    );

  background-blend-mode: overlay;
  background-size: cover, 400% 400%;
  filter: brightness(1.2) contrast(1.4) saturate(1.3);
  opacity: calc(var(--card-opacity, 0.5) * 1.1);
}

.pet-card[data-rarity="cosmic"].active .pet-card__rotator {
  box-shadow:
    0 0 8px -1px white,
    0 0 8px 2px hsl(47, 100%, 85%),
    0 0 35px 8px var(--pet-glow),
    0px 15px 35px -5px hsla(0, 0%, 0%, 0.5),
    0 0 90px -15px var(--pet-glow),
    0 0 120px -5px var(--pet-glow);
  animation: cosmic-pulse 3s ease-in-out infinite;
}

@keyframes cosmic-pulse {
  0%, 100% {
    box-shadow:
      0 0 8px -1px white,
      0 0 8px 2px hsl(47, 100%, 85%),
      0 0 35px 8px var(--pet-glow),
      0px 15px 35px -5px hsla(0, 0%, 0%, 0.5),
      0 0 90px -15px var(--pet-glow),
      0 0 120px -5px var(--pet-glow);
  }
  50% {
    box-shadow:
      0 0 10px 0px white,
      0 0 10px 3px hsl(47, 100%, 85%),
      0 0 45px 12px var(--pet-glow),
      0px 15px 35px -5px hsla(0, 0%, 0%, 0.5),
      0 0 110px -10px var(--pet-glow),
      0 0 150px 0px var(--pet-glow);
  }
}

/* ══════════════════════════════════════════
   CLICK BURST — flash on pet click
   ══════════════════════════════════════════ */
.pet-card__burst {
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--pointer-x) var(--pointer-y),
    hsla(45, 100%, 85%, 0.9) 0%,
    hsla(45, 100%, 70%, 0.3) 30%,
    transparent 60%
  );
  transition: opacity 0.1s ease;
}

.pet-card__burst.flash {
  opacity: 1;
  animation: burst-fade 0.4s ease-out forwards;
}

@keyframes burst-fade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}