/* src/styles/base.css */
:root {
  --card-aspect: 0.718;
  --card-radius: 4.55% / 3.5%;
  --card-edge: hsl(47, 100%, 78%);
  --card-back: hsl(205, 100%, 25%);
  --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);
  --pointer-x: 50%;
  --pointer-y: 50%;
  --card-scale: 1;
  --card-opacity: 0;
  --translate-x: 0px;
  --translate-y: 0px;
  --rotate-x: 0deg;
  --rotate-y: 0deg;
  --background-x: var(--pointer-x);
  --background-y: var(--pointer-y);
  --pointer-from-center: 0;
  --pointer-from-top: var(--pointer-from-center);
  --pointer-from-left: var(--pointer-from-center);
  --pointer-dx: 0;
  --pointer-dy: 0;
  --tilt-x: 0;
  --tilt-y: 0;
  --card-active: 0;
}
.holo-card {
  --grain: var(--hc-grain, none);
  --glitter: var(--hc-glitter, none);
  --foil: none;
  --glittersize: 25%;
  --space: 5%;
  --angle: 133deg;
  --imgsize: cover;
  --hc-brightness: 1;
  --hc-contrast: 1;
  --hc-saturate: 1;
  --hc-glare-opacity: 1;
  --hc-shine-opacity: 1;
  --mask-size: cover;
  --mask-position: center center;
  --mask-repeat: no-repeat;
  --layer-blend: normal;
  --layer-size: cover;
  --layer-position: center;
  --layer-opacity: 1;
  --layer-parallax: 0;
  --red: #f80e35;
  --yellow: #eedf10;
  --green: #21e985;
  --blue: #0dbde9;
  --violet: #c929f1;
  transform: translate3d(0px, 0px, 0.01px);
  pointer-events: none;
  z-index: calc(var(--card-scale) * 2);
  will-change:
    transform,
    visibility,
    z-index;
  transform-style: preserve-3d;
}
.holo-card,
.holo-card * {
  outline: 1px solid transparent;
}
.holo-card:not(.holo-card--interactive) .holo-card__translater,
.holo-card:not(.holo-card--interactive) .holo-card__rotator,
.holo-card:not(.holo-card--interactive) .holo-card__shine,
.holo-card:not(.holo-card--interactive) .holo-card__glare {
  transition: all 0.3s ease;
}
.holo-card:not(.holo-card--interactive):hover {
  --pointer-x: 25%;
  --pointer-y: 10%;
  --card-scale: 1.1;
  --card-opacity: 1;
  --translate-x: 0px;
  --translate-y: -10px;
  --rotate-x: 7deg;
  --rotate-y: -19deg;
  --background-x: 44%;
  --background-y: 36%;
  --pointer-from-center: 0.9;
  --pointer-from-top: 0.11;
  --pointer-from-left: 0.25;
}
.holo-card,
.holo-card__rotator {
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
}
.holo-card--interacting {
  z-index: calc(var(--card-scale) * 120);
}
.holo-card--active .holo-card__translater,
.holo-card--active .holo-card__rotator {
  touch-action: none;
}
.holo-card__translater,
.holo-card__rotator {
  display: grid;
  perspective: var(--card-perspective, 600px);
  will-change: transform, box-shadow;
  transform-origin: center;
  transform-style: preserve-3d;
}
.holo-card__translater {
  width: auto;
  position: relative;
  --translate-z: calc(var(--card-scale) * 150px + 0.01px);
  transform: translate3d(var(--translate-x), var(--translate-y), var(--translate-z)) scale(var(--card-scale));
}
.holo-card__rotator {
  transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
  transform-style: preserve-3d;
  pointer-events: auto;
}
button.holo-card__rotator {
  border: none;
  background: transparent;
  padding: 0;
  appearance: none;
}
.holo-card__rotator,
.holo-card--active .holo-card__rotator:focus {
  transition: box-shadow 0.4s ease, opacity 0.33s ease-out;
  box-shadow:
    0 0 3px -1px transparent,
    0 0 2px 1px transparent,
    0 0 5px 0px transparent,
    0px 10px 20px -5px black,
    0 2px 15px -5px black,
    0 0 20px 0px transparent;
}
.holo-card--active .holo-card__rotator,
.holo-card__rotator:focus {
  box-shadow:
    0 0 3px -1px white,
    0 0 3px 1px var(--card-edge),
    0 0 12px 2px var(--card-glow),
    0px 10px 20px -5px black,
    0 0 40px -30px var(--card-glow),
    0 0 50px -20px var(--card-glow);
}
.holo-card__rotator * {
  width: 100%;
  display: grid;
  grid-area: 1/1;
  aspect-ratio: var(--card-aspect);
  border-radius: var(--card-radius);
  image-rendering: optimizeQuality;
  transform-style: preserve-3d;
  pointer-events: none;
  overflow: hidden;
}
.holo-card__rotator img {
  height: auto;
}
.holo-card__rotator img:not(.holo-card__back) {
  transform: translate3d(0px, 0px, 0.01px);
}
.holo-card__rotator img.holo-card__image {
  height: 100%;
  object-fit: var(--imgsize);
}
.holo-card__back {
  background-color: var(--card-back);
  transform: rotateY(180deg) translateZ(1px);
  backface-visibility: visible;
}
.holo-card__front,
.holo-card__front * {
  backface-visibility: hidden;
}
.holo-card__front {
  opacity: 1;
  transition: opacity 0.33s ease-out;
  transform: translate3d(0px, 0px, 0.01px);
}
.holo-card--loading .holo-card__front {
  opacity: 0;
}
.holo-card--loading .holo-card__back {
  transform: rotateY(0deg);
}
.holo-card__shine,
.holo-card__glare {
  will-change:
    transform,
    opacity,
    background-image,
    background-size,
    background-position,
    background-blend-mode,
    filter;
}
.holo-card__shine {
  display: grid;
  transform: translateZ(1px);
  overflow: hidden;
  z-index: 3;
  background: transparent;
  background-size: cover;
  background-position: center;
  filter: brightness(calc(0.85 * var(--hc-brightness))) contrast(calc(2.75 * var(--hc-contrast))) saturate(calc(0.65 * var(--hc-saturate)));
  mix-blend-mode: color-dodge;
  opacity: calc(var(--card-opacity) * var(--hc-shine-opacity));
}
.holo-card__shine::before,
.holo-card__shine::after {
  --sunpillar-clr-1: var(--sunpillar-5);
  --sunpillar-clr-2: var(--sunpillar-6);
  --sunpillar-clr-3: var(--sunpillar-1);
  --sunpillar-clr-4: var(--sunpillar-2);
  --sunpillar-clr-5: var(--sunpillar-3);
  --sunpillar-clr-6: var(--sunpillar-4);
  grid-area: 1/1;
  transform: translateZ(1px);
  border-radius: var(--card-radius);
}
.holo-card__shine::after {
  --sunpillar-clr-1: var(--sunpillar-6);
  --sunpillar-clr-2: var(--sunpillar-1);
  --sunpillar-clr-3: var(--sunpillar-2);
  --sunpillar-clr-4: var(--sunpillar-3);
  --sunpillar-clr-5: var(--sunpillar-4);
  --sunpillar-clr-6: var(--sunpillar-5);
  transform: translateZ(1.2px);
}
.holo-card__glare {
  transform: translateZ(1.41px);
  overflow: hidden;
  background-image: var( --glare-image, radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0.8) 10%, hsla(0, 0%, 100%, 0.65) 20%, hsla(0, 0%, 0%, 0.5) 90% ) );
  opacity: calc(var(--card-opacity) * var(--hc-glare-opacity));
  mix-blend-mode: var(--glare-blend, overlay);
}
.holo-card--custom-glare .holo-card__glare::after {
  display: none !important;
}
.holo-card--masked .holo-card__shine,
.holo-card--masked .holo-card__shine::before,
.holo-card--masked .holo-card__shine::after {
  mask-image: var(--mask);
  mask-size: var(--mask-size);
  mask-position: var(--mask-position);
  mask-repeat: var(--mask-repeat);
}
.holo-card--mask-card .holo-card__front,
.holo-card--mask-card .holo-card__back {
  mask-image: var(--mask);
  mask-size: var(--mask-size);
  mask-position: var(--mask-position);
  mask-repeat: var(--mask-repeat);
}
.holo-card__layers {
  z-index: 2;
  pointer-events: none;
}
.holo-card__layer {
  grid-area: 1/1;
  background-image: var(--layer-image, none);
  background-size: var(--layer-size);
  background-position: var(--layer-position);
  background-repeat: no-repeat;
  mix-blend-mode: var(--layer-blend);
  opacity: var(--layer-opacity);
  transform: translate3d(calc(var(--pointer-dx) * var(--layer-parallax) * 1px), calc(var(--pointer-dy) * var(--layer-parallax) * 1px), 0.02px);
  will-change: transform, opacity;
}
.holo-card__layer--masked {
  mask-image: var(--layer-mask);
  mask-size: cover;
  mask-position: center;
}
.holo-card__content {
  transform: translate3d(0px, 0px, 0.01px);
}
.holo-card__content *,
.holo-card__overlay *,
.holo-card__layer * {
  width: auto;
  display: revert;
  grid-area: auto;
  aspect-ratio: auto;
  overflow: revert;
  border-radius: revert;
}
.holo-card__overlay {
  z-index: 4;
  transform: translateZ(2px);
  pointer-events: none;
}
.holo-card__overlay--interactive,
.holo-card__overlay--interactive * {
  pointer-events: auto;
}
.holo-card--depth .holo-card__shine {
  transform: translateZ(calc(1px + var(--hc-depth, 0px)));
}
.holo-card--depth .holo-card__glare {
  transform: translateZ(calc(1.41px + var(--hc-depth, 0px)));
}
.holo-card--depth .holo-card__overlay {
  transform: translateZ(calc(2px + var(--hc-depth, 0px)));
}
.holo-card--depth .holo-card__layer {
  transform: translate3d(calc(var(--pointer-dx) * var(--layer-parallax) * 1px), calc(var(--pointer-dy) * var(--layer-parallax) * 1px), calc(0.02px + var(--layer-parallax) * var(--hc-depth-layer-scale, 1) * 1px));
}
.holo-card--depth .holo-card__translater::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--card-radius);
  background: transparent;
  transform: translateZ(-1px);
  pointer-events: none;
  box-shadow: calc(var(--tilt-x, 0) * -0.6px) calc(var(--hc-depth, 0px) * 0.5 + var(--tilt-y, 0) * 0.6px) calc(var(--hc-depth, 0px) * 1.2 + 14px) calc(var(--hc-depth, 0px) * 0.2) rgba(0, 0, 0, var(--hc-depth-shadow, 0));
}

