/*
 * holo.css — COLLEX holographic card effect
 *
 * Derived from simeydotme/pokemon-cards-css
 * https://github.com/simeydotme/pokemon-cards-css
 * Copyright (C) 2022 Simon Goellner, @simeydotme
 * Licensed under the GNU General Public License v3.0
 *
 * Adapted for COLLEX slab renders (aspect 0.593).
 * Classes renamed from .card* to .holo-card* to avoid collision.
 * Two effect tiers: .holo-card--glare (glare only) and .holo-card--shine (glare + sunpillar holo).
 */

/* ── Custom properties ────────────────────────────────────────────── */

:root {
  /* Slab aspect (945 / 1594 ≈ 0.593) — overridden per slab if needed */
  --holo-card-aspect: 0.593;
  /* Radius clips the glare layers; slab photos already have rounded corners baked in */
  --holo-card-radius: 12px;

  /* Interaction tracking custom properties — set by holo-card.js */
  --holo-pointer-x: 50%;
  --holo-pointer-y: 50%;
  --holo-card-opacity: 0;
  --holo-rotate-x: 0deg;
  --holo-rotate-y: 0deg;
  --holo-background-x: 50%;
  --holo-background-y: 50%;
  --holo-pointer-from-center: 0;
  --holo-pointer-from-top: 0.5;
  --holo-pointer-from-left: 0.5;

  /* Sunpillar palette (from base.css) */
  --holo-sunpillar-1: hsl(2, 100%, 73%);
  --holo-sunpillar-2: hsl(53, 100%, 69%);
  --holo-sunpillar-3: hsl(93, 100%, 69%);
  --holo-sunpillar-4: hsl(176, 100%, 76%);
  --holo-sunpillar-5: hsl(228, 100%, 74%);
  --holo-sunpillar-6: hsl(283, 100%, 73%);

  /* Holo repeating gradient colors */
  --holo-red:    #f80e35;
  --holo-yellow: #eedf10;
  --holo-green:  #21e985;
  --holo-blue:   #0dbde9;
  --holo-violet: #c929f1;

  /* Textures — relative to this CSS file served from /vendor/holo/ */
  --holo-grain: url("/vendor/holo/img/grain.webp");
  --holo-glitter: url("/vendor/holo/img/glitter.png");
  --holo-glittersize: 25%;
}

/* ── Container ───────────────────────────────────────────────────── */

.holo-card {
  display: inline-block;
  position: relative;
  /* GPU layer */
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
  perspective: 600px;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* anti-alias trick */
  outline: 1px solid transparent;
  border-radius: var(--holo-card-radius);
}

/* ── Rotator ─────────────────────────────────────────────────────── */

.holo-card__rotator {
  display: block;
  position: relative;
  will-change: transform;
  transform-origin: center;
  -webkit-transform-origin: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(var(--holo-rotate-x)) rotateX(var(--holo-rotate-y));
  transform: rotateY(var(--holo-rotate-x)) rotateX(var(--holo-rotate-y));
  border-radius: var(--holo-card-radius);
  outline: 1px solid transparent;
}

/* ── Card image ──────────────────────────────────────────────────── */

.holo-card__rotator > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--holo-card-radius);
  -webkit-transform: translate3d(0px, 0px, 0.01px);
  transform: translate3d(0px, 0px, 0.01px);
  pointer-events: none;
}

/* ── Shared: shine + glare layer positioning ─────────────────────── */

.holo-card__shine,
.holo-card__glare {
  position: absolute;
  inset: 0;
  border-radius: var(--holo-card-radius);
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
  pointer-events: none;
}

/* ── Glare layer (both tiers) ────────────────────────────────────── */

.holo-card__glare {
  transform: translateZ(1.41px);
  overflow: hidden;

  background-image: radial-gradient(
    farthest-corner circle at var(--holo-pointer-x) var(--holo-pointer-y),
    hsla(0, 0%, 100%, 0.8) 10%,
    hsla(0, 0%, 100%, 0.65) 20%,
    hsla(0, 0%, 0%, 0.5) 90%
  );

  opacity: var(--holo-card-opacity);
  mix-blend-mode: overlay;
}

/* ── Tier 1: .holo-card--glare only ─────────────────────────────── */
/* Only the glare layer; .holo-card__shine is hidden */

.holo-card--glare .holo-card__shine {
  display: none;
}

/* ── Tier 2: .holo-card--shine (glare + sunpillar holo) ──────────── */
/* Based on regular-holo.css from the reference repo */

