/* Living details are registered to the original 1536 × 1024 illustration. */
.port-life{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:hidden;pointer-events:none;contain:layout style;isolation:isolate}
.scene-picture img{object-position:50% 50%}
.port-life .painted-boat{transform-box:view-box;will-change:transform}
.port-life .boat-near{transform-origin:195px 790px;animation:port-boat-near 6.8s ease-in-out infinite}
.port-life .boat-small{transform-origin:442px 678px;animation:port-boat-small 5.1s ease-in-out -2s infinite}
.port-life .boat-right{transform-origin:1335px 765px;animation:port-boat-right 7.6s ease-in-out -3.2s infinite}
.port-life .painted-cloud{animation:port-cloud 65s ease-in-out -24s infinite alternate}
.port-life .cloud-wisp{fill:#fffbe9;opacity:.25;animation:port-wisp 95s linear -38s infinite}
.port-life .gull-flock{animation:port-flight 61s linear -18s infinite;will-change:transform}
.port-life .gull-flock.distant{animation-name:port-flight-back;animation-duration:89s;animation-delay:-52s;opacity:.78}
.port-life .gull-wings{fill:none;stroke:#fffbed;stroke-width:2.6;stroke-linecap:round;animation:port-wings 1.65s ease-in-out infinite;transform-box:view-box;transform-origin:0 0}
.port-life .gull-second .gull-wings{animation-delay:-.5s;animation-duration:1.9s}
.port-life .gull-third .gull-wings{animation-delay:-1.2s;animation-duration:1.5s}
.port-life .water-ribbons{fill:none;stroke:#d9eee1;stroke-width:2.1;stroke-linecap:round;stroke-dasharray:28 120 7 90;opacity:.28;animation:port-water 9s linear infinite}
.port-life .water-ribbons.far{stroke-width:1.2;stroke-dasharray:12 70 4 48;animation-direction:reverse;animation-duration:14s;opacity:.34}
.port-life .water-sparkles{fill:none;stroke:#fff4c3;stroke-width:1.8;stroke-linecap:round;animation:port-shimmer 4.8s ease-in-out -1s infinite}
.port-life .walker-path{animation:port-stroll 64s linear -24s infinite}
.port-life .walker-path.second{animation:port-stroll-back 83s linear -43s infinite}
.port-life .walker-body{animation:port-step .95s ease-in-out infinite alternate}
.port-life .walker-leg{fill:none;stroke:#284c48;stroke-width:2;stroke-linecap:round;transform-origin:0 -5px;animation:port-leg .95s ease-in-out infinite alternate}
.port-life .walker-leg.other{animation-delay:-.95s}
.port-life .pennant{transform-origin:187px 406px;animation:port-pennant 2.8s ease-in-out infinite alternate}
.port-life.life-idle *{animation-play-state:paused!important}
.bf-port-life-off .port-life{display:none}
@keyframes port-boat-near{0%,100%{transform:translateY(1px) rotate(-.32deg)}50%{transform:translateY(-2.8px) rotate(.36deg)}}
@keyframes port-boat-small{0%,100%{transform:translateY(-1px) rotate(.3deg)}50%{transform:translateY(1.8px) rotate(-.38deg)}}
@keyframes port-boat-right{0%,100%{transform:translateY(.8px) rotate(.18deg)}50%{transform:translateY(-2px) rotate(-.25deg)}}
@keyframes port-cloud{from{transform:translateX(-7px)}to{transform:translateX(9px)}}
@keyframes port-wisp{from{transform:translateX(-470px)}to{transform:translateX(1650px)}}
@keyframes port-flight{0%{transform:translate(-170px,170px)}48%{transform:translate(820px,103px)}100%{transform:translate(1750px,193px)}}
@keyframes port-flight-back{0%{transform:translate(1710px,236px) scale(.7)}50%{transform:translate(790px,205px) scale(.7)}100%{transform:translate(-180px,247px) scale(.7)}}
@keyframes port-wings{0%,100%{transform:scaleY(.95)}48%{transform:scaleY(.2)}68%{transform:scaleY(.78)}}
@keyframes port-water{from{stroke-dashoffset:0;transform:translateX(-5px)}to{stroke-dashoffset:-245;transform:translateX(5px)}}
@keyframes port-shimmer{0%,100%{opacity:.08;transform:translateX(-3px)}50%{opacity:.48;transform:translateX(3px)}}
@keyframes port-stroll{0%{opacity:0;transform:translate(550px,609px)}7%{opacity:1}93%{opacity:1}100%{opacity:0;transform:translate(740px,625px)}}
@keyframes port-stroll-back{0%{opacity:0;transform:translate(962px,639px)}7%{opacity:1}93%{opacity:1}100%{opacity:0;transform:translate(825px,630px)}}
@keyframes port-step{from{transform:translateY(0)}to{transform:translateY(-.6px)}}
@keyframes port-leg{from{transform:rotate(-19deg)}to{transform:rotate(19deg)}}
@keyframes port-pennant{from{transform:skewY(-4deg) scaleX(.91)}to{transform:skewY(6deg) scaleX(1)}}
@media(prefers-reduced-motion:reduce){.port-life *{animation:none!important}.port-life .gull-flock,.port-life .walker-path,.port-life .cloud-wisp{display:none}}