/*
  About page. The hero assembles once on load (name letters, photo wipe, words),
  everything below moves with the scroll: the intro lights up word by word, the
  timeline draws itself, the tool rows slide, the second photo settles. Role
  cards use the figure engine from article.css. With reduced motion, or where
  scroll-driven animations are missing, every part simply shows its final state.
*/
.about-main {
  --arrive: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.3, 1.16, 0.45, 1);
  overflow-x: clip;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hero */
.ab-hero {
  padding-top: clamp(24px, 5vw, 64px);
}
.ab-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.22em;
  font-size: clamp(3.75rem, 1rem + 11.5vw, 11.5rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.055em;
}
.ab-line {
  display: inline-flex;
  overflow: clip;
  padding: 0.04em 0.02em 0.1em;
  margin-bottom: -0.1em;
}
.ab-char {
  display: inline-block;
}
.ab-line--2 {
  color: var(--ink-3);
}
.ab-hero-grid {
  display: grid;
  gap: 32px;
  margin-top: clamp(28px, 4vw, 56px);
}
.ab-photo {
  margin: 0;
  perspective: 1200px;
}
.ab-photo-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-xl);
  background: var(--tint-youtube);
  box-shadow: var(--shadow-lg);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 500ms var(--arrive);
}
.ab-photo-img {
  display: block;
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 30%;
}
.ab-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.ab-headline {
  max-width: 17ch;
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.875rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ab-word {
  display: inline-block;
  white-space: pre;
}
/* Section rhythm */
.ab-h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.ab-intro,
.ab-roles,
.ab-path,
.ab-tools,
.ab-talk {
  margin-top: clamp(96px, 12vw, 176px);
}

/* Intro: lights up word by word */
.lit {
  max-width: 26ch;
  font-size: clamp(1.75rem, 1rem + 2.9vw, 3.625rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.lit span {
  white-space: pre-wrap;
}

/* Roles: three live mini interfaces that keep moving while they are on screen
   (about.js adds .is-running; offscreen, and with reduced motion, they rest) */
.ab-role-list {
  display: grid;
  gap: 48px;
  margin-top: 36px;
  list-style: none;
}
.ab-role-stage {
  --tint: var(--tint-youtube);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 34px);
  border-radius: var(--r-xl);
  background: var(--tint);
}
.ab-role-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 0%, var(--stage-light), transparent 64%);
}
.ab-role-stage[data-slug="blunatech"] { --tint: var(--tint-blunatech); }
.ab-role-stage[data-slug="mmk-chatbot"] { --tint: var(--tint-mmk-chatbot); }
.ab-role-stage > :not(i):not(.lv-token) {
  width: 100%;
}
.ab-role-name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 22px;
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.ab-role-text {
  max-width: 38ch;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 17px;
  text-wrap: pretty;
}

