:root {
  --primary: rgb(66, 219, 240);
  --link-hover: rgb(224, 241, 255);
  --galaxy: url("./assets/holo-1.jpeg");
  --Vmaxbg: url("./assets/holo-9.jpeg");
  --Vstar: url("./assets/holo-2.png");
  --rainbow: url("./assets/holo-3.png");
  --illusion: url("./assets/holo-4.png");
  --glitter: url("./assets/holo-5.png");
  --metal: url("./assets/holo-6.png");
  --trainerbg: url("./assets/holo-7.png");
  --illusion2: url("./assets/holo-8.png");
}

.card__shine {
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWx0ZXI9InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=");

  --space: 6%;
  --angle: 133deg;
  --imgsize: 500px;

  --red: #f80e7b;
  --yel: #eedf10;
  --gre: #21e985;
  --blu: #0dbde9;
  --vio: #c929f1;
}

.headline-cards {
  font-family: Roboto;
  color: white;
  text-align: center;
  padding: 30px 0;
}

main {
  display: flex;
  justify-content: center;
  align-content: center;
}

.card {
  width: 230px;
}

.wrapper-showcase {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 80vw;
  gap: 2rem;
  margin-bottom: 80px;
}

/*
  HOLO
*/

.card[data-rarity="rare holo"] .card__shine {
  --space: 1.5%;
  --h: 21;
  --s: 70%;
  --l: 50%;
  --bars: 4%;
  --bar-color: rgba(255, 255, 255, 0.6);
  --bar-bg: rgb(10, 10, 10);

  clip-path: inset(11.5% 8.5% 44.5% 8.5%);

  background-image: repeating-linear-gradient(
      90deg,
      hsl(calc(var(--h) * 0), var(--s), var(--l)) calc(var(--space) * 0),
      hsl(calc(var(--h) * 0), var(--s), var(--l)) calc(var(--space) * 1),
      black calc(var(--space) * 1.001),
      black calc(var(--space) * 1.999),
      hsl(calc(var(--h) * 1), var(--s), var(--l)) calc(var(--space) * 2),
      hsl(calc(var(--h) * 1), var(--s), var(--l)) calc(var(--space) * 3),
      black calc(var(--space) * 3.001),
      black calc(var(--space) * 3.999),
      hsl(calc(var(--h) * 2), var(--s), var(--l)) calc(var(--space) * 4),
      hsl(calc(var(--h) * 2), var(--s), var(--l)) calc(var(--space) * 5),
      black calc(var(--space) * 5.001),
      black calc(var(--space) * 5.999),
      hsl(calc(var(--h) * 3), var(--s), var(--l)) calc(var(--space) * 6),
      hsl(calc(var(--h) * 3), var(--s), var(--l)) calc(var(--space) * 7),
      black calc(var(--space) * 7.001),
      black calc(var(--space) * 7.999),
      hsl(calc(var(--h) * 4), var(--s), var(--l)) calc(var(--space) * 8),
      hsl(calc(var(--h) * 4), var(--s), var(--l)) calc(var(--space) * 9),
      black calc(var(--space) * 9.001),
      black calc(var(--space) * 9.999),
      hsl(calc(var(--h) * 5), var(--s), var(--l)) calc(var(--space) * 10),
      hsl(calc(var(--h) * 5), var(--s), var(--l)) calc(var(--space) * 11),
      black calc(var(--space) * 11.001),
      black calc(var(--space) * 11.999),
      hsl(calc(var(--h) * 6), var(--s), var(--l)) calc(var(--space) * 12),
      hsl(calc(var(--h) * 6), var(--s), var(--l)) calc(var(--space) * 13),
      black calc(var(--space) * 13.001),
      black calc(var(--space) * 13.999),
      hsl(calc(var(--h) * 7), var(--s), var(--l)) calc(var(--space) * 14),
      hsl(calc(var(--h) * 7), var(--s), var(--l)) calc(var(--space) * 15),
      black calc(var(--space) * 15.001),
      black calc(var(--space) * 15.999),
      hsl(calc(var(--h) * 8), var(--s), var(--l)) calc(var(--space) * 16),
      hsl(calc(var(--h) * 8), var(--s), var(--l)) calc(var(--space) * 17),
      black calc(var(--space) * 17.001),
      black calc(var(--space) * 17.999),
      hsl(calc(var(--h) * 9), var(--s), var(--l)) calc(var(--space) * 18),
      hsl(calc(var(--h) * 9), var(--s), var(--l)) calc(var(--space) * 19),
      black calc(var(--space) * 19.001),
      black calc(var(--space) * 19.999),
      hsl(calc(var(--h) * 10), var(--s), var(--l)) calc(var(--space) * 20),
      hsl(calc(var(--h) * 10), var(--s), var(--l)) calc(var(--space) * 21),
      black calc(var(--space) * 21.001),
      black calc(var(--space) * 21.999),
      hsl(calc(var(--h) * 11), var(--s), var(--l)) calc(var(--space) * 22),
      hsl(calc(var(--h) * 11), var(--s), var(--l)) calc(var(--space) * 23),
      black calc(var(--space) * 23.001),
      black calc(var(--space) * 23.999),
      hsl(calc(var(--h) * 12), var(--s), var(--l)) calc(var(--space) * 24),
      hsl(calc(var(--h) * 12), var(--s), var(--l)) calc(var(--space) * 25),
      black calc(var(--space) * 25.001),
      black calc(var(--space) * 25.999),
      hsl(calc(var(--h) * 13), var(--s), var(--l)) calc(var(--space) * 26),
      hsl(calc(var(--h) * 13), var(--s), var(--l)) calc(var(--space) * 27),
      black calc(var(--space) * 27.001),
      black calc(var(--space) * 27.999),
      hsl(calc(var(--h) * 14), var(--s), var(--l)) calc(var(--space) * 28),
      hsl(calc(var(--h) * 14), var(--s), var(--l)) calc(var(--space) * 29),
      black calc(var(--space) * 29.001),
      black calc(var(--space) * 29.999),
      hsl(calc(var(--h) * 15), var(--s), var(--l)) calc(var(--space) * 30),
      hsl(calc(var(--h) * 15), var(--s), var(--l)) calc(var(--space) * 31),
      black calc(var(--space) * 31.001),
      black calc(var(--space) * 31.999)
    ),
    repeating-linear-gradient(
      90deg,
      var(--vio),
      var(--blu),
      var(--gre),
      var(--yel),
      var(--red),
      var(--vio)
    ),
    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) * 12)
    ),
    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) * 9)
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(230, 230, 230, 0.85) 0%,
      rgba(200, 200, 200, 0.1) 25%,
      rgb(0, 0, 0) 90%
    );

  background-blend-mode: soft-light, soft-light, screen, overlay;
  background-position: center, calc(((50% - var(--posx)) * 25) + 50%) center,
    calc(var(--posx) * -1.2) var(--posy), var(--pos), center;
  background-size: 100px 100px, 200% 200%, 237% 237%, 195% 195%, 120% 120%;

  filter: brightness(calc((var(--hyp) + 0.7) * 0.7)) contrast(3) saturate(0.35);
}

