.harbor-life{position:absolute;left:50%;bottom:0;transform:translateX(-50%);pointer-events:none;overflow:hidden;contain:paint}
.harbor-life *,.life-frame,.life-chest{pointer-events:none}
.pixar .top.px-header.chest-ready{background-image:url('assets/ambient-header-v2.png')}
.life-ship,.life-chest{visibility:hidden}.scene-ready .life-ship,.chest-ready .life-chest{visibility:visible}
.life-ship{position:absolute;inset:0;width:100%;height:100%;animation:ship-bob 5s ease-in-out infinite alternate paused;transform-origin:37% 87%}
/* Two baked, softly shaded clouds; slow continuous travel, different depths. */
.life-clouds{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0%,#000 49%,transparent 56%);mask-image:linear-gradient(#000 0%,#000 49%,transparent 56%)}
.life-cloud{position:absolute;left:0;aspect-ratio:8/3;background:center/100% 100% no-repeat;animation:cloud-sailing 64s linear infinite paused}
.life-cloud-a{top:var(--near-top);width:var(--near-width);background-image:url('assets/cloud-near-v4.png');opacity:.8;animation-delay:-23s}
.life-cloud-b{top:var(--far-top);width:var(--far-width);background-image:url('assets/cloud-far-v4.png');opacity:.48;animation-duration:96s;animation-delay:-69s}
.life-smoke{position:absolute;left:51.5%;top:57%;width:11%;height:12%}
.life-smoke i{position:absolute;left:7%;bottom:0;width:38%;height:27%;border-radius:50%;background:radial-gradient(ellipse,#e8e9df80 10%,#e8e9df50 35%,#e8e9df00 70%);animation:harbor-smoke 4.8s linear infinite paused}
.life-smoke i:nth-child(2){animation-delay:-1.6s}.life-smoke i:nth-child(3){animation-delay:-3.2s}
.life-water{position:absolute;inset:0;overflow:hidden;-webkit-mask:url('assets/ambient-water-mask-v2.svg') center/100% 100% no-repeat;mask:url('assets/ambient-water-mask-v2.svg') center/100% 100% no-repeat}
.life-water-texture{position:absolute;inset:0;background:url('assets/pixar-responsive-v11/scene-sky.webp') center/100% 100%;animation:water-roll 3.8s ease-in-out infinite alternate paused}
.life-wave{position:absolute;inset:0;background:url('assets/ambient-waves-v2.svg') center/100% 100% no-repeat;animation:wave-crest 4.2s ease-in-out infinite paused}
.life-wave-b{animation-delay:-2.1s;animation-duration:5.4s}
.life-gulls{position:absolute;inset:0;overflow:hidden}
.gull-flight{position:absolute;left:0;top:var(--far-top);width:100%;height:4%;animation:gull-crossing 28s linear infinite paused;animation-delay:-4s}
.life-gull{display:block;width:6%;height:auto;overflow:visible}
.gull-1{top:calc(var(--far-top) - 3%);animation-duration:33s;animation-delay:-2s}.gull-1 .life-gull{width:4.7%;opacity:.8}
.gull-2{top:calc(var(--near-top) + 2%);animation-duration:37s;animation-delay:-7s}.gull-2 .life-gull{width:3.7%;opacity:.65}
.gull-bank{transform-origin:32px 22px;animation:gull-bank 7s ease-in-out infinite alternate paused}
.wing-left{transform-origin:31px 22px;animation:gull-left-stroke 4.8s ease-in-out infinite paused}
.wing-right{transform-origin:33px 22px;animation:gull-right-stroke 4.8s ease-in-out infinite paused}
.gull-1 .wing-left,.gull-1 .wing-right{animation-delay:-1.7s;animation-duration:5.6s}.gull-2 .wing-left,.gull-2 .wing-right{animation-delay:-3s;animation-duration:6.3s}
.gull-1 .gull-bank{animation-delay:-3s}.gull-2 .gull-bank{animation-delay:-5s}
.life-frame{position:absolute;inset:0;-webkit-mask:url('assets/ambient-frame-mask-v2.png') center/100% 100% no-repeat;mask:url('assets/ambient-frame-mask-v2.png') center/100% 100% no-repeat;overflow:hidden}
.life-frame i{position:absolute;inset:0;background:linear-gradient(110deg,transparent 37%,#fff3ba44 44%,#fffadcf0 50%,#fff3ba44 56%,transparent 63%);animation:frame-glint 10s linear infinite paused}
.life-chest{position:absolute;inset:0;isolation:isolate}
.life-lid{position:absolute;inset:0;width:100%;height:100%;transform-origin:16.7% 30%}
.life-chest-glow{position:absolute;left:6%;top:17%;width:12%;height:41%;opacity:0;background:radial-gradient(ellipse,#fff5b4c0,#ffd14c55 40%,transparent 70%)}
.chest-collect .life-lid{animation:chest-lid-open 1.6s ease-in-out both}.chest-collect .life-chest-glow{animation:chest-glow 1.6s ease-in-out both}
#heroPendingBar{position:relative;overflow:hidden}#heroPendingBar::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,#c5fff2b0 48%,transparent 75%);transform:translateX(-100%);animation:freight-stream 2.6s linear infinite paused}
.ambient-on.life-charging #heroPendingBar::after{animation-play-state:running}
.ambient-on .freight-full{box-shadow:0 0 3cqw #ffca6570,inset 0 0 2cqw #fff3b47a;animation:freight-ready .9s ease-out 1}
.ambient-on .harbor-life *,.ambient-on .life-frame i{animation-play-state:running}
@keyframes ship-bob{from{transform:translateY(-.2%)}to{transform:translateY(.2%)}}
@keyframes cloud-sailing{from{transform:translateX(-102%)}to{transform:translateX(var(--cloud-span))}}
@keyframes harbor-smoke{0%{transform:translate(0,0) scale(.65);opacity:0}20%{opacity:.8}100%{transform:translate(90%,-230%) scale(2.1);opacity:0}}
@keyframes water-roll{from{transform:translate(-.38%,.1%)}to{transform:translate(.38%,-.2%)}}
@keyframes wave-crest{0%{transform:translate(-1.4%,-.6%);opacity:.12}35%{opacity:.65}75%{opacity:.4}100%{transform:translate(1.4%,.8%);opacity:.12}}
@keyframes gull-crossing{0%{transform:translate(-9%,8px);opacity:0}4%{opacity:1}20%{transform:translate(29%,-5px)}40%{transform:translate(67%,2px)}57%{opacity:1}62%,100%{transform:translate(108%,-9px);opacity:0}}
@keyframes gull-bank{from{transform:rotate(-5deg)}to{transform:rotate(4deg)}}
@keyframes gull-left-stroke{0%,12%,40%,100%{transform:rotate(0)}20%,33%{transform:rotate(23deg)}26%{transform:rotate(-16deg)}}
@keyframes gull-right-stroke{0%,12%,40%,100%{transform:rotate(0)}20%,33%{transform:rotate(-23deg)}26%{transform:rotate(16deg)}}
@keyframes frame-glint{0%{transform:translateX(-110%)}28%,100%{transform:translateX(110%)}}
@keyframes chest-lid-open{0%,100%{transform:none}28%,62%{transform:translateY(-2%) rotate(5deg)}}
@keyframes chest-glow{0%,100%{opacity:0;transform:scale(.8)}35%,65%{opacity:.9;transform:scale(1.2)}}
@keyframes freight-stream{to{transform:translateX(100%)}}
@keyframes freight-ready{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.life-cloud,.life-smoke,.life-water,.life-gulls,.life-frame,.life-chest-glow{display:none}.life-ship,.life-lid{animation:none!important}#heroPendingBar::after{display:none}}