.neon-photo {
  border-radius: 12px;
  transition:
    transform 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease,
    outline-color 180ms ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  outline: 2px solid transparent;
  outline-offset: 3px;
  will-change: transform, filter, box-shadow;
}

.media > img {
  border-radius: 12px;
  transition:
    transform 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease,
    outline-color 180ms ease;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  outline: 2px solid transparent;
  outline-offset: 3px;
  will-change: transform, filter, box-shadow;
}

.neon-photo.neon-on {
  transform: translateY(-3px) scale(1.03);
  filter: saturate(1.2) contrast(1.05);
  outline-color: rgba(0, 217, 87, 0.75);
  box-shadow:
    0 0 0 2px rgba(0, 217, 87, 0.22),
    0 0 18px rgba(0, 217, 87, 0.35),
    0 0 42px rgba(0, 217, 87, 0.22);
}

/* CSS-only hover/focus (works even if JS doesn't run) */
.media:hover > .neon-photo,
.media:focus-within > .neon-photo,
.neon-photo:hover,
.neon-photo:focus-visible {
  transform: translateY(-3px) scale(1.03);
  filter: saturate(1.2) contrast(1.05);
  outline-color: rgba(0, 217, 87, 0.75);
  box-shadow:
    0 0 0 2px rgba(0, 217, 87, 0.22),
    0 0 18px rgba(0, 217, 87, 0.35),
    0 0 42px rgba(0, 217, 87, 0.22);
}

/* Apply to all .media img directly, but NOT the front banner image */
.banner .media > img,
.banner img {
  box-shadow: none !important;
  outline-color: transparent !important;
  transform: none !important;
  filter: none !important;
}

.media:hover > img,
.media:focus-within > img,
.media > img:hover,
.media > img:focus-visible {
  transform: translateY(-4px) scale(1.04) !important;
  filter: saturate(1.2) contrast(1.05) !important;
  outline-color: rgba(0, 217, 87, 0.95) !important;
  box-shadow:
    0 0 0 2px rgba(0, 217, 87, 0.38),
    0 0 20px rgba(0, 217, 87, 0.48),
    0 0 48px rgba(0, 217, 87, 0.30) !important;
  animation: neon-color-blast 1.1s ease-in-out infinite alternate;
}

/* Buttons glow/pop on hover */
.btn {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    filter 160ms ease;
  will-change: transform, box-shadow;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: rgba(0, 217, 87, 0.9) !important;
  filter: saturate(1.1) !important;
  box-shadow:
    0 0 0 2px rgba(0, 217, 87, 0.32),
    0 0 18px rgba(0, 217, 87, 0.40) !important;
  animation: neon-color-blast 1.1s ease-in-out infinite alternate;
}

.media:hover,
.media:focus-within {
  border-color: rgba(0, 217, 87, 0.9) !important;
  box-shadow: 0 0 0 1px rgba(0, 217, 87, 0.55), 0 0 20px rgba(0, 217, 87, 0.25) !important;
}

@keyframes neon-color-blast {
  0% {
    box-shadow:
      0 0 0 2px rgba(0, 217, 87, 0.30),
      0 0 16px rgba(0, 217, 87, 0.35),
      0 0 34px rgba(0, 217, 87, 0.20);
  }
  100% {
    box-shadow:
      0 0 0 2px rgba(0, 245, 255, 0.45),
      0 0 22px rgba(0, 245, 255, 0.50),
      0 0 52px rgba(0, 245, 255, 0.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .neon-photo {
    transition: none;
  }
  .neon-photo.neon-on {
    transform: none;
  }
  .media > img {
    transition: none;
  }
  .media:hover > img,
  .media:focus-within > img,
  .media > img:hover,
  .media > img:focus-visible {
    transform: none;
    animation: none;
  }
  .btn {
    transition: none;
  }
  .btn:hover,
  .btn:focus-visible {
    transform: none;
    animation: none;
  }
}