/* ===========================================================================
   ana.mn — Ana Apango · "LIQUID MEMORY"
   Gen X Soft Club aesthetic: cool restrained editorial + Y2K liquid chrome +
   transit-terminal machine voice. Color comes only from her photographs.
   =========================================================================== */

:root{
  /* paper & ink — COOL Gen X Soft Club fog (no cream) */
  --paper:      #d8ddda;   /* cool sage-grey */
  --paper-deep: #c8cfce;   /* deeper cool grey-blue */
  --ink:        #181c1c;   /* cool charcoal */
  --ink-soft:   #424845;   /* cool slate */
  --ink-faint:  #7f8884;   /* cool grey */
  --line:       #b6bdb9;   /* cool hairline */
  --line-soft:  #c6cdc9;

  /* restrained GXSC cool tones */
  --sage:   #8ea090;       /* soft sage/teal */
  --sage-deep:#5f7568;
  --denim:  #7f93a3;       /* washed denim */
  --slate:  #5c615e;
  --tan:    #c3b298;

  /* status (transit) */
  --amber:  #c79a48;
  --amber-glow:#e0b45c;
  --go:     #82b083;

  /* chrome — the single permitted shine */
  --chrome-1:#fbfaf7;
  --chrome-2:#cfd3d2;
  --chrome-3:#9aa3a5;
  --chrome-4:#e9ecec;
  --chrome-5:#7d8689;

  --maxw: 1280px;
  --gutter: clamp(18px, 5vw, 84px);

  --serif: 'Instrument Serif', Georgia, serif;
  --grot:  'Space Grotesk', system-ui, sans-serif;
  --disp:  'Archivo', 'Space Grotesk', sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;

  --reveal-y: 26px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; }
/* lock scroll + hide scrollbar while the intro drain plays (no layout shift, thanks to scrollbar-gutter) */
html.intro-lock{ overflow:hidden; }
html.intro-lock body{ overflow:hidden; height:100vh; }

body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(142,160,144,.10), transparent 60%),
    radial-gradient(125% 95% at 50% 6%, #e6eceb 0%, var(--paper) 40%, #c6cfcf 78%, #bcc6c7 100%);
  color:var(--ink);
  font-family:var(--grot);
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* faint paper grain */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.5) 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(0,0,0,.5) 2px 3px);
  background-size:3px 3px;
}

a{ color:inherit; }
img{ display:block; max-width:100%; height:auto; }
::selection{ background:var(--sage); color:var(--paper); }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:1px; }

.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.wrap{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--gutter);
  position:relative; z-index:1;
}

/* machine-voice labels */
.tag{
  font-family:var(--mono);
  font-size:clamp(10px,1.4vw,12px);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400;
}
.tag--ink{ color:var(--ink-soft); }
.tag--bone{ color:rgba(214,221,219,.55); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ============================ TRANSIT TOP BAR ============================ */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(214,221,219,.78);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding-block:10px;
}
.topbar__mark{
  font-family:var(--disp); font-weight:800;
  font-variation-settings:'wght' 800,'wdth' 78;
  font-size:clamp(15px,2.2vw,18px);
  letter-spacing:.02em; text-decoration:none; line-height:1; color:var(--ink);
}
.topbar__mark span{ color:var(--sage); }
.topbar__meta{ display:flex; align-items:center; gap:clamp(9px,2vw,24px); }
.topbar__meta .tag{ white-space:nowrap; }
.topbar__clock{ color:var(--sage-deep); }
.topbar__dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--go); margin-right:7px; vertical-align:middle;
  box-shadow:0 0 0 3px rgba(130,176,131,.22);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.topbar__live{ display:none; }
.hide-sm{ display:none; }
@media(min-width:560px){ .topbar__live{ display:inline; } }
@media(min-width:760px){ .hide-sm{ display:inline; } }

/* ================================= HERO ================================= */
.hero{ padding-top:clamp(40px,9vw,96px); padding-bottom:clamp(34px,6vw,64px); }
.hero__kicker{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px;
  margin-bottom:clamp(20px,4vw,34px);
}
.hero__kicker .tag--ink{ font-weight:700; }

.hero__title{ margin:0; line-height:.86; }
.hero__l1{
  display:block; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(58px,17vw,200px); letter-spacing:-.01em;
  color:var(--ink); line-height:.9;
}
.hero__l2{
  display:block; font-family:var(--disp); font-weight:800;
  font-variation-settings:'wght' 820,'wdth' 118;
  font-size:clamp(52px,15.5vw,184px); letter-spacing:-.02em; text-transform:lowercase;
  background:linear-gradient(176deg,
      var(--chrome-1) 0%, var(--chrome-4) 22%, var(--chrome-3) 48%,
      var(--chrome-5) 56%, var(--chrome-2) 74%, #fff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px rgba(60,66,66,.28);
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.5)) drop-shadow(0 5px 14px rgba(70,80,80,.22));
  margin-top:.02em;
}

