* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle at top, #1b2735, #090a0f);
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene {
  perspective: 1400px;
}

.card {
  width: 340px;
  height: 340px;
  border-radius: 18px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 220ms ease, filter 220ms ease;
  will-change: transform;
  /* Glare controls (updated by JS) */
  --gx: 50%;
  --gy: 50%;
  --ga: 0;
}

.card-image {
  position: absolute;
  inset: 0;
  background: url("nft.jpg") center/cover no-repeat;
  border-radius: 18px;
}

.card-holo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      130deg,
      rgba(255,0,180,0.35),
      rgba(0,255,255,0.35),
      rgba(255,255,0,0.25)
    );
  mix-blend-mode: screen;
  background-size: 200% 200%;
  animation: holoMove 7s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  border-radius: 18px;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* ✨ Glare layer: a soft specular highlight that follows cursor */
.card-glare {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  opacity: var(--ga);
  transition: opacity 140ms ease;
  /* Two highlights: a tight core + broad bloom */
  background:
    radial-gradient(circle at var(--gx) var(--gy),
      rgba(255,255,255,0.75) 0%,
      rgba(255,255,255,0.25) 16%,
      rgba(255,255,255,0.08) 34%,
      rgba(255,255,255,0.00) 55%),
    radial-gradient(circle at var(--gx) var(--gy),
      rgba(120,200,255,0.25) 0%,
      rgba(120,200,255,0.00) 60%);
  mix-blend-mode: screen;
  filter: blur(0.2px);
}

.card-vignette {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.45),
    0 30px 80px rgba(0,0,0,0.6);
  pointer-events: none;
  transition: box-shadow 220ms ease;
}

/* Active state only when cursor is over the card */
.card.is-active {
  filter: saturate(1.05) contrast(1.03);
}

.card.is-active .card-holo {
  animation-play-state: running;
  opacity: 0.65;
}

.card.is-active {
  --ga: 0.9; /* show glare when active; JS fine-tunes position */
}

.card.is-active .card-vignette {
  box-shadow:
    inset 0 0 45px rgba(0,0,0,0.35),
    0 34px 90px rgba(0,0,0,0.7);
}

@keyframes holoMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}