/* A fixed soft mask, a rigid image layer, no image deformation or camera motion. */
.hero-cloud-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-cloud-window { position: absolute; }
.hero-cloud-window, .hero-cloud-art {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221672%22%20height%3D%22941%22%20viewBox%3D%220%200%201672%20941%22%3E%0A%3Cdefs%3E%0A%20%3Cfilter%20id%3D%22feather%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%227%22%2F%3E%3C%2Ffilter%3E%0A%20%3ClinearGradient%20id%3D%22left%22%3E%3Cstop%20stop-color%3D%22black%22%2F%3E%3Cstop%20offset%3D%22.075%22%20stop-color%3D%22white%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3Cmask%20id%3D%22sky%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221672%22%20height%3D%22941%22%3E%0A%20%20%3Cg%20filter%3D%22url%28%23feather%29%22%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20d%3D%22M-40%20-40%20H1712%20V368%20H1510%20V235%20H1430%20V294%20H1260%20V418%20H1150%20V488%20H904%20V500%20H-40%20Z%22%2F%3E%0A%20%20%20%3Crect%20x%3D%22900%22%20y%3D%22234%22%20width%3D%22264%22%20height%3D%22310%22%20rx%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221195%22%20cy%3D%22285%22%20rx%3D%2275%22%20ry%3D%2272%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221605%22%20cy%3D%22137%22%20rx%3D%2243%22%20ry%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221510%22%20cy%3D%22164%22%20rx%3D%2237%22%20ry%3D%2234%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221475%22%20cy%3D%22196%22%20rx%3D%2225%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221613%22%20cy%3D%22312%22%20rx%3D%2229%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221578%22%20cy%3D%22341%22%20rx%3D%2229%22%20ry%3D%2223%22%20fill%3D%22black%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%3C%2Fmask%3E%0A%3Cmask%20id%3D%22safety%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221672%22%20height%3D%22941%22%3E%20%20%3Cg%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20d%3D%22M-40%20-40%20H1712%20V368%20H1510%20V235%20H1430%20V294%20H1260%20V418%20H1150%20V488%20H904%20V500%20H-40%20Z%22%2F%3E%0A%20%20%20%3Crect%20x%3D%22900%22%20y%3D%22234%22%20width%3D%22264%22%20height%3D%22310%22%20rx%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221195%22%20cy%3D%22285%22%20rx%3D%2275%22%20ry%3D%2272%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221605%22%20cy%3D%22137%22%20rx%3D%2243%22%20ry%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221510%22%20cy%3D%22164%22%20rx%3D%2237%22%20ry%3D%2234%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221475%22%20cy%3D%22196%22%20rx%3D%2225%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221613%22%20cy%3D%22312%22%20rx%3D%2229%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221578%22%20cy%3D%22341%22%20rx%3D%2229%22%20ry%3D%2223%22%20fill%3D%22black%22%2F%3E%0A%20%20%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%0A%3Cg%20mask%3D%22url%28%23safety%29%22%3E%3Crect%20width%3D%221672%22%20height%3D%22941%22%20fill%3D%22url%28%23left%29%22%20mask%3D%22url%28%23sky%29%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221672%22%20height%3D%22941%22%20viewBox%3D%220%200%201672%20941%22%3E%0A%3Cdefs%3E%0A%20%3Cfilter%20id%3D%22feather%22%20x%3D%22-10%25%22%20y%3D%22-10%25%22%20width%3D%22120%25%22%20height%3D%22120%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%227%22%2F%3E%3C%2Ffilter%3E%0A%20%3ClinearGradient%20id%3D%22left%22%3E%3Cstop%20stop-color%3D%22black%22%2F%3E%3Cstop%20offset%3D%22.075%22%20stop-color%3D%22white%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22white%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3Cmask%20id%3D%22sky%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221672%22%20height%3D%22941%22%3E%0A%20%20%3Cg%20filter%3D%22url%28%23feather%29%22%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20d%3D%22M-40%20-40%20H1712%20V368%20H1510%20V235%20H1430%20V294%20H1260%20V418%20H1150%20V488%20H904%20V500%20H-40%20Z%22%2F%3E%0A%20%20%20%3Crect%20x%3D%22900%22%20y%3D%22234%22%20width%3D%22264%22%20height%3D%22310%22%20rx%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221195%22%20cy%3D%22285%22%20rx%3D%2275%22%20ry%3D%2272%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221605%22%20cy%3D%22137%22%20rx%3D%2243%22%20ry%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221510%22%20cy%3D%22164%22%20rx%3D%2237%22%20ry%3D%2234%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221475%22%20cy%3D%22196%22%20rx%3D%2225%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221613%22%20cy%3D%22312%22%20rx%3D%2229%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221578%22%20cy%3D%22341%22%20rx%3D%2229%22%20ry%3D%2223%22%20fill%3D%22black%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%3C%2Fmask%3E%0A%3Cmask%20id%3D%22safety%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221672%22%20height%3D%22941%22%3E%20%20%3Cg%3E%0A%20%20%20%3Cpath%20fill%3D%22white%22%20d%3D%22M-40%20-40%20H1712%20V368%20H1510%20V235%20H1430%20V294%20H1260%20V418%20H1150%20V488%20H904%20V500%20H-40%20Z%22%2F%3E%0A%20%20%20%3Crect%20x%3D%22900%22%20y%3D%22234%22%20width%3D%22264%22%20height%3D%22310%22%20rx%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221195%22%20cy%3D%22285%22%20rx%3D%2275%22%20ry%3D%2272%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221605%22%20cy%3D%22137%22%20rx%3D%2243%22%20ry%3D%2228%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221510%22%20cy%3D%22164%22%20rx%3D%2237%22%20ry%3D%2234%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221475%22%20cy%3D%22196%22%20rx%3D%2225%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221613%22%20cy%3D%22312%22%20rx%3D%2229%22%20ry%3D%2222%22%20fill%3D%22black%22%2F%3E%0A%20%20%20%3Cellipse%20cx%3D%221578%22%20cy%3D%22341%22%20rx%3D%2229%22%20ry%3D%2223%22%20fill%3D%22black%22%2F%3E%0A%20%20%3C%2Fg%3E%3C%2Fmask%3E%3C%2Fdefs%3E%0A%3Cg%20mask%3D%22url%28%23safety%29%22%3E%3Crect%20width%3D%221672%22%20height%3D%22941%22%20fill%3D%22url%28%23left%29%22%20mask%3D%22url%28%23sky%29%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  mask-mode: luminance;
}
.hero-cloud-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; will-change: transform; }
.hero-content { will-change: transform; }
.hero-cloud-art.is-flowing { animation: harbor-cloud-pass 64s linear infinite; animation-play-state: paused; }
.hero-cloud-art.is-flowing.is-playing { animation-play-state: running; }
@keyframes harbor-cloud-pass { from { transform: translateX(0); } to { transform: translateX(var(--cloud-travel)); } }
.hero-cloud-control {
  position: absolute; z-index: 3; right: 1rem; bottom: 1rem;
  min-height: 48px; padding: .5rem .85rem;
  color: var(--ink); background: rgba(255,250,240,.9);
  border: 1px solid rgba(16,45,69,.25); border-radius: 2px;
  font: inherit; font-size: .8rem; cursor: pointer;
}
.hero-cloud-control:hover { background: var(--paper-light); border-color: var(--ink); }
.hero-cloud-control:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero-cloud-control[hidden] { display: none; }
@media (max-width:760px), (prefers-reduced-motion:reduce) {
  .hero-cloud-stage, .hero-cloud-control { display: none; }
}

/* Both passes restore the r22 speed: 18 source pixels / 16 seconds.
   The broad field travels 72 pixels in 64 seconds at the same velocity.
   The first view matches the original bitmap. The second pass starts later,
   invisible at its own wrap and covering the lower pass's wrap. */
.hero-cloud-front { opacity: 0; will-change: transform, opacity; }
.hero-cloud-front.is-flowing {
  animation: harbor-cloud-pass 64s linear infinite, harbor-cloud-blend 64s linear infinite;
  animation-delay: 32s, 32s;
  animation-play-state: paused, paused;
}
.hero-cloud-front.is-flowing.is-playing { animation-play-state: running, running; }
@keyframes harbor-cloud-blend {
  0%, 30%, 70%, 100% { opacity: 0; }
  45%, 55% { opacity: 1; }
}