/* ═══════════════════════════════════════════════════════════
   NAWAF M. ASHRAFF — Portfolio
   Minimalist · Cinematic · Editorial
   Palette: #000 black / #fff white / metallic silver spectrum
   Typography: Big Shoulders Display (var wght) + DM Sans (var)
═══════════════════════════════════════════════════════════ */

/* ── LOCAL FONTS — Space Mono instrument type ────────────── */
@font-face {
  font-family: 'Space Mono';
  src: url('Fonts/SpaceMono-Regular.woff2') format('woff2'),
       url('Fonts/SpaceMono-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('Fonts/SpaceMono-Bold.woff2') format('woff2'),
       url('Fonts/SpaceMono-Bold.woff')  format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  --black      : #000;
  --white      : #fff;
  --silver     : #7a7a7a;      /* mid-tone metallic */
  --silver-hi  : #c0c0c0;      /* bright metallic */
  --silver-lo  : #3a3a3a;      /* dim metallic */
  --acc        : #d71921;      /* Nothing red — beacons + data-fronts only */
  --rule       : rgba(255,255,255,.065);
  --font-d     : 'Big Shoulders Display', sans-serif;
  --font-b     : 'DM Sans', sans-serif;
  --font-m     : 'Space Mono', ui-monospace, 'Cascadia Mono', monospace;
  --pad-x      : clamp(1.75rem, 7vw, 7rem);
  --pad-y      : clamp(4.5rem, 9vw, 9rem);
  --ease-out   : cubic-bezier(.16,1,.3,1);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  cursor: none !important;    /* suppress default cursor everywhere */
  user-select: none;          /* block text selection globally */
}
/* Re-enable selection only on readable body copy */
.proj-desc, .proj-one, .approach-p, .contact-email,
.contact-link, .site-footer p { user-select: text; }

html {
  scroll-behavior: auto; /* Lenis owns scrolling */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-b);
  font-variation-settings: 'opsz' 20, 'wght' 300;
  overflow-x: hidden;
  cursor: none;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: normal; color: var(--white); }

/* custom scrollbar — very thin chrome accent */
::-webkit-scrollbar       { width: 2px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--silver-lo); }

/* ── CA FILTER DEFS + PAGE CONTENT WRAPPER ─────────────── */
/* SVG element is hidden — it only holds filter definitions  */
#ca-defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  pointer-events: none;
}

/*
  filter: url(#ca) is always active.
  When both feOffset dx values are 0, the filter is a mathematical
  no-op (RGB channels recombine identically) — zero visual cost at rest.
  JS scales dx from 0 → 8 px proportional to lenis.velocity.

  NOTE: filter on a non-root element creates a stacking context,
  so position:fixed children MUST live outside this div
  (grain, cursor, prog-bar, proj-preview are all siblings).
*/
#page-wrap {
  filter: url(#ca);
  position: relative;
  z-index: 1;            /* sits above the fixed dot-grid backdrop */
}

/* ── DOT-MATRIX BACKDROP ───────────────────────── */
/*
  Brutalist graph paper — fixed sibling UNDER #page-wrap
  (fixed descendants of a filtered element would attach to it,
  so this must live outside). Vignette mask keeps edges moody.
*/
#dotgrid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 38%, transparent 100%);
          mask-image: radial-gradient(120% 90% at 50% 42%, #000 38%, transparent 100%);
}

/* ── MERCURY BOOT OVERLAY ──────────────────────── */
/*
  Opaque from the very first paint (pure CSS — no JS needed to
  cover the page). mercury.js swaps background to transparent at
  cooldown so the dissolve reveals the live UI through the holes.
*/
#boot {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #000;
  outline: none;
}

/* THE MERCURY LAYER — persistent liquid canvas.
   Boot: above the #boot backdrop. Live: above the page, under nothing. */
#mercury {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1201;
  pointer-events: none;
}
#mercury.mercury--live { z-index: 1000; }

.boot-ui {
  position: absolute;
  bottom: 2.6rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  opacity: 0;                    /* mercury.js fades in */
  font-family: var(--font-m);
  text-transform: uppercase;
  pointer-events: none;
}

.boot-brand {
  font-size: .52rem;
  letter-spacing: .42em;
  color: #4b4b4b;
}

