Neon Frame Effect

"use client";

export default function ImgfxNeonFrame() {
  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-24 dark:bg-neutral-950 sm:px-10">
      <style>{`
        @keyframes neonframe_pulse {
          0%, 100% {
            box-shadow:
              0 0 0 1px rgba(139, 92, 246, 0.9),
              0 0 8px 1px rgba(139, 92, 246, 0.65),
              0 0 22px 3px rgba(139, 92, 246, 0.45),
              0 0 44px 8px rgba(217, 70, 239, 0.28),
              inset 0 0 12px 1px rgba(139, 92, 246, 0.35);
          }
          50% {
            box-shadow:
              0 0 0 1px rgba(217, 70, 239, 1),
              0 0 14px 2px rgba(217, 70, 239, 0.8),
              0 0 34px 6px rgba(139, 92, 246, 0.6),
              0 0 70px 14px rgba(217, 70, 239, 0.4),
              inset 0 0 20px 2px rgba(217, 70, 239, 0.45);
          }
        }
        @keyframes neonframe_sweep {
          0% { transform: translateX(-120%) skewX(-12deg); }
          100% { transform: translateX(220%) skewX(-12deg); }
        }
        .neonframe_card {
          transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
                      box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
          box-shadow:
            0 0 0 1px rgba(139, 92, 246, 0),
            0 1px 2px rgba(0, 0, 0, 0.12),
            0 12px 30px -12px rgba(0, 0, 0, 0.35);
        }
        .neonframe_card:hover {
          transform: translateY(-6px) scale(1.012);
          animation: neonframe_pulse 1.9s ease-in-out infinite;
        }
        .neonframe_card:focus-visible {
          outline: none;
          animation: neonframe_pulse 1.9s ease-in-out infinite;
        }
        .neonframe_img {
          transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
                      filter 500ms ease;
          filter: saturate(0.92) brightness(0.97);
        }
        .neonframe_card:hover .neonframe_img,
        .neonframe_card:focus-visible .neonframe_img {
          transform: scale(1.06);
          filter: saturate(1.18) brightness(1.04) contrast(1.03);
        }
        .neonframe_shine {
          opacity: 0;
          transition: opacity 400ms ease;
        }
        .neonframe_card:hover .neonframe_shine,
        .neonframe_card:focus-visible .neonframe_shine {
          opacity: 1;
        }
        .neonframe_shine::after {
          content: "";
          position: absolute;
          inset: -40% -10%;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent
          );
          transform: translateX(-120%) skewX(-12deg);
        }
        .neonframe_card:hover .neonframe_shine::after,
        .neonframe_card:focus-visible .neonframe_shine::after {
          animation: neonframe_sweep 1.4s ease-in-out infinite;
        }
        @media (prefers-reduced-motion: reduce) {
          .neonframe_card,
          .neonframe_img { transition: none; }
          .neonframe_card:hover,
          .neonframe_card:focus-visible {
            transform: none;
            animation: none;
            box-shadow:
              0 0 0 1px rgba(139, 92, 246, 0.9),
              0 0 18px 3px rgba(139, 92, 246, 0.5),
              0 0 40px 8px rgba(217, 70, 239, 0.3);
          }
          .neonframe_card:hover .neonframe_img,
          .neonframe_card:focus-visible .neonframe_img { transform: none; }
          .neonframe_shine::after,
          .neonframe_card:hover .neonframe_shine::after,
          .neonframe_card:focus-visible .neonframe_shine::after { animation: none; }
        }
      `}</style>

      <div className="mx-auto max-w-2xl">
        <header className="mb-10 text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-violet-600 dark:text-violet-400">
            Neon Frame
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
            A glow that breathes on contact
          </h2>
          <p className="mt-3 text-sm text-neutral-500 dark:text-neutral-400">
            Hover or focus the photo to ignite the pulsing neon border.
          </p>
        </header>

        <div className="flex justify-center">
          <a
            href="#"
            onClick={(e) => e.preventDefault()}
            aria-label="View the workspace photo with a neon glow frame"
            className="neonframe_card group relative block overflow-hidden rounded-2xl bg-neutral-900 focus:outline-none"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g07.webp"
              alt="A modern studio workspace bathed in colored light"
              loading="lazy"
              draggable={false}
              className="neonframe_img block h-auto w-full max-w-md select-none object-cover"
            />

            <div className="neonframe_shine pointer-events-none absolute inset-0 overflow-hidden rounded-2xl" />

            <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between bg-gradient-to-t from-black/70 via-black/20 to-transparent p-4">
              <span className="text-sm font-medium text-white/90">
                Studio 07
              </span>
              <span className="rounded-full bg-white/10 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider text-fuchsia-200 ring-1 ring-inset ring-white/15">
                Live
              </span>
            </div>
          </a>
        </div>

        <p className="mt-6 text-center text-xs text-neutral-400 dark:text-neutral-500">
          Pure CSS glow &middot; keyboard focusable &middot; respects reduced motion
        </p>
      </div>
    </section>
  );
}