Brightness Lift Effect

"use client";

export default function ImgfxBrightnessLift() {
  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>{`
        .ibl-card {
          --ibl-dim: brightness(0.55) saturate(0.85) contrast(1.02);
          --ibl-lift: brightness(1.06) saturate(1.06) contrast(1);
        }
        .ibl-img {
          filter: var(--ibl-dim);
          transform: scale(1.015);
          transition: filter 620ms cubic-bezier(0.22, 1, 0.36, 1),
                      transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
          will-change: filter, transform;
        }
        .ibl-card:hover .ibl-img,
        .ibl-card:focus-within .ibl-img {
          filter: var(--ibl-lift);
          transform: scale(1);
        }
        .ibl-veil {
          background:
            radial-gradient(120% 90% at 50% 100%, rgba(2, 6, 23, 0) 30%, rgba(2, 6, 23, 0.5) 100%),
            linear-gradient(180deg, rgba(2, 6, 23, 0.28) 0%, rgba(2, 6, 23, 0) 45%);
          opacity: 1;
          transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .ibl-card:hover .ibl-veil,
        .ibl-card:focus-within .ibl-veil {
          opacity: 0;
        }
        .ibl-glow {
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 60px -30px rgba(2, 6, 23, 0);
          transition: box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .ibl-card:hover .ibl-glow,
        .ibl-card:focus-within .ibl-glow {
          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 80px -34px rgba(99, 102, 241, 0.55);
        }
        .ibl-hint {
          opacity: 0.85;
          transition: opacity 520ms ease;
        }
        .ibl-card:hover .ibl-hint,
        .ibl-card:focus-within .ibl-hint {
          opacity: 0;
        }
        @media (prefers-reduced-motion: reduce) {
          .ibl-img, .ibl-veil, .ibl-glow, .ibl-hint {
            transition: none !important;
          }
        }
      `}</style>

      <div className="mx-auto max-w-5xl">
        <header className="mb-12 text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-indigo-600 dark:text-indigo-400">
            Image Effect
          </p>
          <h2 className="mt-3 text-3xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
            Brightness Lift
          </h2>
          <p className="mx-auto mt-4 max-w-xl text-base leading-relaxed text-neutral-600 dark:text-neutral-400">
            The image rests in shadow until you reach for it. On hover the veil
            clears and the light comes up — quiet on the page, alive on touch.
          </p>
        </header>

        <div className="ibl-card group mx-auto max-w-3xl">
          <figure className="ibl-glow relative overflow-hidden rounded-2xl bg-neutral-900 outline-none focus-within:ring-2 focus-within:ring-indigo-500/70 focus-within:ring-offset-2 focus-within:ring-offset-neutral-50 dark:focus-within:ring-offset-neutral-950">
            <a
              href="#gallery"
              tabIndex={0}
              aria-label="Reveal the dimmed photograph by hovering or focusing"
              className="block outline-none"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src="/img/gallery/g14.webp"
                alt="Golden-hour landscape resting in shadow, brightening when hovered"
                loading="lazy"
                draggable={false}
                className="ibl-img block aspect-[3/2] w-full object-cover"
              />
              <span aria-hidden="true" className="ibl-veil pointer-events-none absolute inset-0" />
              <span
                aria-hidden="true"
                className="ibl-hint pointer-events-none absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-white/12 px-4 py-1.5 text-xs font-medium tracking-wide text-white backdrop-blur-sm"
              >
                Hover to bring up the light
              </span>
            </a>
          </figure>
          <figcaption className="mt-4 text-center text-sm text-neutral-500 dark:text-neutral-500">
            g14 — brightness, saturation and contrast lift together on hover or keyboard focus.
          </figcaption>
        </div>
      </div>
    </section>
  );
}