/*

  GALAXY HOLO

*/

.card[data-rarity="rare holo galaxy"] .card__glare {
  background-image: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgba(222, 245, 250, 0.7) 10%,
    rgba(255, 255, 255, 0.5) 20%,
    rgba(0, 0, 0, 0.5) 90%
  );
}

.card[data-rarity="rare holo"]:not([data-gallery="true"]) .card__glare:after,
.card[data-rarity="rare holo galaxy"] .card__glare:after {
  content: "";
  clip-path: inset(11.5% 8.5% 44.5% 8.5%);
  background-image: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgb(229, 239, 255) 5%,
    rgba(100, 100, 100, 0.5) 35%,
    rgba(0, 0, 0, 0.9) 80%
  );
}

.card[data-rarity="rare holo galaxyFullshine"] .card__shine {
  --space: 4%;

  clip-path: inset(11.5% 8.5% 44.5% 8.5%);

  background-image: var(--galaxy), url(""), url(""),
    repeating-linear-gradient(
      82deg,
      rgb(219, 204, 86) calc(var(--space) * 1),
      rgb(121, 199, 58) calc(var(--space) * 2),
      rgb(58, 192, 183) calc(var(--space) * 3),
      rgb(71, 98, 207) calc(var(--space) * 4),
      rgb(170, 69, 209) calc(var(--space) * 5),
      rgb(255, 90, 180) calc(var(--space) * 6),
      rgb(255, 90, 180) calc(var(--space) * 7),
      rgb(170, 69, 209) calc(var(--space) * 8),
      rgb(71, 98, 207) calc(var(--space) * 9),
      rgb(58, 192, 183) calc(var(--space) * 10),
      rgb(121, 199, 58) calc(var(--space) * 11),
      rgb(219, 204, 86) calc(var(--space) * 12)
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.6) 5%,
      rgba(150, 150, 150, 0.3) 40%,
      rgb(0, 0, 0) 100%
    );

  background-blend-mode: color-dodge, color-burn, saturation, screen;
  background-position: var(--galaxybg, cover), var(--galaxybg, cover),
    var(--galaxybg, cover),
    calc(((50% - var(--posx)) * 2.5) + 50%)
      calc(((50% - var(--posy)) * 2.5) + 50%),
    center;
  background-size: cover, cover, cover, 400% 900%, cover;

  filter: brightness(0.75) contrast(1.2) saturate(1.5);
  mix-blend-mode: color-dodge;
}