/* src/styles/effects/holo.css */
.holo-card[data-effect=holo] .holo-card__shine {
  --scanlines-space: 1px;
  --scanlines-light: #666;
  --scanlines-dark: black;
  --bars: 3%;
  --bar-color: hsla(0, 0%, 70%, 1);
  --bar-bg: hsla(0, 0%, 0%, 1);
  background-image:
    repeating-linear-gradient(
      110deg,
      var(--violet),
      var(--blue),
      var(--green),
      var(--yellow),
      var(--red),
      var(--violet),
      var(--blue),
      var(--green),
      var(--yellow),
      var(--red),
      var(--violet),
      var(--blue),
      var(--green),
      var(--yellow),
      var(--red)),
    repeating-linear-gradient(
      90deg,
      var(--scanlines-dark) calc(var(--scanlines-space) * 0),
      var(--scanlines-dark) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 2),
      var(--scanlines-light) calc(var(--scanlines-space) * 4));
  background-position: calc(((50% - var(--background-x)) * 2.6) + 50%) calc(((50% - var(--background-y)) * 3.5) + 50%), center center;
  background-size: 400% 400%, cover;
  background-blend-mode: overlay;
  filter: brightness(calc(1.1 * var(--hc-brightness))) contrast(calc(1.1 * var(--hc-contrast))) saturate(calc(1.2 * var(--hc-saturate)));
  mix-blend-mode: color-dodge;
}
.holo-card[data-effect=holo] .holo-card__shine::before {
  content: "";
  background-image:
    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) * 14)),
    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) * 10));
  background-position: calc((((50% - var(--background-x)) * 1.65) + 50%) + (var(--background-y) * 0.5)) var(--background-x), calc((((50% - var(--background-x)) * -0.9) + 50%) - (var(--background-y) * 0.75)) var(--background-y);
  background-size: 200% 200%, 200% 200%;
  background-blend-mode: screen;
  filter: brightness(1.15) contrast(1.1);
  mix-blend-mode: hard-light;
}
.holo-card[data-effect=holo] .holo-card__shine::after {
  content: "";
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0, 0%, 90%, 0.8) 0%,
      hsla(0, 0%, 78%, 0.1) 25%,
      hsl(0, 0%, 0%) 90%);
  background-position: center center;
  background-size: cover;
  mix-blend-mode: luminosity;
  filter: brightness(0.6) contrast(4);
}
@media screen and (max-width: 900px) {
  .holo-card[data-effect=holo] .holo-card__shine {
    --scanlines-space: 0.5px;
  }
}
.holo-card[data-effect=holo] .holo-card__glare {
  opacity: calc(var(--card-opacity) * 0.8 * var(--hc-glare-opacity));
  filter: brightness(0.8) contrast(1.5);
  mix-blend-mode: var(--glare-blend, overlay);
}
.holo-card[data-effect=holo] .holo-card__glare::after {
  content: "";
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(180, 100%, 95%) 5%,
      hsla(0, 0%, 39%, 0.25) 55%,
      hsla(0, 0%, 0%, 0.36) 110%);
  mix-blend-mode: overlay;
  filter: brightness(0.6) contrast(3);
}