.hero__sub{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end;
  gap:18px 24px; margin-top:clamp(26px,5vw,46px);
}
.hero__name{
  font-family:var(--disp); font-weight:700;
  font-variation-settings:'wght' 680,'wdth' 88;
  font-size:clamp(22px,4vw,34px); letter-spacing:.01em; line-height:1.02; margin:0;
}
.hero__sig{ font-family:var(--serif); font-style:italic; color:var(--sage); font-size:1.05em; margin-left:.35em; }
.hero__roles{
  font-family:var(--mono); font-size:clamp(11px,1.5vw,13px);
  color:var(--ink-soft); line-height:1.7; max-width:34ch;
}
.hero__roles b{ color:var(--ink); font-weight:700; }
.hero__roles .sep{ color:var(--sage); }

.hero__strip{
  margin-top:clamp(28px,5vw,52px); position:relative;
  border:1px solid var(--line); border-radius:3px; overflow:hidden;
  background:var(--paper-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 40px -28px rgba(40,46,40,.5);
}
.hero__strip img{ width:100%; aspect-ratio:1100/400; object-fit:cover; filter:saturate(.94) contrast(1.02); }
.hero__strip figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; padding:10px 14px;
  background:linear-gradient(to top, rgba(20,21,18,.62), transparent); color:var(--paper);
}
.hero__strip figcaption .tag{ color:rgba(214,221,219,.85); }

/* =============================== MARQUEE =============================== */
.marquee{
  border-block:1px solid var(--line); padding-block:14px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{ display:flex; gap:0; width:max-content; animation:scroll-x 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{
  font-family:var(--disp); font-weight:600;
  font-variation-settings:'wght' 560,'wdth' 96;
  font-size:clamp(20px,4vw,40px); letter-spacing:.01em; text-transform:uppercase;
  color:var(--ink); padding-inline:clamp(14px,3vw,34px); white-space:nowrap;
}
.marquee__star{ color:var(--sage); font-family:var(--serif); font-style:italic; }
@keyframes scroll-x{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ========================= ABOUT / MEMBER DOSSIER ====================== */
.about{ padding-block:clamp(56px,9vw,120px); }
.about__grid{ display:grid; gap:clamp(28px,5vw,56px); grid-template-columns:1fr; }
@media(min-width:880px){ .about__grid{ grid-template-columns:.85fr 1.15fr; align-items:start; } }

.portal{
  position:relative; margin:0; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:#0f1313; box-shadow:0 18px 50px -34px rgba(16,20,20,.8);
}
.portal img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(.92) contrast(1.03); }
.portal__label{
  position:absolute; top:12px; left:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:rgba(20,21,18,.5);
  border:1px solid rgba(214,221,219,.25); padding:5px 9px; border-radius:2px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.portal__chip{
  position:absolute; bottom:12px; right:12px;
  font-family:var(--disp); font-weight:800;
  font-variation-settings:'wght' 800,'wdth' 70;
  font-size:13px; letter-spacing:.04em; color:var(--ink);
  background:linear-gradient(160deg,var(--chrome-1),var(--chrome-3));
  border:1px solid rgba(255,255,255,.6); padding:7px 11px; border-radius:2px;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.6);
}

.about__body .eyebrow{ margin-bottom:18px; }
.about__lead{
  font-family:var(--serif); font-size:clamp(24px,3.6vw,40px); line-height:1.18;
  letter-spacing:-.005em; margin:0 0 clamp(20px,3vw,30px); color:var(--ink); text-wrap:balance;
}
.about__lead em{ font-style:italic; color:var(--slate); }
.about__p{
  font-size:clamp(15px,1.2vw,17.5px); line-height:1.62; color:var(--ink-soft);
  max-width:60ch; margin:0 0 18px;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(22px,3vw,30px); }
.chip{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  padding:8px 13px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-soft); background:rgba(255,255,255,.28);
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.chip:hover{ transform:translateY(-2px); background:var(--sage); color:var(--paper); border-color:var(--sage); }

.ledger{ margin-top:clamp(30px,4vw,42px); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; }
@media(min-width:560px){ .ledger{ grid-template-columns:repeat(4,1fr); } }
.ledger__cell{ padding:16px 14px 14px 0; border-bottom:1px solid var(--line); }
.ledger__k{ display:block; margin-bottom:5px; }
.ledger__v{
  font-family:var(--disp); font-weight:700; font-variation-settings:'wght' 640,'wdth' 84;
  font-size:clamp(15px,1.6vw,18px); color:var(--ink); line-height:1.1; margin:0;
}

/* =============================== GALLERY =============================== */
.work{ padding-bottom:clamp(50px,8vw,96px); }
.work__head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:14px; padding-block:clamp(30px,5vw,54px);
}
.work__title{
  font-family:var(--disp); font-weight:800; font-variation-settings:'wght' 800,'wdth' 112;
  font-size:clamp(40px,9vw,108px); line-height:.84; letter-spacing:-.02em;
  text-transform:uppercase; margin:0;
}
.work__title em{
  font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none;
  color:var(--sage); font-variation-settings:initial;
}
.work__note{ max-width:26ch; text-align:left; }
@media(min-width:680px){ .work__note{ text-align:right; } }

.grid{ display:grid; gap:clamp(12px,1.6vw,20px); grid-template-columns:repeat(2,1fr); grid-auto-flow:dense; }
/* mobile: let the signature frame run full-bleed for hierarchy */
.cell.c-4{ grid-column:1 / -1; }
@media(min-width:760px){ .grid{ grid-template-columns:repeat(6,1fr); } }

figure.cell{
  position:relative; margin:0; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--paper-deep); box-shadow:0 1px 0 rgba(255,255,255,.4) inset;
}
figure.cell img{
  width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.96) contrast(1.02);
  transition:transform .9s cubic-bezier(.16,.84,.34,1), filter .6s ease;
}
figure.cell:hover img{ transform:scale(1.045); filter:saturate(1.08) contrast(1.04); }
figure.cell figcaption{
  position:absolute; inset:auto 0 0 0;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  transform:translateY(101%); transition:transform .45s cubic-bezier(.2,.7,.2,1);
  background:linear-gradient(to top, rgba(18,19,16,.78), rgba(18,19,16,.05)); color:var(--paper);
}
figure.cell:hover figcaption, figure.cell:focus-within figcaption{ transform:translateY(0); }
figure.cell figcaption .t{ font-family:var(--grot); font-weight:500; font-size:13px; }
figure.cell figcaption .n{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:rgba(214,221,219,.7); }
.cell__idx{
  position:absolute; top:10px; left:10px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.1em; color:var(--paper); mix-blend-mode:difference; opacity:.85;
}