/* Build: code types itself, deploy runs, the log never stops */
.lv-editor {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  padding: 14px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.lv-bar {
  display: flex;
  align-items: center;
  gap: 5px;
}
.lv-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}
.lv-bar .f-mono {
  margin-left: 8px;
}
.lv-bar .lv-branch {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
}
.lv-code {
  position: relative;
  display: grid;
  gap: 9px;
}
.lv-line {
  display: flex;
  gap: 6px;
  padding-left: calc(var(--ind) * 18px);
  transform-origin: 0 50%;
}
.lv-line b {
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}
.lv-line b.is-key {
  background: var(--ink);
}
.lv-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.lv-deploy {
  padding: 7px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
}
.lv-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
}
.lv-progress i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--ink);
  transform-origin: 0 50%;
}
.lv-live {
  padding: 4px 10px;
  border-radius: 999px;
  background: #2f9e5b;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
.ab-role-stage[data-slug="blunatech"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.lv-log {
  position: relative;
  z-index: 2;
  align-self: flex-end;
  width: 62% !important;
  height: 74px;
  margin: -14px -8px 0 0;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 12px;
  background: #141413;
  color: #e9e8e3;
  font-size: 11px;
  box-shadow: var(--shadow-lg);
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.lv-log-track {
  display: grid;
  gap: 6px;
}
/* Test: three races in a row, the winner changes each run */
.lv-race {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.lv-race-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.lv-run {
  display: grid;
}
.lv-run b {
  grid-area: 1 / 1;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 400;
}
.lv-run b + b {
  opacity: 0;
}
.lv-lane {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.lv-track {
  height: 14px;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.lv-track i {
  display: block;
  height: 100%;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 40%, transparent);
  transform-origin: 0 50%;
}
.lv-bar-0 { transform: scaleX(0.86); background: var(--ink); }
.lv-bar-1 { transform: scaleX(0.64); }
.lv-bar-2 { transform: scaleX(0.47); }
.lv-spark-line {
  width: 100%;
  height: 48px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  vector-effect: non-scaling-stroke;
}
.lv-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.lv-verdict .corpus-check {
  width: 20px;
  height: 20px;
}
.lv-token {
  position: absolute;
  top: 9%;
  right: 8%;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  box-shadow: var(--shadow-lg);
}

/* Explain: always recording, captions change, comments float up */
.lv-player {
  display: grid;
  gap: 12px;
}
.lv-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: #141413;
  box-shadow: var(--shadow-lg);
}
.lv-rec {
  position: absolute;
  top: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #f2f1ed;
  font-family: var(--mono);
  font-size: 10.5px;
}
.lv-rec i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
}
.lv-wave {
  position: absolute;
  top: 34%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  translate: -50% 0;
}
.lv-wave i {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: #f2f1ed;
  transform: scaleY(calc(0.25 + 0.05 * var(--k)));
}
.lv-caps {
  position: absolute;
  left: 50%;
  bottom: 12%;
  display: grid;
  justify-items: center;
  width: 70%;
  translate: -50% 0;
}
.lv-caps b {
  grid-area: 1 / 1;
  height: 8px;
  border-radius: 4px;
  background: #f2f1ed;
}
.lv-caps b:nth-child(1) { width: 78%; }
.lv-caps b:nth-child(2) { width: 58%; opacity: 0; }
.lv-caps b:nth-child(3) { width: 88%; opacity: 0; }
.lv-bubbles i {
  position: absolute;
  right: 10px;
  bottom: 14px;
  width: 60px;
  height: 18px;
  border-radius: 9px 9px 2px 9px;
  background: color-mix(in srgb, #f2f1ed 22%, transparent);
  opacity: 0;
}
.lv-bubbles i:nth-child(2) { width: 44px; }
.lv-bubbles i:nth-child(3) { width: 70px; }
.lv-seek {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
.lv-seek i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: #e5484d;
  transform: scaleX(0.62);
  transform-origin: 0 50%;
}
.lv-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lv-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink);
}
.lv-heart {
  margin-left: auto;
  color: #e5484d;
  font-size: 18px;
}
.lv-sub {
  display: grid;
}
.lv-sub b {
  grid-area: 1 / 1;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
}
.lv-sub b + b {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Offscreen the loops rest; important so no single loop keeps running unseen */
  /* Paused until about.js sees the cards on screen; each loop rests on a finished frame */
  .ab-roles:not(.is-running) .ab-role-stage * {
    animation-play-state: paused !important;
  }
  /* Long loops, soft easing, one thing at a time: calm rather than busy */
  .ab-roles {
    --calm: cubic-bezier(0.45, 0, 0.2, 1);
  }
  .lv-editor { animation: lv-float 10s var(--calm) infinite alternate; }
  .lv-line { animation: lv-type 14s var(--calm) infinite both; animation-delay: calc(var(--k) * 0.45s - 8s); }
  .lv-deploy { animation: lv-press 14s var(--calm) -12s infinite; }
  .lv-progress i { animation: lv-progress 14s var(--calm) -12s infinite; }
  .lv-live { animation: lv-live 14s var(--calm) -12s infinite; }
  .lv-log-track { animation: lv-ticker 26s linear infinite; }

  .lv-bar-0 { animation: lv-race-0 18s var(--calm) -5s infinite; }
  .lv-bar-1 { animation: lv-race-1 18s var(--calm) -5s infinite; }
  .lv-bar-2 { animation: lv-race-2 18s var(--calm) -5s infinite; }
  .lv-run b:nth-child(1) { animation: lv-run-1 18s var(--calm) -5s infinite; }
  .lv-run b:nth-child(2) { animation: lv-run-2 18s var(--calm) -5s infinite; }
  .lv-run b:nth-child(3) { animation: lv-run-3 18s var(--calm) -5s infinite; }
  .lv-spark-line { animation: lv-draw 6s var(--calm) -4s infinite; }
  .lv-verdict { animation: lv-verdict 6s var(--calm) -4s infinite; }
  .lv-token { animation: lv-bob 7s var(--calm) infinite alternate; }

  .lv-rec i { animation: lv-breathe 2.4s var(--calm) infinite alternate; }
  .lv-wave i { animation: lv-wave 2.2s var(--calm) infinite alternate; animation-delay: calc(var(--k) * -0.27s); }
  .lv-caps b { animation: lv-cap 15s var(--calm) -1.5s infinite; }
  .lv-caps b:nth-child(2) { animation-delay: -11.5s; }
  .lv-caps b:nth-child(3) { animation-delay: -6.5s; }
  .lv-bubbles i { animation: lv-bubble 12s var(--calm) infinite; }
  .lv-bubbles i:nth-child(2) { animation-delay: -4s; }
  .lv-bubbles i:nth-child(3) { animation-delay: -8s; }
  .lv-seek i { animation: lv-seek 24s linear -9s infinite; }
  .lv-heart { animation: lv-heart 8s var(--calm) infinite; }
  .lv-sub b:nth-child(1) { animation: lv-sub-a 12s var(--calm) infinite; }
  .lv-sub b:nth-child(2) { animation: lv-sub-b 12s var(--calm) infinite; }
}
@keyframes lv-float {
  from { transform: translateY(-3px); }
  to { transform: translateY(3px); }
}
@keyframes lv-type {
  0% { transform: scaleX(0); opacity: 0; }
  7%, 88% { transform: scaleX(1); opacity: 1; }
  96%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes lv-press {
  0%, 58%, 64%, 100% { transform: scale(1); }
  61% { transform: scale(0.95); }
}
@keyframes lv-progress {
  0%, 62% { transform: scaleX(0); }
  80%, 93% { transform: scaleX(1); }
  98%, 100% { transform: scaleX(0); }
}
@keyframes lv-live {
  0%, 80% { opacity: 0; transform: translateY(4px); filter: blur(4px); }
  84%, 93% { opacity: 1; transform: none; filter: blur(0); }
  97%, 100% { opacity: 0; filter: blur(4px); }
}
@keyframes lv-ticker {
  to { transform: translateY(-50%); }
}
@keyframes lv-race-0 {
  0% { transform: scaleX(0); background: var(--ink); }
  22%, 31% { transform: scaleX(0.86); background: var(--ink); }
  33.3% { transform: scaleX(0); background: color-mix(in srgb, var(--ink) 40%, transparent); }
  55%, 64% { transform: scaleX(0.55); background: color-mix(in srgb, var(--ink) 40%, transparent); }
  66.6% { transform: scaleX(0); }
  89%, 97% { transform: scaleX(0.74); background: color-mix(in srgb, var(--ink) 40%, transparent); }
  100% { transform: scaleX(0); background: var(--ink); }
}
@keyframes lv-race-1 {
  0% { transform: scaleX(0); background: color-mix(in srgb, var(--ink) 40%, transparent); }
  22%, 31% { transform: scaleX(0.64); }
  33.3% { transform: scaleX(0); background: var(--ink); }
  55%, 64% { transform: scaleX(0.9); background: var(--ink); }
  66.6% { transform: scaleX(0); background: color-mix(in srgb, var(--ink) 40%, transparent); }
  89%, 97% { transform: scaleX(0.6); }
  100% { transform: scaleX(0); }
}
@keyframes lv-race-2 {
  0% { transform: scaleX(0); background: color-mix(in srgb, var(--ink) 40%, transparent); }
  22%, 31% { transform: scaleX(0.47); }
  33.3% { transform: scaleX(0); }
  55%, 64% { transform: scaleX(0.7); }
  66.6% { transform: scaleX(0); background: var(--ink); }
  89%, 97% { transform: scaleX(0.95); background: var(--ink); }
  100% { transform: scaleX(0); background: color-mix(in srgb, var(--ink) 40%, transparent); }
}
@keyframes lv-run-1 { 0%, 31% { opacity: 1; } 34%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lv-run-2 { 0%, 31% { opacity: 0; } 34%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes lv-run-3 { 0%, 64% { opacity: 0; } 67%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lv-draw {
  0% { stroke-dashoffset: 1; }
  55%, 85% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}
@keyframes lv-verdict {
  0%, 50% { opacity: 0.4; }
  62%, 90% { opacity: 1; }
  100% { opacity: 0.4; }
}
@keyframes lv-bob {
  from { transform: translateY(-4px); }
  to { transform: translateY(4px); }
}
@keyframes lv-breathe {
  from { opacity: 0.35; }
  to { opacity: 1; }
}
@keyframes lv-wave {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(0.9); }
}
@keyframes lv-cap {
  0% { opacity: 0; filter: blur(4px); }
  8%, 30% { opacity: 1; filter: blur(0); }
  38%, 100% { opacity: 0; filter: blur(4px); }
}
@keyframes lv-bubble {
  0% { opacity: 0; transform: translateY(12px); }
  12% { opacity: 1; transform: translateY(0); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-80px); }
}
@keyframes lv-seek {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes lv-heart {
  0%, 70%, 100% { transform: scale(1); }
  78% { transform: scale(1.22); }
  86% { transform: scale(1); }
}
@keyframes lv-sub-a {
  0%, 46% { opacity: 1; filter: blur(0); }
  50%, 96% { opacity: 0; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes lv-sub-b {
  0%, 46% { opacity: 0; filter: blur(4px); }
  50%, 96% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(4px); }
}

/* A quiet break: a hairline draws across the page with a whisper of text on it */
.ab-break {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: clamp(96px, 12vw, 176px);
  margin-inline: calc(-1 * var(--pad));
}
.ab-break-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink) 30%, var(--ink));
  opacity: 0.55;
  transform-origin: 0 50%;
}
.ab-break-line--r {
  background: linear-gradient(90deg, var(--ink), var(--ink) 70%, transparent);
}
.ab-break-text {
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ab-break-line {
      animation: ab-break-draw linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .ab-break-line--r {
      animation-range: entry 20% cover 65%;
    }
    .ab-break-text {
      animation: ab-break-text linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 50%;
    }
  }
}
@keyframes ab-break-draw {
  from { transform: scaleX(0); }
}
@keyframes ab-break-text {
  from { opacity: 0; letter-spacing: 0.3em; filter: blur(4px); }
}

/* Milestones by year, background as tinted tiles */
.ab-path-grid {
  display: grid;
  gap: 72px;
}
.ab-timeline {
  position: relative;
  display: grid;
  gap: 32px;
  margin-top: 36px;
  list-style: none;
}
.ab-timeline::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 92px;
  width: 2px;
  border-radius: 1px;
  background: var(--ink);
  transform-origin: 50% 0;
}
.ab-year {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
}
.ab-year-label {
  color: var(--ink-3);
  font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.ab-year-items {
  display: grid;
  gap: 18px;
  padding-left: 32px;
  list-style: none;
}
.ab-year-items li {
  position: relative;
  display: grid;
  gap: 3px;
}
.ab-year-items li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -38px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.ab-year-items li:first-child::before {
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--paper);
}
.ab-when {
  color: var(--ink-3);
}
.ab-what {
  font-size: 18px;
  line-height: 1.45;
  text-wrap: pretty;
}
.ab-background {
  display: grid;
  gap: 16px;
  margin-top: 36px;
  list-style: none;
}
.ab-bg {
  --tint: var(--tint-mmk-chatbot);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 28px 28px 30px;
  border-radius: var(--r-xl);
  background: var(--tint);
  transition: transform 500ms var(--spring);
}
.ab-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 100% 0%, var(--stage-light), transparent 60%);
}
.ab-bg[data-slug="blunatech"] {
  --tint: var(--tint-blunatech);
}
.ab-bg:hover {
  transform: translateY(-4px) rotate(-0.4deg);
}
.ab-bg-icon {
  position: absolute;
  top: 22px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.ab-bg-icon svg {
  width: 34px;
  height: 34px;
}
.ab-bg-icon path,
.ab-bg-icon rect {
  stroke-dasharray: 1;
}
.ab-bg-meta {
  color: var(--ink-3);
}
.ab-where {
  max-width: 14ch;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.ab-bg-text {
  max-width: 34ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Tools: two rows that slide with the scroll */
.ab-tools .ab-h2 {
  margin-bottom: 28px;
}
.ab-marquee {
  overflow: hidden;
  margin-inline: calc(-1 * var(--pad));
  padding-block: 6px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ab-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  padding-inline: var(--pad);
}
.ab-tool {
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.ab-marquee--rev .ab-tool {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Second photo, with floating badges and hand-drawn scribbles around it */
.ab-talk-fig {
  display: grid;
  justify-items: center;
  gap: 40px;
  margin: 0;
  text-align: center;
}
.ab-talk-stage {
  position: relative;
  width: min(320px, 64vw);
  margin: 40px 0;
}
.ab-talk-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 10px 10px 40px;
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  rotate: -3deg;
}
.ab-talk-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.ab-talk-caption {
  max-width: 30ch;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.ab-badge {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: nowrap;
}
.ab-badge.is-ink {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.ab-badge-1 { top: 8%; left: -22%; rotate: -8deg; }
.ab-badge-2 { top: 44%; right: -24%; rotate: 6deg; }
.ab-badge-3 { bottom: 4%; left: -16%; rotate: 4deg; }
.ab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5484d;
}
.ab-scribble {
  position: absolute;
  z-index: 1;
  color: var(--ink);
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ab-scribble path {
  stroke-dasharray: 1;
}
.ab-scribble-loop {
  top: -18%;
  right: -34%;
  width: 72%;
  opacity: 0.55;
}
.ab-scribble-stars {
  top: -12%;
  left: -18%;
  width: 26%;
}
.ab-scribble-arrow {
  right: -52%;
  bottom: 18%;
  width: 48%;
}
@media (min-width: 900px) {
  .ab-talk-fig {
    grid-template-columns: auto minmax(0, 32ch);
    justify-content: center;
    align-items: center;
    gap: 120px;
    text-align: left;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .ab-badge-1 { animation: ab-float 10s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate; }
  .ab-badge-2 { animation: ab-float 12s cubic-bezier(0.45, 0, 0.2, 1) -4s infinite alternate; }
  .ab-badge-3 { animation: ab-float 11s cubic-bezier(0.45, 0, 0.2, 1) -7s infinite alternate; }
  .ab-dot { animation: lv-breathe 2.4s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate; }
  .ab-scribble-stars { animation: ab-twinkle 6s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate; }
}
@keyframes ab-float {
  from { transform: translate(0, -5px) rotate(-1deg); }
  to { transform: translate(3px, 5px) rotate(1deg); }
}
@keyframes ab-twinkle {
  from { opacity: 0.35; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* Layout */
@media (min-width: 900px) {
  .ab-hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(32px, 4vw, 64px);
  }
  .ab-role-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .ab-path-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(48px, 6vw, 96px);
  }
}

/* Motion: the hero assembles once on load */
@media (prefers-reduced-motion: no-preference) {
  .ab-char {
    animation: ab-rise 1000ms var(--arrive) both;
    animation-delay: calc(80ms + var(--i) * 42ms);
  }
  .ab-photo-frame {
    animation: ab-wipe 1300ms var(--arrive) 420ms both;
  }
  .ab-photo-img {
    animation: ab-settle 1800ms var(--arrive) 420ms both;
  }
  .ab-word {
    animation: ab-word 800ms var(--arrive) both;
    animation-delay: calc(900ms + var(--i) * 55ms);
  }
  .ab-cta {
    animation: ab-word 800ms var(--arrive) 1500ms both;
  }
}
@keyframes ab-rise {
  from { transform: translateY(108%) rotate(4deg); filter: blur(8px); }
}
@keyframes ab-wipe {
  from { clip-path: inset(100% 0 0 0 round var(--r-xl)); }
  to { clip-path: inset(0 0 0 0 round var(--r-xl)); }
}
@keyframes ab-settle {
  from { transform: scale(1.18); filter: blur(10px); }
}
@keyframes ab-word {
  from { opacity: 0; transform: translateY(0.5em); filter: blur(8px); }
}

/* Motion: scroll-driven parts */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ab-hero {
      view-timeline: --hero block;
    }
    .ab-name {
      animation: ab-name-out linear both;
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }
    .ab-photo-img {
      animation: ab-settle 1800ms var(--arrive) 420ms both, ab-parallax linear both;
      animation-timeline: auto, --hero;
      animation-range: normal, exit 0% exit 100%;
    }

    .lit {
      view-timeline: --lit block;
    }
    .lit span {
      animation: ab-lit linear both;
      animation-timeline: --lit;
      animation-range: cover calc(20% + var(--i) * 1.1%) cover calc(26% + var(--i) * 1.1%);
    }

    .ab-timeline {
      view-timeline: --path block;
    }
    .ab-timeline::before {
      animation: ab-draw linear both;
      animation-timeline: --path;
      animation-range: entry 40% cover 55%;
    }
    .ab-bg {
      animation: ab-enter linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }

    .ab-marquee-track {
      animation: ab-slide-rev linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .ab-marquee--rev .ab-marquee-track {
      animation-name: ab-slide;
    }

    .ab-talk-frame {
      animation: ab-tilt linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .ab-scribble path,
    .ab-bg-icon path,
    .ab-bg-icon rect {
      animation: ab-scribble linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    .ab-year {
      animation: ab-enter linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
  }
}
@keyframes ab-name-out {
  to { transform: translateY(-18%) scale(0.96); opacity: 0.25; filter: blur(4px); }
}
@keyframes ab-parallax {
  to { transform: translateY(-9%); }
}
@keyframes ab-lit {
  from { color: color-mix(in srgb, var(--ink) 48%, var(--paper)); }
}
@keyframes ab-draw {
  from { transform: scaleY(0); }
}
@keyframes ab-enter {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
}
@keyframes ab-slide {
  from { transform: translateX(6%); }
  to { transform: translateX(-28%); }
}
@keyframes ab-slide-rev {
  from { transform: translateX(-28%); }
  to { transform: translateX(6%); }
}
@keyframes ab-scribble {
  from { stroke-dashoffset: 1; }
}
@keyframes ab-tilt {
  from { rotate: 9deg; transform: translateY(80px) scale(0.9); }
  to { rotate: -3deg; }
}

@media (min-width: 1360px) {
  .ab-role-list {
    margin-inline: -72px;
  }
}