.about-mobile-route, .about-mobile-status { display: none; }
.about[data-mobile-journey] {
  --journey-width: 100vw;
  --journey-art-size: 210px;
  /* Bring the story into the final viewport of the incoming wave. Keeping
     its 560svh travel unchanged removes the empty handoff, not chapter time. */
  margin-top: -100lvh;
  height: calc(100lvh + 560svh);
  background: transparent;
  overflow: clip;
  view-timeline-name: --about-mobile;
  view-timeline-axis: block;
}
.about[data-mobile-journey] .about-stage {
  position: sticky;
  top: 0;
  height: 100lvh;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.about[data-mobile-journey] .about-stage::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--scene-bg, #000);
  opacity: var(--journey-cover, 0);
  pointer-events: none;
}
.about[data-mobile-timeline] .about-stage::before {
  animation: about-mobile-arrival 1s linear both;
  animation-timeline: --about-mobile;
  /* Fixed small-viewport distances align with the wave's .82–.94 seal,
     including while Safari expands or retracts its browser chrome. */
  animation-range: contain -36svh contain -12svh;
}
.about[data-mobile-journey] .about-title {
  margin: 0;
  padding: 22px 24px 0;
  font-size: clamp(38px, 12vw, 52px);
}
.about[data-mobile-journey] .about-scene {
  position: absolute;
  inset: 91px 0 calc(34px + max(0px, 100lvh - 100svh) + env(safe-area-inset-bottom));
  width: 100%;
}
.about[data-mobile-journey] .about-story,
.about[data-mobile-journey] .about-story-track { height: 100%; }
.about[data-mobile-journey] .about-story-track {
  will-change: transform;
  position: relative;
  width: calc(var(--journey-width) * 6);
}
.about[data-mobile-journey] .about-chapters {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
}
/* One layer per chapter, and none for the rail itself. A single layer six screens wide
   loses pieces on iPhone: text and artwork vanish while the rail stands still. */
.about[data-mobile-journey] .about-chapters > li:not([data-mobile-near]) { visibility: hidden; }
.about[data-mobile-journey] .about-chapters > li {
  will-change: transform;
  flex: 0 0 var(--journey-width);
  width: var(--journey-width);
  height: 100%;
  padding: 0;
  border: 0;
}
.about[data-mobile-journey] .about-node-copy {
  position: absolute;
  top: calc(var(--journey-art-size) + 52px);
  left: 28px;
  right: 28px;
}
.about[data-mobile-journey] .about-node-art {
  position: absolute;
  top: 0;
  left: calc(50% - var(--journey-art-size) / 2);
  width: var(--journey-art-size);
  height: var(--journey-art-size);
  margin: 0;
  pointer-events: auto;
}
.about[data-mobile-journey] .about-art-surface { height: 100%; }
.about[data-mobile-journey] .about-art-source { width: 100%; height: 100%; object-fit: contain; }
.about[data-mobile-journey] .about-chapter-label { margin-bottom: 12px; font-size: 10px; letter-spacing: .09em; }
.about[data-mobile-journey] h3 { font-size: clamp(24px, 6.7vw, 30px); line-height: 1.08; }
.about[data-mobile-journey] h4 { margin-bottom: 7px; font-size: 16px; }
.about[data-mobile-journey] .about-chapter-body { margin-top: 16px; }
.about[data-mobile-journey] .about-chapter-body p { margin: 0 0 9px; font-size: 14px; line-height: 1.46; }
.about[data-mobile-journey] .about-chapter-note { margin-top: 12px; padding-top: 10px; font-size: 12px; line-height: 1.4; }
.about[data-mobile-journey] .about-dot {
  left: calc(50% - 4px);
  top: calc(var(--journey-art-size) + 20px);
  width: 8px;
  height: 8px;
  z-index: 1;
  background: #7396ff;
}
.about[data-mobile-journey] .about-dot::before {
  /* Paint the falloff inside the layer instead of letting a blur extend past
     its bounds. WebKit can clip that filtered dot to a visible square. */
  inset: -32px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgb(50 104 255 / .58) 0%,
    rgb(50 104 255 / .31) 19%,
    rgb(50 104 255 / .10) 42%,
    rgb(50 104 255 / 0) 100%);
  filter: none;
  opacity: .15;
  transition: opacity .6s;
}
.about[data-mobile-journey] [data-mobile-active] .about-dot::before { opacity: .7; }
.about[data-mobile-journey] .about-mobile-route {
  display: block;
  position: absolute;
  top: var(--journey-route-top, 0);
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
}
.about-mobile-route-drawn { position: absolute; inset: 0 50% 0 0; overflow: hidden; }
.about-mobile-route-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--journey-width) * 2);
  height: 100%;
  overflow: visible;
  will-change: transform;
}
.about-mobile-route path { stroke-linecap: round; stroke-width: 1; }
.about-mobile-route-base { stroke: #829bce; opacity: .25; }
.about-mobile-route-line { stroke: #316bff; stroke-width: 1.3; }
.about-mobile-route-glow { stroke: #326cff; stroke-width: 7; filter: blur(5px); opacity: .38; }
.about[data-mobile-journey] .about-mobile-status {
  display: block;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(8px + max(0px, 100lvh - 100svh) + env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .04em;
  opacity: .52;
}
@keyframes about-mobile-arrival {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-height: 660px) {
  .about[data-mobile-journey] .about-title { padding-top: 16px; font-size: 36px; }
  .about[data-mobile-journey] .about-scene { top: 67px; }
  .about[data-mobile-journey] .about-node-copy { left: 22px; right: 22px; }
  .about[data-mobile-journey] .about-chapter-label { margin-bottom: 7px; }
  .about[data-mobile-journey] h3 { font-size: 23px; }
  .about[data-mobile-journey] .about-chapter-body { margin-top: 10px; }
  .about[data-mobile-journey] .about-chapter-body p { font-size: 13px; line-height: 1.4; }
  .about[data-mobile-journey] .about-chapter-note { font-size: 11px; margin-top: 8px; padding-top: 8px; }
}