@media(min-width:760px){
  .c-2{ grid-column:span 2; } .c-3{ grid-column:span 3; }
  .c-4{ grid-column:span 4; } .c-6{ grid-column:span 6; }
}
/* Deterministic per-cell height: aspect-ratio on the figure, img fills it.
   No row-spanning / absolute tricks, so cells can never collapse. */
figure.cell.ar-land{ aspect-ratio:808/632; }
figure.cell.ar-wide{ aspect-ratio:16/10; }
figure.cell.ar-tall{ aspect-ratio:3/4; }
figure.cell.ar-sq{   aspect-ratio:1/1; }

/* =========================== STATEMENT BAND =========================== */
.quote{ padding-block:clamp(60px,12vw,150px); text-align:center; }
.quote__eyebrow{ display:block; margin-bottom:clamp(20px,4vw,40px); }
.quote blockquote{
  margin:0; line-height:.9; letter-spacing:-.01em; text-wrap:balance;
}
.quote__es{
  font-family:var(--serif); font-style:italic; color:var(--ink);
  font-size:clamp(48px,15vw,180px); display:inline;
}
.quote .liq{
  font-family:var(--disp); font-weight:800; font-variation-settings:'wght' 820,'wdth' 120;
  text-transform:lowercase; font-size:clamp(48px,15vw,180px);
  background:linear-gradient(170deg,var(--chrome-1),var(--chrome-4) 30%,var(--chrome-3) 60%,var(--chrome-5));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:.6px rgba(70,76,76,.25);
}
.quote cite{ display:block; margin-top:clamp(20px,3vw,30px); font-style:normal; }

/* =================== CONTACT / DEPARTURES TERMINAL =================== */
.contact{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:screen;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 2px, #fff 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 2px, #fff 2px 3px);
  background-size:3px 3px;
}
.contact .wrap{ padding-block:clamp(56px,9vw,110px); }

.board__top{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;
  gap:20px; margin-bottom:clamp(28px,5vw,46px);
}
.board__h{
  font-family:var(--disp); font-weight:800; font-variation-settings:'wght' 800,'wdth' 110;
  font-size:clamp(38px,9vw,104px); line-height:.84; letter-spacing:-.02em; text-transform:uppercase;
  margin:0; color:var(--paper);
}
.board__h em{
  font-family:var(--serif); font-style:italic; font-weight:400; text-transform:none;
  color:var(--sage); font-variation-settings:initial;
}
.board__status{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:rgba(214,221,219,.7); max-width:30ch; text-align:left; }
@media(min-width:680px){ .board__status{ text-align:right; } }
.board__status b{ color:var(--sage); }

