/* =====================================================================
   NM Signature FX — site-wide styling half of scripts/nm-signature-fx.js.
   Graduated from the home-fx-lab.html sandbox (scripts/nm-presentation-
   lab.*) after review: nav punch, the section wayfinder and the work
   card rollover. Loaded on every page that also loads
   nm-title-highlight.css (the same "signature" set): index.html,
   works.html, gallery.html, project.html, journal.html, contact.html,
   article.html.
   ===================================================================== */

/* ---- 1. nav punch — a permanent underline (same background-size
   draw-in technique nm-title-highlight.css uses elsewhere) on whichever
   [data-navlinks] link represents the page currently being viewed. The
   hover state is deliberately left alone here: [data-nav]'s own swept
   black/white bar (see bindNavHighlight() in nm-site-logic.js) already
   covers hover, and a second hover treatment stacked on top would just
   fight it — this only adds the "which page am I on" signal that system
   doesn't provide. --------------------------------------------------- */
[data-navlinks] a .nm-nav-label{
  display:inline-block;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%;
  background-size:0% 2px; padding-bottom:5px;
  transition:background-size 340ms cubic-bezier(.22,1,.36,1);
}
[data-navlinks] a[data-nm-current] .nm-nav-label{ background-size:100% 2px; }

/* ---- 2. section wayfinder — only ever mounts on a page built from
   section[data-sec] blocks (index.html today); nm-signature-fx.js no-ops
   everywhere else, so these rules simply never match elsewhere. -------- */
[data-nm-wayfinder]{
  position:fixed; left:22px; bottom:22px; z-index:130;
  display:flex; align-items:center; gap:10px;
  color:#fff; mix-blend-mode:difference; pointer-events:none;
  font:700 11px/1 var(--nm-font,'Montserrat',sans-serif); letter-spacing:.1em;
}
[data-nm-wayfinder] [data-nm-wayfinder-label]{ white-space:nowrap; }
[data-nm-wayfinder] [data-nm-wayfinder-dots]{ display:flex; gap:6px; pointer-events:auto; }
[data-nm-wayfinder] button{
  appearance:none; border:none; padding:0; margin:0; background:none;
  width:14px; height:14px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
[data-nm-wayfinder] button::before{
  content:""; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.35;
  transition:opacity 220ms ease, transform 220ms ease; display:block;
}
[data-nm-wayfinder] button[data-active]::before{ opacity:1; transform:scale(1.6); }
@media (max-width:768px){ [data-nm-wayfinder]{ display:none; } }

/* ---- 3. work card rollover — shared by the home "Selected Work" track
   ([data-card]/[data-media]/[data-work-name]) and gallery.html's grid
   ([data-gallery-card]/[data-gallery-media]/[data-gallery-name]). On
   hover: the caption below the card scrolls straight UP and out of view
   inside its own clipped mask window (overflow:hidden + translateY, no
   opacity anywhere — a hard mask, not a fade). At almost the same
   moment, a flat opaque black banner living inside the card scrolls
   straight up into place out of the same overflow:hidden clip the media
   box already uses for its own image-zoom hover, arriving right where
   the caption used to read — one name traveling from the caption into
   the card, not two unrelated hover states. A short transition-delay on
   the banner (and a further delay on its own underline) staggers the
   handoff instead of both halves moving in lockstep. ------------------- */
[data-card] [data-media],
[data-gallery-card] [data-gallery-media]{ position:relative; }
[data-card] [data-media] img, [data-card] [data-media] video,
[data-gallery-card] [data-gallery-media] img, [data-gallery-card] [data-gallery-media] video{
  transition:transform 300ms cubic-bezier(.22,1,.36,1), filter 220ms ease;
}
[data-card]:hover [data-media] img, [data-card]:hover [data-media] video,
[data-gallery-card]:hover [data-gallery-media] img, [data-gallery-card]:hover [data-gallery-media] video{
  transform:scale(1.08); filter:brightness(.55);
}

/* mask window: fixed to one line's own box, clips the inner span that
   actually moves — the title's own box never changes height, so the
   card's layout doesn't reflow when it exits.

   That inner span is [data-nm-card-title-inner] AND [data-summary-text]
   at once (see enhanceCard() in nm-signature-fx.js) — it's the same
   element nm-title-highlight.css already paints its permanent black bar
   onto (the per-line-hugging span treatment, not the single-rectangle
   h1/h2/h3 one: [data-work-name]/[data-gallery-name] are excluded from
   that group specifically so a wrapped two-line title doesn't get one
   rectangle sized to its widest line, which could fully cover a shorter
   second line — text going black-on-black — well before the sweep, and
   the delayed color flip, actually finished). Reusing that same element
   for the hover-exit means the bar is part of what translateY carries
   up and out on hover, not a second thing that has to be kept in sync —
   the !important transition below only needs to ADD `transform` to
   nm-title-highlight.css's own background-size/color transition, not
   replace it (a plain `transition` re-declaration on this same element
   would otherwise clobber the CSS-variable-driven sweep in from that
   rule entirely). */
[data-work-name], [data-gallery-name]{ overflow:hidden; }
[data-nm-card-title-inner]{
  display:block;
  transition:transform 95ms cubic-bezier(.6,0,.28,1),
    background-size var(--nm-reveal-ms,900ms) var(--nm-reveal-ease,cubic-bezier(.22,1,.36,1)),
    color 0s linear var(--nm-reveal-ms,900ms) !important;
}
[data-card]:hover [data-nm-card-title-inner],
[data-gallery-card]:hover [data-nm-card-title-inner]{ transform:translateY(-130%); }

[data-nm-card-banner]{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 22px 20px; pointer-events:none;
  background:#000; color:#fff;
  transform:translateY(100%);
  transition:transform 230ms cubic-bezier(.6,0,.16,1);
}
[data-card]:hover [data-nm-card-banner],
[data-gallery-card]:hover [data-nm-card-banner]{
  transform:translateY(0);
  transition-delay:30ms;
}
[data-nm-card-banner-title]{
  display:inline-block; font:700 clamp(24px,2.4vw,32px)/1.05 var(--nm-font,'Montserrat',sans-serif);
  text-transform:uppercase; letter-spacing:.01em;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%;
  background-size:0% 3px; padding-bottom:5px;
  transition:background-size 210ms cubic-bezier(.22,1,.36,1);
}
[data-card]:hover [data-nm-card-banner-title],
[data-gallery-card]:hover [data-nm-card-banner-title]{ background-size:100% 3px; transition-delay:100ms; }
[data-nm-card-banner-meta]{
  display:block; margin-top:8px; opacity:.82;
  font:700 12px/1.4 var(--nm-font,'Montserrat',sans-serif); letter-spacing:.09em; text-transform:uppercase;
}

/* ---- reduced motion: neutralize the motion-heavy bits ----------------- */
@media (prefers-reduced-motion:reduce){
  [data-card] [data-media] img, [data-card] [data-media] video,
  [data-gallery-card] [data-gallery-media] img, [data-gallery-card] [data-gallery-media] video,
  [data-nm-card-title-inner], [data-nm-card-banner], [data-nm-card-banner-title]{
    transition:none;
  }
}