/* =====================================================================
   holo-effect.css -- effet holo "strie" des cartes PokeCard Custom, a
   utiliser avec holo-effect.js (qui cree les calques et les pilote).
   Utilise par carte.html ; fait pour etre reutilise tel quel (outil
   Detourage, admin, galerie...).

   Rendu "A - CSS strie" choisi par Lucas le 24/10/2026 sur le banc
   d'essai holo-lab.html, d'apres ses videos du vrai papier holo : fines
   stries diagonales, arc-en-ciel en larges bandes qui ne s'allume que
   sur les lignes, plus vif pres de la lumiere.

   Origine : meme approche que simeydotme/pokemon-cards-css (Simon
   Goellner, https://github.com/simeydotme/pokemon-cards-css, licence
   GPL-3.0) -- calques CSS masques + modes de melange pilotes par la
   position de la souris -- dont derivait deja carte.html. Les stries,
   l'anti-moire, le reglage et le code de ce fichier sont ecrits pour
   PokeCard Custom.

   Convention du masque (ne pas changer : cartes en ligne + Detourage) :
   mask.png RGBA, opaque = ca scintille, transparent = ca ne scintille pas.
   ===================================================================== */

.pcc-holo {
  --mx: 50%;
  --my: 50%;
  --opacity: 0;
  --pfc: 0;
  --tex-amt: 0.3;      /* force de la texture, choix de Lucas le 24/10 */
  --rainbow-amt: 1;
  --pcc-mask: linear-gradient(#000, #000);   /* sans mask.png : tout scintille */
  /* lumiere autour de laquelle l'arc-en-ciel est le plus vif (etendue = --h-loin) */
  --h-spot: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,calc(.55 + .45 * var(--h-loin, .6))) 30%, rgba(0,0,0,var(--h-loin, .6)) 75%);
}

.pcc-holo__art,
.pcc-holo__etch,
.pcc-holo__etch-shine,
.pcc-holo__strie,
.pcc-holo__paillettes,
.pcc-holo__glare {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pcc-holo__art { object-fit: cover; }

/* Texture (gravure UV) : sous la lumiere seulement, en lumiere douce
   (reglage de Lucas du 24/10, commit cae06f5 : x1,2, spot plus large) */
.pcc-holo__etch {
  object-fit: cover;
  mix-blend-mode: soft-light;
  opacity: calc(var(--opacity) * var(--tex-amt) * 1.2);
  transition: opacity .2s;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #fff 0%, rgba(255,255,255,.6) 45%, transparent 90%);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #fff 0%, rgba(255,255,255,.6) 45%, transparent 90%);
}
/* Reflet blanc de la texture (x1,6), spot en pixels pose par le JS */
.pcc-holo__etch-shine {
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: calc(var(--opacity) * var(--tex-amt) * 1.6);
  transition: opacity .2s;
  -webkit-mask-image: var(--h-spot-blanc, radial-gradient(circle at 50% 50%, white 0%, transparent 55%));
  mask-image: var(--h-spot-blanc, radial-gradient(circle at 50% 50%, white 0%, transparent 55%));
}

/* Arc-en-ciel strie : le fond du calque est l'arc-en-ciel (petites tuiles
   raccordees, decalees par background-position : leger pour les
   telephones), masque par mask.png, par de fines lignes (--h-stries*,
   calculees en JS avec l'anti-moire) et par la lumiere. Deux series de
   lignes intercalees aux couleurs decalees = scintillement fin. */
.pcc-holo__strie {
  overflow: hidden;
  background-image: var(--h-arc);
  background-size: var(--h-tuile);
  background-position: var(--h-pos1);
  mix-blend-mode: var(--h-melange, overlay);
  opacity: calc(var(--opacity) * var(--rainbow-amt) * min(1, var(--h-int, 1)));
  filter: brightness(max(1, var(--h-int, 1)));
  -webkit-mask-image: var(--h-spot), var(--h-stries1), var(--pcc-mask);
  mask-image: var(--h-spot), var(--h-stries1), var(--pcc-mask);
  -webkit-mask-size: 100% 100%, 100% 100%, cover;
  mask-size: 100% 100%, 100% 100%, cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-composite: source-in, source-in, source-over;
  mask-composite: intersect, intersect, add;
}
.pcc-holo__strie--2 {
  background-position: var(--h-pos2);
  -webkit-mask-image: var(--h-spot), var(--h-stries2), var(--pcc-mask);
  mask-image: var(--h-spot), var(--h-stries2), var(--pcc-mask);
  opacity: calc(var(--opacity) * var(--rainbow-amt) * min(1, var(--h-int, 1)) * var(--h-scint, .6));
}
/* Holo tres leger sur toute la carte, zones "sans holo" du masque
   comprises (personnages, cadre) : comme sur la carte imprimee. */
.pcc-holo__strie--hors {
  -webkit-mask-image: var(--h-spot), var(--h-stries1);
  mask-image: var(--h-spot), var(--h-stries1);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
  opacity: calc(var(--opacity) * var(--rainbow-amt) * min(1, var(--h-int, 1)) * var(--h-hors, .2));
}

/* Paillettes : grain qui glisse un peu avec la lumiere */
.pcc-holo__paillettes {
  background-image: url("../grain.jpg");
  background-size: var(--h-grain, 120px 120px);
  background-position: var(--h-pail-pos, 0 0);
  mix-blend-mode: color-dodge;
  opacity: calc(var(--opacity) * var(--rainbow-amt) * var(--h-pail, .3));
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.3) 45%, transparent 80%), var(--pcc-mask);
  mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.3) 45%, transparent 80%), var(--pcc-mask);
  -webkit-mask-size: 100% 100%, cover;
  mask-size: 100% 100%, cover;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;
}

/* Lampe : reflet blanc doux autour de la lumiere, attenue de moitie
   (reglage de Lucas du 24/10, commit cae06f5) */
.pcc-holo__glare {
  overflow: hidden;
  background-image: radial-gradient(
    circle 150px at var(--mx) var(--my),
    hsla(0, 0%, 100%, 1) 0%,
    hsla(0, 0%, 100%, 0.45) 35%,
    transparent 75%
  );
  mix-blend-mode: soft-light;
  opacity: calc(var(--opacity) * 0.5);
}