/* Separate chapters, joined by a quiet vertical light trail. No scroll snapping. */
main.journey-ready{
  --chapter-edge:rgba(160,187,230,.14);
  --chapter-shadow:rgba(0,0,0,.45);
  --chapter-light:rgba(112,153,232,.1);
  --chapter-face:linear-gradient(160deg,#0c1018 0%,#06080d 48%,#030405 100%);
  --chapter-face-alt:linear-gradient(150deg,#0b0c14 0%,#07080c 55%,#030405 100%);
  --bridge-rgb:151,184,240;
  --chapter-gutter:clamp(12px,2vw,32px);
}
html[data-theme="light"] main.journey-ready{
  --chapter-edge:rgba(65,91,135,.17);
  --chapter-shadow:rgba(38,63,106,.14);
  --chapter-light:rgba(100,143,220,.13);
  --chapter-face:linear-gradient(155deg,#f0f4fb 0%,#fafbfd 46%,#fff 100%);
  --chapter-face-alt:linear-gradient(155deg,#f2f1f9 0%,#fafbfe 46%,#fff 100%);
  --bridge-rgb:68,108,175;
}
main.journey-ready>.rule-line{display:none}
main.journey-ready>.chapter-section{
  margin-inline:var(--chapter-gutter);
  padding-block:clamp(52px,6vw,88px);
  border:1px solid var(--chapter-edge);
  border-radius:clamp(24px,3vw,44px);
  background:var(--chapter-face);
  box-shadow:0 22px 64px -42px var(--chapter-shadow),inset 0 1px 0 var(--chapter-light);
  transition:border-color 1.3s ease,box-shadow 1.3s ease;
  /* Keep sticky scenes and the fixed network in their original coordinate spaces. */
}
main.journey-ready>.chapter-section.chapter-alternate{background:var(--chapter-face-alt)}
main.journey-ready>.chapter-section.chapter-entered{
  border-top-color:rgba(var(--bridge-rgb),.3);
  box-shadow:0 24px 70px -42px var(--chapter-shadow),inset 0 1px 0 rgba(var(--bridge-rgb),.18);
}
main.journey-ready>.chapter-section.statement{
  padding-top:0;
  background:linear-gradient(180deg,rgba(12,16,24,.52),rgba(4,6,10,.28) 60%,var(--bg));
}
html[data-theme="light"] main.journey-ready>.chapter-section.statement{
  background:linear-gradient(180deg,rgba(239,244,252,.58),rgba(248,250,255,.25) 60%,var(--bg));
}
main.journey-ready>section[data-scroll-destination]{scroll-margin-top:76px}
main.journey-ready>.hero{padding-bottom:clamp(36px,5vh,64px)}
main.journey-ready>.finale{margin-bottom:36px}
.chapter-entrance{position:absolute;top:-1px;left:50%;width:min(54%,680px);height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--bridge-rgb),.65),transparent);opacity:.2;transform:translateX(-50%) scaleX(.55);transition:opacity 1.6s ease,transform 1.8s cubic-bezier(.22,1,.36,1)}
.chapter-entrance::before{content:"";position:absolute;top:0;left:15%;width:70%;height:48px;background:radial-gradient(ellipse at 50% 0,rgba(var(--bridge-rgb),.13),transparent 70%)}
.chapter-entered>.chapter-entrance{opacity:1;transform:translateX(-50%) scaleX(1)}

/* The bridge belongs to both adjacent chapters, rather than to the previous copy. */
.section-bridge{
  position:relative;display:grid;place-items:center;
  height:clamp(156px,20vh,200px);margin-inline:var(--chapter-gutter);
  isolation:isolate;background:radial-gradient(ellipse 180px 50px at 50% 100%,rgba(var(--bridge-rgb),.06),transparent 75%);
}
.section-bridge::before,.section-bridge::after{
  content:"";position:absolute;left:50%;width:5px;height:5px;
  border-radius:50%;background:rgb(var(--bridge-rgb));
  box-shadow:0 0 12px rgba(var(--bridge-rgb),.3);
  transform:translateX(-50%);opacity:.48;
}
.section-bridge::before{top:-3px}.section-bridge::after{bottom:-3px}
.bridge-track{position:absolute;inset:0 auto 0 50%;width:1px;overflow:hidden;background:linear-gradient(180deg,rgba(var(--bridge-rgb),.26),rgba(var(--bridge-rgb),.09) 48%,rgba(var(--bridge-rgb),.35));z-index:-1}
.bridge-track::after{
  content:"";position:absolute;inset:-50% 0 auto;height:50%;
  background:linear-gradient(transparent,rgba(var(--bridge-rgb),.9),transparent);
  animation:bridge-travel 5.8s cubic-bezier(.4,0,.25,1) infinite;
  animation-play-state:paused;
}
.section-bridge .section-cue{
  display:grid;justify-items:center;gap:6px;
  min-width:176px;width:max-content;max-width:100%;margin:0;padding:10px 20px;
  color:var(--text-2);background:var(--bg);border-radius:24px;
  text-decoration:none;text-align:center;font-size:14px;line-height:1.5;letter-spacing:.1em;
  transition:color .3s,box-shadow .4s;
}
.section-bridge .section-cue:hover{color:var(--link);box-shadow:0 0 38px -14px rgba(var(--bridge-rgb),.28)}
.section-bridge .section-cue:focus-visible{outline:2px solid var(--link);outline-offset:4px}
.section-cue .cue-label{animation:section-label 5.8s ease-in-out infinite;animation-play-state:paused}
.section-cue .cue-next{display:flex;align-items:center;justify-content:center;gap:9px;font-size:15px;letter-spacing:.04em;font-weight:500;color:var(--text)}
.cue-next small{font:10px var(--f-mono);letter-spacing:.08em;color:var(--text-3)}
.section-cue svg{display:block;width:24px;height:30px;overflow:visible;color:var(--ice)}
.section-cue path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.15;animation:section-flow 5.8s ease-in-out infinite;animation-play-state:paused}
.section-cue path:nth-child(2){animation-delay:.34s}.section-cue path:nth-child(3){animation-delay:.68s}
.section-bridge.is-visible .bridge-track::after,.section-bridge.is-visible .cue-label,.section-bridge.is-visible .section-cue path{animation-play-state:running}
@keyframes bridge-travel{0%,12%{transform:translateY(0);opacity:0}28%{opacity:.9}80%{opacity:.6}100%{transform:translateY(320%);opacity:0}}
@keyframes section-flow{0%,12%{opacity:.18;transform:translateY(-4px);filter:blur(.8px)}35%{opacity:.95;transform:translateY(0);filter:blur(0)}63%{opacity:.4;transform:translateY(4px);filter:blur(.35px)}82%,100%{opacity:.16;transform:translateY(7px);filter:blur(.9px)}}
@keyframes section-label{0%,100%{opacity:.65}36%,50%{opacity:1}80%{opacity:.65}}
@media(max-width:600px){
  main.journey-ready>.chapter-section{padding-block:40px 44px;border-radius:24px}
  main.journey-ready>.chapter-section>.wrap{padding-inline:20px}
  .section-bridge{height:144px}
  .section-bridge .section-cue{gap:4px;padding:8px 16px;font-size:12px;min-width:156px}
  .section-cue .cue-next{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .section-bridge *,.section-bridge *::after{animation:none!important}
  .section-cue path,.section-cue .cue-label{opacity:.75;transform:none;filter:none}
  main.journey-ready>.chapter-section{transition:none}
  .chapter-entrance{transition:none}
  html:has(main.journey-ready){scroll-behavior:auto}
}
