/* ============================================================
   MNRL — liquid glass overlay (V4-REF-11, per owner reference MNRL REF7)

   Its own file because the two pages that use it do not share a stylesheet:
   /namma/ loads base.css + namma.css, /racership/ loads base.css + site.css.
   Parking these rules in site.css stripped every glass style off the homepage
   — the pane still ran, invisibly, and the card's own hover invert came back
   on top of it. Paired with assets/js/liquid-glass.js; load both together.
   ============================================================ */

/* ---- Liquid glass overlay (V4-REF-11) ----
   Moved here from namma.css: /racership/ uses the same pane over its brand-system
   nodes and infrastructure tiles, and both pages load site.css. The engine is
   assets/js/liquid-glass.js, which drives any element carrying [data-liquid]. */
/* ============================================================
   V4-REF-11 · "Where are you right now?" — liquid glass overlay
   Per owner reference (MNRL REF7): the glass is a slab that floats OVER the
   active card, not a label tucked inside it. It overhangs the card by 25px on
   every side (50px larger in each dimension), so it reads as a pane of glass
   laid on top rather than a panel fitted to it.

   Refraction is the whole effect: backdrop-filter blurs and lifts what sits
   behind, a rim highlight catches the top-left edge, and an inner sheen gives
   the pane thickness. Kept monochrome — the reference desktop shows prismatic
   colour at the edges, but MNRL's interface stays black and white and lets
   client work supply colour, so the refraction here is neutral.

   The panel is a visual echo. Every description also lives inside its own
   card, so nothing is hover-only; on touch, narrow screens, and reduced
   motion the in-card copy stays put and the glass never engages.
   ============================================================ */
.nm-glass {
  --glass-overhang: 25px;                 /* 50px larger than the card, both axes */
  /* fixed, not absolute: the pane belongs to the page, not to a section, so
     it can swim from the work carousel down to the path cards without ever
     being clipped by a parent */
  /* z 5: above the media (0), grain (3) and the iridescent sheet (4);
     below the side H1 (8) and the case-study window (9). */
  position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 28px 30px;
  /* jelly: each corner is its own variable, driven by the spring's leftover
     velocity — the pane deforms while it travels and firms up as it settles,
     so the edges are never all sharp at once during a move */
  border-radius: var(--r1,14px) var(--r2,14px) var(--r3,14px) var(--r4,14px);
  opacity: 0;
  /* position and squash are driven by a spring in JS — only the fade is a
     CSS transition, so nothing fights the physics */
  transition: opacity .34s var(--ease);
  will-change: transform;
  background: rgba(160,160,160,0.055);   /* barely there — the blur does the work */
  box-shadow:
    0 60px 120px -40px rgba(0,0,0,.72),   /* it floats well above the page */
    0 18px 40px -22px rgba(0,0,0,.5),
    0 0 70px -10px rgba(255,255,255,.16), /* the glow it throws onto the page */
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.30),  /* top edge catches light */
    inset 0 -1px 0 rgba(255,255,255,.05),
    inset 0 0 60px -18px rgba(255,255,255,.22);  /* light pooling inside the pane */
  /* text follows the theme, not the glass: --ink is dark on paper and light
     in dark mode, so the description stays legible in both */
  color: var(--ink);
}
@supports (backdrop-filter: blur(10px)) {
  /* The SVG displacement runs before the blur, so what gets blurred is
     already rippled — the distortion reads as thickness in the glass rather
     than as a texture painted on top of it. Injected by v3.js; the plain
     blur below is what shows if the filter never lands. */
  /* 22–26px of blur reads as a frosted window over a desktop, but it erases
     a photograph. The refraction, rim and caustic carry the material; the
     blur only needs to be enough to say "glass". */
  .nm-glass { backdrop-filter: blur(7px) saturate(1.28) brightness(1.03); }
  .nm-glass.has-ripple { backdrop-filter: url(#nm-glassrip) blur(6px) saturate(1.3) brightness(1.03); }
}
/* no backdrop-filter (older Firefox): fall back to an opaque slab so the
   description never lands unreadable on top of live content */
@supports not (backdrop-filter: blur(10px)) {
  .nm-glass { background: var(--print); }
}
/* the rim — a hairline that brightens toward the top-left, like the reference */
.nm-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.72) 0%, rgba(255,255,255,.10) 38%,
    rgba(255,255,255,.04) 62%, rgba(255,255,255,.30) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  /* faint chromatic fringe on the rim only — the glass splits light at its
     edge the way thick glass does. --ca grows with travel speed, so the
     fringe appears while moving and all but vanishes at rest. */
  filter:
    drop-shadow(calc(var(--ca,0px) * 1) 0 0 rgba(255,70,120,.42))
    drop-shadow(calc(var(--ca,0px) * -1) 0 0 rgba(60,190,255,.42));
}
/* inner sheen at the top for thickness, and a scrim at the bottom so the
   description never has to survive on whatever happens to be behind it */
.nm-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(150deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%),
    /* scrim under the readout, which reads from the top like a terminal */
    linear-gradient(to bottom, var(--paper) 0%, rgba(0,0,0,0) 52%);
  opacity: .78;
}
.nm-glass.is-on { opacity: 1; }
/* the readout — a mono block that describes the card underneath, typed out
   rather than swapped in, so it takes 3s+ of hovering to complete */
/* caustic layer — the prismatic streak and the cursor's ripple rings.
   screen blend so it only ever adds light, never darkens the readout. */
.nm-glass-caustic { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; border-radius: inherit;
  mix-blend-mode: screen; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .nm-glass-caustic { display: none; } }

/* long readouts (a whole case study) scroll inside the pane as they type */
.nm-glass.is-long .nm-glass-read { overflow-y: auto; max-height: 100%;
  scrollbar-width: thin; }
.nm-glass.is-long .nm-glass-read::-webkit-scrollbar { width: 3px; }
.nm-glass.is-long .nm-glass-read::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 30%, transparent); }
.nm-glass-read { position: relative; z-index: 1; margin: 0;
  font-family: var(--font-mono); font-size: clamp(11px,0.86vw,13px);
  line-height: 1.72; letter-spacing: .02em;
  white-space: pre-wrap; word-break: break-word; }
.nm-glass-read code { font: inherit; }
.nm-glass-read .k { opacity: .55; }
.nm-glass-read .caret { opacity: .9; animation: nm-caret 1s steps(1) infinite; }
@keyframes nm-caret { 0%,50% { opacity: .9; } 50.01%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nm-glass-read .caret { animation: none; } }

/* While the glass is the hover response, the card's own invert stands down —
   two competing responses to one hover read as a bug, and a card flipped to
   near-white blurs into a bright slab the description can't sit on. */
body.liquid-live .nm-vcard:hover::before { transform: translateY(100%); }
body.liquid-live .nm-vcard:hover { color: inherit; }
body.liquid-live .nm-vcard:hover .idx,
body.liquid-live .nm-vcard:hover .d { color: var(--quiet); }

/* the card underneath is being read through glass — its own line steps back */
body.liquid-live .nm-vcard .d { opacity: .3; transition: opacity .3s var(--ease); }
body.liquid-live .nm-vcard:hover .d,
body.liquid-live .nm-vcard:focus-visible .d { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .nm-glass { transition: opacity .2s linear; }
}
/* no glass, no travel: below the grid breakpoint the cards speak for themselves */
@media (max-width: 900px) {
  .nm-glass { display: none; }
  body.liquid-live .nm-vcard .d { opacity: 1; }
}