.card[data-rarity="rare holo galaxy"] .card__shine {
  --space: 4%;

  clip-path: inset(11.5% 8.5% 44.5% 8.5%);

  background-image: var(--galaxy), var(--galaxy), var(--galaxy),
    repeating-linear-gradient(
      82deg,
      rgb(219, 204, 86) calc(var(--space) * 1),
      rgb(121, 199, 58) calc(var(--space) * 2),
      rgb(58, 192, 183) calc(var(--space) * 3),
      rgb(71, 98, 207) calc(var(--space) * 4),
      rgb(170, 69, 209) calc(var(--space) * 5),
      rgb(255, 90, 180) calc(var(--space) * 6),
      rgb(255, 90, 180) calc(var(--space) * 7),
      rgb(170, 69, 209) calc(var(--space) * 8),
      rgb(71, 98, 207) calc(var(--space) * 9),
      rgb(58, 192, 183) calc(var(--space) * 10),
      rgb(121, 199, 58) calc(var(--space) * 11),
      rgb(219, 204, 86) calc(var(--space) * 12)
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(255, 255, 255, 0.6) 5%,
      rgba(150, 150, 150, 0.3) 40%,
      rgb(0, 0, 0) 100%
    );

  background-blend-mode: color-dodge, color-burn, saturation, screen;
  background-position: var(--galaxybg, cover), var(--galaxybg, cover),
    var(--galaxybg, cover),
    calc(((50% - var(--posx)) * 2.5) + 50%)
      calc(((50% - var(--posy)) * 2.5) + 50%),
    center;
  background-size: cover, cover, cover, 400% 900%, cover;

  filter: brightness(0.75) contrast(1.2) saturate(1.5);
  mix-blend-mode: color-dodge;
}

.card[data-rarity="rare holo"][data-subtypes^="stage"] .card__shine,
.card[data-rarity="rare holo galaxy"][data-subtypes^="stage"] .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="stage"] .card__glare:after,
.card[data-rarity="rare holo galaxy"][data-subtypes^="stage"]
  .card__glare:after {
  clip-path: polygon(
    91.78% 10%,
    57% 10%,
    53.92% 12%,
    17% 12%,
    16% 14%,
    12% 16%,
    8.5% 16%,
    7.93% 47.41%,
    92.07% 47.41%
  );
}
.card[data-rarity="rare holo"][data-subtypes^="supporter"] .card__shine,
.card[data-rarity="rare holo galaxy"][data-subtypes^="supporter"] .card__shine,
.card[data-rarity="rare holo"][data-subtypes^="supporter"] .card__glare:after,
.card[data-rarity="rare holo galaxy"][data-subtypes^="supporter"]
  .card__glare:after {
  clip-path: inset(14.5% 7.9% 48.2% 8.7%);
}

/*

  V

*/

.card[data-rarity*="rare holo v"] .card__shine,
.card[data-rarity*="rare holo v"] .card__shine:after {
  --space: 5%;
  --angle: 133deg;
  --imgsize: 500px;

  background-image: var(--grain),
    repeating-linear-gradient(
      0deg,
      rgb(255, 119, 115) calc(var(--space) * 1),
      rgba(255, 237, 95, 1) calc(var(--space) * 2),
      rgba(168, 255, 95, 1) calc(var(--space) * 3),
      rgba(131, 255, 247, 1) calc(var(--space) * 4),
      rgba(120, 148, 255, 1) calc(var(--space) * 5),
      rgb(216, 117, 255) calc(var(--space) * 6),
      rgb(255, 119, 115) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(0, 0, 0, 0.1) 12%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.25) 120%
    );

  background-blend-mode: screen, hue, hard-light;
  background-size: var(--imgsize) 100%, 200% 700%, 300% 100%, 200% 100%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy),
    var(--posx) var(--posy);

  filter: brightness(0.8) contrast(2.95) saturate(0.5);
}

.card[data-rarity="rare holo v"] .card__shine:after {
  content: "";

  background-position: center, 0% var(--posy),
    calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);
  background-size: var(--imgsize) 100%, 200% 400%, 195% 100%, 200% 100%;

  filter: brightness(1) contrast(2.5) saturate(1.75);
  mix-blend-mode: soft-light;
}

/*

  VMAX

*/

.card[data-rarity="rare holo vmax"] .card__shine {
  --space: 6%;
  --angle: 133deg;
  --imgsize: 60% 30%;
  background-image: var(--Vmaxbg),
    repeating-linear-gradient(
      -33deg,
      rgb(206, 42, 36) calc(var(--space) * 1),
      rgb(157, 170, 223) calc(var(--space) * 2),
      rgb(45, 153, 146) calc(var(--space) * 3),
      rgb(29, 151, 36) calc(var(--space) * 4),
      rgb(181, 64, 228) calc(var(--space) * 5),
      rgb(206, 42, 36) calc(var(--space) * 6)
    ),
    repeating-linear-gradient(
      var(--angle),
      rgba(14, 21, 46, 0.5) 0%,
      hsl(180, 10%, 50%) 2.5%,
      hsl(83, 50%, 35%) 5%,
      hsl(180, 10%, 50%) 7.5%,
      rgba(14, 21, 46, 0.5) 10%,
      rgba(14, 21, 46, 0.5) 15%
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(6, 218, 255, 0.6) 0%,
      rgba(38, 235, 127, 0.6) 25%,
      rgba(155, 78, 228, 0.6) 50%,
      rgba(228, 78, 90, 0.6) 75%
    );

  background-blend-mode: color-burn, screen, soft-light;
  background-size: var(--imgsize), 1100% 1100%, 600% 600%, 200% 200%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy),
    var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2.5) saturate(0.6);
}

