/* Each scene has its own small life; native scrolling remains in charge. */
.hs-page { --hs-depth:48px;--hs-side:18px; }
.hs-page .hs-copy { translate:0 calc(var(--hs-drift,0)*-10px); }
.hs-page .hs-art {
  transform:translate3d(calc(var(--hs-drift,0)*var(--hs-side)),calc(var(--hs-drift,0)*var(--hs-depth)*-1),0);
}
.hs-page.is-visible .hs-art { will-change:transform; }
.hs-page.is-current .hs-copy>* { animation:hs-copy-arrive .85s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--hs-order,0)*65ms); }
.hs-page.is-current .hs-illustration { animation:hs-scene-arrive 1.15s cubic-bezier(.16,1,.3,1) both; }
.hs-page.is-current :is(.hs-islands>div,.hs-errands>li) { animation:hs-row-arrive .75s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(260ms + var(--hs-order,0)*115ms); }
.harbor-home[data-phase=home] .hf-top::after {
  content:"";position:absolute;left:5vw;right:5vw;bottom:0;height:1px;background:currentColor;opacity:.3;
  transform:scaleX(var(--hs-read-progress,0));transform-origin:left;pointer-events:none;
}
.harbor-home[data-phase=home] .hf-panorama { transform:translate3d(0,calc(var(--hs-read-progress,0)*-24px),0) scale(1.06); }
.harbor-home[data-phase=home] .hf-dock { transform:translate3d(0,calc(var(--hs-read-progress,0)*-42px),0) scale(1.04); }

