/*
 * THE ABOUT PAGE, TOLD AS A SEQUENCE OF PANELS.
 *
 * WHY THIS FILE EXISTS SEPARATELY. `page.css` is shared with `privacy.html` and
 * owns the palette; a test reads it token by token against `design-tokens.css`.
 * The story below is about's alone, and privacy should not carry a byte of it.
 *
 * WHY THERE IS NO JAVASCRIPT, AND CANNOT BE. `the-plain-pages-reach-a-stranger`
 * refuses a `<script>` tag anywhere in either page — these two are the only
 * things a search engine or a link-preview robot can actually read, since the
 * app itself serves an empty shell. So every moving part here is CSS: the
 * panels reveal on a `view()` timeline, the ink draws itself with a dash
 * offset, the thread down the left fills on `scroll()`.
 *
 * WHY NOTHING BREAKS WHERE THAT IS UNSUPPORTED. Every rule that hides content
 * before revealing it sits inside `@supports (animation-timeline: view())`, so
 * a browser without scroll-driven animation is handed the finished page with
 * everything already visible — and so is anyone who has asked their machine for
 * less motion, and so is a printer. A story nobody can read is not a story.
 *
 * WHY NO RAW HEX. Every colour here is a `var(--vg-*)` from `page.css`, or a
 * `color-mix` of one. `the-story-page-cannot-invent-a-colour` goes red on a
 * literal, because a hex in this file is a fourth copy of the palette and the
 * project has already paid for the third.
 */

/* ── the page frame ───────────────────────────────────────────────────── */

/* Wider than the plain 640px column: a panel needs room to be a picture, and
   the text still measures ~66 characters inside it. */
.wrap--story { max-width: 700px; }

.story { position: relative; }

/* ── the thread ────────────────────────────────────────────────────────
   One ink line running the height of the story, filling as you scroll. It is
   the reason the panels read as one drawing rather than six: the stethoscope's
   tube leaves panel 01 at the bottom and the thread carries it to panel 02.
   Below 820px there is no margin to hang it in, so it is simply absent — it
   is atmosphere, and nothing is said only by it. */
.thread { display: none; }

@media (min-width: 820px) {
  .story { padding-left: 62px; }
  .thread {
    display: block; position: absolute; left: 17px; top: 6px; bottom: 90px;
    width: 1px; background: var(--vg-border);
  }
  .thread::after {
    content: ""; position: absolute; inset: 0;
    background: var(--vg-accent); transform-origin: 50% 0; transform: scaleY(0);
  }
}

/* ── a beat ───────────────────────────────────────────────────────────── */

.beat { position: relative; margin: 0 0 96px; }
.beat:last-of-type { margin-bottom: 40px; }

/* The number is the panel's marker on the thread — a manga page number, and on
   a wide screen the dot that says how far down the line you are. */
.beat-no {
  font-family: var(--vg-font-display);
  font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  color: var(--vg-accent); margin: 0 0 14px;
}
@media (min-width: 820px) {
  .beat-no {
    position: absolute; left: -62px; top: 2px; margin: 0;
    width: 36px; text-align: center;
    /* The thread passes behind the digits, not through them. */
    background: var(--vg-background); padding: 4px 0;
  }
  .beat-no::before {
    content: ""; position: absolute; left: 13px; top: 28px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--vg-background); border: 1px solid var(--vg-accent);
  }
}

.beat h2 { margin-top: 0; }
.beat p:last-child { margin-bottom: 0; }

/* ── a panel ──────────────────────────────────────────────────────────── */

.panel {
  position: relative; margin: 0 0 26px; overflow: hidden;
  border: 1px solid var(--vg-text-primary);
  border-radius: 5px; background: var(--vg-surface);
  box-shadow: 7px 9px 0 color-mix(in srgb, var(--vg-text-primary) 7%, transparent);
}
.panel svg { display: block; width: 100%; height: auto; }

/* The ink. `pathLength="1"` on every stroke in the markup is what lets one
   dash value drive drawings of wildly different real length. */
.panel .ink {
  fill: none; stroke: var(--vg-text-primary);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.panel .ink--soft { stroke: var(--vg-text-tertiary); stroke-width: 1; }
.panel .ink--warm { stroke: var(--vg-accent); }
.panel .ink--dashed { stroke-dasharray: 0.026 0.026; }
.panel .fill--warm { fill: var(--vg-accent); stroke: none; }

/* The wash. Wide and slow on purpose — `rebuilding-a-screen` rule 4: a narrow
   band reads as a cursor claiming to be somewhere, and nothing here knows that. */
.panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg,
    transparent 30%,
    color-mix(in srgb, var(--vg-accent) 13%, transparent) 50%,
    transparent 70%);
  opacity: 0; transform: translateX(-40%);
}