.card-grid.svelte-12sq7m7 {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2vw;
  transform-style: preserve-3d;
  height: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 50px;
  position: relative;
}
.card-grid.active.svelte-12sq7m7 {
  z-index: 99;
}
@media screen and (min-width: 600px) {
  .card-grid.svelte-12sq7m7 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 900px) {
  .card-grid.svelte-12sq7m7 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.card__glare.svelte-y0attf {
  transform: translateZ(1.4px);
  background: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.8) 10%,
    rgba(255, 255, 255, 0.65) 20%,
    rgba(0, 0, 0, 0.5) 90%
  );
  mix-blend-mode: overlay;
  opacity: var(--o);
}
.card__glare.holo.svelte-y0attf:not(.v):not(.vmax):not(.vstar) {
  opacity: calc(var(--o) * 0.8);
  filter: brightness(0.8) contrast(1.5);
}
.card__glare.v.svelte-y0attf,
.card__glare.vfull.svelte-y0attf,
.card__glare.vmax.svelte-y0attf,
.card__glare.vstar.svelte-y0attf {
  filter: brightness(0.9) contrast(1.75);
  background: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgb(255, 255, 255) 0%,
    rgba(133, 137, 141, 0.33) 45%,
    rgba(100, 100, 100, 0.65) 120%
  );
  opacity: calc(var(--o) * 0.66);
}
.card__glare.vmax.svelte-y0attf {
  background: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.75) 0%,
    rgba(99, 99, 99, 0.35) 45%,
    rgba(0, 0, 0, 1) 120%
  );
}
.card[data-rarity="rare holo"][data-gallery="true"] .card__glare.svelte-y0attf {
  background: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.8) 10%,
    rgba(255, 255, 255, 0.6) 35%,
    rgba(0, 0, 0, 1) 85%
  );
}
.card[data-rarity="radiant rare"] .card__glare.svelte-y0attf {
  background-image: radial-gradient(
    farthest-corner circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.9) 10%,
    rgba(255, 255, 255, 0.6) 30%,
    rgba(0, 0, 0, 0.8) 80%
  );
}
.card__shine.svelte-8e4zv4 {
  display: grid;
  overflow: hidden;
  z-index: 3;
  transform: translateZ(1px);
  background: transparent;
  mix-blend-mode: color-dodge;
  filter: brightness(0.85) contrast(2.75) saturate(0.65);
  background-size: cover;
  background-position: center;
  opacity: var(--o);
}
.card__shine.svelte-8e4zv4:before {
  grid-area: 1/1;
  transform: translateZ(1px);
}
.card__shine.svelte-8e4zv4:after {
  grid-area: 1/1;
  transform: translateZ(1.2px);
  border-radius: var(--radius);
}
:root {
  --mx: 50%;
  --my: 50%;
  --s: 1;
  --o: 0;
  --tx: 0px;
  --ty: 0px;
  --rx: 0deg;
  --ry: 0deg;
  --pos: 50% 50%;
  --posx: 50%;
  --posy: 50%;
  --hyp: 0;
}
.card.animated-card.animated-card {
  --radius: 4.55% / 3.5%;
  --back: #004177;
  --glow: #69d1e9;
  z-index: calc(var(--s) * 100);
  transform: translateZ(0.1px);
  -webkit-transform: translate3d(0, 0, 0.1px);
  will-change: transform, visibility;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.card.interacting.animated-card.animated-card {
  z-index: calc(var(--s) * 120);
}
.card.active.animated-card .card__translater.animated-card,
.card.active.animated-card .card__rotator.animated-card {
  touch-action: none;
}
.card__translater.animated-card.animated-card,
.card__rotator.animated-card.animated-card {
  display: grid;
  perspective: 600px;
  transform-origin: center;
  -webkit-transform-origin: center;
  will-change: transform;
}
.card__translater.animated-card.animated-card {
  width: auto;
  position: relative;
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
  -webkit-transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
}
.card__rotator.animated-card.animated-card {
  transform: rotateY(var(--rx)) rotateX(var(--ry));
  transform-style: preserve-3d;
  -webkit-transform: rotateY(var(--rx)) rotateX(var(--ry));
  -webkit-transform-style: preserve-3d;
  box-shadow: 0 10px 20px -5px #000;
  border-radius: var(--radius);
  outline: none;
  transition: box-shadow 0.4s ease, outline 0.2s ease;
}
button.card__rotator.animated-card.animated-card {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: top;
  padding: 0;
}
.card.active.animated-card .card__rotator.animated-card {
  box-shadow: 0 0 10px 0 var(--glow), 0 0 10px 0 var(--glow),
    0 0 30px 0 var(--glow);
}
.card__rotator.animated-card.animated-card:focus {
  box-shadow: 0 0 10px 0 var(--glow), 0 0 10px 0 var(--glow),
    0 0 30px 0 var(--glow);
}
.card.active.animated-card .card__rotator.animated-card:focus {
  box-shadow: 0 10px 30px 3px #000;
}
.card__rotator.animated-card * {
  width: 100%;
  display: grid;
  grid-area: 1/1;
  border-radius: var(--radius);
  image-rendering: optimizeQuality;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.card__rotator.animated-card img.animated-card {
  outline: 1px solid transparent;
  aspect-ratio: 0.716;
  height: auto;
}
.card__back.animated-card.animated-card {
  background-color: var(--back);
  transform: rotateY(180deg) translateZ(1px);
  -webkit-transform: rotateY(180deg) translateZ(1px);
  backface-visibility: visible;
}
.card__front.animated-card.animated-card,
.card__front.animated-card .animated-card {
  backface-visibility: hidden;
}
.card__front.animated-card.animated-card {
  opacity: 1;
  transition: opacity 0.33s ease-out;
}
.loading.animated-card .card__front.animated-card {
  opacity: 0;
}
.loading.animated-card .card__back.animated-card {
  transform: rotateY(0);
  -webkit-transform: rotateY(0deg);
}
.back-to-top.svelte-1eve913 a.svelte-1eve913 {
  color: inherit;
  text-decoration: none;
}

.card[data-rarity="rare holo vstar"][data-supertype="AmbitiveTG"] .card__shine,
.card[data-rarity="rare holo vstar"][data-supertype="AmbitiveTG"]
  .card__shine:after {
  --space: 5%;
  --angle: 133deg;
  --imgsize: 18% 15%;

  background-image: var(--Vstar),
    repeating-linear-gradient(
      0deg,
      rgb(255, 119, 115) calc(var(--space) * 1),
      rgba(255, 237, 95, 1) calc(var(--space) * 2),
      rgba(168, 255, 95, 1) calc(var(--space) * 3),
      rgba(131, 255, 247, 1) calc(var(--space) * 4),
      rgba(120, 148, 255, 1) calc(var(--space) * 5),
      rgb(216, 117, 255) calc(var(--space) * 6),
      rgb(255, 119, 115) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(0, 0, 0, 0.1) 12%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.25) 120%
    );

  background-blend-mode: soft-light, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy),
    var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.5) + 0.5)) contrast(2) saturate(0.75);
}

