/* Shared card visual effects for tiles (collection grid) and pack slots
   (landing). Two effects:
   1. Shiny: iridescent conic base + sparkle twinkle field, anchored per
      element (--shiny-ax/--shiny-ay) and tracking the cursor on hover
      (--tilt-mx/--tilt-my). Twinkle phase (--shiny-twinkle-dur/-delay)
      seeded in JS so neighbors never flash in unison.
   2. Tilt: pointer-following rotateX/rotateY transform with translateZ.
      JS sets --tilt-x, --tilt-y, --tilt-mx, --tilt-my and toggles
      .is-tilting on pointerenter/leave. */

.gc-tile.is-shiny,
.slot.revealed.is-shiny .slot-front {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tile-rarity, #cdb6ff) 45%, transparent),
    0 0 16px -4px color-mix(in srgb, var(--tile-rarity, #cdb6ff) 35%, transparent);
}

.gc-tile.is-shiny::before,
.slot.revealed.is-shiny .slot-front::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--tilt-mx, var(--shiny-ax, 30%)) var(--tilt-my, var(--shiny-ay, 30%)),
      rgba(255,255,255,.35) 0%, transparent 42%),
    conic-gradient(from var(--shiny-from, 200deg)
      at var(--tilt-mx, var(--shiny-ax, 30%)) var(--tilt-my, var(--shiny-ay, 30%)),
      rgba(255, 80,180,.55),
      rgba(124,107,240,.55) 25%,
      rgba( 76,222,130,.55) 50%,
      rgba(241,196,15,.55) 75%,
      rgba(255, 80,180,.55));
  mix-blend-mode: screen;
  opacity: 0.28;
  transition: opacity .35s ease;
}

.gc-tile.is-shiny::after,
.slot.revealed.is-shiny .slot-front::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
  background-image:
    radial-gradient(circle 1.5px at 14% 18%, rgba(255,255,255,.95), transparent 75%),
    radial-gradient(circle 1px   at 78% 11%, rgba(255,255,255,.85), transparent 75%),
    radial-gradient(circle 2px   at 38% 56%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(circle 1.2px at 88% 64%, rgba(255,255,255,.85), transparent 75%),
    radial-gradient(circle 1.5px at 24% 81%, rgba(255,255,255,.90), transparent 72%),
    radial-gradient(circle 1px   at 61% 36%, rgba(255,255,255,.85), transparent 75%),
    radial-gradient(circle 1.2px at 8%  46%, rgba(255,255,255,.85), transparent 75%),
    radial-gradient(circle 1.8px at 92% 30%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(circle 1px   at 52% 89%, rgba(255,255,255,.80), transparent 75%),
    radial-gradient(circle 1.4px at 33% 6%,  rgba(255,255,255,.90), transparent 72%),
    radial-gradient(circle 1px   at 70% 76%, rgba(255,255,255,.80), transparent 75%);
  mix-blend-mode: screen;
  opacity: 0.45;
  animation: shiny-twinkle var(--shiny-twinkle-dur, 3.2s) ease-in-out infinite;
  animation-delay: var(--shiny-twinkle-delay, 0s);
  will-change: opacity, transform;
}

.gc-tile.is-shiny.is-tilting::before,
.slot.revealed.is-shiny.is-tilting .slot-front::before { opacity: 0.9; }

.gc-tile.is-shiny.is-tilting::after,
.slot.revealed.is-shiny.is-tilting .slot-front::after { opacity: 0.85; }

.gc-tile.is-shiny.is-tilting,
.slot.revealed.is-shiny.is-tilting .slot-front {
  box-shadow:
    0 0 0 1px var(--tile-rarity, #cdb6ff),
    0 0 26px -4px color-mix(in srgb, var(--tile-rarity, #cdb6ff) 55%, transparent);
}

@keyframes shiny-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .gc-tile.is-shiny::after,
  .slot.revealed.is-shiny .slot-front::after { animation: none; opacity: 0.5; }
}

/* ── Hover tilt (shared) ────────────────────────────────────────── */

.gc-tile.is-tilting,
.slot.revealed.is-tilting {
  transition: transform 80ms linear, border-color 140ms, box-shadow 240ms;
  transform:
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg))
    translateZ(10px);
  z-index: 1;
}

.gc-tile.is-tilting {
  border-color: var(--tile-rarity);
}

@media (prefers-reduced-motion: reduce) {
  .gc-tile.is-tilting,
  .slot.revealed.is-tilting { transform: none; }
}