.boot-hint {
  font-size: .6rem;
  letter-spacing: .3em;
  color: #8f8f8f;
}

.boot-bar {
  width: 128px;
  height: 1px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}

#boot-charge {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Thermal readout — cooldown instrument line (T → 234.3K — SOLID) */
.boot-temp {
  position: absolute;
  bottom: 6.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-m);
  font-size: .62rem;
  letter-spacing: .34em;
  color: #9a9a9a;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* ── INSTRUMENT HUD — fixed four-corner frame ─────────── */
#hud {
  position: fixed;
  inset: 0;
  z-index: 996;
  pointer-events: none;
  opacity: 0;                    /* script.js reveals after boot */
  font-family: var(--font-m);
  text-transform: uppercase;
}

.hud-cell {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .56rem;
  letter-spacing: .22em;
  color: #6c6c6c;
  white-space: nowrap;
}

.hud-tl { top: 1.15rem;    left: 1.4rem;  }
.hud-tr { top: 1.15rem;    right: 1.4rem; gap: 1.6rem; pointer-events: auto; }
.hud-bl { bottom: 1.15rem; left: 1.4rem;  }
.hud-br { bottom: 1.15rem; right: 1.4rem; }

.hud-tr a { color: #8f8f8f; transition: color .25s; }
.hud-tr a:hover { color: var(--white); }

.hud-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #a8a8a8;
}

.hud-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acc);
  animation: dot-pulse 2.2s ease-in-out infinite;
}

.hud-sep { color: #3d3d3d; }

@keyframes dot-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .22; }
}

/* ── FILM GRAIN CANVAS ──────────────────────────────────── */
#grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  opacity: .04;
  mix-blend-mode: screen;
}

/* ── CURSOR DOT ─────────────────────────────────────────── */
#cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  will-change: transform;
  /* NO CSS transition — GSAP owns all size/position changes */
}

/* ── SCROLL PROGRESS STRIP ──────────────────────────────── */
#prog-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--silver-hi);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 997;
  opacity: .45;
  will-change: transform;
}

/* ── PANELS (sections) ──────────────────────────────────── */
.panel {
  min-height: 100vh;
  min-height: 100svh;          /* small viewport height — static, no address-bar jitter */
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* work section is taller — scroll through it freely */
.panel--tall {
  min-height: auto;
  padding-top:    clamp(6rem, 11vw, 11rem);
  padding-bottom: clamp(6rem, 11vw, 11rem);
}

/* ── SECTION LABEL ──────────────────────────────────────── */
.sec-label {
  font-family: var(--font-m);
  font-size: clamp(.58rem, .85vw, .7rem);
  letter-spacing: .32em;
  color: var(--silver);
  text-transform: uppercase;
  margin-bottom: clamp(3rem, 5.5vw, 5rem);
}

/* ── REVEAL INITIAL STATE (GSAP animates in) ────────────── */
.rv {
  opacity: 0;
  transform: translateY(26px);
}

/* ── ───────────────────── HERO ─────────────────────────── */

.hero-inner { width: 100%; }

.hero-fig { margin: 0; }

/* SVG stretches full width; overflow:visible so letters
   can bleed outside viewBox at extreme bold weights     */
.hero-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Pre-rig measuring state — fully visible display weight.
   JS rebuilds the name as individual .hero-lt glyphs after font load. */
.hero-t {
  font-family: 'Big Shoulders Display', sans-serif;
  font-variation-settings: 'wght' 420;
  font-size: 120px;            /* JS will resize after font loads */
  letter-spacing: -.01em;
}

/* Melt-rig glyphs — independent <text> nodes under the goo filter */
.hero-lt {
  font-family: 'Big Shoulders Display', sans-serif;
  letter-spacing: -.01em;
  will-change: transform;
}

/* Row below name ─ role · skills */
.hero-sub {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 1.5rem;
}

.hero-role {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-variation-settings: 'opsz' 20, 'wght' 300;
  font-size: clamp(.62rem, 1.05vw, .78rem);
  letter-spacing: .26em;
  color: var(--silver-hi);
  text-transform: uppercase;
}

/* live-signal beacon beside the role line */
.rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acc);
  flex-shrink: 0;
  animation: dot-pulse 2.2s ease-in-out infinite;
}