.card[data-rarity="rare holo vstar"][data-supertype="AmbitiveTG"]
  .card__shine:after {
  content: "";

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  background-position: center, 0% var(--posy),
    calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.5) + 0.8)) contrast(1.5)
    saturate(1.75);
  mix-blend-mode: exclusion;
}

.card[data-rarity="rare ultra"][data-supertype="AmbitiveTG"] .card__shine,
.card[data-rarity="rare ultra"][data-supertype="AmbitiveTG"]
  .card__shine:after {
  --space: 5%;
  --angle: 133deg;
  --imgsize: 50% 42%;

  background-image: var(--illusion),
    repeating-linear-gradient(
      0deg,
      rgb(255, 119, 115) calc(var(--space) * 1),
      rgba(255, 237, 95, 1) calc(var(--space) * 2),
      rgba(168, 255, 95, 1) calc(var(--space) * 3),
      rgba(131, 255, 247, 1) calc(var(--space) * 4),
      rgba(120, 148, 255, 1) calc(var(--space) * 5),
      rgb(216, 117, 255) calc(var(--space) * 6),
      rgb(255, 119, 115) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(0, 0, 0, 0.1) 12%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.25) 120%
    );

  background-blend-mode: exclusion, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  background-position: center center, 0% var(--posy), var(--posx) var(--posy),
    var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.3) + 0.5)) contrast(2) saturate(1.5);
}

.card[data-rarity="rare ultra"][data-supertype="AmbitiveTG"]
  .card__shine:after {
  content: "";

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  background-position: center center, 0% var(--posy),
    calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.5) + 0.8)) contrast(1.6) saturate(1.4);
  mix-blend-mode: exclusion;
}

.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine,
.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after {
  --space: 5%;
  --angle: 133deg;
  --imgsize: 25% 20%;

  background-image: var(--trainerbg),
    repeating-linear-gradient(
      0deg,
      rgb(255, 119, 115) calc(var(--space) * 1),
      rgba(255, 237, 95, 1) calc(var(--space) * 2),
      rgba(168, 255, 95, 1) calc(var(--space) * 3),
      rgba(131, 255, 247, 1) calc(var(--space) * 4),
      rgba(120, 148, 255, 1) calc(var(--space) * 5),
      rgb(216, 117, 255) calc(var(--space) * 6),
      rgb(255, 119, 115) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(0, 0, 0, 0.1) 12%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.25) 120%
    );

  background-blend-mode: difference, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy),
    var(--posx) var(--posy);

  filter: brightness(0.75) contrast(2.5) saturate(0.75);
}