/* src/styles/effects/reverse.css */
.holo-card[data-effect=reverse] {
  --foil-brightness: 0.55;
}
.holo-card[data-effect=reverse] .holo-card__shine {
  background-image:
    radial-gradient(
      circle at var(--pointer-x) var(--pointer-y),
      #fff 5%,
      #000 50%,
      #fff 80%),
    linear-gradient(
      -45deg,
      #000 15%,
      #fff,
      #000 85%),
    var(--foil);
  background-blend-mode: soft-light, difference;
  background-size:
    120% 120%,
    200% 200%,
    cover;
  background-position:
    center center,
    calc(100% * var(--pointer-from-left)) calc(100% * var(--pointer-from-top)),
    center center;
  filter: brightness(calc(var(--foil-brightness) * var(--hc-brightness))) contrast(calc(1.5 * var(--hc-contrast))) saturate(var(--hc-saturate));
  mix-blend-mode: color-dodge;
  opacity: calc(((1.5 * var(--card-opacity)) - var(--pointer-from-center)) * var(--hc-shine-opacity));
}
.holo-card[data-effect=reverse] .holo-card__glare {
  opacity: calc(var(--card-opacity) * var(--hc-glare-opacity));
  background-image: var( --glare-image, radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 0.8) 10%, hsla(0, 0%, 100%, 0.5) 20%, hsla(0, 0%, 0%, 0.75) 90% ) );
  filter: brightness(0.7) contrast(1.5);
}
.holo-card[data-effect=reverse] .holo-card__glare::after {
  content: "";
  opacity: var(--card-opacity);
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(0, 0%, 100%) 10%,
      hsla(0, 0%, 100%, 0.5) 20%,
      hsla(0, 0%, 0%, 0.5) 120%);
  filter: brightness(1) contrast(1.5);
}
.holo-card[data-effect=reverse]:not(.holo-card--masked) .holo-card__shine {
  --foil: none;
}

