/* Holographic foil tile effect.
 * The foil shimmer is ALWAYS visible (a gentle, continuously-animated sweep) so
 * the cards read as holographic at a glance; pointer tracking (holographic-tile.ts)
 * intensifies it and adds a 3D tilt + glare on hover. Touch devices keep the
 * shimmer but skip the tilt; prefers-reduced-motion freezes to a soft static sheen. */
.holographic-tile {
  --holo-pointer-x: 50%;
  --holo-pointer-y: 50%;
  --holo-shift-x: 0px;
  --holo-shift-y: 0px;
  --holo-rotate-x: 0deg;
  --holo-rotate-y: 0deg;
  --holo-lift: 0px;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateY(var(--holo-lift)) perspective(560px) rotateX(var(--holo-rotate-x)) rotateY(var(--holo-rotate-y));
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 120ms ease, box-shadow 140ms ease, filter 140ms ease;
  will-change: transform;
}

.holographic-tile::before,
.holographic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 160ms ease;
}

/* Rainbow foil + pointer glare. Visible at rest; drifts continuously. */
.holographic-tile::before {
  background:
    radial-gradient(
      circle at var(--holo-pointer-x) var(--holo-pointer-y),
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.25) 12%,
      rgba(255, 255, 255, 0) 32%
    ),
    linear-gradient(
      115deg,
      rgba(255, 0, 128, 0.55) 0%,
      rgba(0, 214, 255, 0.5) 25%,
      rgba(255, 236, 84, 0.55) 50%,
      rgba(120, 255, 168, 0.5) 72%,
      rgba(196, 120, 255, 0.55) 100%
    );
  background-size: 100% 100%, 260% 260%;
  background-position: center, var(--holo-shift-x) var(--holo-shift-y);
  mix-blend-mode: screen;
  filter: saturate(1.5);
  opacity: 0.55;
  animation: holoDrift 7s linear infinite;
}

/* Fine diffraction grating + sweeping sheen. */
.holographic-tile::after {
  background:
    repeating-linear-gradient(
      112deg,
      rgba(255, 255, 255, 0.3) 0 1px,
      rgba(255, 255, 255, 0) 1px 6px
    ),
    linear-gradient(
      130deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.6) 48%,
      rgba(255, 255, 255, 0) 76%
    );
  background-size: 90px 90px, 220% 220%;
  background-position: 0 0, -60% center;
  mix-blend-mode: color-dodge;
  filter: saturate(1.4) brightness(1.06);
  opacity: 0.4;
  animation: holoSheen 5.5s linear infinite;
}

@keyframes holoDrift {
  0%   { background-position: center, 0% 50%; }
  100% { background-position: center, 200% 50%; }
}

@keyframes holoSheen {
  0%   { background-position: 0 0, -60% center; }
  100% { background-position: 90px 90px, 160% center; }
}

/* Hover / pointer-active: lift, stronger foil, glare follows the cursor. */
.holographic-tile:hover,
.holographic-tile.holographic-tile--active {
  --holo-lift: -4px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  filter: saturate(1.12) contrast(1.03);
}

.holographic-tile:hover::before,
.holographic-tile.holographic-tile--active::before { opacity: 0.85; }

.holographic-tile:hover::after,
.holographic-tile.holographic-tile--active::after { opacity: 0.6; }

.holographic-tile.selected { --holo-lift: -3px; }

.holographic-tile.borrowed { box-shadow: 0 0 0 2px #f87171, var(--tile-shadow); }
.holographic-tile.borrowed:hover,
.holographic-tile.borrowed.holographic-tile--active {
  box-shadow: 0 0 0 2px #f87171, 0 10px 22px rgba(0, 0, 0, 0.4);
}

/* Touch / coarse pointer: keep the shimmer, drop the cursor-driven tilt. */
@media (hover: none), (pointer: coarse) {
  .holographic-tile { transform: translateY(var(--holo-lift)); }
}

/* Reduced motion: freeze the animation to a soft, static diagonal sheen. */
@media (prefers-reduced-motion: reduce) {
  .holographic-tile,
  .holographic-tile:hover,
  .holographic-tile.holographic-tile--active,
  .holographic-tile.selected {
    --holo-lift: 0px;
    transform: none;
    filter: none;
    transition: box-shadow 120ms ease;
    will-change: auto;
  }
  .holographic-tile::before {
    animation: none;
    background: linear-gradient(125deg,
      rgba(255,255,255,0) 28%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 72%);
    mix-blend-mode: screen;
    opacity: 0.18;
  }
  .holographic-tile::after { animation: none; opacity: 0.12; }
}