/* V40 motion layer: native scroll remains the input; this file only visualizes progress. */
.captions .hero-story-step h1,.captions h2{display:grid;line-height:.94;row-gap:.13em}
.captions .hero-story-step h1 span,.captions h2 span{padding-bottom:.04em}
.captions{z-index:2}
.story-data{position:relative;background:#05090d}
.route-constellation{
  position:absolute;
  z-index:1;
  right:clamp(28px,5vw,78px);
  top:50%;
  width:min(38vw,510px);
  height:min(64vh,610px);
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.92;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .35s ease;
}
.scene-final .route-constellation{transform:translate(86px,-50%);opacity:.78}
.scene-final .route-node:not(.active){opacity:0}
.route-constellation::before{
  content:"";
  position:absolute;
  inset:8% 0;
  background:radial-gradient(circle at 50% var(--route-y,8%),rgba(19,216,237,.2),transparent 18%);
  filter:blur(12px);
}
.route-line{
  position:absolute;
  left:50%;
  top:8%;
  bottom:8%;
  width:1px;
  background:rgba(126,151,171,.22);
  overflow:hidden;
}
.route-line::after{
  content:"";
  position:absolute;
  inset:0;
  transform-origin:top;
  transform:scaleY(var(--route-progress,0));
  background:linear-gradient(var(--blue),var(--cyan));
  box-shadow:0 0 18px var(--cyan);
}
.route-packet{
  position:absolute;
  z-index:3;
  left:50%;
  top:var(--route-y,8%);
  width:11px;
  height:11px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#fff;
  box-shadow:0 0 0 7px rgba(19,216,237,.12),0 0 28px var(--cyan);
}
.route-node{
  --node-side:1;
  position:absolute;
  left:50%;
  top:var(--node-y);
  width:min(42%,190px);
  min-height:48px;
  display:flex;
  align-items:center;
  gap:11px;
  transform:translate(calc(-50% + var(--node-side) * 72%), -50%);
  color:#78838d;
  font:700 .64rem ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.12em;
  transition:color .24s ease,transform .5s cubic-bezier(.22,1,.36,1),opacity .24s ease;
  opacity:.38;
}
.route-node:nth-of-type(even){--node-side:-1;justify-content:flex-end;text-align:right}
.route-node:nth-of-type(6){--node-side:1;justify-content:flex-start;text-align:left}
.route-node::before{
  content:"";
  flex:0 0 9px;
  width:9px;
  height:9px;
  border:1px solid currentColor;
  border-radius:50%;
  background:#05090d;
}
.route-node:nth-of-type(even)::before{order:2}
.route-node:nth-of-type(6)::before{order:0}
.route-node.passed{color:#80a8bd;opacity:.7}
.route-node.active{
  color:#f6fbff;
  opacity:1;
  transform:translate(calc(-50% + var(--node-side) * 66%), -50%) scale(1.06);
}
.route-node.active::before{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 20px var(--cyan)}
.route-node b{color:var(--cyan);font-size:.7rem}

@media(min-width:901px){
  .captions li.active h1 span,.captions li.active h2 span{animation:headline-in .48s cubic-bezier(.2,.8,.2,1) both}
  .captions li.active h1 em,.captions li.active h2 em{animation:headline-in .56s .06s cubic-bezier(.2,.8,.2,1) both}
  .captions li.active>p,.captions li.active>.actions{animation:copy-in .46s .12s cubic-bezier(.22,1,.36,1) both}
  .captions li.active .story-data,.captions li.active .access-form,.captions li.active #accessNote{animation:copy-in .46s .18s cubic-bezier(.22,1,.36,1) both}
  .captions li.active .story-data>div{animation:datum-in .38s cubic-bezier(.22,1,.36,1) both}
  .captions li.active .story-data>div:nth-child(2){animation-delay:.08s}
  .captions li.active .story-data>div:nth-child(3){animation-delay:.16s}
}
@media(min-width:901px) and (max-width:1100px){
  html[lang=en] .captions .hero-story-step h1{font-size:clamp(3.6rem,7.2vw,7rem)}
  html[lang=en] .captions li:not(.hero-story-step) h2{font-size:clamp(3rem,5.4vw,5.4rem)}
}
@keyframes headline-in{from{opacity:0;transform:translate3d(-28px,10px,0) skewX(-3deg)}to{opacity:1;transform:none}}
@keyframes copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes datum-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

.btn{position:relative;isolation:isolate;overflow:hidden;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.btn::after{content:"";position:absolute;z-index:-1;inset:-40% auto -40% -35%;width:24%;transform:skewX(-18deg);background:rgba(255,255,255,.32);filter:blur(5px);transition:left .5s cubic-bezier(.22,1,.36,1)}
.btn:hover::after,.btn:focus-visible::after{left:118%}
.btn.primary:hover,.btn.primary:focus-visible{box-shadow:0 14px 42px rgba(61,140,255,.24)}
.tools button{transition:transform .24s ease,border-color .24s ease,background-color .24s ease}
.tools button:hover{transform:translateY(-2px);border-color:var(--cyan)}
.access-form{transition:border-color .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.access-form:focus-within{transform:translateY(-3px);box-shadow:0 26px 85px rgba(19,216,237,.12)}

@media(max-width:900px){
  .route-constellation{display:none}
  .captions li{opacity:.42;transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)!important;transform:translateY(22px)!important}
  .captions li.in-view{opacity:1;transform:none!important}
  .story-data{background:linear-gradient(90deg,rgba(5,9,13,.88),rgba(5,9,13,.48))}
}
@media(prefers-reduced-motion:reduce){
  .route-constellation{display:none}
  .captions li{opacity:1!important;transform:none!important}
}

/* V42: full-screen story, with each chapter using a distinct information form. */
.client-line{
  display:flex;
  width:min(680px,82vw);
  margin-top:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,9,13,.54);
}
.client-line span{
  flex:1;
  padding:10px 14px;
  color:#aeb8c1;
  font:700 .61rem ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.11em;
  text-align:center;
}
.client-line span+span{border-left:1px solid rgba(255,255,255,.12)}
.client-line span::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.policy-record{grid-template-columns:.65fr 1.35fr}
.policy-record::before,.fallback-record::before,.response-record::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--cyan);
  box-shadow:0 0 18px var(--cyan);
}
.fallback-record{grid-template-columns:.7fr 1.1fr 1.2fr}
.fallback-record dd:last-child{display:flex;flex-wrap:wrap;gap:5px}
.fault{padding:3px 6px;border:1px solid rgba(255,103,118,.5);color:#ff8390;font-size:.58rem}
.resolver-record{counter-reset:resolver}
.resolver-record>div{position:relative;padding-top:24px}
.resolver-record>div::before{content:"0" counter(resolver);counter-increment:resolver;position:absolute;top:7px;left:18px;color:var(--cyan);font:700 .52rem ui-monospace,SFMono-Regular,monospace}
.response-record{box-shadow:0 20px 80px rgba(19,216,237,.08)}
.response-record::after{content:"200 OK";position:absolute;right:12px;top:-22px;color:var(--cyan);font:700 .58rem ui-monospace,SFMono-Regular,monospace;letter-spacing:.1em}

body[data-scene="2"] .route-constellation{transform:translateY(-50%) scale(.96)}
body[data-scene="3"] .route-constellation{transform:translate(-2vw,-50%) scale(1.03)}
body[data-scene="4"] .route-constellation{transform:translate(1.5vw,-50%) scale(.96)}
body[data-scene="5"] .route-constellation{transform:translate(-1vw,-50%) scale(1.08)}
body[data-scene="6"] .route-constellation{transform:translate(1vw,-50%) scale(1.02)}
body[data-scene="7"] .route-constellation{transform:translate(-2vw,-50%) scale(.94)}

@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .captions li.active .client-line{animation:copy-in .46s .22s cubic-bezier(.22,1,.36,1) both}
  .captions li.active .client-line span::before{animation:client-online 1.8s ease-in-out infinite}
  .captions li.active .client-line span:nth-child(2)::before{animation-delay:.18s}
  .captions li.active .client-line span:nth-child(3)::before{animation-delay:.36s}
  .captions li.active .resolver-record>div{animation:resolver-pass 2.4s ease-in-out infinite}
  .captions li.active .resolver-record>div:nth-child(2){animation-delay:.35s}
  .captions li.active .resolver-record>div:nth-child(3){animation-delay:.7s}
}
@keyframes client-online{50%{opacity:.38;box-shadow:0 0 22px var(--cyan)}}
@keyframes resolver-pass{35%{background:rgba(19,216,237,.1)}65%,100%{background:transparent}}

html[data-theme=light] .client-line{border-color:rgba(17,23,29,.18);background:rgba(255,255,255,.76)}
html[data-theme=light] .client-line span{color:#35414b}
html[data-theme=light] .client-line span+span{border-color:rgba(17,23,29,.12)}

@media(max-width:900px){
  .client-line{width:100%}
  .policy-record,.fallback-record{grid-template-columns:1fr}
}