/* Three finite accents outside the course illustrations. */
.hero-start{border:0;text-align:left;cursor:pointer;font:inherit}
.motion-ready .hero-start{animation:none}
.hero-start b{display:flex;align-items:center;gap:7px}
.hero-start b i{font-size:8px;font-style:normal}
.hero-start:focus-visible{outline-color:var(--paper)}
.hero-start:disabled{opacity:1;cursor:default}
.hero-start:hover{box-shadow:0 12px 35px #0005}
.hero-boot{position:absolute;inset:0;z-index:2;border-radius:140px 0 0 0;overflow:hidden;pointer-events:none;opacity:0}
.hero-boot>svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--orange);stroke-width:1.6}
.boot-grid{position:absolute;inset:0;background-image:linear-gradient(#ff6c3e20 1px,transparent 1px),linear-gradient(90deg,#ff6c3e20 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(transparent,#0008 25%,#000 65%,transparent)}
.boot-route{stroke-dasharray:100;stroke-dashoffset:100}
.boot-ring{stroke-width:1;stroke-dasharray:4 7;transform-origin:270px 220px;opacity:0}
.boot-cross{stroke-width:2;opacity:0}
.boot-node{fill:var(--orange);stroke:var(--ink);stroke-width:3;opacity:0}
.boot-readout{position:absolute;top:72px;right:20px;width:183px;height:28px;font-family:monospace;font-size:9px;letter-spacing:.8px}
.boot-phase{position:absolute;inset:0;padding:7px 10px;background:#171918e8;border-left:2px solid var(--orange);color:#f5f4ef;opacity:0;white-space:nowrap}
.hero-visual.is-booting .hero-boot{animation:boot-overlay 3.8s ease both}
.hero-visual.is-booting .boot-route{animation:boot-trace 3.8s ease both}
.hero-visual.is-booting .route-b{animation-delay:.24s}
.hero-visual.is-booting .boot-ring{animation:boot-orbit 3.8s ease both}
.hero-visual.is-booting .ring-inner{animation-direction:reverse}
.hero-visual.is-booting .boot-cross{animation:boot-detect 3.8s ease both}
.hero-visual.is-booting .boot-node{animation:boot-node 3.8s ease both}
.hero-visual.is-booting .node-b{animation-delay:.25s}.hero-visual.is-booting .node-c{animation-delay:.5s}
.hero-visual.is-booting .phase-one{animation:boot-phase-one 3.8s linear both}
.hero-visual.is-booting .phase-two{animation:boot-phase-two 3.8s linear both}
.hero-visual.is-booting .phase-three{animation:boot-phase-three 3.8s linear both}
.hero-visual.is-booting .hero-start{animation:none;transform:rotate(-3deg) translateY(-3px)}
.hero-visual>img{transition:filter 1s ease}
.hero-visual.has-booted>img{filter:brightness(1) saturate(.86)}
.hero-visual.is-booting:before{animation:project-scan 3.8s ease both}
@keyframes boot-overlay{0%,100%{opacity:0}10%,87%{opacity:1}}
@keyframes boot-trace{0%,8%{stroke-dashoffset:100;opacity:0}18%{opacity:1}60%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-20;opacity:0}}
@keyframes boot-orbit{0%{opacity:0;transform:rotate(-65deg) scale(1.15)}24%,70%{opacity:.9}86%,100%{opacity:0;transform:rotate(75deg) scale(.9)}}
@keyframes boot-detect{0%,17%,100%{opacity:0}30%,72%{opacity:1}}
@keyframes boot-node{0%,24%,100%{opacity:0}40%,76%{opacity:1}}
@keyframes boot-phase-one{0%,5%,35%,100%{opacity:0;translate:0 4px}10%,28%{opacity:1;translate:0 0}}
@keyframes boot-phase-two{0%,34%,66%,100%{opacity:0;translate:0 4px}39%,59%{opacity:1;translate:0 0}}
@keyframes boot-phase-three{0%,65%,100%{opacity:0;translate:0 4px}70%,90%{opacity:1;translate:0 0}}

/* A single drawn route follows the three real steps, rather than adding a new section. */
.steps{position:relative;--journey-progress:0%}
.journey-line{position:absolute;left:0;right:0;top:0;height:1px;background:#aeb5a1;pointer-events:none}
.journey-line>span{display:block;position:relative;width:var(--journey-progress);height:2px;background:var(--orange);transition:width .75s cubic-bezier(.4,0,.2,1)}
.journey-line>span:after{content:"";position:absolute;right:-3px;top:-2px;width:6px;height:6px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 4px #ff6c3e14;opacity:0}
.steps.is-travelling .journey-line>span:after{opacity:1}
.steps article>b{transition:color .45s}
.steps article.step-complete>b{color:#dc5b31}
.steps article.step-arrives>b{animation:step-arrives .65s ease both}
@keyframes step-arrives{0%{opacity:.55;translate:0 5px}65%{translate:0 -2px}100%{opacity:1;translate:0 0}}

/* The native dialog keeps its focus trap and Escape handling. */
#lightbox{will-change:transform,opacity;transform-origin:center}
#lightbox[open]::backdrop{animation:gallery-backdrop .38s ease both}
#lightbox.is-closing::backdrop{animation:gallery-backdrop-out .28s ease both}
#lightbox[open] #lightbox-caption{animation:gallery-caption .3s .2s ease both}
@keyframes gallery-backdrop{from{background-color:#0000}to{background-color:#000d}}
@keyframes gallery-backdrop-out{from{background-color:#000d}to{background-color:#0000}}
@keyframes gallery-caption{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@media(max-width:640px){
 .hero-boot{border-radius:100px 0 0 0}.boot-readout{right:14px;top:62px;width:172px;font-size:8px}
 .journey-line{left:-10px;right:auto;top:38px;bottom:24px;height:auto;width:1px}
 .journey-line>span{height:var(--journey-progress);width:2px;transition:height .75s cubic-bezier(.4,0,.2,1)}
 .journey-line>span:after{right:-2px;top:auto;bottom:-3px}
}
@media(prefers-reduced-motion:reduce){
 .hero-boot,.hero-visual:before{display:none!important}
 .journey-line>span,.hero-visual>img{transition:none}
 .step-arrives>b,#lightbox[open]::backdrop,#lightbox.is-closing::backdrop,#lightbox-caption{animation:none!important}
 .hero-start b i{display:none}
}