/* ============================================================================
   DwellBrief — motion layer
   Additive to style.css. Nothing here is required for the page to be complete:
   every rule is scoped to .js-motion, which motion.js only sets when JS is on
   AND the reader has not asked for reduced motion.

   One distance (14px), one duration (700ms), one curve. See DESIGN.md — the
   register is a research letter, so motion settles, it never bounces.
   ========================================================================== */

:root{
  --m-rise:14px;
  --m-dur:.7s;
  --m-ease:cubic-bezier(.16,.84,.28,1);
  --m-stagger:70ms;
}

/* ── entrance ──────────────────────────────────────────────────────────── */
.js-motion .reveal{opacity:0;transform:translateY(var(--m-rise))}
.js-motion .reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease)}

/* children stagger in source order once the parent is in view */
.js-motion .reveal-group>*{opacity:0;transform:translateY(var(--m-rise))}
.js-motion .reveal-group.is-in>*{opacity:1;transform:none;
  transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease)}
.js-motion .reveal-group.is-in>*:nth-child(1){transition-delay:0ms}
.js-motion .reveal-group.is-in>*:nth-child(2){transition-delay:var(--m-stagger)}
.js-motion .reveal-group.is-in>*:nth-child(3){transition-delay:calc(var(--m-stagger)*2)}
.js-motion .reveal-group.is-in>*:nth-child(4){transition-delay:calc(var(--m-stagger)*3)}
.js-motion .reveal-group.is-in>*:nth-child(5){transition-delay:calc(var(--m-stagger)*4)}
.js-motion .reveal-group.is-in>*:nth-child(n+6){transition-delay:calc(var(--m-stagger)*5)}

/* the hero headline sets itself on load, word by word */
.js-motion .hero h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);
  animation:db-word var(--m-dur) var(--m-ease) forwards}
@keyframes db-word{to{opacity:1;transform:none}}

/* ── hero: the free-summary specimen ───────────────────────────────────── */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:54px;align-items:start}

.specimen-sheet{background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:26px 28px 22px;box-shadow:0 24px 50px -32px rgba(28,29,24,.4);
  margin-top:38px}
.js-motion .specimen-sheet{--p:0;
  transform:translateY(calc((1 - var(--p)) * 18px));
  opacity:calc(.35 + .65 * var(--p))}
.specimen-sheet .sheet-label{display:flex;justify-content:space-between;
  align-items:baseline;gap:14px;border-bottom:1px solid var(--line);
  padding-bottom:12px;margin-bottom:18px}
.specimen-sheet .sheet-label .t{font-family:var(--mono);font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--forest)}
.specimen-sheet .sheet-label .a{font-family:var(--mono);font-size:.6rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:right}

.spec-index{display:flex;align-items:center;gap:22px}
.spec-ring{--v:0;--c:var(--forest);width:104px;height:104px;flex:none;border-radius:50%;
  position:relative;background:conic-gradient(var(--c) calc(var(--v)*1%),var(--track) 0)}
.js-motion .spec-ring{transition:background .9s var(--m-ease)}
.spec-ring::before{content:"";position:absolute;inset:9px;border-radius:50%;
  background:var(--card)}
.spec-ring .v{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.spec-ring .v b{font-family:var(--display);font-weight:500;font-size:1.95rem;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.spec-ring .v s{text-decoration:none;font-family:var(--mono);font-size:.52rem;
  letter-spacing:.12em;color:var(--ink-2);margin-top:2px}
.spec-index .g{font-family:var(--display);font-style:italic;font-size:1.1rem;
  color:var(--clay)}
.spec-index .m{font-size:.95rem;color:var(--ink-2);line-height:1.45;margin-top:4px}

.spec-cats{margin-top:20px;border-top:1px solid var(--line)}
.spec-cat{display:grid;grid-template-columns:1fr 74px 34px;gap:14px;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--line)}
.spec-cat:last-child{border-bottom:0}
.spec-cat .n{font-family:var(--display);font-size:1rem;font-weight:500}
.spec-cat .f{font-size:.86rem;color:var(--ink-3);font-style:italic;line-height:1.35;
  margin-top:1px}
.spec-cat .t{height:5px;background:var(--track);position:relative}
.spec-cat .t i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--c)}
.js-motion .spec-cat .t i{transition:width 1s var(--m-ease)}
.spec-cat .s{font-family:var(--display);font-size:1.1rem;font-weight:500;
  text-align:right;font-variant-numeric:tabular-nums}
.specimen-sheet .sheet-foot{font-family:var(--mono);font-size:.58rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:16px}

/* ── the thesis: a pinned line that lights as you pass it ──────────────── */
.thesis{background:var(--paper-2);border-top:2px solid var(--ink)}
.js-motion .thesis{min-height:230svh}
.thesis .pin{padding-block:70px}
.js-motion .thesis .pin{position:sticky;top:0;min-height:100svh;display:flex;
  flex-direction:column;justify-content:center;padding-block:0}
.thesis p.line{font-family:var(--display);font-weight:400;font-size:3.1rem;
  line-height:1.16;letter-spacing:-.02em;max-width:19ch;margin-top:18px}
.thesis p.line span{color:var(--ink-3)}
.js-motion .thesis p.line span{transition:color .18s linear}
.thesis p.line span.lit{color:var(--ink)}
.thesis p.line span.em.lit{color:var(--forest);font-style:italic}
.thesis .after{font-size:1.15rem;color:var(--ink-2);max-width:56ch;margin-top:26px}

