Shine Sweep Effect

"use client";

export default function ImgfxShineSweep() {
  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-20 dark:bg-neutral-950 sm:px-10 sm:py-28">
      <style>{`
        .imgfx-shine-sweep__sheen {
          background: linear-gradient(
            105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.15) 42%,
            rgba(255, 255, 255, 0.7) 50%,
            rgba(255, 255, 255, 0.15) 58%,
            transparent 70%
          );
          transform: translateX(-160%) skewX(-18deg);
        }
        .imgfx-shine-sweep__card:hover .imgfx-shine-sweep__sheen,
        .imgfx-shine-sweep__card:focus-visible .imgfx-shine-sweep__sheen {
          animation: imgfx-shine-sweep-slide 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
        }
        @keyframes imgfx-shine-sweep-slide {
          0% {
            transform: translateX(-160%) skewX(-18deg);
          }
          100% {
            transform: translateX(160%) skewX(-18deg);
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .imgfx-shine-sweep__card:hover .imgfx-shine-sweep__sheen,
          .imgfx-shine-sweep__card:focus-visible .imgfx-shine-sweep__sheen {
            animation: none;
          }
        }
      `}</style>

      <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
        <span className="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-600 dark:text-indigo-400">
          Image Effect
        </span>
        <h2 className="mt-3 text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Shine Sweep
        </h2>
        <p className="mt-3 text-sm text-neutral-500 dark:text-neutral-400">
          A diagonal band of light glides across the surface on hover. Hover the frame to catch the shine.
        </p>
      </div>

      <div className="mx-auto mt-12 max-w-md">
        <div
          tabIndex={0}
          role="img"
          aria-label="Studio portrait photograph with a diagonal light sweep on hover"
          className="imgfx-shine-sweep__card group relative aspect-[4/5] w-full overflow-hidden rounded-2xl bg-neutral-200 shadow-lg outline-none ring-1 ring-neutral-900/5 transition-shadow duration-500 hover:shadow-2xl focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-800 dark:ring-white/10"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g07.webp"
            alt="Studio portrait bathed in soft directional light"
            loading="lazy"
            draggable={false}
            className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.03]"
          />

          <div
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 bg-gradient-to-t from-neutral-950/30 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
          />

          <div
            aria-hidden="true"
            className="imgfx-shine-sweep__sheen pointer-events-none absolute inset-0 mix-blend-screen"
          />

          <div className="pointer-events-none absolute bottom-0 left-0 right-0 flex items-end justify-between p-4">
            <span className="translate-y-1 text-sm font-medium text-white opacity-0 transition-all duration-500 group-hover:translate-y-0 group-hover:opacity-100">
              Northlight, No. 07
            </span>
            <span className="translate-y-1 rounded-full bg-white/15 px-2.5 py-1 text-[0.65rem] font-semibold uppercase tracking-wider text-white opacity-0 backdrop-blur-sm transition-all delay-75 duration-500 group-hover:translate-y-0 group-hover:opacity-100">
              Hover to reveal
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}