/* Home-page note body + hero. The app shell (rail, header, drawer) and the
   theme palette live in shell.css, which is loaded first; this file only styles
   the marketing "note" rendered inside the editor pane and its hero. */

.note-title {
  font-size: 3rem; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 1.5rem; line-height: 1.05;
  padding-bottom: 1.75rem;
  border-bottom: 2px dotted var(--fg);
}
/* The first colored header sits just below the title's dotted rule. */
.note-title + h2 { margin-top: 0.5rem; }
/* "Brutal Docs" gets its own line as a highlighted accent block. */
.note-title strong {
  display: block;
  width: fit-content;
  margin-bottom: 0.12em;
  padding: 0.02em 0.2em;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}

/* ---- Note body: ported from the editor's .ProseMirror styles ---- */
.note { position: relative; font-size: 17px; line-height: 1.65; padding-bottom: 8vh; }
.note p { margin: 0 0 1rem; }
/* Section headers echo the "Brutal Docs" title block: a fit-content highlight
   with white text. Each gets its own color (see :nth-of-type below). */
.note h2 {
  display: block;
  width: fit-content;
  padding: 0.12em 0.32em;
  margin: 2.25rem 0 1rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.note h2:nth-of-type(1) { background: #e03131; } /* Scan — red */
.note h2:nth-of-type(2) { background: #4263eb; } /* Insert — indigo */
.note h2:nth-of-type(3) { background: #2f9e44; } /* Diagrams — green */
.note h2:nth-of-type(4) { background: #7048e8; } /* Tables — violet */
.note h2:nth-of-type(5) { background: #e64980; } /* Photos — pink */
.note h2:nth-of-type(6) { background: #1098ad; } /* Share — cyan */
.note h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.note a { text-decoration: underline; text-underline-offset: 3px; }
.note strong { font-weight: 700; }
.note hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.note blockquote {
  border-left: 5px solid var(--fg);
  background: transparent;
  padding: 0.5rem 1.1rem; margin: 1.25rem 0;
  color: var(--fg);
}
.note blockquote p:last-child { margin-bottom: 0; }

.note code {
  background: var(--code-bg);
  padding: 0.08em 0.3em;
  font-family: var(--font-mono); font-size: 0.9em;
}
.note pre {
  background: var(--pre-bg); color: var(--pre-fg);
  padding: 1rem; border: 2px solid var(--fg);
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5;
  overflow-x: auto; margin: 1.25rem 0;
}
.note pre code { background: transparent; padding: 0; }
.hl-k { color: var(--hl-keyword); }
.hl-s { color: var(--hl-string); }
.hl-t { color: var(--hl-title); }
.hl-y { color: var(--hl-type); }
.hl-c { color: var(--hl-comment); font-style: italic; }

.note ul, .note ol { padding-left: 1.5rem; margin: 1rem 0; }
.note li { margin: 0.25rem 0; padding-left: 0.25rem; }
.note ul { list-style: disc; }
.note ol { list-style: decimal; }
.note ul li::marker { color: var(--accent); }
.note ol li::marker { color: var(--muted); font-weight: 600; }

/* Task list (TODO) — custom checkbox, like the editor */
.task-list { list-style: none; padding-left: 0; margin: 1rem 0; }
.task-list li { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.25rem 0; padding-left: 0; }
.task-list li > .box {
  flex: 0 0 auto; box-sizing: border-box;
  width: 18px; height: 18px; margin-top: 0.18em;
  border: 1.5px solid var(--subtle); border-radius: 5px;
  background: transparent; position: relative;
}
.task-list li.done > .box { background: var(--accent); border-color: var(--accent); }
.task-list li.done > .box::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}
.task-list li > .txt { flex: 1 1 auto; min-width: 0; }
.task-list li.done > .txt { color: var(--subtle); text-decoration: line-through; }

.note table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.95rem; border: 2px solid var(--fg); }
.note th, .note td { border: 1px solid var(--fg); padding: 0.6rem 0.8rem; vertical-align: top; text-align: left; }
.note th { background: var(--th-bg); font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em; }

/* Feature demo clips — silent, looping screen captures. The clip is just a
   browser title bar + the app (no baked panel), so the rounded corners and
   float shadow live here and stay correct on either theme. */
.demo { margin: 1.5rem 0 2.5rem; }
.demo video {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--fg);
  /* Flat, un-blurred offset "shadow" — a graphic offset, not a soft float. */
  box-shadow: 10px 10px 0 var(--fg);
}

/* ---- Hero: the tagline + the analog→digital sketch ---------------------
   The lead segment and primary call to action: the founder's own pen
   composition — the tagline beside a notebook of notes being scanned into
   the app on a laptop — traced to real vector by the in-binary
   handwriting.Vectorize pipeline (the actual feature) and reproduced
   faithfully. Sits directly on the page over a soft, edge-faded dot grid —
   no card, no border. The tagline writes on line by line, the connector
   dashes flow down, the flash pulses. Ink is currentColor so it themes
   (white on dark, black on the dotted paper); links into the editor. */
.scan-hero {
  position: relative; display: block;
  width: 100%; max-width: 620px;
  margin: 0.5rem auto 2.5rem;
  padding: 1.75rem 0;
  color: var(--fg); text-decoration: none;
}
.scan-hero:hover { text-decoration: none; }
/* Dot-grid paper rendered to a <canvas> so each dot reacts to the cursor
   individually (it grows/brightens/nudges by its own distance to the pointer —
   see the scan-dots script). Sits behind the mark; feathered at the edges in
   the script so the field blends into the page. */
.scan-dots {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
/* The mark sits smaller within the box so the reactive dot field reads around it. */
.scan-art { position: relative; z-index: 1; display: block; width: 64%; max-width: 380px; height: auto; margin: 0 auto; color: var(--fg); overflow: visible; }
/* The hero mark is 2-tone (ink shapes + cutout accents). Drive both off theme
   tokens so it inverts: shapes follow the foreground, accents the background. */
.scan-art path { fill: currentColor; }
.scan-art .cls-1 { fill: var(--bg); }
/* Hidden pre-paint while the draw-on animation is armed (cleared by the script). */
.draw-anim .scan-art path { fill-opacity: 0; }
/* Subtle hand-drawn "boil": a turbulence displacement that wobbles the lines a
   hair. Applied (class added by JS after the draw-on) only when motion is OK. */
.scan-art.boil { filter: url(#hero-boil); }

/* The tagline "writes on" a line at a time: each line wipes in left→right,
   like a hand moving across the page. Staggered via per-line animation-delay
   in the markup; plays once on load. */
.scan-line { animation: scan-write 0.85s ease-out both; }
@keyframes scan-write {
  from { clip-path: inset(-12% 100% -12% -12%); }
  to   { clip-path: inset(-12% -12% -12% -12%); }
}
/* The connector is the user's own hand-drawn dash ticks + flash (also traced).
   A soft highlight travels down the dashes — one after another — so the flow
   reads hand-made rather than a marching-ants line. */
.scan-dash { opacity: 0.4; animation: scan-pulse 2.8s ease-in-out infinite; }
@keyframes scan-pulse { 0%, 40%, 100% { opacity: 0.35; } 12% { opacity: 1; } }
.scan-spark { transform-box: fill-box; transform-origin: center; opacity: 0.55; animation: scan-spark 2.8s ease-in-out infinite; animation-delay: 0.6s; }
@keyframes scan-spark {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  24%      { opacity: 1; transform: scale(1.1); }
}

@media (max-width: 767px) {
  /* The banner scales with its viewBox; let it fill the column on a phone. The
     desktop 64%/380px cap leaves the mark too small to read on a narrow screen,
     so widen it to nearly the full column. */
  .scan-hero { max-width: 100%; }
  .scan-art { width: 92%; max-width: none; }
}