.hero-skills {
  font-family: var(--font-m);
  font-size: clamp(.55rem, .8vw, .66rem);
  letter-spacing: .08em;
  color: var(--silver);
}

.hero-tagline {
  font-variation-settings: 'opsz' 40, 'wght' 300;
  font-size: clamp(.95rem, 1.9vw, 1.35rem);
  line-height: 1.65;
  color: var(--silver-hi);
  margin-top: 2.25rem;
  max-width: 50ch;
}

/* Scroll cue — animated line + label */
.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
}

.scroll-line {
  display: block;
  width: 1px;
  height: 54px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent);
  animation: line-pulse 2.4s ease-in-out infinite;
}

@keyframes line-pulse {
  0%, 100% { opacity: .2; transform: scaleY(1);   }
  50%       { opacity: .9; transform: scaleY(1.08); }
}

.scroll-word {
  font-family: var(--font-m);
  font-size: .55rem;
  letter-spacing: .38em;
  color: var(--silver);
  text-transform: uppercase;
}

/* ── ────────────────────── WORK ────────────────────────── */

.proj-list {
  display: flex;
  flex-direction: column;
}

/* Each project uses a 2-col grid: left = desc/scope, right = stays open */
.proj {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: .65rem;
  padding: clamp(2rem, 3.5vw, 3rem) 0;
  border-bottom: 1px solid var(--rule);
  list-style: none;
}
.proj:first-of-type { border-top: 1px solid var(--rule); }

.proj-hd {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

/* index numeral + name grouped on the left of each header row */
.proj-title {
  display: flex;
  align-items: baseline;
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  min-width: 0;
}

.proj-idx {
  font-family: var(--font-m);
  font-size: .62rem;
  letter-spacing: .2em;
  color: #3d3d3d;
  transition: color .3s;
  flex-shrink: 0;
}
.proj:hover .proj-idx { color: var(--acc); }

/* Project name uses display variable font — weight animated on hover */
.proj-name {
  font-family: var(--font-d);
  font-variation-settings: 'wght' 600;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--white);
  cursor: default;
}

.proj-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  flex-shrink: 0;
}
.proj-meta span {
  font-family: var(--font-m);
  font-size: clamp(.53rem, .78vw, .62rem);
  letter-spacing: .13em;
  color: var(--silver);
  text-transform: uppercase;
  white-space: nowrap;
}

.proj-one {
  grid-column: 1 / -1;
  font-variation-settings: 'opsz' 20, 'wght' 400;
  font-size: clamp(.82rem, 1.35vw, 1rem);
  color: var(--silver-hi);
  letter-spacing: .04em;
}

.proj-desc {
  font-variation-settings: 'opsz' 20, 'wght' 300;
  font-size: clamp(.78rem, 1.05vw, .88rem);
  line-height: 1.78;
  color: var(--silver);
  max-width: 52ch;
}

.proj-scope {
  font-family: var(--font-m);
  font-size: clamp(.56rem, .8vw, .65rem);
  letter-spacing: .08em;
  color: #4a4a4a;
  align-self: start;
  padding-top: .35rem;
}

.proj-link {
  grid-column: 1 / -1;
  display: inline-block;
  width: fit-content;
  font-family: var(--font-m);
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--silver-hi);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.proj-link:hover { color: var(--white); border-color: var(--white); }

