/* ═══════════════════════════════════════════════════════════════════════════
   Card holo effects — the single source of truth.
   Lifted verbatim from collection.php (the master copy) and extended with the
   fireworks treatment that only binder.php had. Previously duplicated in
   collection.php, decks.php, decklist.php and binder.php.

   Patterns: .holo .fullart .standardholo .reverseholo .radiantholo .fireworksholo
   Resolved server-side by services/holo.js.

   NOTE: some rules below use SCSS-isms (// comments, nested @media, &) that a
   browser drops. They are kept exactly as they were so rendering is unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --color1: rgb(0, 231, 255);
  --color2: rgb(255, 0, 231);
  --back: url(https://cdn2.bulbagarden.net/upload/1/17/pokemonCardback.jpg);
  --charizard1: #fac;
  --charizard2: #ddccaa;
  --charizardfront: url(https://assets.codepen.io/13471/charizard-gx.webp);
  --pika1: #54a29e;
  --pika2: #a79d66;
  --pikafront: url(https://assets.codepen.io/13471/pikachu-gx.webp);
  --eevee1: #efb2fb;
  --eevee2: #acc6f8;
  --eeveefront: url(https://assets.codepen.io/13471/eevee-gx.webp);
  --mewtwo1: #efb2fb;
  --mewtwo2: #acc6f8;
  --mewtwofront: url(https://assets.codepen.io/13471/mewtwo-gx.webp);
}

/* ── Shared pseudo-element layers ─────────────────────────────────── */
.pokemonCard:before,
.pokemonCard:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  opacity: .5;
  mix-blend-mode: color-dodge;
  transition: all .33s ease;
}

.pokemonCard:before {
  background-position: 50% 50%;
  background-size: 300% 300%;
  background-image: linear-gradient(
    115deg,
    transparent 0%,
    var(--color1) 25%,
    transparent 47%,
    transparent 53%,
    var(--color2) 75%,
    transparent 100%
  );
  opacity: .5;
  filter: brightness(.5) contrast(1);
  z-index: 1;
}

/* ── Patterns ─────────────────────────────────────────────────────── */
.pokemonCard.holo:after {
  opacity: 1;
  background-image: url("/sparkles.gif"), 
    url("/holo.jpg");
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  transition: all .33s ease;
  mix-blend-mode: color-dodge;
  opacity: .75;
}

.pokemonCard.fullart:after {
  opacity: 1;
  background-image: url("/sparkles.gif"), 
    url("/holo.jpg"), url("/hologif1.gif");
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  transition: all .33s ease;
  mix-blend-mode: color-dodge;
  opacity: .75;
  filter: brightness(.5) contrast(2);
}

.pokemonCard.standardholo:after {
  opacity: 1;
  background-image: url("/sparkles.gif"), url("/holomask.png");
  background-blend-mode: multiply;
  background-size: 100%;
  background-position: 50% 50%;
  z-index: 2;
  transition: all .33s ease;
  mix-blend-mode: color-dodge;
  opacity: .75;
}

.pokemonCard.reverseholo:after {
  opacity: 1;
  background-image: url("/hologif1.gif"), url("/holomask3.png");
  background-position: 50% 50%;
  background-blend-mode: multiply;
  z-index: 2;
  transition: all .33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.95;
  background-size: 101%;
  filter: brightness(.5) contrast(2);
}

.pokemonCard.radiantholo:after {
  opacity: 1;
  background-image: url("/radiantholo.gif"), url("/holomask3.png");
  background-position: 50% 50%;
  background-blend-mode: multiply;
  z-index: 2;
  transition: all .33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.95;
  background-size: 101%;
  filter: brightness(.5) contrast(2);
}

/* ── Fireworks reverse holo (was binder.php only) ──────────────────── */
.pokemonCard.fireworksholo:after {
  opacity: 1;
  background-image: url("/fireworksholo.gif"), url("/holomask3.png");
  background-position: 50% 50%;
  background-blend-mode: multiply;
  z-index: 2;
  transition: all .33s ease;
  mix-blend-mode: color-dodge;
  opacity: 0.95;
  background-size: 101%;
  filter: brightness(.5) contrast(2);
}

