: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));
}