Blend Screen Effect

"use client";

import { useId } from "react";

export default function ImgfxBlendScreen() {
  const uid = useId().replace(/[^a-zA-Z0-9]/g, "");
  const prefix = `bscr${uid}`;

  return (
    <section className="relative w-full overflow-hidden bg-neutral-50 px-6 py-24 sm:px-10 lg:py-32 dark:bg-neutral-950">
      <style>{`
        .${prefix}-card {
          transform: translateZ(0);
        }
        .${prefix}-wash {
          mix-blend-mode: screen;
          opacity: 1;
          transform: translateY(0) scale(1.02);
          transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
                      transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
          animation: ${prefix}-drift 9s ease-in-out infinite alternate;
        }
        .${prefix}-card:hover .${prefix}-wash,
        .${prefix}-card:focus-within .${prefix}-wash {
          opacity: 0;
          transform: translateY(-14px) scale(1.08);
        }
        .${prefix}-img {
          transform: scale(1.04);
          filter: saturate(1.15);
          transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
                      filter 620ms ease;
        }
        .${prefix}-card:hover .${prefix}-img,
        .${prefix}-card:focus-within .${prefix}-img {
          transform: scale(1);
          filter: saturate(1);
        }
        .${prefix}-sheen {
          opacity: 0;
          transform: translateY(6px);
          transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .${prefix}-card:hover .${prefix}-sheen,
        .${prefix}-card:focus-within .${prefix}-sheen {
          opacity: 1;
          transform: translateY(0);
        }
        @keyframes ${prefix}-drift {
          0%   { background-position: 0% 50%; }
          100% { background-position: 100% 50%; }
        }
        @media (prefers-reduced-motion: reduce) {
          .${prefix}-wash,
          .${prefix}-img,
          .${prefix}-sheen {
            animation: none !important;
            transition: opacity 200ms ease !important;
            transform: none !important;
          }
        }
      `}</style>

      <div className="mx-auto max-w-5xl">
        <div className="mb-12 text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-indigo-700 dark:border-indigo-400/20 dark:bg-indigo-400/10 dark:text-indigo-300">
            <span className="h-1.5 w-1.5 rounded-full bg-indigo-500" />
            Screen Blend
          </span>
          <h2 className="mt-5 text-3xl font-semibold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-50">
            A colour wash that lifts off
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
            A screen-blended violet-to-amber glow sits over the frame at rest, then
            peels away on hover to reveal the photo in full clarity.
          </p>
        </div>

        <figure
          tabIndex={0}
          className={`${prefix}-card group relative mx-auto aspect-[4/3] w-full max-w-3xl cursor-pointer overflow-hidden rounded-3xl bg-neutral-900 shadow-xl shadow-neutral-900/10 outline-none ring-1 ring-neutral-900/5 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:shadow-black/40 dark:ring-white/10`}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/img/gallery/g14.webp"
            alt="A quiet coastal scene at golden hour, framed for a colour-blend effect"
            loading="lazy"
            draggable={false}
            className={`${prefix}-img absolute inset-0 h-full w-full object-cover`}
          />

          <div
            className={`${prefix}-wash pointer-events-none absolute inset-0`}
            style={{
              backgroundImage:
                "linear-gradient(115deg, #4c1d95 0%, #7c3aed 34%, #db2777 62%, #f59e0b 100%)",
              backgroundSize: "220% 220%",
            }}
            aria-hidden="true"
          />

          <div
            className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/55 via-transparent to-transparent"
            aria-hidden="true"
          />

          <figcaption
            className={`${prefix}-sheen pointer-events-none absolute inset-x-0 bottom-0 p-6 text-left sm:p-8`}
          >
            <p className="text-sm font-medium text-white/70">Golden Hour, No. 14</p>
            <p className="mt-1 text-lg font-semibold text-white">
              True colour restored
            </p>
          </figcaption>
        </figure>

        <p className="mt-8 text-center text-sm text-neutral-500 dark:text-neutral-500">
          Hover or focus the frame &mdash; watch the wash drift away.
        </p>
      </div>
    </section>
  );
}