/* ── Lightbox variant ─────────────────────────────────────────────── */


.ekko-lightbox-item:before,
.ekko-lightbox-item:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-repeat: no-repeat;
  opacity: .5;
  mix-blend-mode: color-dodge;
  transition: all .33s ease;
}

.ekko-lightbox-item:before {
  background-position: 50% 50%;
  background-size: 300% 300%;
  background-image: linear-gradient(
    115deg,
    transparent 0%,
    var(--color1) 25%,
    transparent 47%,
    transparent 53%,
    var(--color2) 75%,
    transparent 100%
  );
  opacity: .5;
  filter: brightness(.5) contrast(1);
  z-index: 1;
}

.ekko-lightbox-item:after {
  opacity: 1;
  background-image: url("https://assets.codepen.io/13471/sparkles.gif"), 
    url(https://assets.codepen.io/13471/holo.png), 
    linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85%);
  background-position: 50% 50%;
  background-size: 160%;
  background-blend-mode: overlay;
  z-index: 2;
  transition: all .33s ease;
  mix-blend-mode: color-dodge;
  border-radius: 35px;
  opacity: .75;
}

/* ── Hover / active ───────────────────────────────────────────────── */
.pokemonCard.active:after,
.pokemonCard:hover:after {
  opacity: 1;
}

.pokemonCard.active,
.pokemonCard:hover {
  animation: none;
  transition: box-shadow 0.1s ease-out;
}

.pokemonCard.active:before,
.pokemonCard:hover:before {
  animation: none;
  background-position: 50% 50%;
  background-size: 250% 250%;
  opacity: .88;
  transition: none;
}

.pokemonCard.active:before,
.pokemonCard:hover:before,
.pokemonCard.active:after,
.pokemonCard:hover:after {
  animation: none;
  transition: none;
}

/* ── Animations ───────────────────────────────────────────────────── */
@keyframes holoSparkle {
  0%, 100% {
    opacity: .75; background-position: 50% 50%; filter: brightness(1.2) contrast(1.25);
  }
  5%, 8% {
    opacity: 1; background-position: 40% 40%; filter: brightness(.8) contrast(1.2);
  }
  13%, 16% {
    opacity: .5; background-position: 50% 50%; filter: brightness(1.2) contrast(.8);
  }
  35%, 38% {
    opacity: 1; background-position: 60% 60%; filter: brightness(1) contrast(1);
  }
  55% {
    opacity: .33; background-position: 45% 45%; filter: brightness(1.2) contrast(1.25);
  }
}

@keyframes holoGradient {
  0%, 100% {
    opacity: 0.5;
    background-position: 50% 50%;
    filter: brightness(.5) contrast(1);
  }
  5%, 9% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(.75) contrast(1.25);
  }
  13%, 17% {
    background-position: 0% 0%;
    opacity: .88;
  }
  35%, 39% {
    background-position: 100% 100%;
    opacity: 1;
    filter: brightness(.5) contrast(1);
  }
  55% {
    background-position: 0% 0%;
    opacity: 1;
    filter: brightness(.75) contrast(1.25);
  }
}

@keyframes holopokemonCard {
  0%, 100% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
  5%, 8% {
    transform: rotateZ(0deg) rotateX(6deg) rotateY(-20deg);
  }
  13%, 16% {
    transform: rotateZ(0deg) rotateX(-9deg) rotateY(32deg);
  }
  35%, 38% {
    transform: rotateZ(3deg) rotateX(12deg) rotateY(20deg);
  }
  55% {
    transform: rotateZ(-3deg) rotateX(-12deg) rotateY(-27deg);
  }
}

.pokemonCard.eevee:hover {
  box-shadow: 
    0 0 30px -5px white,
    0 0 10px -2px white,
    0 55px 35px -20px rgba(0, 0, 0, 0.5);
}
.pokemonCard.eevee:hover:before,
.pokemonCard.eevee.active:before {
  background-image: linear-gradient(
    115deg,
    transparent 20%,
    var(--color1) 36%,
    var(--color2) 43%,
    var(--color3) 50%,
    var(--color4) 57%,
    var(--color5) 64%,
    transparent 80%
  );
}