/* Keep whole clouds inside the flight area, including on short and narrow screens. */
.sky-journey{--sky-height:220px;position:relative;overflow:hidden;height:var(--sky-height);background:linear-gradient(180deg,#f7faf5 0%,#edf3f2 45%,#fcfbf7 100%);pointer-events:none;isolation:isolate}
.sky-stage{position:relative;max-width:1200px;width:100%;height:100%;margin:auto}
.sky-route{position:absolute;inset:10% 0;width:100%;height:80%;opacity:.45}
.sky-route path{fill:none;stroke:#9bae9f;stroke-width:1.3;stroke-dasharray:3 9;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sky-cloud{position:absolute;width:clamp(180px,28vw,350px);max-width:min(calc(100% - 48px),calc((var(--sky-height) - 24px)*24/11));height:auto;filter:drop-shadow(0 8px 9px #5d786318);transform:translate3d(var(--cloud-drift,0px),0,0)}
.sky-cloud--far{left:max(24px,8%);top:12px;width:clamp(160px,22vw,280px);opacity:.82;z-index:1}
.sky-cloud--near{right:max(24px,9%);top:12px;z-index:3}
.sky-cloud--front{left:max(24px,4%);bottom:12px;width:clamp(240px,34vw,440px);z-index:4}
.sky-plane{position:absolute;left:0;top:0;width:clamp(90px,10vw,135px);max-width:calc(100% - 48px);z-index:10;transform:translate3d(var(--flight-x,24px),var(--flight-y,24px),0) rotate(var(--flight-tilt,-8deg));filter:drop-shadow(0 6px 5px #34564750)}
.sky-plane img{width:100%;height:auto}
.sky-spark{position:absolute;font-size:17px;color:#bba47e;opacity:.75}.sky-spark--one{left:35%;top:24%}.sky-spark--two{right:12%;top:12%;font-size:11px}
.reveal-ready{opacity:0;translate:0 calc(var(--layer-shift,0px) + 16px);transition:opacity .7s ease,translate .8s cubic-bezier(.2,.7,.3,1)}
.reveal-ready.is-visible{opacity:1;translate:0 var(--layer-shift,0px)}
@media(max-width:760px){.sky-journey{--sky-height:240px}.sky-cloud--near{right:max(24px,4%);top:118px}.sky-cloud--far{left:max(24px,4%);top:108px}.sky-plane{width:112px}.sky-route{inset:0 0 auto;height:128px}.sky-spark--one{left:46%}}
@media(max-width:520px){.sky-journey{--sky-height:230px}.sky-cloud--near{width:190px}.sky-cloud--far{width:160px}.sky-cloud--front{width:240px}.sky-route{opacity:.45}}
@media(orientation:landscape) and (max-height:600px) and (min-width:761px){.sky-journey{--sky-height:160px}}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;translate:none}.sky-plane{left:50%;top:20px;transform:translateX(-50%) rotate(-8deg)}.sky-cloud{transform:none}}
@media print{.sky-journey{display:none}.reveal-ready{opacity:1;translate:none}}
