/* Nelly Mafi — Home v7
   Theme tokens are swapped by script.js when a project becomes active;
   every colour on the page transitions through them. */

:root {
  --bg: #0c0c0e;
  --fg: #f2f1ed;
  --accent: #f2f1ed;
  --accent-90: rgba(242, 241, 237, .9);
  --muted: #9a9992;
  --line: #222227;
  --fg-14: rgba(242, 241, 237, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --theme: .8s var(--ease);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pad: clamp(20px, 4vw, 48px);
  /* cursor, set by script.js */
  --mx: 0;
  --my: 0;
  --lx: 50%;
  --ly: 50%;
}

html { color-scheme: dark; scroll-behavior: smooth; }
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  transition: background var(--theme), color var(--theme);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-net { cursor: grab; }
body.is-net.is-dragging { cursor: grabbing; }

a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
::selection { background: #fff; color: #000; }

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 10;
  padding: 8px 12px; background: var(--fg); color: var(--bg);
  font-family: var(--mono); font-size: 12px; border-radius: 4px;
}
.skip-link:focus { top: 12px; }

/* ---------- artwork layers ---------- */

/* the stage holds artwork, veil, lamp and effect canvas so options can move or clip them as one unit */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.art, .lit { position: fixed; inset: 0; pointer-events: none; }
.art { z-index: 0; }
.lit { z-index: 1; }
.art-layer,
.lit-layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
  overflow: hidden;
}
.art-layer.is-on,
.lit-layer.is-on { opacity: 1; }

.art-img {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
  transform: translate(calc(var(--mx) * -12px), calc(var(--my) * -8px));
  transition: transform 1.2s ease-out;
}
.is-on .art-img { animation: kb 18s ease-in-out infinite alternate; }

@keyframes kb {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1%); }
}

/* the lamp: brightened copy masked to a soft circle under the cursor */
.lit-layer .art-img {
  --lr: 32vmax;
  filter: brightness(1.12) saturate(1.05);
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 30%, rgba(0,0,0,0) 100%);
}
.lit-layer[data-art="feral"] .art-img { --lr: 36vmax; }
.lit-layer[data-art="femmefatale"] .art-img { filter: brightness(1.35) saturate(1.1); }
/* GExplore's source is a heavily compressed WebP: brightening it shows compression blocks,
   so its light comes from canvas bloom on the beads instead of the lamp layer. */
.lit-layer[data-art="gexplore"] { display: none; }
/* Pawsitive's pastel scene needs no lamp either: brightening it hides the dust motes on the canvas. */
.lit-layer[data-art="pawsitive"] { display: none; }

.veil {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: transparent;
  transition: background var(--theme);
}

.fx {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---------- nav ---------- */

.nav {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px var(--pad);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
}
.nav-name { font-weight: 500; }
.nav-links { display: flex; gap: 24px; }

/* ---------- hero ---------- */

.hero {
  position: relative; z-index: 2;
  padding: clamp(40px, 10vh, 120px) var(--pad) 56px;
  perspective: 1200px;
}

.name {
  margin: 0;
  display: flex; flex-wrap: wrap;
  font-size: clamp(64px, 13.5vw, 220px);
  line-height: .9;
  font-weight: 500;
  letter-spacing: -.05em;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transition: transform .8s var(--ease);
  cursor: default;
  user-select: none;
}
.name.is-live { transition: transform .15s linear; }

.ch {
  display: inline-block;
  margin-right: .01em;
  transform-style: preserve-3d;
  color: var(--fg);
  text-shadow:
    -1px 1px 0 var(--accent-90), -2px 2px 0 var(--accent-90),
    -3px 3px 0 var(--name-drop, var(--line)), -4px 4px 0 var(--name-drop, var(--line)), -5px 5px 0 var(--name-drop, var(--line)),
    -6px 6px 0 var(--name-drop, var(--line)), -7px 7px 0 var(--name-drop, var(--line)), -8px 8px 0 var(--name-drop, var(--line)),
    -9px 9px 0 var(--name-drop, var(--line)), -10px 10px 0 var(--name-drop, var(--line)), -11px 11px 0 var(--name-drop, var(--line)),
    -12px 12px 0 var(--name-drop, var(--line));
  transition: transform .8s var(--ease), color .4s;
}
.ch-space { margin-right: 0; }
.name.is-live .ch { transition: transform .2s ease-out, color .25s; }
.ch.is-hot { color: var(--name-hot, var(--accent)); }

.lead {
  margin: 36px 0 0;
  max-width: 560px;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
  transition: color var(--theme);
}

/* ---------- work ---------- */

.work {
  position: relative; z-index: 2;
  padding: 0 var(--pad) 40px;
}
.work-head {
  display: flex; justify-content: flex-end;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  padding-bottom: 14px;
  border: 0;
}
.muted { color: var(--muted); transition: color var(--theme); }

.row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 2fr);
  grid-template-areas: "n t d" "n t r";
  column-gap: 24px; row-gap: 6px;
  align-items: start;
  padding: 26px 0;
  border-bottom: 1px solid var(--fg-14);
  color: var(--fg);
  transition: opacity .5s, color var(--theme), padding-left .35s var(--ease), border-color var(--theme);
}
.row.is-dim { opacity: .5; }
.row.is-on { padding-left: 12px; }
.row:hover { opacity: 1; }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.row.is-soon { cursor: default; }

.row-n {
  grid-area: n;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  padding-top: 8px;
}
.row-title {
  grid-area: t;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.02em;
  transition: color .4s;
}
.row.is-on .row-title { color: var(--accent); }
.row-desc {
  grid-area: d;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.45;
  padding-top: 6px;
  text-wrap: pretty;
}
.row-roles {
  grid-area: r;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--muted);
  transition: color var(--theme);
}
.row-soon {
  font-style: normal;
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px;
  border: 1px solid var(--fg-14);
  border-radius: 3px;
  letter-spacing: .08em;
}

/* ---------- contact ---------- */

.contact {
  position: relative; z-index: 2;
  padding: 56px var(--pad) 40px;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
}
.cta {
  font-size: clamp(26px, 4vw, 56px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--fg);
  transition: color var(--theme);
  overflow-wrap: anywhere;
}
.social {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
}

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .row {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: "n t" "n d" "n r";
    column-gap: 16px;
  }
  .row-desc { padding-top: 0; }
  .row-soon { margin: 6px 0 0; display: block; width: fit-content; }
  .name { font-size: clamp(56px, 17vw, 120px); }
}

@media (hover: none) {
  [data-hint]::before { content: "scroll — "; }
  [data-hint] { font-size: 0; }
  [data-hint]::before, [data-hint]::after { font-size: 11px; }
  [data-hint]::after { content: "the nearest project lights up"; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-on .art-img { animation: none; }
  .fx { display: none; }
}