:root {
  color-scheme: light;
  --ink: #152224;
  --ink-soft: #617072;
  --paper: #f7f5ef;
  --paper-warm: #ece8de;
  --blue: #155eef;
  --blue-deep: #0d3b8e;
  --hairline: rgba(21, 34, 36, 0.16);
  --progress: 0;
  --px: 0;
  --py: 0;
  --font-title: Sora, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-functional: "JetBrains Mono", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", monospace;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

img { display: block; max-width: 100%; }

.weight-story {
  position: relative;
  height: 300vh;
}

.weight-scene {
  position: sticky;
  top: 0;
  isolation: isolate;
  contain: layout paint style;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  transform: translateZ(0);
  background:
    radial-gradient(circle at 49% 46%, rgba(255, 255, 255, 0.95) 0 18%, rgba(255, 255, 255, 0.38) 45%, transparent 72%),
    linear-gradient(145deg, #faf9f5 0%, var(--paper) 56%, var(--paper-warm) 100%);
}

.weight-scene::before,
.weight-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.weight-scene::before {
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(21, 34, 36, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 34, 36, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0 22%, transparent 70%);
  mask-image: radial-gradient(circle at center, #000 0 22%, transparent 70%);
  transform: translate(calc(var(--px) * 22px), calc(var(--py) * 18px));
}

.weight-scene::after {
  width: 40vw;
  height: 40vw;
  left: 30vw;
  top: 50%;
  border: 1px solid rgba(21, 34, 36, 0.05);
  border-radius: 50%;
  transform: translateY(-50%) scale(calc(0.92 + var(--progress) * 0.18));
}

.scene-header {
  position: absolute;
  z-index: 20;
  top: clamp(26px, 4.8vh, 52px);
  left: clamp(24px, 5vw, 80px);
  right: clamp(24px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scene-header p { margin: 0; }

.kicker,
.chapter,
.scroll-cue,
.object figcaption span,
.final-copy > p:first-child {
  font-family: var(--font-functional);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.2em;
}

.kicker { display: flex; align-items: center; gap: 12px; }
.kicker span { width: 38px; height: 1px; background: var(--blue); }
.kicker b { font: inherit; }
.chapter { color: var(--ink-soft); }

.atmosphere,
.grain { position: absolute; inset: 0; pointer-events: none; }

.grain {
  opacity: 0.06;
  background: rgba(21, 34, 36, 0.08);
  mix-blend-mode: multiply;
}

.air-ring {
  position: absolute;
  left: 50%;
  top: 48%;
  border: 1px solid rgba(21, 34, 36, 0.08);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.air-ring--one { width: 34vw; height: 34vw; }
.air-ring--two { width: 48vw; height: 48vw; }

.weight-number {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 49%;
  display: flex;
  align-items: baseline;
  color: #1b292a;
  font-family: var(--font-title);
  font-size: clamp(130px, 21vw, 350px);
  font-weight: 560;
  line-height: 0.72;
  letter-spacing: -0.085em;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(2.15);
  transform-origin: center;
  filter: none;
  opacity: 0.12;
  will-change: transform, opacity;
}

.weight-number small {
  margin-left: 0.12em;
  color: var(--blue);
  font-size: 0.24em;
  font-weight: 650;
  letter-spacing: -0.03em;
}

.comparison-line {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 34vh;
  background: linear-gradient(transparent, var(--hairline), transparent);
  opacity: 0;
  transform: translateY(-50%) scaleY(0.4);
}

.object {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  width: min(36vw, 520px);
  margin: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.object--device {
  width: min(33vw, 470px);
  opacity: 0;
  transform: translate(-50%, -42%) translate3d(0, 52px, 0) scale(0.88) rotateZ(-2deg) rotateY(0deg);
}

.object--coin {
  width: min(24vw, 345px);
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(-70vw, 0, 0) scale(0.72) rotateY(-5deg);
  transform-style: preserve-3d;
}

.object-image-shell { position: relative; z-index: 2; overflow: hidden; }
.object-image-shell,
.weight-number,
.balance { backface-visibility: hidden; }
.object--device .object-image-shell { border-radius: 44%; }
.object--coin .object-image-shell { border-radius: 50%; }
.object img { position: relative; z-index: 2; width: 100%; height: auto; }

.object-shadow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 83%;
  border-radius: 50%;
  background: rgba(22, 30, 32, 0.2);
  filter: blur(22px);
  transform: translate(-50%, 0);
  will-change: transform, opacity;
}

.object-shadow--device { width: 47%; height: 12%; opacity: 0.5; }
.object-shadow--coin { width: 70%; height: 12%; opacity: 0.42; }

.device-sheen,
.coin-sheen {
  position: absolute;
  z-index: 3;
  inset: -20%;
  pointer-events: none;
  opacity: 0.72;
}

.device-sheen {
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,0.58) 47%, transparent 60%);
  transform: translateX(-120%);
}

.coin-sheen {
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.72) 48%, transparent 61%);
  transform: translateX(-140%);
}

.object figcaption {
  position: absolute;
  z-index: 4;
  top: 96%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: max-content;
  text-align: center;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
}

.object figcaption span { color: var(--ink-soft); font-size: 10px; }
.object figcaption strong { font-size: 17px; font-weight: 650; letter-spacing: -0.025em; }

.balance {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(74vw, 1060px);
  height: min(47vw, 660px);
  opacity: 0;
  transform: translate(-50%, -17%) translateY(120px);
  will-change: transform, opacity;
}

.balance-rig { position: absolute; inset: 0; }

.beam {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 17%;
  width: 78%;
  height: 44%;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: 50% 0;
  will-change: transform;
}

.beam-line {
  position: absolute;
  left: 0;
  top: -3px;
  width: 100%;
  height: 6px;
  border: 1px solid rgba(21, 34, 36, 0.42);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 14px rgba(21, 34, 36, 0.08);
}

.hanger {
  position: absolute;
  top: 0;
  width: 1px;
  height: 75%;
  background: rgba(21, 34, 36, 0.34);
}

.hanger::after {
  content: "";
  position: absolute;
  left: -7vw;
  bottom: 0;
  width: 14vw;
  height: 1px;
  background: rgba(21, 34, 36, 0.3);
}

.hanger--left { left: 0; }
.hanger--right { right: 0; }

.tray {
  position: absolute;
  bottom: 20%;
  width: 24%;
  aspect-ratio: 3.4 / 1;
  border: 1px solid rgba(21, 34, 36, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 10px 22px rgba(255,255,255,0.58), 0 16px 30px rgba(21,34,36,0.07);
}

.tray--left { left: -12%; }
.tray--right { right: -12%; }

.pivot { position: absolute; z-index: 2; left: 50%; top: 15%; width: 12%; height: 65%; transform: translateX(-50%); }
.pivot-pin { position: absolute; z-index: 4; left: 50%; top: 0; width: 24px; height: 24px; border: 6px solid var(--paper); border-radius: 50%; background: var(--blue-deep); box-shadow: 0 0 0 1px rgba(21,34,36,.24), 0 8px 18px rgba(21,34,36,.12); transform: translate(-50%, -50%); }
.pivot-neck { position: absolute; left: 50%; top: 0; width: 10px; height: 88%; border: 1px solid rgba(21,34,36,.25); background: rgba(255,255,255,.62); transform: translateX(-50%); }
.pivot-base { position: absolute; left: 50%; bottom: 0; width: 100%; height: 12%; border: 1px solid rgba(21,34,36,.24); border-radius: 50%; background: rgba(255,255,255,.5); transform: translateX(-50%); }

.comparison-copy,
.lighter-badge,
.final-copy {
  position: absolute;
  z-index: 14;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.comparison-copy {
  left: 50%;
  top: 76%;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.35vw, 21px);
  letter-spacing: -0.02em;
  transform: translate(-50%, 16px);
}

.lighter-badge {
  left: 50%;
  top: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 18px 13px;
  border: 1px solid rgba(21,34,36,.18);
  background: rgba(247,245,239,.82);
  box-shadow: 0 12px 34px rgba(21,34,36,.07);
  transform: translate(-50%, 16px);
}

.lighter-badge strong { color: var(--blue); font-size: 22px; letter-spacing: -.04em; }
.lighter-badge span { margin-top: 2px; font: 650 9px/1.3 var(--font-functional); letter-spacing: .2em; }

.final-copy {
  left: 58%;
  top: 50%;
  width: min(34vw, 520px);
  transform: translate(28px, -43%);
}

.final-copy > p:first-child { margin: 0 0 18px; color: var(--blue); }
.final-copy h1 { margin: 0; font: 560 clamp(48px, 5.8vw, 88px)/.94 var(--font-title); letter-spacing: -.065em; }
.final-lead { margin: 28px 0 18px; font-size: clamp(20px, 1.65vw, 27px); font-weight: 580; line-height: 1.25; letter-spacing: -.035em; }
.final-body { max-width: 500px; margin: 0; color: var(--ink-soft); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.6; }

.scroll-cue {
  position: absolute;
  z-index: 20;
  left: clamp(24px, 5vw, 80px);
  bottom: clamp(24px, 4vh, 46px);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 9px;
  transition: opacity 180ms ease;
}

.scroll-cue__line { position: relative; display: block; width: 56px; height: 1px; background: rgba(21,34,36,.16); }
.scroll-cue__line i { position: absolute; inset: 0 auto 0 0; width: calc(var(--progress) * 100%); background: var(--blue); }

@media (max-width: 760px) {
  .weight-story { height: 320vh; }
  .weight-scene { min-height: 560px; }
  .weight-scene::before { background-size: 48px 48px; }
  .weight-scene::after { width: 94vw; height: 94vw; left: 3vw; }
  .scene-header { top: 24px; left: 20px; right: 20px; }
  .kicker, .chapter { font-size: 9px; }
  .weight-number { top: 44%; font-size: clamp(112px, 37vw, 170px); }
  .object--device { width: min(72vw, 360px); }
  .object--coin { width: min(43vw, 210px); }
  .object figcaption { top: 92%; }
  .balance { width: 94vw; height: 66vw; min-height: 245px; transform: translate(-50%, 0) translateY(90px); }
  .beam { width: 72%; }
  .hanger::after { left: -12vw; width: 24vw; }
  .tray { width: 34%; }
  .tray--left { left: -17%; }
  .tray--right { right: -17%; }
  .comparison-copy { top: 82%; width: 100%; text-align: center; }
  .lighter-badge { top: 24%; padding: 11px 13px 10px; }
  .final-copy { left: 24px; right: 24px; top: 64%; width: auto; text-align: center; transform: translateY(26px); }
  .final-copy h1 { font-size: clamp(46px, 15vw, 68px); }
  .final-lead { margin: 18px 0 12px; font-size: 19px; }
  .final-body { max-width: 560px; margin-inline: auto; font-size: 13px; }
  .scroll-cue { left: 20px; bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .weight-scene::before,
  .weight-scene::after,
  .device-sheen,
  .coin-sheen { transform: none !important; }
  .object--device,
  .object--coin,
  .balance,
  .beam,
  .weight-number,
  .final-copy,
  .lighter-badge,
  .comparison-copy { transition: opacity 120ms linear; }
}