/* =============================================================
   FIX PARTIAL — Home "Selected works" featured grid (index.html)
   Owned by the "featured-grid" agent. Loaded AFTER app.css so rules
   here override. Keep ONLY featured-card hover/presentation styling.

   GOAL: replace the clunky "jolt + dark vignette" hover with a
   smooth, gallery-grade micro-interaction.

   What app.css did (the problem):
     - image RESTS zoomed-in at scale(1.06) and hover zooms OUT to
       scale(1.01) -> reads as a snap/jolt;
     - a hard dark scrim rgba(11,10,12,.5) fades in over the image ->
       harsh vignette, wrong on the white theme.

   What we do instead:
     - image rests calm & sharp at scale(1) and gently zooms IN within
       the (already overflow:hidden) frame -> premium Ken-Burns feel;
     - drop the dark vignette; add a soft shadow lift on the frame and
       the lightest possible warm scrim for caption legibility;
     - refine the "View work" cue so it eases in rather than snaps.
   ============================================================= */

/* Premium easing tuned for a slow settle (matches token --ease but
   spelled out so the timing is explicit & self-documenting). */
:root { --feat-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* Frame: keep the image clipped (app.css already sets overflow:hidden)
   and animate a soft shadow lift + a hairline radius so the lift reads
   as the painting rising off the page, not a box flashing on. */
.feat__media {
  border-radius: 2px;
  box-shadow: 0 0 0 rgba(26, 23, 20, 0);
  transition: box-shadow 0.7s var(--feat-ease),
              transform   0.7s var(--feat-ease);
  transform: translateZ(0);              /* own compositor layer */
  backface-visibility: hidden;
}

/* The image rests SHARP and FLAT (no default zoom -> no jolt), then
   eases UP into a gentle zoom that stays inside the frame. Long,
   single-direction transition = smooth, not snappy. */
.feat__media img {
  transform: scale(1);                   /* override app.css scale(1.06) */
  transform-origin: 50% 50%;
  transition: transform 0.7s var(--feat-ease);
  will-change: transform;
}
.feat:hover .feat__media img,
.feat:focus-within .feat__media img {
  transform: scale(1.045);               /* gentle zoom-in, no out-snap */
}

/* Soft lift of the whole frame on hover: a refined drop shadow +
   a barely-there rise. No harsh edges. */
.feat:hover .feat__media,
.feat:focus-within .feat__media {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -22px rgba(26, 23, 20, 0.34),
              0 6px 16px -10px  rgba(26, 23, 20, 0.18);
}

/* Kill the hard dark vignette from app.css. Replace it with the
   lightest warm scrim (only ~14% at the very bottom) so any white
   caption text stays legible without dimming the painting. */
.feat__media::after {
  background: linear-gradient(
    to top,
    rgba(26, 23, 20, 0.14),
    rgba(26, 23, 20, 0) 32%);
  opacity: 0;
  transition: opacity 0.7s var(--feat-ease);
}
.feat:hover .feat__media::after,
.feat:focus-within .feat__media::after {
  opacity: 1;
}

/* Refine the "View work" cue: ease its underline/arrow in with the
   same long curve instead of snapping. */
.feat__cap .go .link-u {
  transition: opacity 0.7s var(--feat-ease), color 0.7s var(--feat-ease);
}

/* Respect reduced-motion: no zoom or lift, just the soft scrim. */
@media (prefers-reduced-motion: reduce) {
  .feat__media img,
  .feat:hover .feat__media img,
  .feat:focus-within .feat__media img { transform: scale(1); }
  .feat__media,
  .feat:hover .feat__media,
  .feat:focus-within .feat__media { transform: none; box-shadow: none; }
}