.card[data-rarity="rare ultra"][data-subtypes*="supporter"] .card__shine:after {
  content: "";

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  background-position: center, 0% var(--posy),
    calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

  filter: brightness(1.2) contrast(1) saturate(1.75);
  mix-blend-mode: exclusion;
}

/*

  RAINBOW SECRET

*/

.card[data-rarity^="rare rainbow"] .card__shine,
.card[data-rarity^="rare rainbow"] .card__shine:after {
  --rainbowspace: 9%;
  --overlayspace: 12%;
  --angle: -20deg;
  --angle2: 130deg;
  --imgsize: 130% 180%;

  background-image: var(--rainbow),
    repeating-linear-gradient(
      var(--angle),
      rgb(253, 71, 65) calc(var(--rainbowspace) * 1),
      rgb(255, 243, 151) calc(var(--rainbowspace) * 2),
      rgb(95, 255, 180) calc(var(--rainbowspace) * 3),
      rgba(131, 255, 247, 1) calc(var(--rainbowspace) * 4),
      rgb(75, 198, 255) calc(var(--rainbowspace) * 5),
      rgb(255, 73, 246) calc(var(--rainbowspace) * 6),
      rgb(255, 56, 49) calc(var(--rainbowspace) * 7)
    ),
    repeating-linear-gradient(
      var(--angle2),
      rgba(89, 46, 80, 0.5) calc(var(--overlayspace) * 1),
      hsl(263, 43%, 76%) calc(var(--overlayspace) * 2),
      rgb(223, 96, 202) calc(var(--overlayspace) * 3),
      hsl(180, 57%, 56%) calc(var(--overlayspace) * 4),
      rgba(14, 21, 46, 0.5) calc(var(--overlayspace) * 5),
      rgba(14, 21, 46, 0.5) calc(var(--overlayspace) * 6)
    ),
    var(--illusion2);

  background-size: 20% 15%, 500% 500%, 1000% 1000%, var(--imgsize);
  background-position: center, calc(var(--posx) * 1.5) calc(var(--posy) * 1.5),
    calc(var(--posx) * 1.5) var(--posy), bottom left;
  background-blend-mode: color-burn, soft-light, normal;

  filter: brightness(calc((var(--hyp) * 0.25) + 0.66)) contrast(2.2)
    saturate(0.9);
}

.card[data-rarity^="rare rainbow"] .card__shine:after {
  content: "";

  background-position: center, 0% calc(var(--posy) * -1.75),
    calc(var(--posx) * -1.75) calc(var(--posy) * -1), bottom left;
  mix-blend-mode: exclusion;
}

/*

  RAINBOW SECRET FULL/ALT

*/

.card[data-rarity="rare rainbow alt"] .card__shine,
.card[data-rarity="rare rainbow alt"] .card__shine:after {
  filter: brightness(calc((var(--hyp) * 0.25) + 0.66)) contrast(3) saturate(0.7);
}

/*

  GOLD SECRET

*/

.card[data-rarity="rare secret"] .card__shine,
.card[data-rarity="rare secret"] .card__shine:after {
  --angle: 110deg;
  --imgsize: 28% 23%;

  background-image: var(--glitter),
    repeating-linear-gradient(
      var(--angle),
      rgba(89, 46, 80, 0.5) 0%,
      hsl(39, 37%, 60%) 2.5%,
      rgb(216, 183, 92) 5%,
      hsl(39, 37%, 60%) 7.5%,
      rgba(14, 21, 46, 0.5) 10%,
      rgba(14, 21, 46, 0.5) 15%
    ),
    var(--metal);

  background-size: 25% 25%, 600% 100%, var(--imgsize);
  background-position: center, var(--posx) var(--posy), center;
  background-blend-mode: color-burn, darken;

  filter: brightness(calc((var(--hyp) * 0.4) + 0.7)) contrast(3) saturate(0.66);
}

.card[data-rarity="rare secret"] .card__shine:after {
  content: "";

  background-image: var(--glitter),
    repeating-linear-gradient(
      var(--angle),
      rgba(89, 46, 80, 0.5) 0%,
      hsl(39, 37%, 60%) 2.5%,
      rgb(216, 183, 92) 5%,
      hsl(39, 37%, 60%) 7.5%,
      rgba(14, 21, 46, 0.5) 10%,
      rgba(14, 21, 46, 0.5) 15%
    );

  background-position: center, calc(var(--posx) * -1) calc(var(--posy) * -1),
    center;

  filter: brightness(calc((var(--hyp) * 0.3) + 0.7)) contrast(2.5)
    saturate(0.66);
  mix-blend-mode: exclusion;
}

