.card-holo {
  position: relative;
  width: 350px;   /* adjust to your card size */
  aspect-ratio: 63/88; /* MTG card ratio */
  border-radius: 12px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(1000px);
    transform-origin: center;
  /* baseline tilt (always on) */
  transform: perspective(1000px) rotateX(6deg) rotateY(-10deg) rotateZ(0deg);
  box-shadow: 0 20px 40px rgba(0,0,0,.45); /* depth */
}

  .card-holo .card-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
    z-index: 1;
  }

  /* Holo overlay effect */
  .card-holo::before {
      border-radius: 10px;
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(255,255,255,0.6) 0%,
        rgba(255,255,255,0.1) 40%,
        rgba(0,0,0,0) 80%
      ),
      url("https://simey.me/misc/holo.png") center/cover no-repeat;
      mix-blend-mode: overlay;
      pointer-events: none;
      border-radius: inherit;
      z-index: 2;
          background-size: cover, cover, 150%;
      background-blend-mode: screen;
      mix-blend-mode: screen;
      opacity: 0.3;
      transition: background-position 0.3s ease, opacity 0.3s ease;

  }

    /* Interactive movement with mouse */
    .card-holo:hover::before {
      opacity: 1;
      background-position: 30% 30%, 70% 70%, center;
    }

    .card-holo:hover {
      transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale(1.03);
    }