/* gallery-fx.css — layered 3D polish for the gallery cards (holo lift, neon edge,
   iridescent scanline shimmer, chromatic hover). Loads after style.css so its
   hover rules win. Self-contained: delete this file + its <link> to remove. */

/* Holographic scanline + iridescent sweep overlay, revealed on hover */
.card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(120,200,255,0.08) 0 1px, transparent 1px 3px),
    linear-gradient(115deg, transparent 28%, rgba(94,234,255,0.22) 44%, rgba(255,85,0,0.16) 56%, transparent 72%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, 0% 0%;
}
.card:hover .card-inner::after {
  opacity: 1;
  animation: holoSweep 2.6s ease-in-out infinite;
}
@keyframes holoSweep {
  0%   { background-position: 0 0, 120% 0%; }
  100% { background-position: 0 0, -20% 0%; }
}

/* Neon edge + deeper lift shadow on hover (overrides style.css:558) */
.card:hover .card-inner {
  box-shadow:
    0 42px 84px -22px rgba(0,0,0,0.92),
    0 0 0 1px rgba(94,234,255,0.40),
    0 0 30px rgba(94,234,255,0.28),
    0 0 60px rgba(255,85,0,0.12);
}

/* The whole card lifts toward the viewer (3D), not just the inner plane */
.card { transition: opacity 0.55s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.card.reveal.in:hover { transform: translateY(-8px) scale(1.015); }

/* Chromatic / punchier media on hover */
.card:hover .card-video,
.card:hover .card-image {
  filter: saturate(1.28) contrast(1.07) drop-shadow(2px 0 0 rgba(255,0,80,0.18)) drop-shadow(-2px 0 0 rgba(0,180,255,0.18));
}

/* Badge → neon chip */
.card:hover .card-badge {
  box-shadow: 0 0 14px rgba(255,85,0,0.6);
  text-shadow: 0 0 8px rgba(255,170,90,0.8);
}

/* Title glow on hover */
.card:hover .card-title {
  text-shadow: 0 0 16px rgba(94,234,255,0.45), 0 2px 10px rgba(0,0,0,0.8);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .card-inner::after { animation: none; }
  .card.reveal.in:hover { transform: none; }
}