/* =============================================================
   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);
}

/* -------------------------------------------------------------
   CAPTION SPACING — the "(NN)" index span is now removed from the
   featured cards (still present on the SERIES list, untouched). With
   the number gone, app.css's h3 top margin (0.4em, room it left for
   the number above) becomes dead space at the top of the caption.
   Re-set a deliberate, even vertical rhythm so the caption reads
   premium: title -> price/meta -> "View work" with steady gaps. */

/* Centre the caption (title + price + "View work") in its column so the
   stack reads as one intentional, balanced unit rather than flush-left. */
.feat__cap { text-align: center; }

/* Title: drop the orphaned top margin; keep a measured gap to meta. */
.feat__cap h3 {
  margin-top: 0;
  margin-bottom: 0.5em;
}

/* Price / meta line: a touch more breathing room beneath the title's
   weight, balanced against the gap above the "View work" cue. */
.feat__cap .meta {
  margin-bottom: 4px;
}

/* "View work" cue: even, intentional gap rather than the loose
   clamp(22px,3vh,36px). Sits in steady rhythm with the lines above. */
.feat__cap .go {
  margin-top: clamp(18px, 2.2vh, 26px);
}

/* 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; }
}