/* Based on https://poke-holo.simey.me */
:root {
  --body-color: #010c15;
  --accent-color: #26d0ce;
  --extra-color: #f4a0ba;

  --hyp: 0;
  --text-size: 50%;
  --radius: 4.55% / 3.5%;

  --red: #f80e7b;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;

  --mx: 50%;
  --my: 50%;
  --posx: 50%;
  --posy: 50%;
  
  --width: 330px;

  --texture: url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/illusion.webp");

  color-scheme: dark;
}

.atropos-inner {
  border-radius: var(--radius);
  animation: card-shadow 3.5s infinite alternate;
}

.card {
  width: var(--width);
  aspect-ratio: 0.714;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  transform-style: preserve-3d;

  & .card-front {
    z-index: 0;
    width: 100%;
    height: 100%;
    position: relative;

    & .card-image {
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    & .card-shine {
      --rainbow-gradient-1: repeating-linear-gradient(
        0deg,
        #ff7773 calc(5% * 1),
        #ffed5f calc(5% * 2),
        #a8ff5f calc(5% * 3),
        #83fff7 calc(5% * 4),
        #7894ff calc(5% * 5),
        #d875ff calc(5% * 6),
        #ff7773 calc(5% * 7)
      );
      --rainbow-gradient-2: repeating-linear-gradient(
        133deg,
        #0e152e 0%,
        #8fa3a3 3.8%,
        #8fc1c1 4.5%,
        #8fa3a3 5.2%,
        #0e152e 10%,
        #0e152e 12%
      );
      --radial-gradient: radial-gradient(
        farthest-corner circle at var(--mx) var(--my),
        rgb(0 0 0 / 0.1) 12%,
        rgb(0 0 0 / 0.15) 20%,
        rgb(0 0 0 / 0.25) 120%
      );

      width: 100%;
      height: 100%;
      z-index: 2;
      opacity: 1;
      position: absolute;
      inset: 0;
      transition: 0.3s ease;
      mix-blend-mode: color-dodge;

      background-image: var(--texture), var(--rainbow-gradient-1),
        var(--rainbow-gradient-2), var(--radial-gradient);
      background-size: var(--text-size), 200% 700%, 300%, 200%;
      background-position: center, 0% var(--posy), var(--posx) var(--posy),
        var(--posx) var(--posy);
      background-blend-mode: exclusion, hue, hard-light, exclusion;

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

      &::after {
        content: " ";
        visibility: visible;

        width: 100%;
        height: 100%;
        z-index: 2;
        position: absolute;
        inset: 0;
        mix-blend-mode: exclusion;

        background-image: var(--texture), var(--rainbow-gradient-1),
          var(--rainbow-gradient-2), var(--radial-gradient);
        background-blend-mode: exclusion, hue, hard-light, exclusion;
        background-size: var(--text-size), 200% 400%, 195%, 200%;
        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.6)
          saturate(1.4);
      }
    }
  }
}

@keyframes card-shadow {
  0% {
    box-shadow: 0px 0px 33px 9px rgb(from var(--red) r g b / 0.3);
  }

  25% {
    box-shadow: 0px 0px 33px 9px rgb(from var(--yellow) r g b / 0.3);
  }

  50% {
    box-shadow: 0px 0px 33px 9px rgb(from var(--green) r g b / 0.3);
  }

  75% {
    box-shadow: 0px 0px 33px 9px rgb(from var(--blue) r g b / 0.3);
  }

  100% {
    box-shadow: 0px 0px 33px 9px rgb(from var(--violet) r g b / 0.3);
  }
}