Light Leak Effect

"use client";

export default function ImgfxLightLeak() {
  return (
    <section className="relative w-full bg-neutral-50 px-6 py-20 dark:bg-neutral-950 sm:py-28">
      <style>{`
        .lleak-frame {
          --lleak-x: -60%;
        }
        .lleak-streak {
          background: linear-gradient(
            105deg,
            transparent 0%,
            rgba(255, 214, 165, 0.0) 32%,
            rgba(255, 190, 120, 0.35) 44%,
            rgba(255, 236, 190, 0.85) 50%,
            rgba(255, 150, 90, 0.4) 56%,
            transparent 68%
          );
          filter: blur(6px);
          transform: translateX(var(--lleak-x)) rotate(4deg) scale(1.4);
          opacity: 0;
          transition: opacity 420ms ease;
          mix-blend-mode: screen;
          will-change: transform, opacity;
        }
        .lleak-glow {
          background: radial-gradient(
            60% 90% at 50% 50%,
            rgba(255, 176, 92, 0.5) 0%,
            rgba(255, 120, 70, 0.18) 40%,
            transparent 72%
          );
          opacity: 0;
          transition: opacity 500ms ease;
          mix-blend-mode: screen;
        }
        .lleak-frame:hover .lleak-streak,
        .lleak-frame:focus-visible .lleak-streak {
          opacity: 1;
          animation: lleak-drift 2600ms ease-in-out infinite;
        }
        .lleak-frame:hover .lleak-glow,
        .lleak-frame:focus-visible .lleak-glow {
          opacity: 1;
        }
        .lleak-frame:hover .lleak-img,
        .lleak-frame:focus-visible .lleak-img {
          filter: saturate(1.12) contrast(1.03) brightness(1.04);
        }
        @keyframes lleak-drift {
          0%   { transform: translateX(-70%) rotate(4deg) scale(1.4); }
          50%  { transform: translateX(70%)  rotate(4deg) scale(1.4); }
          100% { transform: translateX(-70%) rotate(4deg) scale(1.4); }
        }
        @media (prefers-reduced-motion: reduce) {
          .lleak-frame:hover .lleak-streak,
          .lleak-frame:focus-visible .lleak-streak {
            animation: none;
            transform: translateX(0) rotate(4deg) scale(1.4);
          }
          .lleak-streak,
          .lleak-glow,
          .lleak-img {
            transition: none;
          }
        }
      `}</style>

      <div className="mx-auto max-w-2xl text-center">
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-600 dark:text-amber-400">
          Image Effect
        </p>
        <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
          Warm Light Leak
        </h2>
        <p className="mt-4 text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
          A soft, sun-warmed streak drifts across the frame like film caught in
          the light. Hover to let it bloom.
        </p>
      </div>

      <div className="mx-auto mt-12 flex max-w-md justify-center">
        <div
          className="lleak-frame group relative aspect-[4/5] w-full overflow-hidden rounded-2xl bg-neutral-200 shadow-xl shadow-neutral-900/10 ring-1 ring-neutral-900/5 outline-none transition-shadow duration-500 hover:shadow-2xl hover:shadow-amber-900/20 focus-visible:ring-2 focus-visible:ring-amber-500 dark:bg-neutral-800 dark:shadow-black/40 dark:ring-white/10"
          tabIndex={0}
          role="img"
          aria-label="Portrait photograph with a warm light-leak effect that animates on hover"
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g07.webp"
            alt="A quiet portrait bathed in warm afternoon tones"
            loading="lazy"
            draggable={false}
            className="lleak-img absolute inset-0 h-full w-full object-cover transition-[filter] duration-500"
          />

          <span
            aria-hidden="true"
            className="lleak-glow pointer-events-none absolute inset-0"
          />
          <span
            aria-hidden="true"
            className="lleak-streak pointer-events-none absolute -inset-y-8 inset-x-0"
          />

          <span
            aria-hidden="true"
            className="pointer-events-none absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full bg-neutral-900/55 px-3 py-1 text-[11px] font-medium tracking-wide text-neutral-100 opacity-100 backdrop-blur-sm transition-opacity duration-300 group-hover:opacity-0 dark:bg-black/50"
          >
            hover to reveal
          </span>
        </div>
      </div>
    </section>
  );
}