/* ==========================================================================
   ServiceLine — Work index (route-specific enhancements)
   --------------------------------------------------------------------------
   Layers richer interaction over the base .work-index system in detail.css.
   The photograph's transform is owned by pages/work.js (clip-path reveal +
   pointer parallax + hover scale), so here we (1) narrow the CSS transition
   to filter only — a CSS transform transition would fight GSAP's per-frame
   updates and jank — and (2) add hover cues that are NOT transforms.
   Loaded only on the work route. Consumes tokens only.
   ========================================================================== */

/* When JS is present the image transform belongs to GSAP; keep only the
   grade (filter) transition here. No-JS keeps detail.css's resting state. */
.js .work-index__media img {
    transition: filter var(--duration-section) var(--ease-precise);
    will-change: transform, filter;
    backface-visibility: hidden;
}

/* An accent seam draws across the base of the frame on hover — a precise,
   architectural hover cue that reads as "measured", not decorative. */
.work-index__media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 2;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-section) var(--ease-reveal);
}

.work-index__card:hover .work-index__media::after {
    transform: scaleX(1);
}

/* A quiet grade lift across the whole frame on hover, layered under the
   parallax so the crop warms as the cursor enters. */
.work-index__media {
    position: relative;
}

.work-index__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 11, 0.45) 100%);
    opacity: 0.75;
    transition: opacity var(--duration-section) var(--ease-precise);
}

.work-index__card:hover .work-index__media::before {
    opacity: 0.35;
}

/* Keep the index chip above the new overlays. */
.work-index__index {
    z-index: 3;
}

/* The metadata is animated in by pages/work.js via [data-work-line]; give
   the view affordance a little more life on hover to match. */
.work-index__card:hover .work-index__view {
    color: var(--text-primary);
}