.proj-tags {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.proj-tags span {
  font-family: var(--font-m);
  font-size: .54rem;
  letter-spacing: .14em;
  color: var(--silver);
  border: 1px solid var(--rule);
  padding: .2rem .6rem;
  text-transform: uppercase;
}

/* Side-projects divider */
.side-div {
  padding: 1.75rem 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: var(--silver);
}
.side-div::before, .side-div::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.side-div span {
  font-family: var(--font-m);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── ──────────────────── APPROACH ──────────────────────── */

.approach-body { max-width: 74ch; }

.approach-p {
  font-variation-settings: 'opsz' 40, 'wght' 300;
  font-size: clamp(1.2rem, 2.6vw, 2rem);
  line-height: 1.52;
  color: var(--silver-hi);
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.approach-p:first-of-type { border-top: 1px solid var(--rule); }
/* mono method tag above each line — M/01 · M/02 · M/03 */
.m-idx {
  display: block;
  font-family: var(--font-m);
  font-size: .56rem;
  letter-spacing: .3em;
  color: #4a4a4a;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
/* ── ─────────────────── CAPABILITIES ───────────────────── */

/* Marquee container — bleeds edge-to-edge */
.cap-marquee {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 1.8vw, 1.6rem);
  margin: 0 calc(-1 * var(--pad-x));  /* bleed to viewport edges */
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Single row — all items on one line, duplicated for seamless loop */
.cap-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee-fwd 30s linear infinite;
  will-change: transform;
}
.cap-track--rev {
  animation: marquee-rev 36s linear infinite;
}
/* Pause on hover — lets the user read */
.cap-track:hover { animation-play-state: paused; }

@keyframes marquee-fwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-rev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.cap-item {
  font-family: var(--font-d);
  font-variation-settings: 'wght' 200;
  font-size: clamp(2rem, 5vw, 4rem);
  color: var(--silver);
  white-space: nowrap;
  padding: 0 clamp(1.2rem, 2vw, 2rem);
  letter-spacing: -.01em;
  line-height: 1.1;
  transition: color .3s, font-variation-settings .3s;
}
.cap-item:hover {
  color: var(--white);
  font-variation-settings: 'wght' 600;
}

.cap-sep {
  font-size: clamp(.6rem, 1vw, .85rem);
  color: var(--silver-lo);
  flex-shrink: 0;
  opacity: .6;
}

/* Screen-reader accessible list — visually hidden */
.cap-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ── ───────────────────── CONTACT ──────────────────────── */

.contact-body { margin-bottom: auto; }
/* availability beacon — mono status line with pulsing red dot */
.avail {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-m);
  font-size: .6rem;
  letter-spacing: .3em;
  color: var(--silver-hi);
  text-transform: uppercase;
  margin-bottom: 1.9rem;
}

.avail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc);
  flex-shrink: 0;
  animation: dot-pulse 2.2s ease-in-out infinite;
}
/* Email — display-font hero link, weight animated on hover */
.contact-email {
  display: block;
  font-family: var(--font-d);
  font-variation-settings: 'wght' 400;
  font-size: clamp(1.9rem, 5.2vw, 4.8rem);
  letter-spacing: -.01em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 2.5rem;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.contact-email:hover { border-color: rgba(255,255,255,.2); }

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-link {
  font-family: var(--font-m);
  font-size: clamp(.66rem, 1.15vw, .8rem);
  letter-spacing: .15em;
  color: var(--silver);
  text-transform: uppercase;
  transition: color .2s;
  width: fit-content;
}
.contact-link:hover { color: var(--white); }

/* Footer — copyright */
.site-footer { margin-top: auto; padding-top: 3.5rem; }
.site-footer p {
  font-family: var(--font-m);
  font-size: .54rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.2);
  text-transform: uppercase;
}

/* ── PROJECT DATA-FEED — telemetry panel ────────────────── */
/*
  PROJECT DATA-FEED — brutalist HUD panel. Follows the cursor,
  revealed via clip-path on .proj-name hover. The image runs
  monochrome under a halftone dot-matrix mask (the site's data-grid
  DNA) with a live scanline; mono header/footer read like telemetry.
*/
#proj-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  pointer-events: none;
  width: 208px;
  background: rgba(4, 4, 4, .97);
  border: 1px solid rgba(255,255,255,.16);
  clip-path: inset(100% 0 0 0);   /* hidden by default — GSAP reveals */
  will-change: transform, clip-path;
  font-family: var(--font-m);
  text-transform: uppercase;
}

/* corner ticks — instrument-frame accents */
#proj-preview::before,
#proj-preview::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
}
#proj-preview::before {
  top: -1px; left: -1px;
  border-top: 1px solid var(--acc);
  border-left: 1px solid var(--acc);
}
#proj-preview::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid var(--acc);
  border-right: 1px solid var(--acc);
}

.pv-hd, .pv-ft {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .6rem;
  font-size: .48rem;
  letter-spacing: .18em;
  color: #8f8f8f;
}
.pv-hd { border-bottom: 1px solid rgba(255,255,255,.09); }
.pv-ft {
  border-top: 1px solid rgba(255,255,255,.09);
  justify-content: space-between;
  color: #5c5c5c;
}
#pv-name { color: #b9b9b9; }