/* src/styles/effects/cosmos.css */
.holo-card[data-effect=cosmos] {
  --space: 4%;
  --angle: 82deg;
  --cosmos-clr-1: hsl(53, 65%, 60%);
  --cosmos-clr-2: hsl(93, 56%, 50%);
  --cosmos-clr-3: hsl(176, 54%, 49%);
  --cosmos-clr-4: hsl(228, 59%, 55%);
  --cosmos-clr-5: hsl(283, 60%, 55%);
  --cosmos-clr-6: hsl(326, 59%, 51%);
}
.holo-card[data-effect=cosmos] .holo-card__shine {
  background-image:
    var(--hc-cosmos-bottom, none),
    repeating-linear-gradient(
      var(--angle),
      var(--cosmos-clr-1) calc(var(--space) * 1),
      var(--cosmos-clr-2) calc(var(--space) * 2),
      var(--cosmos-clr-3) calc(var(--space) * 3),
      var(--cosmos-clr-4) calc(var(--space) * 4),
      var(--cosmos-clr-5) calc(var(--space) * 5),
      var(--cosmos-clr-6) calc(var(--space) * 6),
      var(--cosmos-clr-6) calc(var(--space) * 7),
      var(--cosmos-clr-5) calc(var(--space) * 8),
      var(--cosmos-clr-4) calc(var(--space) * 9),
      var(--cosmos-clr-3) calc(var(--space) * 10),
      var(--cosmos-clr-2) calc(var(--space) * 11),
      var(--cosmos-clr-1) calc(var(--space) * 12)),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(180, 100%, 89%, 0.5) 5%,
      hsla(180, 14%, 57%, 0.3) 40%,
      hsl(0, 0%, 0%) 130%);
  background-blend-mode: color-burn, multiply;
  background-position:
    var(--cosmosbg, center center),
    calc(10% + (var(--pointer-from-left) * 80%)) calc(10% + (var(--pointer-from-top) * 80%)),
    center center;
  background-size:
    cover,
    400% 900%,
    cover;
  filter: brightness(var(--hc-brightness)) contrast(var(--hc-contrast)) saturate(calc(0.8 * var(--hc-saturate)));
  mix-blend-mode: color-dodge;
}
.holo-card[data-effect=cosmos] .holo-card__shine::before {
  content: "";
  z-index: 2;
  background-image:
    var(--hc-cosmos-middle, none),
    repeating-linear-gradient(
      var(--angle),
      var(--cosmos-clr-1) calc(var(--space) * 1),
      var(--cosmos-clr-2) calc(var(--space) * 2),
      var(--cosmos-clr-3) calc(var(--space) * 3),
      var(--cosmos-clr-4) calc(var(--space) * 4),
      var(--cosmos-clr-5) calc(var(--space) * 5),
      var(--cosmos-clr-6) calc(var(--space) * 6),
      var(--cosmos-clr-6) calc(var(--space) * 7),
      var(--cosmos-clr-5) calc(var(--space) * 8),
      var(--cosmos-clr-4) calc(var(--space) * 9),
      var(--cosmos-clr-3) calc(var(--space) * 10),
      var(--cosmos-clr-2) calc(var(--space) * 11),
      var(--cosmos-clr-1) calc(var(--space) * 12));
  background-blend-mode: lighten, multiply;
  background-position:
    var(--cosmosbg, center center),
    calc(15% + (var(--pointer-from-left) * 70%)) calc(15% + (var(--pointer-from-top) * 70%)),
    center center;
  background-size:
    cover,
    400% 900%,
    cover;
  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: overlay;
}
.holo-card[data-effect=cosmos] .holo-card__shine::after {
  content: "";
  z-index: 3;
  background-image:
    var(--hc-cosmos-top, none),
    repeating-linear-gradient(
      var(--angle),
      var(--cosmos-clr-1) calc(var(--space) * 1),
      var(--cosmos-clr-2) calc(var(--space) * 2),
      var(--cosmos-clr-3) calc(var(--space) * 3),
      var(--cosmos-clr-4) calc(var(--space) * 4),
      var(--cosmos-clr-5) calc(var(--space) * 5),
      var(--cosmos-clr-6) calc(var(--space) * 6),
      var(--cosmos-clr-6) calc(var(--space) * 7),
      var(--cosmos-clr-5) calc(var(--space) * 8),
      var(--cosmos-clr-4) calc(var(--space) * 9),
      var(--cosmos-clr-3) calc(var(--space) * 10),
      var(--cosmos-clr-2) calc(var(--space) * 11),
      var(--cosmos-clr-1) calc(var(--space) * 12));
  background-blend-mode: multiply, multiply;
  background-position:
    var(--cosmosbg, center center),
    calc(20% + (var(--pointer-from-left) * 60%)) calc(20% + (var(--pointer-from-top) * 60%)),
    center center;
  background-size:
    cover,
    400% 900%,
    cover;
  filter: brightness(1.25) contrast(1.75) saturate(0.8);
  mix-blend-mode: multiply;
}
.holo-card[data-effect=cosmos] .holo-card__glare {
  background-image: var( --glare-image, radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(204, 100%, 95%, 0.8) 5%, hsla(250, 15%, 20%, 1) 150% ) );
  filter: brightness(0.75) contrast(2) saturate(2);
  mix-blend-mode: var(--glare-blend, overlay);
  opacity: calc(var(--card-opacity) * (0.25 + var(--pointer-from-center)) * var(--hc-glare-opacity));
}
.holo-card[data-effect=cosmos] .holo-card__glare::after {
  content: "";
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsl(280, 100%, 96%) 5%,
      hsl(0, 0%, 10%) 60%);
  filter: brightness(0.75) contrast(2.5) saturate(2);
  mix-blend-mode: soft-light;
  opacity: calc(1 - var(--pointer-from-top) * 0.75);
}

