.holocard {
        position: relative;
        perspective: 1000px;
      }

      .holocard-inner {
        position: relative;
        width: 300px;
        height: 420px;
        border-radius: 12px;
        overflow: hidden;
        transform-style: preserve-3d;
        transition: transform 0.1s ease;
      }

      .holocard-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

.holocard-shadow {
  position: absolute;
  inset: 0;
  pointer-events: none;

  --angle: 0deg;
  --strength: 0;

  background: linear-gradient(
    var(--angle),
    rgba(0, 0, 0, calc(var(--strength) * 1)),
    transparent 60%
  );

  opacity: 0.5;
  mix-blend-mode: multiply;
}




.holocard-highlight {
        position: absolute;
        inset: 0;
        pointer-events: none;

        --mx: 50%;
        --my: 50%;
        --tilt: 0;

        background-image: linear-gradient(110deg, #b7fff1);
        background-size: 300% 300%;
        background-position: var(--mx) var(--my);

        mask-image: radial-gradient(
          circle at var(--mx) var(--my),
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0) calc(35% + var(--tilt) * 40%),
          rgba(0, 0, 0, 0.2) calc(50% + var(--tilt) * 35%),
          rgba(0, 0, 0, 1) calc(70% + var(--tilt) * 45%)
        );
        opacity: 0.2;

        mix-blend-mode: hard-light;
      }

      /* ===== HOLO LAYER ===== */
      .holo {
        position: absolute;
        inset: 0;
        pointer-events: none;

        --mx: 20%;
        --my: 20%;
        --tilt: 0;

        background-image:
            radial-gradient(
          rgb(255, 242, 0),
          rgb(255, 0, 250),
          rgb(255, 242, 0),
          rgb(0, 198, 255)
        );
        background-size: 300% 300%;
        background-position: var(--mx) var(--my);
        mix-blend-mode: color-dodge;
        opacity: 1;
      }

      .holo::before,
      .holo::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        mix-blend-mode: luminosity;
      }

      .holo::before {
        background-size: cover;
        width: 100%;
        height: 100%;
        opacity: 1;
        transform: translateZ(1px);
      }

      .holo::after {
        background-size: cover;
        width: 100%;
        height: 100%;
        opacity: calc(0.3 + var(--tilt) * 0.6);
        transform: translateZ(1px);
      }