/* About — why ClawHunt exists, and the middle it occupies. */

/* ── hero ──────────────────────────────────── */

/* The words sit in the sky; the shore stays unobstructed below them. The plate is
   anchored to the bottom and fades into the field at its top edge, so the headline
   always has open sky however tall the frame is. */
.about-hero {
  align-items: start;
  min-height: clamp(640px, 90svh, 940px);
}

.about-hero::before {
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg-deep) 40%, transparent) 0%, transparent 40%);
}

.about-hero .page-hero__plate {
  top: auto;
  bottom: 0;
  height: 84%;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
}

.about-hero .page-hero__inner {
  align-items: start;
  padding-top: calc(var(--header-h) + clamp(56px, 9vh, 112px));
}

.about-hero__dek {
  justify-self: stretch;
  align-self: start;
  padding-top: calc(0.9375rem * 1.6 + 18px + 0.35em);
}

.about-hero__dek .page-hero__lede {
  color: var(--ink);
  opacity: 0.8;
}

.about-hero__how {
  display: inline-block;
  margin-top: 18px;
  font-weight: 600;
}

[data-theme="dark"] .about-hero .page-hero__plate {
  filter: brightness(0.46) saturate(0.85);
}

[data-theme="dark"] .about-hero::before {
  background: linear-gradient(to bottom, rgb(5 17 25 / 0.6) 0%, transparent 46%);
}

.about-hero__title {
  max-width: 13ch;
}

@media (max-width: 900px) {
  .about-hero__dek {
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .about-hero {
    min-height: 94svh;
  }

  .about-hero .page-hero__plate {
    height: 50%;
    object-position: 38% 100%;
  }
}

/* ── why escrow: the pearl in the clam, annotated ── */

.about-why__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}

.about-why__title {
  max-width: 14ch;
  margin-bottom: clamp(24px, 3vw, 36px);
}

.about-why__p {
  max-width: 34em;
  color: var(--ink);
}

.about-why__p + .about-why__p {
  margin-top: 1.1em;
  color: var(--ink-2);
}

.about-specimen {
  position: relative;
  perspective: 1400px;
}

/* a slight tilt toward the pointer; the ledger card floats in front of the plate */
.about-specimen__stage {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 700ms var(--ease-out);
}

.about-specimen__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 40px 80px -40px rgb(11 34 48 / 0.35);
}

.about-specimen__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-theme="dark"] .about-specimen__frame img {
  filter: brightness(0.78) saturate(0.92);
}

/* the pearl breathes; nothing else in the plate moves */
.about-specimen__glow {
  position: absolute;
  left: 51%;
  top: 53%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.62) 0%, rgb(255 244 250 / 0.22) 34%, transparent 64%);
  mix-blend-mode: screen;
  animation: about-breathe 5.5s var(--ease-in-out) infinite;
  pointer-events: none;
}

@keyframes about-breathe {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.94);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.04);
  }
}

.about-specimen__pin {
  position: absolute;
  left: 51%;
  top: 53%;
  width: 11px;
  height: 11px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.7), 0 0 0 11px color-mix(in oklab, var(--accent) 22%, transparent);
  transform: translateZ(20px);
}

.about-specimen__leader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transform: translateZ(20px);
}

.about-specimen__leader line {
  stroke: var(--accent);
  stroke-width: 1;
}

.about-specimen:not(.is-wired) .about-specimen__leader {
  display: none;
}

/* the ledger card: glass, in front of the plate */
.about-middle {
  position: absolute;
  left: clamp(-64px, -4vw, -24px);
  bottom: clamp(-48px, -3vw, -24px);
  width: min(318px, 62%);
  padding: 20px 20px 10px;
  border-radius: var(--r-card);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in oklab, var(--line) 60%, transparent) inset;
  transform: translateZ(60px);
}

.about-middle__cap {
  font-size: 0.8125rem;
  font-weight: 640;
  color: var(--ink-2);
  margin-bottom: 4px;
}

.about-middle__flow {
  position: relative;
  display: grid;
}

/* rows are a fixed 72px, so the node centres sit at 36 / 108 / 180px */
.about-middle__flow::before {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 36px;
  height: 144px;
  width: 1px;
  background: linear-gradient(to bottom, var(--line-strong), var(--held) 50%, var(--ok));
  opacity: 0.75;
}

/* one drop of value: in, held, out */
.about-middle__flow::after {
  content: "";
  position: absolute;
  left: 18.5px;
  top: 32.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--held);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--held) 18%, transparent);
  animation: about-drop 7s var(--ease-in-out) infinite;
}

@keyframes about-drop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  38%,
  62% {
    transform: translateY(72px);
    opacity: 0;
  }
  63% {
    opacity: 1;
  }
  92% {
    transform: translateY(144px);
    opacity: 1;
    background: var(--ok);
  }
  100% {
    transform: translateY(144px);
    opacity: 0;
    background: var(--ok);
  }
}

.about-middle__stop {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 72px;
}