/* src/styles/effects/glitter.css */
.holo-card[data-effect=glitter] .holo-card__shine {
  background-image:
    var(--glitter),
    var(--glitter),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(150, 20%, 10%, 1) 10%,
      hsla(177, 22%, 80%, 0.1) 50%,
      hsla(0, 0%, 95%, 0.98) 90%);
  background-size:
    var(--glittersize) var(--glittersize),
    var(--glittersize) var(--glittersize),
    cover;
  background-position:
    40% 45%,
    55% 55%,
    center center;
  background-blend-mode: soft-light, color-burn;
  filter: brightness(var(--hc-brightness)) contrast(var(--hc-contrast)) saturate(calc(0.9 * var(--hc-saturate)));
}
.holo-card[data-effect=glitter] .holo-card__shine::before {
  content: "";
  mask-image: none !important;
  background-image:
    var(--foil),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(50, 20%, 90%, 0.95) 10%,
      rgba(181, 139, 164, 0.5) 50%,
      hsl(0, 0%, 0%) 60%);
  background-size: cover, cover;
  background-position: center center, center center;
  background-blend-mode: color-burn;
  mix-blend-mode: lighten;
  filter: brightness(1) contrast(1) saturate(1);
  opacity: 0.5;
}
.holo-card[data-effect=glitter] .holo-card__shine::after {
  content: "";
  mask-image: none !important;
  background-image:
    repeating-linear-gradient(
      calc(var(--angle)),
      var(--sunpillar-clr-1) calc(var(--space) * 1),
      var(--sunpillar-clr-2) calc(var(--space) * 2),
      var(--sunpillar-clr-3) calc(var(--space) * 3),
      var(--sunpillar-clr-4) calc(var(--space) * 4),
      var(--sunpillar-clr-5) calc(var(--space) * 5),
      var(--sunpillar-clr-6) calc(var(--space) * 6),
      var(--sunpillar-clr-1) calc(var(--space) * 7));
  background-size: 400% 800%;
  background-position: calc(50% + (50% - var(--background-x)) * 3) calc(50% + (50% - var(--background-y)) * 3);
  filter: brightness(calc(0.75 - (var(--pointer-from-center) * 0.5))) contrast(1) saturate(1);
  mix-blend-mode: saturation;
}
.holo-card[data-effect=glitter]:not(.holo-card--masked) .holo-card__glare {
  background-image: var( --glare-image, radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 100%, 1) 10%, hsla(0, 0%, 100%, 0.85) 20%, hsla(0, 0%, 0%, 0.35) 90% ) );
  mix-blend-mode: var(--glare-blend, multiply);
}
.holo-card--masked[data-effect=glitter] .holo-card__glare {
  background-image: var( --glare-image, radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(50, 20%, 90%, 0.45) 0%, hsla(150, 20%, 30%, 0.45) 45%, hsla(0, 0%, 0%, 0.9) 120% ) );
  filter: brightness(0.9) contrast(2);
}
.holo-card--masked[data-effect=glitter] .holo-card__glare::after {
  content: "";
  mask-image: var(--mask);
  mask-size: var(--mask-size);
  mask-position: var(--mask-position);
  mask-repeat: var(--mask-repeat);
  background-image:
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(50, 20%, 90%, 0.75) 0%,
      hsla(150, 20%, 30%, 0.65) 45%,
      hsla(0, 0%, 0%, 1) 90%);
  filter: brightness(1) contrast(1.5);
  mix-blend-mode: overlay;
  opacity: 1;
}

/* src/styles/index.css */