/* CaptureDex — holographic card engine (theme-agnostic, drop-in)
   Markup contract:
     <div class="holo-card">          <- the card; give it size + your frame/art inside
        ...your card content...
     </div>
   holo.js injects two overlay layers (.holo-card__glare, .holo-card__foil)
   and drives these custom properties on the element:
     --px,--py  pointer position inside the card, 0..100 (%)
     --rx,--ry  tilt rotation in deg
     --act      activity 0..1 (0 at rest, 1 while interacting)
   Style the card's own look in your variant; this file only handles the shine. */

.holo-card {
  position: relative;
  aspect-ratio: 63 / 88;            /* trading-card ratio */
  border-radius: clamp(12px, 4.5cqw, 22px);
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition: transform .4s cubic-bezier(.23,1,.32,1);
  will-change: transform;
  isolation: isolate;
  container-type: inline-size;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.holo-card.is-active { transition: transform .08s ease-out; cursor: grabbing; }

/* glare: a moving specular highlight that tracks the pointer */
.holo-card__glare {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: overlay;
  opacity: calc(.35 + var(--act, 0) * .55);
  background: radial-gradient(
    farthest-corner circle at var(--px, 50%) var(--py, 50%),
    rgba(255,255,255,.85) 5%,
    rgba(255,255,255,.18) 22%,
    rgba(0,0,0,.35) 90%
  );
  transition: opacity .3s ease;
}

/* foil: the rainbow holographic sheen, revealed by interaction */
.holo-card__foil {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: color-dodge;
  opacity: calc(.20 + var(--act, 0) * .55);
  background-blend-mode: color-dodge, hue, hard-light;
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255,119,115,.5) 0%,
      rgba(255,237,95,.5) 12%,
      rgba(168,255,95,.5) 24%,
      rgba(95,255,247,.5) 36%,
      rgba(125,140,255,.5) 48%,
      rgba(255,120,235,.5) 60%,
      rgba(255,119,115,.5) 72%
    ),
    repeating-linear-gradient(
      60deg,
      rgba(0,0,0,.55) 0%, rgba(255,255,255,.55) 6%, rgba(0,0,0,.55) 12%
    );
  background-size: 220% 220%, 180% 180%;
  background-position:
    calc(var(--px, 50%) * 1.4) calc(var(--py, 50%) * 1.4),
    calc(var(--px, 50%) * -1) calc(var(--py, 50%) * -1);
  filter: brightness(.9) contrast(1.6) saturate(1.5);
  transition: opacity .3s ease;
}

/* a subtle inner light edge so the card reads as glossy stock */
.holo-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14),
              inset 0 1px 1px rgba(255,255,255,.22);
}

@media (prefers-reduced-motion: reduce) {
  .holo-card { transition: none; transform: none !important; }
  .holo-card__glare { opacity: .3; }
  .holo-card__foil { opacity: .28; }
}

/* =====================================================================
   Real-photo support: an <img class="cap-photo"> inside .card-art.
   Over a photo the foil is softened so the image reads naturally.
   ===================================================================== */
.cap-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.holo-card.has-photo .holo-card__foil{ opacity:calc(.10 + var(--act,0)*.42); mix-blend-mode:soft-light; }
.holo-card.has-photo .holo-card__glare{ mix-blend-mode:overlay; opacity:calc(.22 + var(--act,0)*.5); }

/* =====================================================================
   10 holographic styles — add ONE class to .holo-card (e.g. holo-cosmos).
   Each only overrides the foil's image/size/blend/filter; the pointer-
   driven position + 3D tilt keep working. No class = the default rainbow.
   ===================================================================== */
.holo-card.holo-rainbow .holo-card__foil{}              /* = default */

.holo-card.holo-cosmos .holo-card__foil{
  background-image:
    radial-gradient(circle at 18% 22%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 64% 38%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 40% 72%, #fff 0 1px, transparent 2px),
    linear-gradient(125deg,#5b2a8c,#1f5fa8,#33b0a0,#7a2c8f);
  background-size:160% 160%,140% 140%,180% 180%,260% 260%;
  mix-blend-mode:screen; filter:brightness(1) contrast(1.3) saturate(1.5);
}
.holo-card.holo-aurora .holo-card__foil{
  background-image:linear-gradient(115deg,#16e0a8 0%,#37c4ff 28%,#a06bff 52%,#37ffd0 76%,#16e0a8 100%);
  background-size:240% 240%; mix-blend-mode:color-dodge; filter:brightness(.9) contrast(1.4) saturate(1.6);
}
.holo-card.holo-gold .holo-card__foil{
  background-image:repeating-linear-gradient(108deg,#6a4a14 0%,#ffe9a8 9%,#caa14a 16%,#8a5a18 24%);
  background-size:200% 200%; mix-blend-mode:color-dodge; filter:brightness(1) contrast(1.5) saturate(1.3);
}
.holo-card.holo-prism .holo-card__foil{
  background-image:repeating-linear-gradient(78deg,#ff5b6e 0%,#ffd24a 6%,#5bff9e 12%,#4ad8ff 18%,#9b6bff 24%,#ff5be0 30%,#ff5b6e 36%);
  background-size:300% 300%; mix-blend-mode:color-dodge; filter:brightness(.85) contrast(1.9) saturate(1.7);
}
.holo-card.holo-wave .holo-card__foil{
  background-image:repeating-radial-gradient(circle at 50% 40%,#ff7773 0 6%,#ffed5f 12%,#5fff9e 18%,#5ff7ff 24%,#7d8cff 30%,#ff78eb 36%,#ff7773 42%);
  background-size:240% 240%; mix-blend-mode:color-dodge; filter:brightness(.9) contrast(1.5) saturate(1.5);
}
.holo-card.holo-confetti .holo-card__foil{
  background-image:
    radial-gradient(circle at 20% 30%, #ff5b6e 0 3px, transparent 4px),
    radial-gradient(circle at 70% 25%, #4ad8ff 0 3px, transparent 4px),
    radial-gradient(circle at 45% 65%, #ffd24a 0 3px, transparent 4px),
    radial-gradient(circle at 82% 70%, #5bff9e 0 3px, transparent 4px),
    radial-gradient(circle at 30% 85%, #9b6bff 0 3px, transparent 4px);
  background-size:90px 90px,110px 110px,80px 80px,130px 130px,100px 100px;
  mix-blend-mode:screen; filter:brightness(1) contrast(1.4) saturate(1.6);
}
.holo-card.holo-crystal .holo-card__foil{
  background-image:conic-gradient(from 0deg at 50% 50%,#ff7773,#ffed5f,#5fff9e,#5ff7ff,#7d8cff,#ff78eb,#ff7773);
  background-size:180% 180%; mix-blend-mode:color-dodge; filter:brightness(.85) contrast(1.7) saturate(1.6);
}
.holo-card.holo-sheen .holo-card__foil{
  background-image:repeating-linear-gradient(110deg,rgba(255,255,255,.5) 0%,rgba(150,160,180,.15) 6%,rgba(255,255,255,.5) 12%);
  background-size:200% 200%; mix-blend-mode:soft-light; filter:brightness(1.1) contrast(1.2) saturate(.6);
}
.holo-card.holo-neon .holo-card__foil{
  background-image:linear-gradient(120deg,#ff00d4,#00fff0,#ff00d4,#00fff0);
  background-size:280% 280%; mix-blend-mode:color-dodge; filter:brightness(.9) contrast(1.8) saturate(2);
}