/* ── the portrait panel ───────────────────────────────────────────────── */

.who { display: flex; gap: 22px; align-items: flex-start; margin: 0 0 26px; }
.portrait {
  flex: 0 0 132px; width: 132px; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--vg-text-primary); border-radius: 50%;
  box-shadow: 5px 7px 0 color-mix(in srgb, var(--vg-text-primary) 8%, transparent);
}
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.who-side { padding-top: 6px; }
.who-name { font-family: var(--vg-font-display); font-size: 21px; font-weight: 500; margin: 0 0 4px; }
.who-role { font-size: 15px; color: var(--vg-text-tertiary); margin: 0 0 14px; }
.linkedin {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border: 1px solid var(--vg-border); border-radius: 8px;
  background: var(--vg-surface); color: var(--vg-text-secondary);
  font-size: 14px; text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
}
.linkedin svg { display: block; }
.linkedin:hover {
  transform: translateY(-1px); color: var(--vg-text-primary);
  border-color: var(--vg-text-tertiary);
}
@media (max-width: 460px) {
  .who { flex-direction: column; gap: 16px; }
  .portrait { flex-basis: auto; width: 116px; }
  .who-side { padding-top: 0; }
}

/* ── the opening ──────────────────────────────────────────────────────── */

.opening { position: relative; padding-bottom: 34px; }
.opening h1 { max-width: 26ch; }
.sig {
  position: absolute; right: -6px; top: -14px;
  width: 108px; height: 108px; color: var(--vg-text-primary);
}
.sig svg { display: block; width: 100%; height: 100%; }
.sig .ink { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sig .ink--warm { stroke: var(--vg-accent); }
@media (max-width: 560px) {
  .sig { position: static; width: 84px; height: 84px; margin: 0 0 8px -6px; }
}

/* The one line that carries the whole page, set as a line of its own. */
.turn {
  font-family: var(--vg-font-display); font-weight: 500;
  font-size: clamp(21px, 4.6vw, 26px); line-height: 1.32; letter-spacing: -0.012em;
  color: var(--vg-text-primary); text-wrap: balance;
  margin: 26px 0; padding-left: 18px;
  border-left: 2px solid var(--vg-accent);
}

.close { margin-top: 76px; padding-top: 30px; border-top: 1px solid var(--vg-border); }

/* ── the motion, and every door out of it ─────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* Each beat arrives on its own, keyed to where it sits in the window —
       not to a clock, so scrolling back up unwinds it exactly. */
    .rise {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }

    /* The panel straightens as it lands. ±0.7deg is the whole effect; more
       reads as a sticker somebody dropped on the page. */
    .panel { animation: land linear both; animation-timeline: view(); animation-range: entry 2% cover 30%; }
    .beat:nth-of-type(even) .panel { animation-name: land-alt; }

    /* The drawing draws. */
    .panel .ink, .sig .ink {
      stroke-dasharray: 1; stroke-dashoffset: 1;
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 48%;
    }
    /* A dashed stroke cannot also carry the draw — the dash pattern IS the
       drawing. It fades in instead. */
    .panel .ink--dashed {
      stroke-dasharray: 0.026 0.026; stroke-dashoffset: 0;
      animation-name: appear;
    }
    .panel .fill--warm {
      animation: appear linear both;
      animation-timeline: view(); animation-range: entry 26% cover 52%;
    }

    .panel::after {
      animation: wash linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }

    .thread::after {
      animation: fill linear both;
      animation-timeline: scroll(nearest block);
    }
  }
}

@keyframes rise  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes land  { from { opacity: 0; transform: translateY(22px) rotate(-0.7deg); } to { opacity: 1; transform: none; } }
@keyframes land-alt { from { opacity: 0; transform: translateY(22px) rotate(0.7deg); } to { opacity: 1; transform: none; } }
@keyframes draw  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes wash  { 0% { opacity: 0; transform: translateX(-40%); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateX(40%); } }
@keyframes fill  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* The mark at the top keeps a slow breath of its own — it is the only thing on
   the page that moves without being scrolled to, and it moves because the mark
   is a living line, not because anything is loading. */
@media (prefers-reduced-motion: no-preference) {
  .sig svg { animation: breathe 9s ease-in-out infinite; transform-origin: 50% 50%; }
}
@keyframes breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.035) rotate(-1.2deg); } }

@media print {
  .rise, .panel, .panel .ink, .sig .ink, .thread::after { animation: none !important; opacity: 1 !important; transform: none !important; }
  .panel .ink, .sig .ink { stroke-dashoffset: 0 !important; }
  .panel { box-shadow: none; }
}