Shadow Lift Effect

"use client";

export default function ImgfxShadowLift() {
  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>{`
        .sl-card {
          transition:
            transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 520ms cubic-bezier(0.16, 1, 0.3, 1);
          will-change: transform;
        }
        .sl-card:hover,
        .sl-card:focus-visible {
          transform: translateY(-18px) scale(1.014);
          box-shadow:
            0 2px 6px rgba(15, 23, 42, 0.10),
            0 18px 30px -12px rgba(15, 23, 42, 0.22),
            0 44px 70px -24px rgba(15, 23, 42, 0.30);
          outline: none;
        }
        .sl-glow {
          transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
          opacity: 0;
          transform: translateY(6px) scale(0.9);
        }
        .sl-card:hover ~ .sl-glow,
        .sl-card:focus-visible ~ .sl-glow {
          opacity: 0.55;
          transform: translateY(22px) scale(1);
        }
        :is(.dark) .sl-card:hover,
        :is(.dark) .sl-card:focus-visible {
          box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.5),
            0 20px 34px -12px rgba(0, 0, 0, 0.6),
            0 50px 80px -22px rgba(0, 0, 0, 0.75);
        }
        @media (prefers-reduced-motion: reduce) {
          .sl-card,
          .sl-glow {
            transition-duration: 1ms;
          }
          .sl-card:hover,
          .sl-card:focus-visible {
            transform: translateY(-6px);
          }
        }
      `}</style>

      <div className="mx-auto max-w-2xl">
        <div className="mb-14 text-center">
          <p className="text-xs font-semibold uppercase tracking-[0.28em] text-indigo-600 dark:text-indigo-400">
            Shadow Lift
          </p>
          <h2 className="mt-3 text-3xl font-semibold tracking-tight text-neutral-900 dark:text-neutral-50 sm:text-4xl">
            The photo rises to meet you
          </h2>
          <p className="mx-auto mt-4 max-w-md text-sm leading-relaxed text-neutral-500 dark:text-neutral-400">
            Hover or focus the image — it floats upward as a soft, growing shadow pools beneath it.
          </p>
        </div>

        <div className="relative flex justify-center [perspective:1200px]">
          <button
            type="button"
            className="sl-card group relative block cursor-default overflow-hidden rounded-2xl bg-white shadow-[0_1px_2px_rgba(15,23,42,0.08)] ring-1 ring-neutral-900/5 focus-visible:ring-2 focus-visible:ring-indigo-500 dark:bg-neutral-900 dark:ring-white/10"
            aria-label="Aerial coastline photograph that lifts on hover"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src="/img/gallery/g07.webp"
              alt="Aerial view of a turquoise coastline meeting pale sand"
              loading="lazy"
              draggable={false}
              className="block h-auto w-[min(88vw,30rem)] select-none object-cover"
            />
            <span className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-white/10" />
          </button>

          {/* soft ground shadow that grows with the lift */}
          <div
            aria-hidden="true"
            className="sl-glow pointer-events-none absolute inset-x-10 bottom-0 -z-10 h-16 rounded-[50%] bg-neutral-900/70 blur-2xl dark:bg-black"
          />
        </div>

        <p className="mt-10 text-center text-xs font-medium uppercase tracking-[0.22em] text-neutral-400 dark:text-neutral-600">
          Depth on demand
        </p>
      </div>
    </section>
  );
}