/* Hoshi TCG — foil holographique « Afterglow » : gradient conique arc-en-ciel, mix-blend screen.
   Variables pilotées par le JS : --px/--py (position du reflet), --rx/--ry (tilt), --holo (0→1, = foilOp). */

.holo {
  --px: 50%; --py: 50%; --rx: 0deg; --ry: 0deg; --holo: 0;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 260ms var(--ease-out), box-shadow 300ms var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}
.holo.grabbed { transition: transform 90ms linear; }

/* Foil conique Afterglow — le même gradient pour tous, l'intensité (--holo) dépend de la rareté. */
.holo-foil {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from 200deg at 50% 40%,
    rgba(255, 150, 200, 0.3), rgba(150, 220, 255, 0.3), rgba(255, 240, 160, 0.25),
    rgba(190, 150, 255, 0.3), rgba(255, 150, 200, 0.3));
  background-size: 230% 230%;
  background-position: var(--px) var(--py);
  mix-blend-mode: screen;
  opacity: var(--holo);
  transition: opacity 260ms ease;
}
/* Reflet blanc doux qui suit le curseur */
.holo-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  mix-blend-mode: screen; opacity: calc(var(--holo) * 0.5 + 0.06);
  background: radial-gradient(circle at var(--px) var(--py),
    rgba(220, 235, 255, 0.4) 0%, rgba(220, 235, 255, 0.05) 34%, transparent 55%);
  transition: opacity 260ms ease;
}

/* Lueur portée sous la carte, à l'intensité de la rareté (glow Afterglow) */
.holo.lit.t-s { box-shadow: 0 0 34px rgba(240, 171, 252, 0.6), 0 0 70px rgba(240, 171, 252, 0.28); }
.holo.lit.t-a { box-shadow: 0 0 22px rgba(232, 194, 104, 0.55); }
.holo.lit.t-b { box-shadow: 0 0 18px rgba(179, 148, 224, 0.5); }
.holo.lit.t-c { box-shadow: 0 0 16px rgba(130, 180, 232, 0.4); }
.holo.lit.t-d { box-shadow: 0 0 14px rgba(143, 214, 165, 0.32); }

/* Burst mythique one-shot à la révélation d'une S (rose) — événement rare, pas une boucle */
@keyframes mythicBurst {
  0% { box-shadow: 0 0 0 rgba(240, 171, 252, 0); }
  40% { box-shadow: 0 0 70px rgba(240, 171, 252, 0.95), 0 0 140px rgba(240, 171, 252, 0.45); }
  100% { box-shadow: 0 0 28px rgba(240, 171, 252, 0.6); }
}
.holo.revealed.t-s { animation: mythicBurst 0.9s ease-out 0.1s; }

@media (prefers-reduced-motion: reduce) {
  .holo { transition: none !important; transform: none !important; }
  .holo.revealed.t-s { animation: none; }
}