.holo {

  --grain: url("/assets/img/grain.webp");
  --glitter: url("/assets/img/glitter.png");
  --glittersize: 25%;

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;
  
  /* Sunpillar colors required for full art and other holo effects */
  --sunpillar-clr-1: #ffffff;
  --sunpillar-clr-2: #0dbde9;
  --sunpillar-clr-3: #21e985;
  --sunpillar-clr-4: #eedf10;
  --sunpillar-clr-5: #f80e35;
  --sunpillar-clr-6: #c929f1;

  --clip: inset( 9.85% 8% 52.85% 8% );
  --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);

  --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);

  --clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
  --clip-borders: inset(2.8% 4% round 2.55% / 1.5%);

}

.holo__shine,
.holo__glare {
  
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
 
}

/* .holo {

  --grain: url("/assets/img/grain.webp");
  --glitter: url("/assets/img/glitter.png");
  --glittersize: 25%;

  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;

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

  --clip: inset( 9.85% 8% 52.85% 8% );
  --clip-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50%);

  --clip-stage: polygon(91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15%);
  --clip-stage-invert: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50%);

  --clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);
  --clip-borders: inset(2.8% 4% round 2.55% / 1.5%);

}

.holo__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;

  background-image:
    var(--grain),
    var(--glitter),
    linear-gradient(
      var(--angle),
      transparent 0%,
      var(--red) 10%,
      var(--yellow) 20%,
      var(--green) 30%,
      var(--blue) 40%,
      var(--violet) 50%,
      var(--blue) 60%,
      var(--green) 70%,
      var(--yellow) 80%,
      var(--red) 90%,
      transparent 100%
    );
  
  background-size: var(--imgsize), var(--glittersize), 200% 70%;
  background-position: center, center, 50% 50%;
  background-blend-mode: overlay, overlay, overlay;
  opacity: 0;
  mix-blend-mode: color-dodge;
  filter: brightness(1.2) contrast(0.8);
}

.holo__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  will-change: transform, opacity, background-image, background-size,
    background-position, background-blend-mode, filter;
  
  background: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 20%,
    transparent 50%
  );
  
  mix-blend-mode: overlay;
  opacity: 0;
} */