/* Elemon holo: one shared foil for every Elemon card (landing marquee, Elemondex, game cards, backs).
   Markup: the card root carries [data-holo]; the part that turns in 3D carries .holo-rot (it can be the
   root itself); each face that should shine ends with <i class="holo-fx">…</i> (Holo.FX in holo.js).

   At rest a card is flat and clean: no foil is painted at all. The foil, the turn and the glare only
   appear while a mouse hovers that card or a finger is on it, and spring back when it leaves.
   holo.js (one rAF loop that only runs while a card is held or settling) writes on the root:
     --px / --py  where the light is, 0..1 across the card      --pfc  how far it is from the centre, 0..1
     --rx / --ry  the card's turn in degrees                    --hs   the little lift (scale)
     --o          how much foil shows, 0..1 (fades in and out)
   and the class .holo-on while any of it is showing (.is-holo while a pointer or finger is on it).

   Layers (all inset 0 and clipped to the card's own rounded corners; nothing is oversized or moved by
   transform, so nothing can poke past a corner):
     .hf-a  the shine: soft diagonal rainbow bands under a fine etched-line texture, colour-dodge;
            the bands slide against the pointer and grow stronger toward the card's edges
     .hf-b  the frame tint: a pale rainbow + etched lines at the opposite angle with a soft shadow away
            from the light, multiply (so the white frame and panels catch the foil too, not just the art)
     .hf-g  the glare: a light under the pointer, overlay
     .hf-s  (unused, kept so older markup stays valid)
   Reduced motion: hovering or touching shows a still, gentle sheen; nothing turns or moves. */

[data-holo] { -webkit-tap-highlight-color: transparent; }
/* a finger can drag sideways across a card to turn it and still scroll the page up and down
   (game cards keep their own touch handling) */
@media (prefers-reduced-motion: no-preference) {
  [data-holo]:not(.ecard) { touch-action: pan-y; }
}

/* the turn (holo.js springs the numbers, so no CSS transition here) */
.holo-rot { transform: perspective(var(--holo-persp, 900px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--hs, 1)); }
[data-holo].holo-on .holo-rot, [data-holo].holo-on.holo-rot { will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* the foil */
/* no z-index/opacity/filter/transform on .holo-fx itself: any of them would isolate it, and the layers'
   blend modes would then blend with nothing instead of with the card */
.holo-fx { position: absolute; inset: 0; display: none; overflow: hidden; border-radius: inherit; pointer-events: none; }
[data-holo].holo-on .holo-fx { display: block; }
.holo-fx > i { position: absolute; inset: 0; z-index: 7; display: block; border-radius: inherit; pointer-events: none; }
.holo-fx > .hf-s { display: none; }

.hf-a {
  background-image:
    url("/img/holo-etch.webp"),
    repeating-linear-gradient(112deg, #2c2c2c 0%, #8a8a8a 3%, #fff 5.5%, #8a8a8a 8%, #2c2c2c 11%, #2c2c2c 14%),
    linear-gradient(112deg,
      hsl(200 90% 58%) 0%, hsl(262 85% 66%) 7%, hsl(322 88% 64%) 14%, hsl(28 95% 60%) 21%, hsl(54 95% 56%) 28%,
      hsl(140 72% 54%) 35%, hsl(190 90% 58%) 42%, hsl(262 85% 66%) 49%, hsl(322 88% 64%) 56%, hsl(28 95% 60%) 63%,
      hsl(54 95% 56%) 70%, hsl(140 72% 54%) 77%, hsl(190 90% 58%) 84%, hsl(262 85% 66%) 92%, hsl(322 88% 64%) 100%);
  background-size: 128px 128px, 210% 210%, 210% 210%;
  background-position:
    calc((0.5 - var(--px, 0.5)) * 64px) calc((0.5 - var(--py, 0.5)) * 64px),
    calc(50% + (0.5 - var(--px, 0.5)) * 110%) calc(50% + (0.5 - var(--py, 0.5)) * 110%),
    calc(50% + (0.5 - var(--px, 0.5)) * 80%) calc(50% + (0.5 - var(--py, 0.5)) * 80%);
  /* soft bright streaks (multiply) pick the rainbow out in bands; the etched lines (overlay) give it grain */
  background-blend-mode: overlay, multiply, normal;
  mix-blend-mode: color-dodge;
  filter: brightness(0.7) contrast(1.35) saturate(1.2);
  /* strongest around the light, never gone: the far side keeps a faint rainbow */
  -webkit-mask-image: radial-gradient(farthest-corner circle at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.35) 75%);
  mask-image: radial-gradient(farthest-corner circle at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%), #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.35) 75%);
  opacity: calc(var(--o, 0) * (0.55 + 0.4 * var(--pfc, 0)));
}
.hf-b {
  background-image:
    radial-gradient(farthest-corner circle at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%), #fff 0%, #fff 22%, #dcd6e6 100%),
    url("/img/holo-etch.webp"),
    linear-gradient(-58deg,
      hsl(196 90% 88%) 0%, hsl(262 85% 90%) 12%, hsl(330 90% 90%) 25%, hsl(46 95% 86%) 37%, hsl(150 70% 86%) 50%,
      hsl(196 90% 88%) 62%, hsl(262 85% 90%) 75%, hsl(330 90% 90%) 87%, hsl(46 95% 86%) 100%);
  background-size: 100% 100%, 128px 128px, 300% 300%;
  background-position:
    0 0,
    calc((var(--px, 0.5) - 0.5) * 40px) calc((var(--py, 0.5) - 0.5) * 40px),
    calc(50% + (var(--px, 0.5) - 0.5) * 60%) calc(50% + (var(--py, 0.5) - 0.5) * 60%);
  background-blend-mode: multiply, soft-light, normal;
  mix-blend-mode: multiply;
  opacity: calc(var(--o, 0) * 0.45);
}
.hf-g {
  background: radial-gradient(farthest-corner circle at calc(var(--px, 0.5) * 100%) calc(var(--py, 0.5) * 100%),
    rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 14%, rgba(255, 255, 255, 0.08) 32%, rgba(255, 255, 255, 0) 48%);
  mix-blend-mode: overlay;
  opacity: var(--o, 0);
}

/* reduced motion: never turn; holo.js shows a still sheen while hovered or touched */
@media (prefers-reduced-motion: reduce) {
  .holo-rot { transform: none !important; }
}