/* ── sample brief: the nine sections, scrubbed ─────────────────────────── */
.sample{border-top:2px solid var(--ink);background:var(--paper)}
.js-motion .sample{min-height:400svh}
.sample .pin{padding-block:64px 72px}
.js-motion .sample .pin{position:sticky;top:0;height:100svh;display:flex;
  align-items:center;padding-block:0}
.sample-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:52px;align-items:center;width:100%}

.sample-h{font-family:var(--display);font-weight:500;font-size:2.15rem;
  letter-spacing:-.02em;margin-top:8px}
.sample-sub{font-size:1.05rem;color:var(--ink-2);margin-top:10px;max-width:44ch}
.sample-contents{margin-top:22px;border-top:1px solid var(--line)}
.sample-contents li{list-style:none;display:grid;grid-template-columns:26px 1fr;
  gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);
  color:var(--ink-3)}
.js-motion .sample-contents li{transition:color .3s var(--m-ease)}
.sample-contents li .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em}
.sample-contents li .nm{font-family:var(--display);font-size:1.05rem;font-weight:500}
.sample-contents li.on{color:var(--ink)}
.sample-contents li.on .k{color:var(--forest)}
.sample-rail{height:2px;background:var(--track);margin-top:20px;position:relative}
.sample-rail i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--forest);
  display:block}

/* the sheet the reel scrolls inside */
.sheet-frame{background:var(--card);border:1px solid var(--line);border-radius:2px;
  box-shadow:0 30px 60px -38px rgba(28,29,24,.5);overflow:hidden;position:relative}
/* isolate: the frame owns one compositing layer. Without this the topline's
   stacking context left a stale ghost of itself above the frame as the pin moved. */
.js-motion .sheet-frame{height:min(74svh,660px);isolation:isolate}
/* the fade-off only makes sense when the reel is actually clipped */
.js-motion .sheet-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:74px;background:linear-gradient(transparent,var(--card));pointer-events:none}
.sheet-topline{display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:16px 26px;border-bottom:1px solid var(--line);background:var(--card);
  position:relative;z-index:2}
/* addresses vary in length; the header stays one line whatever comes back */
.sheet-topline .ad{font-family:var(--display);font-size:1.02rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sheet-topline .ix{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;flex:none}
.sheet-reel{padding:0 26px}
/* deliberately no will-change here: promoting the reel to its own layer produced
   stale-tile ghosting against the sticky pin, and Chrome composites the transform
   without the hint anyway */

.sheet-card{padding:30px 0;border-bottom:1px solid var(--line)}
.sheet-card:last-child{border-bottom:0}
.sheet-card .sc-head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:18px;margin-bottom:12px}
.sheet-card h3{font-family:var(--display);font-weight:500;font-size:1.3rem;
  letter-spacing:-.015em}
.sheet-card .sc-prose{font-size:.98rem;color:var(--ink-2);max-width:56ch;
  line-height:1.55}
.sheet-card .statline{margin:14px 0 0}
/* style.css sets min-width:150px, which wraps four cells inside this narrower
   column — the sheet is half a page wide, not a full report */
.sheet-card .statline .s{padding:12px 18px 12px 0;min-width:104px}
.sheet-card .statline .sv{font-size:1.3rem}
.sheet-card .statline .sl{font-size:.58rem}
.sheet-card .context-note{margin-top:14px;font-size:.94rem}

/* ── closing call to action ────────────────────────────────────────────── */
.closing{background:var(--ink);color:var(--paper);padding:56px 0 62px;
  border-top:2px solid var(--ink)}
/* headline left, the ask right — same two-up the city pages use */
.closing .wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.closing h2{font-family:var(--display);font-weight:500;font-size:2rem;
  line-height:1.18;letter-spacing:-.02em;max-width:20ch}
.closing h2 em{font-style:italic;color:var(--gold)}
.closing p{font-size:1.05rem;color:#c9c6ba;margin-top:12px;max-width:52ch}
.closing .searchbar{margin-top:24px;border-color:var(--gold)}
.closing .searchbar input{color:var(--ink)}
.closing .tiny{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:16px}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .specimen-sheet{margin-top:30px}
  .sample-grid{grid-template-columns:1fr;gap:26px}
  .thesis p.line{font-size:2.1rem;max-width:22ch}
  /* pinning needs vertical room it does not have on a phone — read it as a normal page */
  .js-motion .sample,.js-motion .thesis{min-height:0}
  .js-motion .sample .pin,.js-motion .thesis .pin{position:static;height:auto;
    min-height:0;padding-block:56px}
  .js-motion .sheet-frame{height:auto}
  .js-motion .sheet-frame::after{display:none}
  .js-motion .sheet-reel{transform:none !important}
  /* nothing is being scrubbed here, so a progress rail would be a lie */
  .sample-rail{display:none}
  /* the chip alongside the title squeezes it into a two-word column */
  .sheet-card .sc-head{flex-direction:column-reverse;align-items:flex-start;gap:10px}
  .js-motion .thesis p.line span{color:var(--ink)}
  .js-motion .thesis p.line span.em{color:var(--forest);font-style:italic}
  .closing .wrap{grid-template-columns:1fr;gap:22px}
}