/*

  RADIANT HOLO
  Adapted from simeydotme/pokemon-cards-css for HypePull.

  Original file has `.card:not(.masked)` overrides for the "no mask" variant
  (sets --foil to trainerbg, applies `difference` blend mode). HypePull always
  applies `.masked` when a holo effect is active, so we inline those overrides
  here directly so radiant renders the same way as the live simey demo.

  Image path also rewritten from `/img/` (simey) to `/twitch/img/` (HypePull).

*/

.card-body.card[data-rarity="radiant rare"] .card__shine {

  /* Inlined from the original `:not(.masked)` block */
  --mask: none;
  --foil: url("/twitch/img/trainerbg.png");
  --imgsize: 25% auto;

  --barwidth: 1.2%;
  --space: 200px;
  --hue: 50;

  background-image:
    radial-gradient(
      farthest-corner ellipse
      at var(--glare-x) var(--glare-y),
      hsl(0, 0%, 92%) 0%,
      hsl(0, 0%, 75%) 25%,
      hsl(0, 0%, 50%) 75%
    ),
    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: cover, 210% 210%, 210% 210%;
  background-position:
    center,
    calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% ),
    calc( ((var(--background-x) - 50%) * 1.5) + 50% ) calc( ((var(--background-y) - 50%) * 1.5) + 50% );

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

  filter: brightness(.5) contrast(2) saturate(1.75);
  mix-blend-mode: color-dodge;

}

.card-body.card[data-rarity="radiant rare"] .card__shine:after {

  background-image:
    var(--foil),
    repeating-linear-gradient( 55deg,
      hsl(3, 95%, 85%) calc(var(--space)*1),
      hsl(207, 100%, 84%) calc(var(--space)*2),
      hsl(29, 100%, 85%) calc(var(--space)*3),
      hsl(160, 100%, 86%) calc(var(--space)*4),
      hsl(309, 94%, 87%) calc(var(--space)*5),
      hsl(188, 95%, 85%) calc(var(--space)*6),
      hsl(3, 95%, 85%) calc(var(--space)*7)
    );

  background-size: var(--imgsize), 400% 100%;
  background-position: center, calc( ((var(--background-x) - 50%) * -2.5) + 50% ) calc( ((var(--background-y) - 50%) * -2.5) + 50% );

  filter: brightness(.6) contrast(3) saturate(2);
  mix-blend-mode: color-dodge;

  /* `difference` blend mode is what makes the radiant pattern interact with the foil
     and create the characteristic crinkled-foil look. */
  background-blend-mode: difference;

}

.card-body.card[data-rarity="radiant rare"] .card__shine:before {

  z-index: 2;

  background-image:
    var(--glitter),
    radial-gradient(
      farthest-corner ellipse at calc( ((var(--pointer-x)) * 0.5) + 25% ) calc( ((var(--pointer-y)) * 0.5) + 25% ),
      hsla(0, 0%, 58%, 0.8) 10%,
      hsla(0, 0%, 20%, 0.9) 20%,
      hsla(0, 0%, 20%, 0.5) 50%
    );

  background-position: center;
  background-size: 15% 15%, 350% 350%;
  background-blend-mode: color-dodge;

  mix-blend-mode: overlay;
  filter: brightness(.66) contrast(2) saturate(.5);

}

.card-body.card[data-rarity="radiant rare"] .card__glare {

  background-image:
    radial-gradient(
      farthest-corner circle at var(--glare-x) var(--glare-y),
      hsla(0, 0%, 100%, 0.4) 0%,
      hsla(0, 0%, 30%, 0.35) 110%
    );

  filter: brightness(1) contrast(1.2);
  mix-blend-mode: hard-light;
  opacity: calc(var(--card-opacity) * 0.55);

}