/*

  HYPEPULL HOLOGRAPHIC BASE
  Foundation styles shared between the Twitch extension and the Nuxt dashboard.
  Adapted from simeydotme/pokemon-cards-css for HypePull's `.card-body.card`
  element structure (no `.card__rotator` grid wrapper).

  Loaded once globally — the per-effect files in this directory rely on the
  CSS variables and base layer positioning defined here.

*/

:root {
  --card-aspect: 0.718;
  --card-radius: 4.55% / 3.5%;
  --card-glow: hsl(175, 100%, 90%);

  --sunpillar-1: hsl(2, 100%, 73%);
  --sunpillar-2: hsl(53, 100%, 69%);
  --sunpillar-3: hsl(93, 100%, 69%);
  --sunpillar-4: hsl(176, 100%, 76%);
  --sunpillar-5: hsl(228, 100%, 74%);
  --sunpillar-6: hsl(283, 100%, 73%);

  --sunpillar-clr-1: var(--sunpillar-1);
  --sunpillar-clr-2: var(--sunpillar-2);
  --sunpillar-clr-3: var(--sunpillar-3);
  --sunpillar-clr-4: var(--sunpillar-4);
  --sunpillar-clr-5: var(--sunpillar-5);
  --sunpillar-clr-6: var(--sunpillar-6);

  --glitter: url('/twitch/img/glitter.png');
  --foil: url('/twitch/img/illusion.png');
  --grain: url('/twitch/img/grain.webp');
  --glittersize: 25%;

  /* Shared vars used by multiple effects (simey/cards.css) */
  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;
  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;
}

.card-body.card .card__shine,
.card-body.card .card__glare {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 5cqi;
  pointer-events: none;
}

.card-body.card .card__shine {
  display: grid;
  transform: translateZ(1px);
  overflow: hidden;
  z-index: 100;
  background: transparent;
  background-size: cover;
  background-position: center;
  filter: brightness(.85) contrast(2.75) saturate(.65);
  mix-blend-mode: color-dodge;
  opacity: var(--card-opacity);
}

.card-body.card .card__shine:before,
.card-body.card .card__shine:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5cqi;
}

.card-body.card .card__glare {
  transform: translateZ(1.41px);
  overflow: hidden;
  z-index: 101;
  background-image: radial-gradient(
    farthest-corner circle at var(--glare-x) var(--glare-y),
    hsla(0, 0%, 100%, 0.4) 10%,
    hsla(0, 0%, 100%, 0.25) 20%,
    hsla(0, 0%, 0%, 0.2) 90%
  );
  opacity: calc(var(--card-opacity) * 0.65);
  mix-blend-mode: overlay;
}