/* ═══════════ HOLOGRAPHIC FOIL EFFECT ═══════════ */

/* card-front is already position:absolute via main.css — no overrides needed */

/* Rainbow gradient layer */
.holo-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  mix-blend-mode: color-dodge;
  background: linear-gradient(
    calc(var(--holo-angle, 130) * 1deg),
    hsla(0, 100%, 70%, 0.4),
    hsla(40, 100%, 65%, 0.35),
    hsla(60, 100%, 65%, 0.3),
    hsla(120, 100%, 60%, 0.35),
    hsla(180, 100%, 65%, 0.3),
    hsla(240, 100%, 70%, 0.35),
    hsla(300, 100%, 65%, 0.35),
    hsla(360, 100%, 70%, 0.4)
  );
  background-size: 200% 200%;
  background-position: calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%);
  transition: opacity 0.4s ease;
  border-radius: inherit;
}

/* Show on hover / touch */
.card-zoom-3d.holo-active .holo-layer {
  opacity: 0.55;
}

/* Gloss — radial white light that follows cursor */
.holo-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  background: radial-gradient(
    circle at calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%),
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 60%
  );
  transition: opacity 0.4s ease;
  border-radius: inherit;
}

.card-zoom-3d.holo-active .holo-gloss {
  opacity: 1;
}

/* Sparkle dots */
.holo-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 7;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.card-zoom-3d.holo-active .holo-sparkle {
  animation: sparkle-twinkle 0.6s ease-in-out forwards;
}

@keyframes sparkle-twinkle {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0.3); }
}

/* ═══════════ REALISTIC LIGHT REFLECTION (all cards) ═══════════ */

/* Main light spot */
.card-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  mix-blend-mode: overlay;
  background: radial-gradient(
    circle at calc(var(--light-x, 50%) ) calc(var(--light-y, 50%) ),
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    transparent 65%
  );
  transition: opacity 0.5s ease;
  border-radius: inherit;
}

/* Specular glint — tight bright highlight */
.card-glint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: radial-gradient(
    circle at calc(var(--light-x, 50%) ) calc(var(--light-y, 50%) ),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.15) 10%,
    transparent 22%
  );
  transition: opacity 0.5s ease;
  border-radius: inherit;
}

/* Ray of light — diagonal beam sliding across card */
.card-ray {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent calc(var(--ray-pos, 50%) - 8%),
    rgba(255, 255, 255, 0.02) calc(var(--ray-pos, 50%) - 5%),
    rgba(255, 255, 255, 0.07) calc(var(--ray-pos, 50%) - 1.5%),
    rgba(255, 255, 255, 0.10) var(--ray-pos, 50%),
    rgba(255, 255, 255, 0.07) calc(var(--ray-pos, 50%) + 1.5%),
    rgba(255, 255, 255, 0.02) calc(var(--ray-pos, 50%) + 5%),
    transparent calc(var(--ray-pos, 50%) + 8%),
    transparent 100%
  );
  transition: opacity 0.4s ease;
}

/* Active state — shown on hover/touch */
.card-zoom-3d.light-active .card-light {
  opacity: 1;
}
.card-zoom-3d.light-active .card-glint {
  opacity: 0.7;
}
.card-zoom-3d.light-active .card-ray {
  opacity: 1;
}

/* Rim light — edge glow via box-shadow on card-inner */
.card-zoom-3d .card-front {
  transition: box-shadow 0.3s ease;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}
.card-zoom-3d.light-active .card-front {
  box-shadow:
    inset calc((var(--light-x-norm, 0) - 0.5) * 30px)
          calc((var(--light-y-norm, 0) - 0.5) * 30px)
          25px rgba(255, 255, 255, 0.15);
}