/* board */
.board{ border-top:1px solid rgba(214,221,219,.18); }
.board__head{
  display:none; gap:14px; padding:10px 4px; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(214,221,219,.4); border-bottom:1px solid rgba(214,221,219,.18);
}
.board__head span:last-child{ text-align:right; }
@media(min-width:720px){
  .board__head{ display:grid; grid-template-columns:84px 1fr 1fr 150px; }
}

.brow{
  display:grid; align-items:center; gap:6px 14px;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"gate dest status" "gate handle status";
  padding:clamp(15px,2.4vw,22px) 4px;
  border-bottom:1px solid rgba(214,221,219,.18);
  text-decoration:none; color:var(--paper); position:relative;
  transition:padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.brow::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--sage); opacity:.14; transition:width .4s cubic-bezier(.2,.7,.2,1); z-index:0;
}
.brow:hover, .brow:focus-visible{ padding-left:clamp(12px,2.4vw,24px); }
.brow:hover::after, .brow:focus-visible::after{ width:100%; }
.brow > *{ position:relative; z-index:1; }

.brow__gate{ grid-area:gate; }
.brow__code{
  font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.06em;
  color:var(--amber-glow);
}
.brow__dest{
  grid-area:dest; align-self:end;
  font-family:var(--disp); font-weight:700; font-variation-settings:'wght' 700,'wdth' 88;
  font-size:clamp(22px,4.4vw,36px); letter-spacing:.01em; line-height:1; color:var(--paper);
}
.brow__handle{
  grid-area:handle; align-self:start;
  font-family:var(--mono); font-size:clamp(12px,1.5vw,14px); color:rgba(214,221,219,.6);
  word-break:break-word;
}
.brow__status{
  grid-area:status; justify-self:end; align-self:center; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.brow__dot{ width:6px; height:6px; border-radius:50%; background:var(--go); }
.brow__status.ontime{ color:var(--amber-glow); }
.brow__status.ontime .brow__dot{ background:var(--amber-glow); }
.brow__status.boarding{ color:var(--go); }
.brow__arrow{ color:var(--sage); margin-left:4px; transition:transform .35s ease; }
.brow:hover .brow__arrow, .brow:focus-visible .brow__arrow{ transform:translate(3px,-3px); }

@media(min-width:720px){
  .brow{
    grid-template-columns:84px 1fr 1fr 150px;
    grid-template-areas:"gate dest handle status";
    align-items:center;
  }
  .brow__dest{ align-self:center; }
  .brow__handle{ align-self:center; }
}

/* colophon */
.colophon{ margin-top:clamp(40px,6vw,72px); display:flex; flex-wrap:wrap; gap:20px; }
.colophon__mark{
  font-family:var(--disp); font-weight:800; font-variation-settings:'wght' 840,'wdth' 124;
  font-size:clamp(56px,22vw,260px); line-height:.8; letter-spacing:-.03em;
  color:transparent; -webkit-text-stroke:1px rgba(214,221,219,.4); margin:0; width:100%;
  will-change:font-variation-settings;
}
.colophon__meta{ width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; }
.colophon__meta .tag{ color:rgba(214,221,219,.5); }

/* ============================ reveal-on-scroll ========================= */
.reveal{
  opacity:0; transform:translateY(var(--reveal-y));
  transition:opacity .9s cubic-bezier(.16,.84,.34,1), transform .9s cubic-bezier(.16,.84,.34,1);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
  figure.cell figcaption{ transform:translateY(0); }
}

/* ===========================================================================
   DYNAMIC BACKGROUND — "Transit Terminal" parallax stage (her images, duotone)
   Fixed full-viewport stage behind content. Scroll drives parallax + cross-fade.
   GPU-only (transform/opacity); blur is baked into the webp layers.
   =========================================================================== */
.bgstage{
  position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none;
  contain:strict; background:transparent;   /* base gradient lives on <body> now */
}
/* additive deep parallax layers (additive to the existing bg):
   #bg-deep = building, behind absolutely everything; #bg-mid = portal, in front of the orb */
#bg-deep{
  position:fixed; inset:-8%; z-index:-4; pointer-events:none;
  background:url(/assets/img/bg/far-arch.webp) center/cover no-repeat;
  opacity:.12; mix-blend-mode:multiply; will-change:transform; filter:saturate(.7);
}
#bg-mid{
  position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background:url(/assets/img/portal.webp) center/cover no-repeat;
  opacity:.16; mix-blend-mode:screen; will-change:transform; filter:contrast(1.05);
}
/* the body grain is superseded by the stage's own mesh/scan */
body::before{ display:none; }
/* content rides above the stage */
main{ position:relative; z-index:1; }

