/* ==========================================================================
   pages.css — about ("THE SURVEY") + projects ("THE TERRITORIES")
   Companion to js/pages.js. PERF LAW: no backdrop-filter, no sticky, no
   fixed attachments inside #app; #mapbg is a fixed body-level layer.
   ========================================================================== */

#mapbg{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}

/* ------------------------------------ paper sheets (about light sections) */
.paper{position:relative;background-color:var(--off-white);
  background-image:
    repeating-linear-gradient(0deg,rgba(17,19,24,.045) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(90deg,rgba(17,19,24,.045) 0 1px,transparent 1px 88px)}
/* site.css paints these via ID background shorthands: match their specificity */
#about-intro.paper,#about-quote.paper,#brands.paper,#expertise.paper{
  background-color:var(--off-white);
  background-image:
    repeating-linear-gradient(0deg,rgba(17,19,24,.045) 0 1px,transparent 1px 88px),
    repeating-linear-gradient(90deg,rgba(17,19,24,.045) 0 1px,transparent 1px 88px)}
.paper::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pad) - 18px);width:1px;
  background:rgba(26,47,251,.25);pointer-events:none}
.sheet-label{position:absolute;top:22px;left:var(--pad);font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;opacity:.45;pointer-events:none}

/* --------------------------- surveyor reveal: line masks + baseline rules */
.svy-split .svy-line{display:block;position:relative;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.svy-split .svy-line-in{display:block;transform:translateY(112%) rotate(1.2deg);transform-origin:0 100%;
  transition:transform .85s var(--ease);transition-delay:var(--svy-d,0ms);will-change:transform}
.svy-split.in .svy-line-in{transform:translateY(0) rotate(0)}
.svy-split.settled .svy-line-in{will-change:auto}
.svy-split .svy-line::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  opacity:0;transform:scaleX(0);transform-origin:0 50%}
.svy-split.in .svy-line::after{animation:svyRule .85s var(--ease) both;
  animation-delay:calc(var(--svy-d,0ms) + 250ms)}
@keyframes svyRule{0%{transform:scaleX(0);opacity:.5}64%{transform:scaleX(1);opacity:.5}100%{transform:scaleX(1);opacity:.18}}

/* typed mono stamp + block caret */
.svy-stamp{display:inline-flex;align-items:center;gap:3px;margin-left:4px;font-family:var(--mono);
  letter-spacing:.14em;text-transform:uppercase}
.svy-txt{white-space:pre}
.svy-caret{display:inline-block;width:1ch;height:1.05em;background:var(--green);opacity:0}
.svy-stamp.on .svy-caret{opacity:1}
.svy-caret.blink{animation:svyBlink .4s steps(1,end) 2}
.svy-caret.off{transition:opacity .3s var(--ease);opacity:0;animation:none}
@keyframes svyBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* quote per-word focus pull */
.svy-quote .qw{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(4px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease);
  transition-delay:var(--qd,0ms)}
.svy-quote.in .qw{opacity:1;transform:none;filter:blur(0)}

/* ------------------------------------- contour marks (about owns underlines) */
.mk-contour{font-style:normal;
  background-image:linear-gradient(rgba(17,19,24,.25),rgba(17,19,24,.25)),
    linear-gradient(var(--blue),var(--blue)),
    linear-gradient(rgba(17,19,24,.25),rgba(17,19,24,.25));
  background-repeat:no-repeat;
  background-position:0 100%,0 calc(100% - 4px),0 calc(100% - 8px);
  background-size:0% 1px,0% 1px,0% 1px;
  transition:background-size .6s var(--ease);
  transition-delay:calc(var(--svy-d,0ms) + 1150ms)}
.in .mk-contour,.svy-done .mk-contour{background-size:100% 1px,100% 1px,100% 1px}
#about-hero .mk-contour{background-image:linear-gradient(rgba(240,241,250,.28),rgba(240,241,250,.28)),
  linear-gradient(var(--blue),var(--blue)),
  linear-gradient(rgba(240,241,250,.28),rgba(240,241,250,.28))}
.mk-bench::after{content:"[ " attr(data-bench) " ]";font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;color:var(--blue);vertical-align:super;margin-left:8px;font-style:normal;font-weight:400}