.hs-atmosphere { position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1; }
.hs-sea-wisp { position:absolute;left:-20%;top:46%;width:115%;height:28%;background:radial-gradient(ellipse,#e0edf06b,transparent 65%);animation:hs-sea-breath 13s ease-in-out infinite alternate; }
.hs-sea-wisp-far { left:16%;top:24%;width:110%;height:26%;opacity:.5;animation-duration:19s;animation-delay:-7s; }
.hs-distant-birds { position:absolute;left:64%;top:29%;width:20vw;min-width:155px;max-width:290px;overflow:visible;opacity:.55;animation:hs-birds-cross 24s ease-in-out infinite alternate; }
.hs-seabird { fill:none;stroke:#355c71;stroke-width:1.6;stroke-linecap:square;animation:hs-birds-lift 3.8s ease-in-out infinite alternate; }
.hs-water-glint { position:absolute;left:52%;top:72%;width:32%;height:15%;background:repeating-linear-gradient(0deg,transparent 0 21px,#d3e8ec66 22px,transparent 24px 34px);mask-image:radial-gradient(ellipse,#000,transparent 68%);animation:hs-water-shimmer 6s ease-in-out infinite alternate; }
.hs-departure .hs-sea-wisp { top:45%;opacity:.55; }
.hs-departure .hs-distant-birds { left:47%;top:21%; }
.hs-dust { z-index:3; }
.hs-dust i { position:absolute;left:var(--dust-x);top:var(--dust-y);width:2px;height:2px;background:#d9e9e4;opacity:0;animation:hs-dust-rise var(--dust-time) linear var(--dust-delay) infinite; }

/* The chart: a route takes shape while the fog drifts over the ports. */
.hs-route-dashes { animation:hs-route-carry 10s linear infinite; }
.hs-route-trace { opacity:0;stroke-dasharray:1;stroke-dashoffset:0; }
.hs-page.is-current .hs-route-trace { animation:hs-route-draw 2.4s .2s cubic-bezier(.3,0,.2,1) both; }
.hs-port-halo { opacity:.15;transform-box:fill-box;transform-origin:center;animation:hs-port-signal 5.5s ease-out infinite; }
.hs-chart-island-P .hs-port-halo { animation-delay:-1.8s; }
.hs-chart-island-C .hs-port-halo { animation-delay:-3.6s; }
.hs-chart-compass { transform-box:fill-box;transform-origin:50% 50%;animation:hs-compass-seek 9s ease-in-out infinite alternate; }
.hs-chart-mist { animation:hs-map-fog 11s ease-in-out infinite alternate; }

/* The borrowed desk: a breeze from the window reaches the blank page. */
.hs-window-clouds { animation:hs-window-weather 16s ease-in-out infinite alternate; }
.hs-stationmaster { animation:hs-quiet-breath 5s steps(4) infinite; }
.hs-desk-paper { transform-box:fill-box;transform-origin:7% 90%;animation:hs-page-breeze 7s ease-in-out infinite; }
.hs-desk-bag { transform-box:fill-box;transform-origin:50% 0;animation:hs-bag-settle 9s ease-in-out infinite; }
.hs-borrowed-label { transform-box:fill-box;transform-origin:4% 90%;animation:hs-label-lift 8s ease-in-out infinite; }
.hs-desk-pencil { transform-box:fill-box;transform-origin:50% 100%;animation:hs-pencil-roll 9s ease-in-out infinite; }

/* A-Mo: a blink, a shifting paperclip and an envelope caught in the breeze. */
.hs-raven-perched { transform-box:fill-box;transform-origin:45% 95%;animation:hs-raven-listen 5.6s steps(4) infinite; }
.hs-raven-blink { opacity:0;animation:hs-raven-blink 4.8s steps(1) infinite; }
.hs-paperclip { transform-box:fill-box;transform-origin:50% 0;animation:hs-clip-swing 4.8s ease-in-out infinite; }
.hs-letter { transform-box:fill-box;transform-origin:8% 90%;animation:hs-letter-breeze 6.5s ease-in-out infinite; }

/* The commission: three crates aboard, the fourth still waiting on the quay. */
.hs-cargo-boat { transform-box:fill-box;transform-origin:50% 80%;animation:hs-boat-rock 5.8s ease-in-out infinite; }
.hs-waterline { animation:hs-dock-water 5s ease-in-out var(--wave-delay,0s) infinite alternate; }
.hs-commission-note { transform-box:fill-box;transform-origin:44% 0;animation:hs-order-flutter 6s ease-in-out infinite; }
.hs-page.is-current .hs-waiting-crate { animation:hs-crate-arrive 1.2s .15s cubic-bezier(.16,1,.3,1) both; }
.hs-departure-walker { animation:hs-ready-breath 6s ease-in-out infinite; }
.hs-ready-raven { animation-name:hs-raven-ready;animation-duration:3.6s; }
.hs-departure-invite>span { animation:hs-next-nudge 2.5s ease-in-out infinite; }

/* Only visible scenes run ambient loops. Flight and hidden tabs suspend them. */
.hs-page { --hs-loop-state:paused; }
#harbor-home[data-phase=home]:not([data-motion=paused]) .hs-page.is-visible { --hs-loop-state:running; }
#harbor-home .hs-page :is(.hs-sea-wisp,.hs-distant-birds,.hs-seabird,.hs-water-glint,.hs-dust i,.hs-route-dashes,.hs-port-halo,.hs-chart-compass,.hs-chart-mist,.hs-window-clouds,.hs-stationmaster,.hs-desk-paper,.hs-desk-bag,.hs-borrowed-label,.hs-desk-pencil,.hs-raven-perched,.hs-raven-blink,.hs-paperclip,.hs-letter,.hs-cargo-boat,.hs-waterline,.hs-commission-note,.hs-departure-walker,.hs-departure-invite>span) { animation-play-state:var(--hs-loop-state); }
#harbor-home[data-motion=paused] .hs-page * { animation-play-state:paused!important; }

@keyframes hs-copy-arrive { from { opacity:0;translate:0 22px; } to { opacity:1;translate:0 0; } }
@keyframes hs-row-arrive { from { opacity:0;translate:18px 0; } to { opacity:1;translate:0 0; } }
@keyframes hs-scene-arrive { from { opacity:.35;translate:32px 36px;scale:.96; } to { opacity:1;translate:0 0;scale:1; } }
@keyframes hs-sea-breath { from { translate:-3% 8px;opacity:.35; } to { translate:8% -12px;opacity:.7; } }
@keyframes hs-birds-cross { to { translate:-75px -15px; } }
@keyframes hs-birds-lift { to { translate:0 -7px; } }
@keyframes hs-water-shimmer { from { translate:-12px 0;opacity:.4; } to { translate:18px 4px;opacity:.8; } }
@keyframes hs-dust-rise { 0% { opacity:0;translate:0 20px; } 25%,65% { opacity:.22; } 100% { opacity:0;translate:14px -38px; } }
@keyframes hs-route-carry { to { stroke-dashoffset:-76; } }
@keyframes hs-route-draw { from { stroke-dashoffset:1;opacity:0; } 15% { opacity:.65; } to { stroke-dashoffset:0;opacity:.28; } }
@keyframes hs-port-signal { 0% { scale:.82;opacity:.4; } 80%,100% { scale:1.23;opacity:0; } }
@keyframes hs-compass-seek { from { rotate:-3deg; } to { rotate:3deg; } }
@keyframes hs-map-fog { to { translate:26px 9px;opacity:.55; } }
@keyframes hs-window-weather { from { translate:-20px 0; } to { translate:24px 0; } }
@keyframes hs-quiet-breath { 50% { translate:0 -1.5px; } }
@keyframes hs-page-breeze { 0%,55%,100% { rotate:0deg; } 70% { rotate:-1.3deg;translate:0 -2px; } 84% { rotate:.4deg; } }
@keyframes hs-bag-settle { 50% { rotate:1deg; } }
@keyframes hs-label-lift { 0%,65%,100% { rotate:0deg; } 76% { rotate:2deg; } }
@keyframes hs-pencil-roll { 0%,55%,100% { translate:0 0; } 70%,85% { translate:3px -1px; } }
@keyframes hs-raven-listen { 0%,40%,100% { rotate:0deg;translate:0 0; } 55%,70% { rotate:-1deg;translate:0 -2px; } 85% { rotate:.6deg; } }
@keyframes hs-raven-blink { 0%,93%,98%,100% { opacity:0; } 94%,97% { opacity:1; } }
@keyframes hs-clip-swing { 0%,100% { rotate:-3deg; } 50% { rotate:4deg; } }
@keyframes hs-letter-breeze { 50% { rotate:1.2deg;translate:0 -3px; } }
@keyframes hs-boat-rock { 0%,100% { rotate:-.7deg;translate:0 2px; } 50% { rotate:.7deg;translate:0 -3px; } }
@keyframes hs-dock-water { from { translate:-8px 0;opacity:.25; } to { translate:16px 0;opacity:.65; } }
@keyframes hs-order-flutter { 50% { rotate:-1deg;translate:0 -2px; } }
@keyframes hs-crate-arrive { from { opacity:.5;translate:15px 15px; } to { opacity:1;translate:0 0; } }
@keyframes hs-ready-breath { 50% { translate:0 -2px; } }
@keyframes hs-raven-ready { 40%,70% { rotate:-4deg;translate:0 -2px; } }
@keyframes hs-next-nudge { 50% { translate:0 5px; } }

@media(min-width:761px) and (min-height:741px) { .hf-story-scroll { scroll-snap-type:y mandatory; } }
@media(max-width:760px), (max-height:600px) {
  .hf-story-scroll { scroll-snap-type:none; }
  .hs-page { --hs-depth:18px;--hs-side:6px; }
  .hs-page .hs-copy { translate:0 calc(var(--hs-drift,0)*-5px); }
  .hs-page.is-current .hs-illustration { animation-duration:.9s; }
  .hs-distant-birds { left:55%;top:25%;min-width:125px; }
  .hs-dust i:nth-child(even) { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .harbor-home .hs-page .hs-copy,.harbor-home .hs-page .hs-art { transform:none!important;translate:none!important; }
  .harbor-home[data-phase=home] :is(.hf-panorama,.hf-dock) { transform:none; }
  .harbor-home .hs-page * { animation:none!important;transition:none!important; }
  .hs-dust,.hs-distant-birds { display:none; }
}