.layer{
  position:absolute; inset:0; width:100%; height:100%;
  will-change:transform,opacity; backface-visibility:hidden;
}
.layer img{
  position:absolute; left:50%; top:0; width:128%; max-width:none;
  transform:translateX(-50%); display:block; user-select:none; -webkit-user-drag:none;
  /* feather every edge so a layer never reads as a hard floating rectangle */
  -webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 48%, #000 30%, rgba(0,0,0,.35) 62%, transparent 86%);
          mask-image:radial-gradient(ellipse 72% 70% at 50% 48%, #000 30%, rgba(0,0,0,.35) 62%, transparent 86%);
}

/* image layers (back -> front); opacities driven by JS */
#bg-arch{ opacity:0; mix-blend-mode:multiply; }
#bg-arch img{ top:-8%; height:118%; object-fit:cover; filter:saturate(.85); }
#bg-ink{ opacity:0; mix-blend-mode:multiply; }
#bg-ink img{ top:-4%; width:140%; }
#bg-streak{ opacity:0; mix-blend-mode:soft-light; }
#bg-streak img{ top:-10%; width:150%; height:120%; object-fit:cover; }
#bg-portal{ opacity:0; mix-blend-mode:screen; }
#bg-portal img{ top:64%; left:50%; width:128%; transform:translate(-50%,-50%); }

/* faint ghost-image texture layers (her GXSC work, almost transparent) */
.tex{ opacity:0; }
#bg-tex-doc{ mix-blend-mode:multiply; }
#bg-tex-doc img{ top:-2%; width:142%; }
#bg-tex-fig{ mix-blend-mode:soft-light; }
#bg-tex-fig img{ top:-6%; width:136%; height:118%; object-fit:cover; }
#bg-tex-water{ mix-blend-mode:multiply; }
#bg-tex-water img{ top:-8%; width:150%; height:122%; object-fit:cover; }

/* drifting silhouette accents */
#bg-fig{ opacity:0; }
#bg-fig .sil{
  position:absolute; bottom:-2%; left:13%; width:130px; height:60%;
  background:linear-gradient(180deg, rgba(92,97,94,0), rgba(92,97,94,.20));
  border-radius:50% 50% 46% 46% / 30% 30% 8% 8%; filter:blur(8px);
}
#bg-fig .sil.b{ left:auto; right:10%; width:96px; height:48%; opacity:.7; }

/* HUD overlay layers */
#bg-grid{
  opacity:.7;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(100%/14 - 1px), rgba(74,82,80,.30) calc(100%/14 - 1px) calc(100%/14)),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(74,82,80,.20) 119px 120px);
}
#bg-mullion{
  opacity:.85;
  background-image:repeating-linear-gradient(90deg, transparent 0 calc(100%/3.5 - 2px), rgba(95,117,104,.46) calc(100%/3.5 - 2px) calc(100%/3.5));
}
#bg-mesh{
  opacity:.6; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(22,27,27,.42) .6px, transparent .7px); background-size:4px 4px;
}
#bg-scan{
  opacity:.4; mix-blend-mode:multiply;
  background-image:repeating-linear-gradient(0deg, rgba(22,27,27,.07) 0 1px, transparent 1px 3px);
}
#bg-ghost{ opacity:1; }
#bg-ghost .word{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:var(--disp); font-variation-settings:'wght' 800,'wdth' 122;
  font-size:clamp(80px,21vw,330px); letter-spacing:-.02em; line-height:.8;
  text-transform:lowercase; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.4px rgba(74,82,80,.40);
}
#bg-ghost .word.echo{ -webkit-text-stroke:1px rgba(95,117,104,.24); }
#bg-ghost .word.fill{ -webkit-text-stroke:0; color:rgba(95,117,104,.16); }
#bg-scrim{
  background:linear-gradient(180deg,
    rgba(216,221,218,.34) 0%, rgba(216,221,218,.20) 18%, rgba(216,221,218,.20) 50%,
    rgba(216,221,218,.30) 82%, rgba(216,221,218,.48) 100%);
}
#bg-frame{ opacity:1; }
#bg-frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.bg-frameline{ stroke:rgba(74,82,80,.55); stroke-width:1.2; fill:none; vector-effect:non-scaling-stroke; }
.bg-tick{ stroke:rgba(74,82,80,.5); stroke-width:1; vector-effect:non-scaling-stroke; }
.bg-crop{ stroke:var(--ink-soft); stroke-width:1.4; fill:none; vector-effect:non-scaling-stroke; }
#bg-vig{
  opacity:.5;
  background:radial-gradient(125% 115% at 50% 42%, transparent 52%, rgba(22,27,27,.12) 86%, rgba(22,27,27,.30) 100%);
}

