.splash { height:100svh; min-height:100svh; }
.brand,.brand img { max-height:calc(100svh - 104px); }
.brand { animation:none; opacity:1; transform:none; will-change:auto; }
.js .brand { opacity:0; transform:translate3d(0,12px,0) scale(.975); }
.js .brand.ready { animation:smooth-logo 9.5s cubic-bezier(.37,0,.63,1) .25s both; will-change:opacity,transform; }
.js .brand.finished { will-change:auto; }
@keyframes smooth-logo {
 from { opacity:0; transform:translate3d(0,14px,0) scale(.92); }
 to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
.ocean { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.075); transform-origin:50% 50%; transition:opacity 2s ease; filter:saturate(1.12) hue-rotate(8deg) brightness(1.04); will-change:opacity,transform; }
.ocean.playing { opacity:1; animation:ocean-zoom-out 22s cubic-bezier(.37,0,.63,1) forwards; }
.ocean.settled { will-change:opacity; }
@keyframes ocean-zoom-out {
 from { transform:scale(1.075); }
 to { transform:scale(1); }
}
.music-credit { position:fixed; z-index:3; left:max(16px,env(safe-area-inset-left)); bottom:max(12px,env(safe-area-inset-bottom)); color:#07364a; font:10px/1.4 Arial,sans-serif; text-underline-offset:3px; text-shadow:0 1px 2px #fff,0 0 8px #ffffffbd; opacity:.8; }
.music-credit:hover { opacity:1; }
.music-credit:focus-visible { outline:2px solid #07364a; outline-offset:5px; }
@media(max-width:720px) {
 .js .brand { opacity:0; transform:translate3d(0,18px,0) scale(.80); }
 .js .brand.ready { animation:smooth-logo-mobile 9.5s cubic-bezier(.37,0,.63,1) .25s both; }
 .brand { filter:none; }
 .brand.finished { filter:drop-shadow(0 10px 20px rgba(0,20,43,.3)); }
 .ocean { filter:none; transform:scale(1.055); }
 .ocean.playing { animation-duration:26s; }
 .music-credit { left:10px; bottom:30px; font-size:9px; }
 .sound-start { -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@keyframes smooth-logo-mobile {
 from { opacity:0; transform:translate3d(0,18px,0) scale(.80); }
 to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@media(max-width:720px) {
 @keyframes ocean-zoom-out {
  from { transform:scale(1.055); }
  to { transform:scale(1); }
 }
}
@keyframes smooth-logo-reduced {
 from { opacity:0; transform:translate3d(0,4px,0) scale(.96); }
 to { opacity:1; transform:translate3d(0,0,0) scale(1); }
}
@media(prefers-reduced-motion:reduce) {
 .js .brand { opacity:0; transform:translate3d(0,4px,0) scale(.96); }
 .js .brand.ready { animation:smooth-logo-reduced 1.2s ease-out both; }
 .ocean { display:none; }
 .js .sound-start { transition:none; }
}