:root {
  --motion-paper: #f4f7fb;
  --motion-paper-soft: #eaf0f5;
  --motion-ink: #13283a;
  --motion-muted: #627588;
  --motion-blue: #2e6fa6;
  --motion-blue-dark: #245f8d;
  --motion-yellow: #d4a437;
  --motion-night: #173247;
  --motion-hairline: rgba(25, 54, 77, .13);
}

html:has(.narrative-home) { background: var(--motion-paper); }

body.narrative-home {
  color: var(--motion-ink);
  background: var(--motion-paper);
  overflow-x: clip;
}

body.narrative-home::before,
body.narrative-home::after { display: none; }

.narrative-home .scroll-progress {
  height: 2px;
  background: var(--motion-blue);
  box-shadow: none;
}

.narrative-home .site-header { color: var(--motion-ink); }
.narrative-home .site-header.scrolled {
  background: rgba(248, 251, 253, .9);
  border-color: rgba(26, 56, 80, .08);
  backdrop-filter: blur(12px) saturate(110%);
}
.narrative-home .brand-mark::before,
.narrative-home .brand-mark::after { border-color: var(--motion-blue); box-shadow: none; }
.narrative-home .brand-mark::after { border-color: #7ba7c5; }
.narrative-home .brand-text { color: var(--motion-ink); }
.narrative-home .brand-text small { color: #7b8c99; }
.narrative-home .desktop-nav a { color: #4d6273; }
.narrative-home .desktop-nav a:hover,
.narrative-home .desktop-nav a.active { color: var(--motion-ink); }
.narrative-home .desktop-nav a.active::after { background: var(--motion-blue); box-shadow: none; }
.narrative-home .lang-toggle { color: #45494e; }
.narrative-home .product-link {
  color: var(--motion-ink);
  border-color: rgba(39,96,137,.24);
  background: rgba(255,255,255,.62);
}
.narrative-home .menu-toggle { color: var(--motion-ink); border-color: rgba(17,18,20,.16); }
.narrative-home .site-header.over-night {
  color: white;
  background: rgba(23, 50, 71, .9);
  border-color: rgba(255,255,255,.1);
}
.narrative-home .site-header.over-night .brand-mark::before { border-color: #8ab6d4; }
.narrative-home .site-header.over-night .brand-mark::after { border-color: #d4e5ef; }
.narrative-home .site-header.over-night .brand-text,
.narrative-home .site-header.over-night .desktop-nav a:hover,
.narrative-home .site-header.over-night .desktop-nav a.active { color: white; }
.narrative-home .site-header.over-night .brand-text small,
.narrative-home .site-header.over-night .desktop-nav a,
.narrative-home .site-header.over-night .lang-toggle { color: rgba(255,255,255,.7); }
.narrative-home .site-header.over-night .product-link {
  color: white;
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.07);
}

.homepage-narrative { position: relative; background: var(--motion-paper); }
.narrative-scene { position: relative; min-height: 160vh; }
.human-motion-scene { min-height: 150vh; }
.gait-scene { min-height: 185vh; }
.shared-space-scene { min-height: 180vh; }
.deploy-scene { min-height: 180vh; }
.time-scene { min-height: 205vh; }

.narrative-frame {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: var(--motion-paper);
}

.narrative-frame::after { display: none; }

.scene-copy { position: absolute; z-index: 12; }
.scene-index {
  display: block;
  margin-bottom: 18px;
  color: var(--motion-blue);
  font: 650 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .15em;
}
.scene-kicker {
  margin: 0 0 18px;
  color: #55748b;
  font-size: 14px;
  letter-spacing: .12em;
}
.scene-copy h1,
.scene-copy h2,
.finale-copy h2 {
  margin: 0;
  color: var(--motion-ink);
  font-weight: 520;
  line-height: .99;
  letter-spacing: -.065em;
}
.scene-copy h1 { font-size: clamp(56px, 7.1vw, 112px); }
.compact-copy h2 { font-size: clamp(42px, 5.4vw, 82px); }

/* Scene 01 */
.human-frame { background: #e8eef2; }
.human-poster {
  position: absolute;
  z-index: 1;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center 60%;
  filter: saturate(.82) contrast(1.015);
  transform: scale(calc(1 + var(--p, 0) * .022)) translate3d(0, calc(var(--p, 0) * -.7%), 0);
  transform-origin: 58% 72%;
  will-change: transform;
}
.human-wash {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(244,247,251,.93) 0%, rgba(244,247,251,.72) 28%, rgba(244,247,251,.08) 56%, rgba(244,247,251,0) 75%),
    linear-gradient(0deg, rgba(244,247,251,.96) 0%, rgba(244,247,251,.45) 9%, transparent 24%),
    linear-gradient(180deg, rgba(244,247,251,.25), transparent 28%, rgba(19,40,58,.05));
}
.human-copy {
  left: max(30px, calc((100vw - 1240px) / 2));
  top: 50%;
  width: min(730px, 58vw);
  transform: translateY(-49%);
  opacity: clamp(0, calc(1.45 - var(--p, 0) * 2.15), 1);
  will-change: opacity, transform;
}
.landing-signal {
  position: absolute;
  z-index: 8;
  left: 58.5%;
  top: 63%;
  width: min(24vw, 310px);
  opacity: clamp(0, calc((var(--p, 0) - .15) * 3.5), 1);
  transform: translate(-50%, -50%) scale(calc(.94 + var(--p, 0) * .06));
}
.pressure-field { display: block; width: 100%; overflow: visible; }
.cop-line,
.gait-cop {
  fill: none;
  stroke: var(--motion-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
}
.cop-dot,
.gait-cop-dot { fill: var(--motion-yellow); stroke: #fff; stroke-width: 2; }
.landing-event {
  position: absolute;
  right: 5%;
  top: 28%;
  padding: 6px 8px;
  border-left: 2px solid var(--motion-yellow);
  color: var(--motion-ink);
  background: rgba(244,247,251,.82);
  font: 700 9px/1 ui-monospace, monospace;
  letter-spacing: .1em;
}
.scroll-cue {
  position: absolute;
  z-index: 12;
  left: max(30px, calc((100vw - 1240px) / 2));
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: #557083;
  font: 600 9px/1 ui-monospace, monospace;
  letter-spacing: .14em;
  opacity: clamp(0, calc(1 - var(--p, 0) * 3), 1);
}
.scroll-cue i { width: 42px; height: 1px; background: var(--motion-ink); transform-origin: left; animation: cuePulse 1.8s ease-in-out infinite; }

/* Scene 02 */
.gait-frame { background: var(--motion-paper); }
.gait-copy { left: 7vw; top: 14%; width: 54vw; }
.gait-copy .signal-sentence { opacity: clamp(0, calc(1.7 - var(--p, 0) * 2.6), 1); }
.gait-copy .motion-sentence {
  position: absolute;
  inset: 28px auto auto 0;
  width: max-content;
  max-width: 80vw;
  opacity: clamp(0, calc((var(--p, 0) - .48) * 5), 1);
}
.gait-visual { position: absolute; z-index: 4; inset: 0; }
.foot-observation {
  position: absolute;
  left: 11vw;
  top: 28%;
  width: min(30vw, 360px);
  height: 61%;
  overflow: visible;
  opacity: clamp(.08, calc(1 - var(--p, 0) * .3), 1);
  transform: translate3d(calc(var(--p, 0) * 8vw), 0, 0) scale(calc(1 - var(--p, 0) * .08));
  will-change: transform;
}
.foot-contour { fill: rgba(46,111,166,.025); stroke: rgba(25,54,77,.46); stroke-width: 1.15; }
.pressure-nodes ellipse {
  fill: var(--motion-blue);
  opacity: .06;
  transform-box: fill-box;
  transform-origin: center;
  filter: blur(7px);
}
.imu-reference circle { fill: var(--motion-yellow); stroke: var(--motion-paper); stroke-width: 3; }
.imu-reference path { fill: none; stroke: var(--motion-ink); stroke-width: 1; }
.waveform-field {
  position: absolute;
  right: 7vw;
  top: 35%;
  width: min(47vw, 680px);
  height: 40%;
  padding-left: 32px;
}
.waveform-field svg { width: 100%; height: 100%; overflow: visible; }
.wave-lines path { fill: none; stroke: rgba(17,18,20,.22); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.wave-cursor { stroke: var(--motion-blue); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wave-labels { position: absolute; inset: 3% auto 3% 0; display: flex; flex-direction: column; justify-content: space-between; color: #7a7f84; font: 600 8px/1 ui-monospace, monospace; }
.gait-events {
  position: absolute;
  right: 7vw;
  bottom: 14%;
  width: min(47vw, 680px);
  display: flex;
  justify-content: space-between;
  color: #8b8e91;
  font: 650 9px/1 ui-monospace, monospace;
  letter-spacing: .08em;
}
.gait-events span { position: relative; padding-top: 13px; transition: color .15s ease; }
.gait-events span::before { content: ""; position: absolute; left: 50%; top: 0; width: 4px; height: 4px; border-radius: 50%; background: #b7b8b5; transform: translateX(-50%); }
.gait-events span.active { color: var(--motion-ink); }
.gait-events span.active::before { width: 7px; height: 7px; top: -2px; background: var(--motion-yellow); }

.motion-token { position: absolute; z-index: 10; width: 92px; aspect-ratio: 1; opacity: 0; }
.motion-token i,
.motion-token b,
.motion-token span { position: absolute; display: block; border-radius: 50%; }
.motion-token i { inset: 0; border: 1px solid rgba(46,111,166,.3); }
.motion-token b { inset: 19%; border: 1.5px solid var(--motion-blue); transform: rotate(38deg) scaleX(.72); }
.motion-token span { inset: 42%; background: var(--motion-blue); }
.token-from-gait {
  left: 50%; top: 54%;
  opacity: clamp(0, calc((var(--p, 0) - .76) * 6), 1);
  transform: translate(-50%, -50%) scale(calc(.7 + var(--p, 0) * .3));
}

/* Scene 03 */
.shared-frame { background: var(--motion-paper-soft); }
.shared-copy { left: 7vw; top: 12%; z-index: 14; }
.shared-copy h2 { font-size: clamp(42px, 5vw, 76px); }
.motion-space-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.space-core-label {
  position: absolute;
  z-index: 7;
  left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  color: var(--motion-blue);
  font: 650 10px/1.2 ui-monospace, monospace;
  letter-spacing: .16em;
  white-space: nowrap;
  opacity: clamp(0, calc((var(--p, 0) - .22) * 4), 1);
}
.device-silhouette { position: absolute; z-index: 5; width: 70px; color: #63798a; text-align: center; opacity: 0; transform: translateY(16px); }
.device-silhouette svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.device-silhouette span { display: block; margin-top: 8px; font: 650 8px/1 ui-monospace, monospace; letter-spacing: .1em; }
.device-foot { left: 11%; bottom: 20%; }
.device-watch { left: 27%; bottom: 9%; }
.device-ring { right: 28%; bottom: 8%; }
.device-phone { right: 12%; bottom: 20%; }
.device-medical { right: 7%; top: 28%; }

/* Scene 04 */
.deploy-frame { background: var(--motion-paper); }
.deploy-copy { left: 7vw; top: 11%; width: 70vw; }
.deploy-copy h2 { font-size: clamp(42px, 5vw, 76px); }
.rich-sensing-visual {
  position: absolute;
  z-index: 3;
  left: 7vw;
  top: 39%;
  width: min(31vw, 460px);
  height: 42%;
  overflow: hidden;
  background: #dce5ea;
  clip-path: polygon(0 4%, 94% 0, 100% 94%, 5% 100%);
  transform: translateX(calc(var(--p, 0) * -2vw)) scale(calc(1 - var(--p, 0) * .07));
}
.rich-sensing-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(244,247,251,.76)); }
.rich-sensing-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.8) contrast(1.02); }
.sensing-terms { position: absolute; z-index: 2; inset: auto 10% 8% 9%; display: flex; justify-content: space-between; color: #425f73; font: 650 8px/1 ui-monospace, monospace; letter-spacing: .08em; }
.deploy-flow { position: absolute; z-index: 2; left: 24vw; right: 7vw; top: 37%; width: 69vw; height: 47%; overflow: visible; }
.rich-line { fill: none; stroke: var(--motion-blue); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; opacity: .62; }
.deploy-token { left: 51%; top: 60%; opacity: 1; transform: translate(-50%, -50%); }
.deploy-devices { position: absolute; z-index: 5; right: 6vw; top: 44%; width: 25vw; height: 33%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px 34px; }
.deploy-device { display: grid; place-items: center; align-content: center; color: #526f84; opacity: 0; transform: translateX(18px); }
.deploy-device svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.25; }
.deploy-device b { margin-top: 8px; font: 650 8px/1 ui-monospace, monospace; letter-spacing: .1em; }

/* Scene 05 */
.time-frame { background: var(--motion-night); }
.time-frame::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--motion-paper);
  opacity: clamp(0, calc(1 - var(--p, 0) * 4.5), 1);
  pointer-events: none;
}
.time-copy { left: 7vw; top: 12%; color: white; }
.time-copy h2 { color: #f5f8fb; font-size: clamp(40px, 4.7vw, 72px); }
.time-copy .scene-index,
.finale-copy .scene-index { color: #7ea1ff; }
.motion-archive-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.time-labels { position: absolute; z-index: 5; left: 7vw; right: 7vw; bottom: 8%; display: flex; justify-content: space-between; color: rgba(255,255,255,.35); font: 600 9px/1 ui-monospace, monospace; letter-spacing: .1em; }
.time-labels span { transition: color .2s ease; }
.time-labels span.active { color: var(--motion-yellow); }
.archive-label { position: absolute; z-index: 5; right: 7vw; top: 19%; color: rgba(255,255,255,.48); font: 600 9px/1 ui-monospace, monospace; letter-spacing: .13em; }
.finale-copy {
  position: absolute;
  z-index: 12;
  left: 50%; top: 51%;
  width: min(1000px, 86vw);
  text-align: center;
  transform: translate(-50%, -46%);
  opacity: clamp(0, calc((var(--p, 0) - .63) * 4), 1);
  pointer-events: none;
}
.finale-copy h2 { color: #f5f8fb; font-size: clamp(48px, 6.2vw, 94px); }
.finale-copy p { margin: 28px auto 0; color: rgba(255,255,255,.65); font-size: clamp(14px, 1.25vw, 18px); }
.finale-actions { display: flex; justify-content: center; gap: 34px; margin-top: 38px; }
.finale-actions a {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  min-width: 190px;
  padding: 14px 0;
  color: #f5f8fb;
  border-bottom: 1px solid rgba(255,255,255,.35);
  font-size: 13px;
  text-align: left;
  pointer-events: auto;
  transition: border-color .2s ease, color .2s ease;
}
.finale-actions a:hover { color: #9ab5ff; border-color: #9ab5ff; }
.finale-actions i { margin-left: auto; font-style: normal; }

.narrative-home .site-footer {
  position: relative;
  z-index: 3;
  margin: 0;
  padding-top: 76px;
  border-radius: 0;
  background: var(--motion-night);
}
.narrative-home .site-footer::before { display: none; }
.narrative-home .site-footer .brand-text { color: white; }
.narrative-home .site-footer .brand-text small,
.narrative-home .site-footer .footer-tagline { color: rgba(255,255,255,.58); }
.narrative-home .site-footer .brand-mark::before { border-color: #8ab6d4; }
.narrative-home .site-footer .brand-mark::after { border-color: #d4e5ef; }

@keyframes cuePulse { 50% { transform: scaleX(.48); opacity: .4; } }

@media (max-width: 1080px) {
  .narrative-home .mobile-menu { background: rgba(248,251,253,.98); border-color: rgba(28,61,84,.1); }
  .narrative-home .mobile-menu a { color: var(--motion-ink); border-color: rgba(28,61,84,.1); }
  .gait-copy { width: 70vw; }
  .foot-observation { left: 5vw; width: 34vw; }
  .waveform-field, .gait-events { right: 5vw; width: 52vw; }
}

@media (max-width: 820px) {
  .narrative-scene { min-height: 145vh; }
  .human-motion-scene { min-height: 140vh; }
  .gait-scene, .shared-space-scene, .deploy-scene { min-height: 165vh; }
  .time-scene { min-height: 185vh; }
  .narrative-frame { min-height: 560px; }
  .scene-index { margin-bottom: 12px; font-size: 8px; }
  .scene-kicker { margin-bottom: 13px; font-size: 11px; }
  .scene-copy h1 { font-size: clamp(43px, 13vw, 66px); line-height: 1.02; }
  .compact-copy h2 { font-size: clamp(36px, 10.2vw, 53px); line-height: 1.03; }

  .human-poster { inset: 0; width: 100%; height: 100%; object-position: 63% 67%; }
  .human-wash { background: linear-gradient(180deg, rgba(244,247,251,.94) 0%, rgba(244,247,251,.68) 31%, rgba(244,247,251,.06) 58%), linear-gradient(0deg, rgba(244,247,251,.96), rgba(244,247,251,.35) 10%, transparent 24%); }
  .human-copy { left: 22px; right: 22px; top: 20%; width: auto; transform: none; }
  .landing-signal { left: 59%; top: 70%; width: 44vw; }
  .scroll-cue { left: 22px; bottom: 21px; }

  .gait-copy { left: 22px; right: 22px; top: 13%; width: auto; }
  .gait-copy .motion-sentence { top: 20px; max-width: calc(100vw - 44px); }
  .foot-observation { left: 4%; top: 30%; width: 54vw; height: 51%; transform: translate3d(calc(var(--p, 0) * 3vw), 0, 0) scale(calc(1 - var(--p, 0) * .08)); }
  .waveform-field { right: 18px; top: 49%; width: 51vw; height: 18%; padding-left: 24px; }
  .wave-lines path:not(:first-child) { display: none; }
  .wave-labels span:not(:first-child) { display: none; }
  .wave-labels { inset: 7% auto auto 0; }
  .gait-events { right: 18px; bottom: 15%; width: calc(100vw - 36px); }
  .token-from-gait { top: 57%; }

  .shared-copy { left: 22px; right: 22px; top: 13%; }
  .shared-copy h2 { font-size: clamp(36px, 10vw, 52px); }
  .space-core-label { top: 57%; font-size: 8px; }
  .device-silhouette { width: 55px; }
  .device-silhouette svg { width: 35px; height: 35px; }
  .device-foot { left: 4%; bottom: 15%; }
  .device-watch { left: 25%; bottom: 7%; }
  .device-ring { display: none; }
  .device-phone { right: 24%; bottom: 7%; }
  .device-medical { right: 3%; top: auto; bottom: 15%; }

  .deploy-copy { left: 22px; right: 22px; top: 12%; width: auto; }
  .deploy-copy h2 { font-size: clamp(35px, 9.8vw, 50px); }
  .rich-sensing-visual { left: 4vw; top: 36%; width: 54vw; height: 35%; }
  .deploy-flow { left: 30vw; right: auto; top: 39%; width: 68vw; height: 31%; }
  .deploy-token { left: 54%; top: 56%; width: 72px; }
  .deploy-devices { right: 3vw; top: 41%; width: 30vw; height: 29%; grid-template-columns: 1fr; gap: 9px; }
  .deploy-device svg { width: 32px; height: 32px; }
  .deploy-device:nth-child(2), .deploy-device:nth-child(4) { display: none; }
  .sensing-terms span:nth-child(2), .sensing-terms span:nth-child(3) { display: none; }

  .time-copy { left: 22px; right: 22px; top: 13%; }
  .time-copy h2 { font-size: clamp(33px, 9.1vw, 47px); }
  .archive-label { right: 22px; top: 28%; font-size: 8px; }
  .time-labels { left: 22px; right: 22px; bottom: 8%; font-size: 7px; }
  .finale-copy { width: calc(100vw - 38px); }
  .finale-copy h2 { font-size: clamp(42px, 12.2vw, 60px); }
  .finale-copy p { max-width: 300px; line-height: 1.7; }
  .finale-actions { flex-direction: column; align-items: center; gap: 8px; margin-top: 25px; }
  .finale-actions a { width: min(100%, 270px); }
}

@media (max-height: 680px) and (min-width: 821px) {
  .scene-copy h1 { font-size: clamp(52px, 6.4vw, 88px); }
  .compact-copy h2 { font-size: clamp(38px, 4.7vw, 66px); }
  .gait-copy, .shared-copy, .deploy-copy, .time-copy { top: 12%; }
  .rich-sensing-visual { top: 35%; height: 48%; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue i { animation: none; }
  .human-poster { transform: none; filter: none; }
}