/* live coordinate readout (transit HUD) */
.readout{
  position:fixed; left:clamp(14px,4vw,40px); bottom:13px; z-index:15;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--ink-soft); pointer-events:none; mix-blend-mode:multiply;
  display:flex; gap:1.5em;
}
.readout .lab{ color:var(--ink-faint); }
.contact-active .readout{ color:var(--chrome-3); mix-blend-mode:screen; }
.contact-active .readout .lab{ color:var(--chrome-5); }

/* let the bloom surface through the near-black contact panel (rows stay crisp;
   the glow gathers low, around the giant ana.mn wordmark) */
.contact{ background:rgba(20,25,25,.82); }

/* reduced motion: tasteful static composition, no parallax */
@media(prefers-reduced-motion:reduce){
  .layer{ will-change:auto !important; transform:none !important; }
  .layer img{ transform:translateX(-50%) !important; }
  #bg-arch{ opacity:.15 !important; } #bg-ink{ opacity:.10 !important; }
  #bg-streak{ opacity:.16 !important; } #bg-portal{ opacity:0 !important; }
  #bg-grid{ opacity:.4 !important; } #bg-mullion{ opacity:.46 !important; }
  #bg-ghost{ opacity:.8 !important; } #bg-fig{ opacity:.45 !important; }
  #bg-tex-doc{ opacity:.08 !important; } #bg-tex-fig{ opacity:.07 !important; } #bg-tex-water{ opacity:.08 !important; }
  #bg-portal img{ transform:translate(-50%,-50%) !important; }
  #bg-ghost .word{ transform:translate(-50%,-50%) !important; }
}

/* mobile: lighter, no overflow */
@media(max-width:720px){
  #bg-ink,#bg-streak,#bg-mesh,#bg-scan,#bg-tex-fig{ display:none; }
  #bg-grid{ opacity:.3; }
  .layer img{ width:172%; }
  #bg-portal img{ width:200%; }
  .readout{ font-size:9px; gap:1em; }
}

/* ===========================================================================
   INTRO DRAIN + HALFTONE HAUNT
   The dispersal image fills the view, then drains away as liquid droplets
   (SVG turbulence + dissolve threshold + goo), handing off to a persistent
   foreground halftone "haunt". Filter runs only during the ~2.8s intro.
   =========================================================================== */

/* persistent halftone ghost — foreground, above content, below the topbar */
#haunt{
  position:fixed; inset:-12% -6%; z-index:25; pointer-events:none;
  background:var(--sage-deep);                 /* shows through the mask alpha */
  -webkit-mask:url(/assets/img/halftone.png) center/cover no-repeat;
          mask:url(/assets/img/halftone.png) center/cover no-repeat;
  opacity:0; mix-blend-mode:multiply;
  will-change:transform,opacity; transform:translateZ(0);
}

/* the draining cover overlay — above absolutely everything (Direction A: rain
   rivulets bleed down from the top). .intro__warp carries the goo filter and
   displaces its child, whose CSS mask is the descending erase front, so the same
   melt that liquifies the photo tears the waterline into drips. */
#intro{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:transparent; will-change:opacity; contain:strict;
}
.intro__warp{
  position:absolute; inset:0; filter:url(#liquidGoo);
  will-change:filter,opacity,transform;
}
.intro__liquid{
  position:absolute; inset:-6%;             /* bleed for displacement edges */
  background-image:url(/assets/img/intro-dispersal.webp),url(/assets/img/intro-dispersal.jpg);
  background-size:cover; background-position:center;
  --front:0;                                 /* descending erase front, % of height */
  -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc((var(--front) - 24) * 1%),
      rgba(0,0,0,.30) calc((var(--front) - 12) * 1%),
      rgba(0,0,0,1) calc(var(--front) * 1%), rgba(0,0,0,1) 100%);
          mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc((var(--front) - 24) * 1%),
      rgba(0,0,0,.30) calc((var(--front) - 12) * 1%),
      rgba(0,0,0,1) calc(var(--front) * 1%), rgba(0,0,0,1) 100%);
  will-change:mask-image,opacity;
}
.intro__sheen{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.8;
  --front:0;
  background:linear-gradient(to bottom,
     transparent calc((var(--front) - 16) * 1%),
     rgba(251,250,247,.42) calc((var(--front) - 8) * 1%),
     transparent calc(var(--front) * 1%));
}

@media(prefers-reduced-motion:reduce){
  #intro{ display:none !important; }
  #haunt{ opacity:.05; transition:none; }
}

