/* The dot (Anna, 23 Sep 2026): arriving, leaving, the section lines, the cursor.
   Pairs with signature.js and the one-line head script on every page. */

/* ---------- The dot: arrival and page-to-page ---------- */
.hero h1 .ch{ display:inline-block; white-space:pre; }
/* Nothing shows until the dot is in charge of the screen. */
html.arriving body{ visibility:hidden; overflow-x:clip; animation:sig-failsafe 0s 3s forwards; }
/* Arriving from another page: the screen is already green, so there is no paper flash. */
html.via-dot{ background:var(--green); animation:sig-failsafe-bg 0s 3s forwards; }
html.arrival-solo body{ visibility:hidden; }
html.arrival-solo .sig-target{ visibility:visible; }
@keyframes sig-failsafe{ to{ visibility:visible; } }
@keyframes sig-failsafe-bg{ to{ background:var(--paper); } }
/* The dot itself: one fixed green layer the size of the screen, cut to a
   circle. Arriving it shrinks into a full stop; leaving it grows from the click. */
.sig-layer{ position:fixed; inset:0; z-index:2000; background:var(--green); pointer-events:none;
  visibility:visible; clip-path:circle(0 at 50% 50%); }

/* ---------- On this page (case studies, wide screens only) ---------- */
/* Notion's floating table of contents, to its measured spec (notion.site,
   23 Sep 2026), so readers already know what it is: one 16 x 2px dash per
   section, 2px round ends, 14px apart, 20px in from the right edge of the
   screen, vertically centred. Faint dashes, the current one in her green
   (Notion's is near-black). Hover or tab in and a card opens 10px from the edge,
   232px wide: 13px names in 25px rows, the current one green.
   Corner radius is her 8px sitewide ruling; Notion's card uses 14px. */
.sig-toc{ position:fixed; z-index:50; right:20px; top:50%; transform:translateY(-50%); }
.sig-toc .dashes{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.sig-toc .dashes li{ width:16px; height:2px; border-radius:2px; background:rgba(26,24,19,0.11); }
.sig-toc .dashes li.on{ background:var(--green); }
.sig-toc .card{ position:absolute; right:-10px; top:-10px; width:232px; box-sizing:border-box; padding:12px;
  background:var(--paper); border-radius:var(--radius);
  box-shadow:0 20px 24px rgba(25,25,25,0.05), 0 5px 8px rgba(25,25,25,0.027), 0 0 0 1px rgba(42,28,0,0.07);
  opacity:0; pointer-events:none; }
.sig-toc:hover .card, .sig-toc:focus-within .card{ opacity:1; pointer-events:auto; }
.sig-toc .card a{ display:block; padding:4px 0; font-size:13px; line-height:17px; color:var(--ink-3);
  text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sig-toc .card a.on{ color:var(--green); }
.sig-toc .card a:hover, .sig-toc .card a:focus-visible{ color:var(--ink); }
.page-case main h2[id], .page-case main .sk-k[id]{ scroll-margin-top:calc(var(--header-h) + var(--xxl)); }
@media (max-width:1279px){ .sig-toc{ display:none; } }

/* ---------- The cursor ---------- */
html.has-cur, html.has-cur *{ cursor:none !important; }
#cur{ position:fixed; left:0; top:0; z-index:1001; pointer-events:none; opacity:0; }
#cur.on{ opacity:1; }
/* Petite on purpose (Anna, 23 Sep: "more minimalistic, more delicate, more
   petite"). The dot is 6px. Over a link, a case or a slider it grows to 10px
   and nothing else (Anna, 24 Sep 2026: "Keep it just a dot... very subtle. I
   don't want the arrow inside the dot at all"). */
#cur::before{ content:""; position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--green); box-shadow:0 0 0 1px var(--paper);
  transition:width 160ms var(--ease), height 160ms var(--ease), margin 160ms var(--ease), opacity 100ms var(--ease); }
#cur.ring::before{ width:10px; height:10px; margin:-5px 0 0 -5px; }
@media (prefers-reduced-motion: reduce){ #cur::before{ transition:none; } }