.whaleEncounter{position:absolute;left:0;top:0;width:112px;height:73px;z-index:15;pointer-events:none;transform:translate(var(--whale-x),var(--whale-y)) translate(-50%,-50%)}
.whaleEncounter img{display:block;width:100%;height:100%;object-fit:contain;opacity:.13;filter:grayscale(1) brightness(.34) blur(2px);transform:scale(.78);transition:opacity .35s,filter .35s,transform .35s}
.whaleEncounter:before{content:"";position:absolute;left:15%;right:15%;top:43%;height:35%;border-radius:50%;background:#003d7370;filter:blur(10px);animation:whaleShadowPulse 1.2s ease-in-out infinite alternate}
.whaleEncounter.revealed img{opacity:.32;filter:saturate(.8) brightness(.58) blur(1px)}
.whaleEncounter.breaching img{position:relative;z-index:2;opacity:1;filter:drop-shadow(0 13px 8px #064e8975);transform:scale(1);animation:whaleBreach 1.65s cubic-bezier(.2,.8,.3,1) both}
.whaleEncounter.breaching:before{opacity:0}
.whaleEncounter.submerging img{animation:whaleSubmerge .75s ease-in forwards}
.whaleWarning{position:absolute;left:50%;top:50%;width:88px;height:34px;transform:translate(-50%,-50%);border:2px solid #d9fbff90;border-radius:50%;animation:whaleWarning 1s ease-out infinite}
.whaleWave{position:absolute;left:50%;top:50%;width:24px;height:24px;border:5px solid #d9fbffdd;border-radius:50%;transform:translate(-50%,-50%);opacity:0;z-index:1}
.whaleEncounter.waveReleased .whaleWave{animation:whaleWaveExpand 1.25s ease-out forwards}
.campaignBoat.whaleWaveBoat{animation:whaleBoatRock .14s ease-in-out 6;filter:drop-shadow(0 0 12px #bdf8ff)!important}
@keyframes whaleShadowPulse{to{transform:scale(1.12);opacity:.42}}
@keyframes whaleWarning{to{width:145px;height:65px;opacity:0}}
@keyframes whaleBreach{0%{opacity:.15;transform:translateY(28px) scale(.55)}42%{opacity:1;transform:translateY(-18px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
@keyframes whaleSubmerge{to{opacity:0;transform:translateY(24px) scale(.48);filter:blur(4px)}}
@keyframes whaleWaveExpand{0%{opacity:.9}100%{width:370px;height:370px;opacity:0;border-width:1px}}
@keyframes whaleBoatRock{25%{margin-top:-4px}75%{margin-top:4px}}
@media(max-width:760px){.whaleEncounter{width:92px;height:60px}@keyframes whaleWaveExpand{0%{opacity:.9}100%{width:290px;height:290px;opacity:0;border-width:1px}}}