/* ------------------------------------------ field notes (awards replacement) */
#awards{background:#0d0d10}
.fn-h{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.85;margin:4px 0 30px;font-weight:400}
.fn-h .svy-stamp{margin-left:0}
.fn-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.fn-grid{grid-template-columns:1fr}}
.fn-stat{position:relative;border-radius:22px;padding:clamp(22px,2.6vw,36px) clamp(20px,2.2vw,30px);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.fn-idx{position:absolute;top:16px;right:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;opacity:.35}
.fn-val{font-size:clamp(44px,5vw,84px);font-weight:500;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.fn-unit{display:inline-block;transition:opacity .3s var(--ease)}
.fn-unit.hid{opacity:0}
.fn-label{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.55}

/* ------------------------------------------------ coverage ticker (brands) */
.brand-row{gap:36px}
.brand-row .tick{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.5;white-space:nowrap}
.brand-row .cross{opacity:.25;width:10px;height:10px}

/* -------------------------------------------- projects: scan ledger registry */
.registry{position:relative;background-color:var(--off-white);
  background-image:repeating-linear-gradient(0deg,rgba(17,19,24,.04) 0 1px,transparent 1px 64px)}
#proj-list-section.registry{background-color:var(--off-white);
  background-image:repeating-linear-gradient(0deg,rgba(17,19,24,.04) 0 1px,transparent 1px 64px)}
.registry::after{content:"ATLAS SCAN LEDGER";position:absolute;top:50%;right:12px;transform:translateY(-50%);
  writing-mode:vertical-rl;font-family:var(--mono);font-size:12px;letter-spacing:.42em;
  text-transform:uppercase;opacity:.05;pointer-events:none}

/* parcel bar: each row is a legend swatch of the treemap behind the hero */
.project-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:6px;border-radius:6px;
  background:var(--row-bg,#1a2ffb);opacity:.85;transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--ease)}
.project-item.in::before{transform:scaleY(1)}

/* parcel chips (projects owns fills) */
.p-tags .chip{display:inline-block;border-radius:999px;padding:3px 10px;margin:2px 0;font-size:11px;
  letter-spacing:.06em;border:1px solid rgba(17,19,24,.14);
  background:linear-gradient(160deg,rgba(17,19,24,.05),rgba(17,19,24,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);opacity:.75}
.p-tags .chip-sep{color:var(--row-bg,#1a2ffb);margin:0 7px;opacity:.8}
.mk-cell{font-style:normal;padding:1px 8px;border-radius:8px;background:rgba(26,47,251,.10);
  border:1px solid rgba(26,47,251,.22);clip-path:inset(0 100% 0 0 round 8px);
  transition:clip-path .35s var(--ease) .15s}
.in .mk-cell{clip-path:inset(0 0 0 0 round 8px)}

/* ------------------------------------------------- ledger decode (proj hero) */
.tk-decode{position:relative}
.tk-decode .tk-real{opacity:0;transition:opacity .22s var(--ease)}
.tk-decode.done .tk-real{opacity:1}
.tk-decode .tk-mono{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:.78em;
  line-height:1.15;letter-spacing:-.01em;white-space:nowrap;opacity:1;
  transition:opacity .22s var(--ease) .04s}
.tk-decode.done .tk-mono{opacity:0}
#proj-hero .count{font-variant-numeric:tabular-nums}
#proj-hero .count .tk-br,#proj-hero .count .tk-suffix{opacity:0;transition:opacity .3s var(--ease)}
#proj-hero .count.done .tk-br,#proj-hero .count.done .tk-suffix{opacity:1}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .svy-split .svy-line-in{transform:none;transition:none}
  .svy-split .svy-line::after{animation:none;opacity:.18;transform:scaleX(1)}
  .mk-contour{background-size:100% 1px,100% 1px,100% 1px;transition:none}
  .svy-quote .qw{opacity:1;transform:none;filter:none;transition:none}
  .project-item::before{transform:scaleY(1);transition:none}
  .mk-cell{clip-path:inset(0 0 0 0 round 8px);transition:none}
  .fn-unit.hid{opacity:1}
  .svy-caret{display:none}
  .tk-decode .tk-real{opacity:1;transition:none}
  .tk-decode .tk-mono{display:none}
  #proj-hero .count .tk-br,#proj-hero .count .tk-suffix{opacity:1;transition:none}
}