.about-middle__stop + .about-middle__stop::before {
  content: "";
  position: absolute;
  top: 0;
  left: 58px;
  right: 0;
  height: 1px;
  background: color-mix(in oklab, var(--line) 70%, transparent);
}

.about-middle__node {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 1.5px var(--line-strong) inset;
}

.about-middle__stop--out .about-middle__node {
  background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-soft);
}

.about-middle__stop--held .about-middle__node {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, var(--surface), var(--held-soft) 70%);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--held) 46%, transparent) inset,
    0 0 0 6px color-mix(in oklab, var(--held-soft) 70%, transparent),
    0 10px 24px -10px color-mix(in oklab, var(--held) 60%, transparent);
}

.about-middle__pearl {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 14%, #f3e9f1 32%, #cfc3e6 66%, #a897d8 100%);
  box-shadow: 0 3px 8px rgb(11 34 48 / 0.22);
}

.about-middle__name {
  font-size: 1.0625rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.about-middle__stop--held .about-middle__name {
  font-size: 1.625rem;
  font-weight: 660;
  font-stretch: 86%;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.about-middle__state {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 640;
  color: var(--ink-2);
  box-shadow: 0 0 0 1px var(--line) inset;
}

.about-middle__stop--held .about-middle__state {
  color: color-mix(in oklab, var(--held) 80%, var(--ink));
  background: var(--held-soft);
  box-shadow: none;
}

.about-middle__stop--out .about-middle__state {
  color: color-mix(in oklab, var(--ok) 80%, var(--ink));
  background: var(--ok-soft);
  box-shadow: none;
}

@media (max-width: 960px) {
  .about-why__grid {
    grid-template-columns: 1fr;
  }

  .about-specimen__stage {
    transform: none;
  }

  .about-middle {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: -56px 16px 0;
    transform: none;
  }

  .about-specimen__leader {
    display: none;
  }
}

/* ── beliefs ───────────────────────────────── */

.about-beliefs {
  padding-top: 0;
}

.about-beliefs__title {
  max-width: 16ch;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.about-beliefs__list {
  display: grid;
}

.about-belief {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 12px clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line);
}

.about-belief:last-child {
  border-bottom: 1px solid var(--line);
}

.about-belief__title {
  font-size: var(--fs-h2);
  line-height: 1.06;
  font-weight: 640;
  font-stretch: var(--wdth-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}

.about-belief__body {
  margin: 0;
  font-family: var(--font-read);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

:lang(zh) .about-belief__body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.8;
}

:lang(zh) .about-belief__title {
  letter-spacing: 0;
  line-height: 1.2;
}

@media (max-width: 760px) {
  .about-belief {
    grid-template-columns: 1fr;
  }
}

/* ── closer ────────────────────────────────── */

.about-closer {
  margin: 0 var(--tank-inset) var(--section-tight);
  padding-block: clamp(64px, 9vw, 128px) clamp(28px, 3vw, 40px);
  border-radius: var(--r-tank);
  background:
    radial-gradient(ellipse 50% 70% at 92% 0%, color-mix(in oklab, var(--lilac) 22%, transparent), transparent 62%),
    radial-gradient(ellipse 40% 60% at 0% 100%, color-mix(in oklab, var(--held-soft) 80%, transparent), transparent 70%),
    var(--surface);
}

.about-closer__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: end;
}

.about-closer__title {
  max-width: 11ch;
}

.about-closer__lede {
  margin: 24px 0 34px;
  max-width: 46ch;
}

.about-closer__actions {
  gap: 14px 28px;
}

.about-closer__read {
  font-weight: 560;
}

.about-closer__facts {
  display: grid;
  gap: 28px;
}

.about-fact {
  display: grid;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.about-fact__value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: clamp(3.4rem, 6vw, 5.5rem);
  line-height: 0.9;
  font-weight: 340;
  font-stretch: 86%;
  letter-spacing: -0.045em;
  color: var(--ink);
}

.about-fact__unit {
  font-size: 0.42em;
  font-weight: 460;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}

.about-fact__label {
  margin: 0;
  max-width: 28ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.about-colophon {
  margin-top: clamp(56px, 7vw, 96px);
}

.about-colophon__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px var(--gutter);
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.about-colophon__list dt {
  color: var(--ink-3);
  font-weight: 560;
  margin-bottom: 4px;
}

.about-colophon__list dd {
  margin: 0;
  color: var(--ink);
}

.about-colophon__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

@media (max-width: 900px) {
  .about-closer__grid,
  .about-colophon__list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-middle__flow::after,
  .about-specimen__glow {
    display: none;
  }

  .about-specimen__stage {
    transform: none;
  }
}

/* Chinese headings break at phrase boundaries (punctuation, spaces, <wbr>), never inside a
   word; a phrase wider than the line still wraps rather than overflowing. */
:lang(zh) main :is(h1, h2, h3, h4) {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

:lang(zh) .about-hero__title {
  max-width: 10em;
}

:lang(zh) .about-why__title,
:lang(zh) .about-beliefs__title,
:lang(zh) .about-closer__title {
  max-width: 11em;
}