/*

  RADIANT

*/

.card[data-rarity*="radiant"] .card__shine {
  --barwidth: 1.2%;
  --space: 200px;

  clip-path: inset(2.8% 4% round 2.55% / 1.5%);

  background-image: repeating-linear-gradient(
      0deg,
      hsl(180, 70%, 50%) calc(var(--space) * 1),
      hsl(110, 80%, 50%) calc(var(--space) * 2),
      hsl(80, 90%, 50%) calc(var(--space) * 3),
      hsl(50, 90%, 50%) calc(var(--space) * 4),
      hsl(80, 90%, 50%) calc(var(--space) * 5),
      hsl(110, 80%, 50%) calc(var(--space) * 6),
      hsl(180, 70%, 50%) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      45deg,
      hsl(0, 0%, 10%) 0%,
      hsl(0, 0%, 10%) 1%,
      hsl(0, 0%, 10%) var(--barwidth),
      hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
    ),
    repeating-linear-gradient(
      -45deg,
      hsl(0, 0%, 10%) 0%,
      hsl(0, 0%, 10%) 1%,
      hsl(0, 0%, 10%) var(--barwidth),
      hsl(0, 0%, 20%) calc(var(--barwidth) + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 2),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 2 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 3),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 3 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 4),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 4 + 0.01%),
      hsl(0, 0%, 50%) calc(var(--barwidth) * 5),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 5 + 0.01%),
      hsl(0, 0%, 42.5%) calc(var(--barwidth) * 6),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 6 + 0.01%),
      hsl(0, 0%, 35%) calc(var(--barwidth) * 7),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 7 + 0.01%),
      hsl(0, 0%, 20%) calc(var(--barwidth) * 8),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 8 + 0.01%),
      hsl(0, 0%, 10%) calc(var(--barwidth) * 9),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 9 + 0.01%),
      hsl(0, 0%, 0%) calc(var(--barwidth) * 10)
    );

  background-size: 400% 400%, 210% 210%, 210% 210%;
  background-position: calc(((var(--posx) - 50%) * -2.5) + 50%)
      calc(((var(--posy) - 50%) * -2.5) + 50%),
    calc(((var(--posx) - 50%) * 1.5) + 50%)
      calc(((var(--posy) - 50%) * 1.5) + 50%),
    calc(((var(--posx) - 50%) * 1.5) + 50%)
      calc(((var(--posy) - 50%) * 1.5) + 50%);

  background-blend-mode: exclusion, darken, color-dodge;

  filter: brightness(0.95) contrast(4) saturate(0.75);
  mix-blend-mode: color-dodge;
}

.card[data-rarity*="radiant"] .card__shine:after {
  content: "";

  background-image: var(--glitter),
    repeating-linear-gradient(
      55deg,
      rgb(255, 161, 158) calc(var(--space) * 1),
      rgb(85, 178, 255) calc(var(--space) * 2),
      rgb(255, 199, 146) calc(var(--space) * 3),
      rgb(130, 255, 213) calc(var(--space) * 4),
      rgb(253, 170, 240) calc(var(--space) * 5),
      rgb(148, 241, 255) calc(var(--space) * 6),
      rgb(255, 161, 158) calc(var(--space) * 7)
    );

  background-size: 25% 25%, 400% 100%;
  background-position: center,
    calc(((var(--posx) - 50%) * -2.5) + 50%)
      calc(((var(--posy) - 50%) * -2.5) + 50%);

  filter: brightness(1) contrast(1) saturate(0);
  mix-blend-mode: soft-light;

  background-blend-mode: multiply;
}

.card[data-rarity*="radiant"] .card__shine:before {
  content: "";
  z-index: 7;
  grid-area: 1/1;

  background-image: radial-gradient(
    farthest-corner ellipse at calc(((var(--mx)) * 0.5) + 25%)
      calc(((var(--my)) * 0.5) + 25%),
    rgba(100, 100, 100, 0.5) 5%,
    rgba(50, 50, 50, 0.4) 15%,
    rgba(0, 0, 0, 0.6) 30%
  );

  background-image: radial-gradient(
    farthest-corner ellipse at calc(((var(--mx)) * 0.5) + 25%)
      calc(((var(--my)) * 0.5) + 25%),
    rgba(100, 100, 100, 0.8) 10%,
    rgba(50, 50, 50, 0.34) 20%,
    rgba(0, 0, 0, 1) 50%
  );

  background-position: center;
  background-size: 350% 350%;

  mix-blend-mode: multiply;
}

