/* Stable content and brief binary trails: no cursor-driven movement or shaking. */
.js .reveal:not(.visible){opacity:0;transform:translateY(-8px)}
.reveal.binary-enter{animation:binary-arrival 680ms cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--reveal-delay,0ms);transition:none}
.binary-host{position:relative}
.binary-rain{position:absolute;inset:0;display:block;max-height:190px;overflow:hidden;pointer-events:none;z-index:3;color:#93dcff!important;font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.13em;mask-image:linear-gradient(180deg,transparent,#000 13%,#000 73%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 73%,transparent)}
.binary-rain>span{position:absolute;top:0;left:calc((var(--column) + .35) * 100% / var(--columns));color:inherit!important;writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;text-shadow:0 0 9px #007bff88;animation:binary-stream 700ms cubic-bezier(.15,.55,.35,1) both;animation-delay:calc(var(--reveal-delay,0ms) + var(--stream-delay,0ms));font:inherit;letter-spacing:inherit}
@keyframes binary-arrival{0%{opacity:0;transform:translateY(-8px);clip-path:inset(0 0 95% 0)}25%{opacity:.6;clip-path:inset(0 0 55% 0)}70%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes binary-stream{0%{opacity:0;transform:translateY(-75%)}22%{opacity:.75}55%{opacity:.45}100%{opacity:0;transform:translateY(110%)}}

/* Each diagram has its own restrained, continuous motion while on screen. */
.step-orbit{--orbit-radius:37px}
.step-orbit>span{top:50%;left:50%;margin:-3px 0 0 -3px;transform:rotate(-45deg) translateX(var(--orbit-radius));animation:orbital-node 8s linear infinite;animation-play-state:paused}
.step-orbit:not(.second):not(.third):after{animation:focus-ring 4s ease-in-out infinite;animation-play-state:paused}
.step-orbit.second:before{animation:align-first 9s ease-in-out infinite;animation-play-state:paused}
.step-orbit.second:after{animation:align-second 9s ease-in-out infinite;animation-play-state:paused}
.step-orbit.second>span{animation-duration:12s;animation-direction:reverse}
.step-orbit.third:before{transform-origin:center;animation:flow-first 7s ease-in-out infinite;animation-play-state:paused}
.step-orbit.third:after{transform-origin:center;animation:flow-second 7s ease-in-out infinite;animation-play-state:paused}
.step-orbit.third>span{animation-duration:10s}
.step-orbit.in-view>span,.step-orbit.in-view:before,.step-orbit.in-view:after{animation-play-state:running}
@keyframes orbital-node{from{transform:rotate(-45deg) translateX(var(--orbit-radius))}to{transform:rotate(315deg) translateX(var(--orbit-radius))}}
@keyframes focus-ring{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.12);opacity:1}}
@keyframes align-first{0%,15%{transform:rotate(45deg)}45%,65%{transform:rotate(135deg)}100%{transform:rotate(225deg)}}
@keyframes align-second{0%,15%{transform:rotate(45deg)}45%,65%{transform:rotate(-45deg)}100%{transform:rotate(-135deg)}}
@keyframes flow-first{0%,100%{transform:rotate(-18deg) scaleX(.95)}50%{transform:rotate(18deg) scaleX(1.05)}}
@keyframes flow-second{0%,100%{transform:rotate(18deg) scaleX(1.05)}50%{transform:rotate(-18deg) scaleX(.95)}}
.scroll-cue .scroll-trail>span{animation:scroll-light 3.4s ease-in-out infinite;animation-play-state:paused}
.scroll-cue.in-view .scroll-trail>span{animation-play-state:running}
@keyframes scroll-light{0%{opacity:0;transform:translateY(-16px)}25%{opacity:.8}70%{opacity:1}100%{opacity:0;transform:translateY(37px)}}
.motion-off .binary-rain{display:none}
.motion-off .reveal,.motion-off .reveal:not(.visible){opacity:1;transform:none;clip-path:none;animation:none}
.motion-off .step-orbit>span,.motion-off .step-orbit:before,.motion-off .step-orbit:after,.motion-off .scroll-cue .scroll-trail>span{animation-play-state:paused}
@media(max-width:700px){.step-orbit{--orbit-radius:27px}.binary-rain{font-size:9px;max-height:160px}}
@media(prefers-reduced-motion:reduce){.binary-rain{display:none}.reveal,.js .reveal:not(.visible){opacity:1;transform:none;clip-path:none;animation:none}.step-orbit>span,.step-orbit:before,.step-orbit:after,.scroll-cue .scroll-trail>span{animation:none!important}}

/* A bright signal travels along the IT monitor's existing zigzag. */
.service-signal .signal-line{stroke:#428eea;opacity:.7}
.service-signal .signal-pulse{stroke:#d4f3ff;stroke-width:1.8;stroke-dasharray:18 102;stroke-dashoffset:18;opacity:0;animation:signal-trace 2.6s linear infinite;animation-play-state:paused}
.service-signal.in-view .signal-pulse{animation-play-state:running}
@keyframes signal-trace{0%{stroke-dashoffset:18;opacity:0}12%{opacity:1}82%{opacity:1}100%{stroke-dashoffset:-102;opacity:0}}
.motion-off .service-signal .signal-pulse{animation-play-state:paused;visibility:hidden}
@media(prefers-reduced-motion:reduce){.service-signal .signal-pulse{display:none;animation:none!important}}

/* Ten route segments arrive in order, then the destination lights up. */
.js .step-map .map-reveal{animation:treasure-route 6s steps(10,end) infinite;animation-play-state:paused}
.js .step-map .map-destination{transform-origin:82px 25px;animation:treasure-arrival 6s ease-out infinite;animation-play-state:paused}
.js .step-map.in-view .map-reveal,.js .step-map.in-view .map-destination{animation-play-state:running}
@keyframes treasure-route{0%,8%{stroke-dashoffset:100}62%,100%{stroke-dashoffset:0}}
@keyframes treasure-arrival{0%,62%{opacity:0;transform:scale(.7)}69%,94%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.motion-off .step-map .map-reveal{animation:none;stroke-dashoffset:0}
.motion-off .step-map .map-destination{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .step-map .map-reveal{animation:none;stroke-dashoffset:0}.js .step-map .map-destination{animation:none;opacity:1;transform:none}}

/* One shared clock: each block lands before the next arrives. */
.js .step-build .build-block{animation-duration:7s;animation-timing-function:cubic-bezier(.22,.75,.3,1);animation-iteration-count:infinite;animation-play-state:paused}
.js .step-build.in-view .build-block{animation-play-state:running}
.js .step-build .build-block-1{animation-name:block-place-1}
@keyframes block-place-1{0%,6%{opacity:0;transform:translateY(-18px)}12%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-2{animation-name:block-place-2}
@keyframes block-place-2{0%,12%{opacity:0;transform:translateY(-18px)}18%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-3{animation-name:block-place-3}
@keyframes block-place-3{0%,18%{opacity:0;transform:translateY(-18px)}24%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-4{animation-name:block-place-4}
@keyframes block-place-4{0%,24%{opacity:0;transform:translateY(-18px)}30%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-5{animation-name:block-place-5}
@keyframes block-place-5{0%,30%{opacity:0;transform:translateY(-18px)}36%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-6{animation-name:block-place-6}
@keyframes block-place-6{0%,36%{opacity:0;transform:translateY(-18px)}42%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-7{animation-name:block-place-7}
@keyframes block-place-7{0%,42%{opacity:0;transform:translateY(-18px)}48%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-8{animation-name:block-place-8}
@keyframes block-place-8{0%,48%{opacity:0;transform:translateY(-18px)}54%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-9{animation-name:block-place-9}
@keyframes block-place-9{0%,54%{opacity:0;transform:translateY(-18px)}60%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.js .step-build .build-block-10{animation-name:block-place-10}
@keyframes block-place-10{0%,60%{opacity:0;transform:translateY(-18px)}66%,88%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(0)}}
.motion-off .step-build .build-block{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .step-build .build-block{animation:none;opacity:1;transform:none}}