.pv-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--acc);
  flex-shrink: 0;
  animation: dot-pulse 1.1s ease-in-out infinite;
}
.pv-sig { margin-left: auto; color: #4c4c4c; }

.pv-body {
  position: relative;
  height: 128px;
  overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.3px) 0 0 / 13px 13px;
}

/* monochrome telemetry image under a halftone dot mask */
#proj-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  filter: grayscale(1) contrast(1.22) brightness(.96);
  opacity: .92;
  -webkit-mask-image: radial-gradient(circle, #000 1.15px, transparent 1.45px);
          mask-image: radial-gradient(circle, #000 1.15px, transparent 1.45px);
  -webkit-mask-size: 3.2px 3.2px;
          mask-size: 3.2px 3.2px;
}

/* live scanline sweeping the feed */
.pv-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  mix-blend-mode: screen;
  animation: pv-scan 1.7s linear infinite;
}

@keyframes pv-scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(132px); }
}

/* ── SOLDER SEAMS — chrome glint sweeping the hairlines ──── */
.proj, .approach-p { position: relative; }

.seam {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  opacity: 0;
  pointer-events: none;
}

/* ── LIQUEFYING EMAIL ──────────────────────────── */
.contact-email .ch {
  display: inline-block;
  will-change: transform;
}

/* ── RE-POUR CONTROL ───────────────────────────── */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.repour {
  background: none;
  border: 1px solid var(--rule);
  color: var(--silver);
  font-family: var(--font-m);
  font-size: .54rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: .45rem .9rem;
  transition: color .25s, border-color .25s;
}
.repour:hover { color: var(--white); border-color: rgba(255,255,255,.3); }

.repour-veil {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 1300;
  opacity: 0;
  pointer-events: none;
}

/* ── RESPONSIVE: MOBILE ─────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --pad-x: 1.35rem;
    --pad-y: 3.8rem;
  }

  body { cursor: auto; }
  #cursor { display: none; }
  #grain  { display: none; }   /* save battery on mobile */

  .hud-cell { font-size: .5rem; letter-spacing: .16em; }
  .hud-tl { top: .95rem; left: 1.1rem; }
  .hud-tr { top: .95rem; right: 1.1rem; gap: .8rem; }
  .hud-bl, .hud-br { display: none; }

  .boot-ui   { bottom: 2rem; }
  .boot-temp { bottom: 4.9rem; font-size: .55rem; letter-spacing: .24em; }

  .hero-sub {
    flex-direction: column;
    gap: .4rem;
  }
  .hero-skills { display: none; }
  .hero-tagline { font-size: .95rem; margin-top: 1.6rem; }

  .sec-label { letter-spacing: .24em; }

  .proj {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .proj-hd { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .proj-name { font-size: clamp(1.9rem, 9vw, 2.7rem); }
  .proj-meta { align-items: flex-start; }
  .proj-scope { display: none; }

  .approach-p { font-size: clamp(1.05rem, 4.6vw, 1.4rem); padding: 1.3rem 0; }

  .cap-item { font-size: clamp(1.5rem, 7.5vw, 2.3rem); }

  .avail { font-size: .54rem; letter-spacing: .2em; }
  .contact-email {
    font-size: clamp(1.15rem, 5.6vw, 2rem);
    word-break: break-all;
  }

  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  /* Fix 4: Disable the heavy SVG goo filter on mobile — feGaussianBlur is
     composited by the GPU and tanks frame rate on mid-range devices.
     The SVG fallback name (#melt-rig) gets a lightweight drop-shadow
     instead, preserving the chrome depth read without the blur cost. */
  #melt-rig {
    filter: none;
  }
  .hero-lt {
    filter: drop-shadow(0 2px 6px rgba(180, 185, 200, 0.45));
  }
}

/* ── ACCESSIBILITY: REDUCED MOTION ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  .01ms !important;
  }
  #boot { display: none !important; }   /* mercury.js also bails — belt and braces */
  #mercury { display: none !important; }
  #hud  { opacity: 1 !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .cap { opacity: 1 !important; }
}