.card[data-rarity="rare holo"][data-gallery="true"] .card__shine {
  --space: 5%;
  --angle: -22deg;
  --imgsize: 200% 400%;

  clip-path: inset(2.8% 4% round 2.55% / 1.5%);

  background-image: repeating-linear-gradient(
    var(--angle),
    rgba(174, 102, 202, 0.75) calc(var(--space) * 1),
    rgba(228, 77, 72, 0.75) calc(var(--space) * 2),
    rgba(216, 197, 55, 0.75) calc(var(--space) * 3),
    rgba(124, 201, 62, 0.75) calc(var(--space) * 4),
    rgba(80, 177, 170, 0.75) calc(var(--space) * 5),
    rgba(136, 160, 255, 0.75) calc(var(--space) * 6),
    rgba(176, 105, 204, 0.75) calc(var(--space) * 7)
  );

  background-blend-mode: color-dodge;
  background-size: var(--imgsize);
  background-position: 0% calc(var(--posy) * 1), var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.3) + 0.6)) contrast(2.3) saturate(1.1);
}

.card[data-rarity="rare holo"][data-gallery="true"] .card__shine:after {
  content: "";

  background-image: radial-gradient(
    farthest-corner ellipse at calc(((var(--mx)) * 0.5) + 25%)
      calc(((var(--my)) * 0.5) + 25%),
    rgb(255, 255, 255) 5%,
    rgba(55, 0, 55, 0.6) 25%,
    rgb(55, 55, 55) 90%
  );

  background-position: center;
  background-size: 200% 200%;

  filter: brightness(calc((var(--hyp) * 0.2) + 0.4)) contrast(0.85)
    saturate(1.1);
  mix-blend-mode: hard-light;
}

/*

  TRAINER GALLERY V

*/

.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine,
.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine:after {
  --space: 5%;
  --angle: 133deg;
  --img: var(--illusion);
  --imgsize: 60% 52%;

  background-image: var(--img),
    repeating-linear-gradient(
      0deg,
      rgb(255, 119, 115) calc(var(--space) * 1),
      rgba(255, 237, 95, 1) calc(var(--space) * 2),
      rgba(168, 255, 95, 1) calc(var(--space) * 3),
      rgba(131, 255, 247, 1) calc(var(--space) * 4),
      rgba(120, 148, 255, 1) calc(var(--space) * 5),
      rgb(216, 117, 255) calc(var(--space) * 6),
      rgb(255, 119, 115) calc(var(--space) * 7)
    ),
    repeating-linear-gradient(
      var(--angle),
      #0e152e 0%,
      hsl(180, 10%, 60%) 3.8%,
      hsl(180, 29%, 66%) 4.5%,
      hsl(180, 10%, 60%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--mx) var(--my),
      rgba(0, 0, 0, 0.1) 12%,
      rgba(0, 0, 0, 0.15) 20%,
      rgba(0, 0, 0, 0.25) 120%
    );

  background-blend-mode: exclusion, hue, hard-light;
  background-size: var(--imgsize), 200% 700%, 300% 100%, 200% 100%;
  background-position: center, 0% var(--posy), var(--posx) var(--posy),
    var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.4) + 0.5)) contrast(2.5) saturate(1);
}

.card[data-rarity="rare holo v"][data-gallery="true"] .card__shine:after {
  content: "";

  background-size: var(--imgsize), 200% 400%, 195% 100%, 200% 100%;
  background-position: center, 0% var(--posy),
    calc(var(--posx) * -1) calc(var(--posy) * -1), var(--posx) var(--posy);

  filter: brightness(calc((var(--hyp) * 0.5) + 0.7)) contrast(2) saturate(1);
  mix-blend-mode: exclusion;
}

.card[data-rarity="rare holo v"][data-gallery="true"][data-subtypes*="vmax"]
  .card__shine,
.card[data-rarity="rare holo v"][data-gallery="true"][data-subtypes*="vmax"]
  .card__shine:after {
  --img: var(--illusion);
  --imgsize: 30% 26%;
}

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
  scroll-padding-top: 2em;
}

body {
  font-family: Roboto;
  background-color: rgb(25, 25, 25);
}

.wrapper {
  font-size: 5rem;
  height: 2em;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: screen;
  margin: 40px 0 40px 0;
}
.wrapper.invert span {
  color: black;
}
.wrapper.invert span::before {
  -webkit-text-stroke: 0.1em var(--color);
}
.wrapper span {
  --color: #ffba11;
  font-family: Impact, "Anton", Haettenschweiler, "Arial Narrow Bold",
    sans-serif;
  font-weight: 700;
  font-style: italic;
  display: block;
  position: absolute;
  color: var(--color);
  letter-spacing: -0.005em;
}
.wrapper span::before,
.wrapper span::after {
  content: attr(data-text);
  display: block;
  position: relative;
  padding: 0 0.1em;
  z-index: 1;
}
.wrapper span::before {
  position: absolute;
  -webkit-text-stroke: 0.1em black;
  z-index: 0;
}
.wrapper span:first-child {
  transform: translate(-0.255em, -0.25em);
}
.wrapper span:last-child {
  --color: #3d23ff;
  transform: translate(0.255em, 0.25em);
}