/* ===========================================================================
   WATER DROPLETS — hyperreal liquid-glass beads: refract the page (SVG lens),
   reflect her work, tap to SPLAT (image blooms clear then fades). Built by JS.
   Layer is pointer-events:none + JS hit-test, so the page stays fully clickable.
   =========================================================================== */
.droplets{ position:fixed; inset:0; z-index:30; pointer-events:none; contain:strict; }
.drop{
  position:absolute; width:var(--d,80px); height:var(--d,80px);
  transform:translate3d(calc(var(--mx,0px) + var(--rx,0px)), calc(var(--my,0px) + var(--ry,0px) - var(--fy,0px)),0);
  pointer-events:none; will-change:transform; border-radius:50%;
}
.drop > span{ position:absolute; inset:0; border-radius:50%; }

/* L1 wet lens — refracts the real page content behind it */
.drop .lens{
  backdrop-filter:url(#dropletLens) brightness(1.06) saturate(1.16);
  -webkit-backdrop-filter:brightness(1.06) saturate(1.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),
             inset 0 1.5px 2.5px rgba(255,255,255,.55),
             inset 0 -2px 3px rgba(20,28,28,.28);
}
/* L2 convex sheen (volume) */
.drop .body-g{
  background:
    radial-gradient(120% 120% at 32% 26%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 18%, rgba(255,255,255,0) 38%),
    radial-gradient(140% 140% at 68% 82%, rgba(20,28,28,.18) 0%, rgba(20,28,28,.05) 30%, rgba(20,28,28,0) 55%);
  mix-blend-mode:soft-light;
}
/* L3 reflection — a thin slice of the stitched "world" strip that pans on scroll
   (background-image + size set by JS; --bgy is the scroll pan, --hly the gyro nudge) */
.drop .reflect{
  background-repeat:no-repeat;
  background-position:50% calc(var(--bgy,0px) + var(--hly,0px));
  opacity:.27; mix-blend-mode:screen; filter:contrast(1.12) saturate(1.18);
  -webkit-mask-image:radial-gradient(62% 62% at 50% 44%, #000 0%, rgba(0,0,0,.78) 52%, rgba(0,0,0,.32) 72%, transparent 84%);
          mask-image:radial-gradient(62% 62% at 50% 44%, #000 0%, rgba(0,0,0,.78) 52%, rgba(0,0,0,.32) 72%, transparent 84%);
  transition:opacity .9s ease;
}
/* fainter counter-parallax reflection layer for depth */
.drop .reflect2{
  background-repeat:no-repeat; background-position:50% var(--bgy2,0px);
  opacity:.11; mix-blend-mode:screen; filter:blur(.4px) saturate(1.1);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%, #000 0%, rgba(0,0,0,.5) 60%, transparent 82%);
          mask-image:radial-gradient(70% 70% at 50% 50%, #000 0%, rgba(0,0,0,.5) 60%, transparent 82%);
}
/* L4 rim/edge light + chromatic seam */
.drop .rim{
  background:radial-gradient(closest-side, transparent 70%, rgba(255,255,255,.10) 86%, rgba(255,255,255,.30) 95%, rgba(255,255,255,0) 100%);
  box-shadow:inset 1px 0 2px rgba(120,160,255,.18), inset -1px 0 2px rgba(255,150,120,.16);
}
/* L5 crisp specular */
.drop .spec{
  inset:auto; width:26%; height:26%; left:26%; top:18%;
  background:radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.9) 22%, rgba(255,255,255,.25) 55%, rgba(255,255,255,0) 100%);
  transform:translate3d(calc(var(--hlx,0px)*1.6), calc(var(--hly,0px)*1.6),0); filter:blur(.3px);
}
.drop .spec::after{
  content:""; position:absolute; width:34%; height:34%; left:18%; top:14%; border-radius:50%;
  background:#fff; box-shadow:0 0 3px 1px rgba(255,255,255,.7);
}
/* contact shadow grounding the bead to the page */
.drop::before{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:-1;
  box-shadow:0 6px 9px -3px rgba(20,28,28,.30), 0 2px 3px -1px rgba(20,28,28,.22);
  transform:translateY(14%) scale(.92,.62); filter:blur(.5px);
}
.drop .ripple{ border:1.5px solid rgba(255,255,255,.5); opacity:0; }

/* TAP = SPLAT: the bead spreads, the reflection blooms CLEAR, then settles */
.drop.splat{ animation:dropSplat .66s cubic-bezier(.34,1.56,.64,1) both; }
.drop.splat .reflect{ animation:reflectReveal 1.15s ease-out both; }
.drop.splat .ripple{ animation:dropRipple .66s ease-out both; }
@keyframes dropSplat{
  0%  { transform:translate3d(var(--mx,0px),calc(var(--my,0px) - var(--fy,0px)),0) scale(1,1); }
  20% { transform:translate3d(var(--mx,0px),calc(var(--my,0px) - var(--fy,0px) + 2px),0) scale(1.32,1.14); }
  44% { transform:translate3d(var(--mx,0px),calc(var(--my,0px) - var(--fy,0px) - 2px),0) scale(.88,1.08); }
  66% { transform:translate3d(var(--mx,0px),calc(var(--my,0px) - var(--fy,0px)),0) scale(1.06,.97); }
  100%{ transform:translate3d(var(--mx,0px),calc(var(--my,0px) - var(--fy,0px)),0) scale(1,1); }
}
@keyframes reflectReveal{ 0%{opacity:.27} 15%{opacity:.88} 100%{opacity:.27} }
@keyframes dropRipple{ 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(2.2);opacity:0} }

@media(prefers-reduced-motion:reduce){
  .drop, .drop.splat, .drop.splat .reflect, .drop.splat .ripple{ animation:none !important; transition:none !important; }
  .drop .ripple{ display:none; }
}

/* ===========================================================================
   BACKGROUND CHROME SPHERE — a mirror ball env-mapping a random one of her
   images, bouncing + rolling deep behind content (z0). Liquid-melts on cycle.
   =========================================================================== */
#orb-stage{ position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; }
#orb{
  position:absolute; top:0; left:0; width:300px; height:300px;
  will-change:transform; transform:translate3d(0,0,0);
  filter:drop-shadow(0 26px 30px rgba(20,28,28,.26)) drop-shadow(0 6px 10px rgba(20,28,28,.20));
}
.orb-sphere{ position:absolute; inset:0; border-radius:50%; overflow:hidden; will-change:transform,filter; isolation:isolate; }
.orb-env{
  position:absolute; left:-42%; top:-42%; width:184%; height:184%;
  background-size:cover; background-position:center;
  /* much brighter reflection — extremely bright chrome */
  filter:url(#sphereWrap) contrast(1.16) saturate(1.0) brightness(1.34);
  transform:translateZ(0);
}
/* B is the staged "next" reflection; cross-faded in during the melt */
#orbEnvB{ opacity:0; }
.orb-chrome{
  position:absolute; inset:0; mix-blend-mode:multiply;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 46%, rgba(10,13,17,.30) 60%, rgba(7,10,14,.66) 78%, rgba(4,6,9,.90) 92%, rgba(3,4,6,.97) 100%),
    radial-gradient(ellipse 92% 30% at 50% 60%, rgba(6,9,13,.55), rgba(6,9,13,0) 70%),
    radial-gradient(circle at 42% 36%, rgba(120,140,158,.28), rgba(110,126,120,.14) 48%, rgba(8,12,16,.40) 100%);
}
.orb-tone{
  position:absolute; inset:0; mix-blend-mode:multiply;
  background:radial-gradient(circle at 46% 40%, rgba(20,26,32,.06) 0%, rgba(14,19,24,.16) 72%, rgba(6,9,12,.40) 100%);
}
.orb-bounce{
  position:absolute; inset:0; mix-blend-mode:screen;
  background:radial-gradient(ellipse 56% 30% at 50% 88%, rgba(216,221,218,.55), rgba(190,200,200,.12) 55%, rgba(216,221,218,0) 72%);
}
.orb-crown{
  position:absolute; inset:0; mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 58% 40% at 46% 16%, rgba(255,255,255,.98), rgba(232,240,248,.50) 34%, rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(206,222,236,.55), rgba(206,222,236,0) 50%);
}
.orb-spec{
  position:absolute; left:31%; top:15%; width:15%; height:11%; mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%, #ffffff 0%, rgba(255,255,255,.9) 26%, rgba(255,255,255,0) 68%);
}
.orb-spec::after{
  content:""; position:absolute; left:-90%; top:330%; width:60%; height:55%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
}
.orb-edge{
  position:absolute; inset:0; border-radius:50%; mix-blend-mode:overlay;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0) 76%, rgba(255,255,255,.55) 90%, rgba(255,255,255,0) 97%),
    radial-gradient(circle at 68% 76%, rgba(0,0,0,0) 74%, rgba(3,5,8,.7) 91%, rgba(3,5,8,0) 99%);
}
.orb-rim{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:
    inset 0 1px 0 1px rgba(255,255,255,.22), inset 0 3px 14px rgba(255,255,255,.34),
    inset 0 -8px 20px rgba(216,221,218,.26), inset 0 0 30px rgba(4,6,9,.80),
    inset 5px -5px 36px rgba(4,6,9,.55);
}
.orb-lip{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 1px rgba(8,11,15,.55), inset 0 0 0 1px rgba(255,255,255,.16);
}