.holo-card--shine .holo-card__shine {
  display: grid;
  transform: translateZ(1px);
  overflow: hidden;
  z-index: 3;
  background: transparent;
  background-size: cover;
  background-position: center;

  filter: brightness(.85) contrast(2.75) saturate(.65);
  mix-blend-mode: color-dodge;
  /* COLLEX adaptation: the reference masks shine to a card's foil regions via
     per-card mask images. Our slab photos have no masks, so full-strength
     shine washes out the art. Tame it and localize it around the pointer so
     it reads as iridescence on the slab glass. */
  opacity: calc(var(--holo-card-opacity) * 0.38);
  -webkit-mask-image: radial-gradient(circle at var(--holo-pointer-x) var(--holo-pointer-y),
      black 12%, rgba(0, 0, 0, 0.45) 42%, transparent 78%);
  mask-image: radial-gradient(circle at var(--holo-pointer-x) var(--holo-pointer-y),
      black 12%, rgba(0, 0, 0, 0.45) 42%, transparent 78%);

  /* Sunpillar + scanlines rainbow shimmer */
  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)
    ),
    repeating-linear-gradient(90deg,
      #000 0px, #000 2px,
      #666 2px, #666 4px
    );

  background-position:
    calc(((50% - var(--holo-background-x)) * 2.6) + 50%) calc(((50% - var(--holo-background-y)) * 3.5) + 50%),
    center center;

  background-size:
    400% 400%,
    cover;

  background-blend-mode: overlay;
  filter: brightness(1.1) contrast(1.1) saturate(1.2);
  mix-blend-mode: color-dodge;
}

.holo-card--shine .holo-card__shine::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--holo-card-radius);

  --bars: 3%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);

  background-image:
    repeating-linear-gradient(90deg,
      var(--bar-bg) calc(var(--bars)*2),
      var(--bar-color) calc(var(--bars)*3),
      var(--bar-bg) calc(var(--bars)*3.5),
      var(--bar-color) calc(var(--bars)*4),
      var(--bar-bg) calc(var(--bars)*5),
      var(--bar-bg) calc(var(--bars)*14)
    ),
    repeating-linear-gradient(90deg,
      var(--bar-bg) calc(var(--bars)*2),
      var(--bar-color) calc(var(--bars)*3),
      var(--bar-bg) calc(var(--bars)*3.5),
      var(--bar-color) calc(var(--bars)*4),
      var(--bar-bg) calc(var(--bars)*5),
      var(--bar-bg) calc(var(--bars)*10)
    );

  background-position:
    calc((((50% - var(--holo-background-x)) * 1.65) + 50%) + (var(--holo-background-y) * 0.5)) var(--holo-background-x),
    calc((((50% - var(--holo-background-x)) * -0.9) + 50%) - (var(--holo-background-y) * 0.75)) var(--holo-background-y);

  background-size:
    200% 200%,
    200% 200%;

  background-blend-mode: screen;
  filter: brightness(1.15) contrast(1.1);
  mix-blend-mode: hard-light;
}

.holo-card--shine .holo-card__shine::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--holo-card-radius);

  background-image:
    radial-gradient(
      farthest-corner circle at var(--holo-pointer-x) var(--holo-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);
}

/* Enhanced glare for shine tier */
.holo-card--shine .holo-card__glare {
  opacity: calc(var(--holo-card-opacity) * 0.8);
  filter: brightness(0.8) contrast(1.5);
  mix-blend-mode: overlay;
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .holo-card__shine,
  .holo-card__glare {
    opacity: 0 !important;
    transition: none !important;
  }
  .holo-card__rotator {
    transform: none !important;
  }
}

/* ── Texture variants (owner-selectable; default = the rainbow shine) ──
   Each variant layers a foil texture from the reference repo under the
   rainbow gradient. Class goes on the .holo-card element. */

.holo-fx-galaxy .holo-card__shine {
  background-image:
    url("/vendor/holo/img/galaxy.jpg"),
    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));
  background-size: cover, 400% 400%;
  background-position:
    center,
    calc(((50% - var(--holo-background-x)) * 2.6) + 50%) calc(((50% - var(--holo-background-y)) * 3.5) + 50%);
  background-blend-mode: color-dodge;
  filter: brightness(1.05) contrast(1.15) saturate(1.3);
}

.holo-fx-cosmos .holo-card__shine {
  background-image:
    url("/vendor/holo/img/cosmos.png"),
    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-size: 60% auto, 400% 400%;
  background-position:
    calc(((50% - var(--holo-background-x)) * 1.2) + 50%) calc(((50% - var(--holo-background-y)) * 1.2) + 50%),
    calc(((50% - var(--holo-background-x)) * 2.6) + 50%) calc(((50% - var(--holo-background-y)) * 3.5) + 50%);
  background-blend-mode: screen;
  filter: brightness(1.0) contrast(1.2) saturate(1.25);
}

.holo-fx-metal .holo-card__shine {
  background-image:
    url("/vendor/holo/img/metal.png"),
    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-size: cover, 400% 400%;
  background-position:
    calc(((50% - var(--holo-background-x)) * 1.5) + 50%) center,
    calc(((50% - var(--holo-background-x)) * 2.6) + 50%) calc(((50% - var(--holo-background-y)) * 3.5) + 50%);
  background-blend-mode: hard-light;
  filter: brightness(0.95) contrast(1.3) saturate(0.7);
}