.sea{position:fixed;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.sea-back{z-index:-1;
  
  background:linear-gradient(to bottom,rgba(3,54,82,0) 35%,rgba(3,54,82,.04) 100%)}
.sea-front{z-index:20}                 


.sea-on main.wrap{text-shadow:0 0 2px var(--desk),0 0 4px var(--desk),0 0 6px var(--desk)}
.sea-on main.wrap :is(.card,.row,.note,a,button,summary,.eyebrow,.pin,.hi){text-shadow:none}   


.fish{--k:1;position:absolute;left:0;top:0;width:calc(72px * var(--k));height:calc(38px * var(--k));will-change:transform;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sea-back .fish{opacity:.6}           
.sea-front .fish{pointer-events:auto;cursor:pointer}
.fish .fin{width:100%;height:100%;transform-origin:50% 50%}
.fish .fsh{width:100%;height:100%}
.fish svg{display:block;width:100%;height:100%;overflow:visible}
.fish .tail{transform-origin:-40px 0;animation:sea-wag 1.1s ease-in-out infinite alternate}
.fish.fast .tail{animation-duration:.24s}
.fish .bod{transform-origin:0 0;animation:sea-sway 2.2s ease-in-out infinite alternate}
@keyframes sea-wag{from{transform:rotate(-13deg)}to{transform:rotate(13deg)}}
@keyframes sea-sway{from{transform:rotate(-3deg) scaleY(.97)}to{transform:rotate(3deg) scaleY(1.02)}}



.fish .shock{display:none}
.fish.shocked .calm{display:none}
.fish.shocked .shock{display:inline}
.fish.slow .tail{animation-duration:1.9s}
.fish.scared .fsh{animation:sea-shake .5s ease-in-out}
@keyframes sea-shake{0%,100%{transform:none}25%{transform:translate(-3px,-2px) rotate(-9deg)}
  60%{transform:translate(3px,1px) rotate(8deg)}}
.fish .bang{position:absolute;left:50%;top:-30px;width:28px;height:28px;margin-left:-14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--deep);color:var(--deep);font:800 17px/24px 'Chiron GoRound TC',system-ui,sans-serif;
  text-align:center;opacity:0;transform:scale(.3);pointer-events:none}
.fish.scared .bang{animation:sea-bang 1.2s ease-in-out forwards}
@keyframes sea-bang{0%{opacity:0;transform:translateY(6px) scale(.3)}18%{opacity:1;transform:translateY(0) scale(1.1)}
  30%{transform:translateY(-2px) scale(1)}75%{opacity:1;transform:translateY(-16px) scale(1)}100%{opacity:0;transform:translateY(-26px) scale(.9)}}


.bub{position:absolute;bottom:-40px;width:var(--s);height:var(--s);animation:sea-rise var(--d) ease-in var(--dl) infinite}
.bub i{display:block;width:100%;height:100%;border-radius:50%;border:2px solid rgba(3,54,82,.22);background:rgba(254,254,250,.35);
  animation:sea-wob 3.4s ease-in-out infinite alternate}
@keyframes sea-rise{from{transform:translateY(0)}to{transform:translateY(calc(-100vh - 80px))}}
@keyframes sea-wob{from{transform:translateX(-7px)}to{transform:translateX(7px)}}


.weed{position:absolute;bottom:-6px;width:120px;height:130px;will-change:transform}

.weed.l{left:-8px}.weed.r{right:-8px;transform:scaleX(-1)}
.weed svg{display:block;width:100%;height:100%;overflow:visible}
.weed .bl{transform-box:fill-box;transform-origin:50% 100%;animation:sea-weed var(--d,7s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes sea-weed{from{transform:rotate(-5deg) skewX(-3deg)}to{transform:rotate(5deg) skewX(3deg)}}

@media (max-width:719px){
  .fish{width:calc(56px * var(--k));height:calc(30px * var(--k))}
  .fish .bang{top:-26px;width:24px;height:24px;margin-left:-12px;font-size:15px;line-height:20px}
  .weed{width:84px;height:92px}
}


.sea-burst{z-index:1}
.uw-brandplay .uw-logo{position:relative;z-index:2}
.sea-burst .fish{will-change:transform,opacity}


.sea-paused *{animation-play-state:paused!important}


@media (prefers-reduced-motion:reduce){
  .bub{display:none}
  .sea *{animation:none!important}
}