/* ==========================================================================
   fx-field.css — field/atmosphere effects for index-v2-c2m.html
   1) hero image trail  2) grid focus dimming  3) scroll-velocity blur
   Load after the page's own styles.
   ========================================================================== */

/* ---------- 1) HERO IMAGE TRAIL ---------- */
/* Layer sits above hero videos (tiles z<=6) but below .hero-copy (z:45)
   and .ticker (z:70). */
.fx-trail-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.fx-trail-chip {
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  aspect-ratio: 4 / 3;
  margin: -41px 0 0 -55px; /* center on spawn point */
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  will-change: transform, opacity;
  pointer-events: none;
}

/* ---------- 2) FOCUS CARDS ---------- */
/* JS-driven (fx-field.js): `.fx-has-hover` on #grid + `.fx-hot` on the card
   under the pointer. Pure :hover was sloppy — grid gaps counted as hover and
   scrolling left stale hover states (browsers don't recompute :hover on
   scroll). Only opacity/filter are touched, so the thumb lift is untouched. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #grid .work-card {
    transition:
      opacity 0.25s cubic-bezier(0.33, 1, 0.68, 1),
      filter 0.25s cubic-bezier(0.33, 1, 0.68, 1);
  }
  #grid.fx-has-hover .work-card:not(.fx-hot) {
    opacity: 0.45;
    filter: saturate(0.6);
  }
}

/* ---------- 3) SCROLL-VELOCITY BLUR — REMOVED (2026-07-23) ----------
   User request: the fast-scroll smear read as "the site is blurry".
   The JS no longer runs (initScrollBlur is not called) and the rules are
   intentionally gone so no filter can ever apply to #grid while scrolling. */