.water-button{isolation:isolate;background:#132d4b;position:relative;overflow:hidden}.water-button:after{content:"";z-index:-1;opacity:0;pointer-events:none;background:radial-gradient(at 50% 65%,#0000 62%,#2aadb74d 75%,#ffffff73 100%);transition:opacity .4s;position:absolute;inset:0}.water-button:hover:after,.water-button:focus-visible:after{opacity:1}.water-button__wave{--crest:6px;z-index:-1;height:calc(var(--wave-rest) + var(--crest));background:var(--wave) 0 0 / 40px calc(var(--crest) * 10) repeat-x;animation:water-button-wave var(--wave-speed) linear infinite;transition:height .7s cubic-bezier(.2,.8,.2,1);position:absolute;bottom:0;left:0;right:0}.water-button__wave--back{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' preserveAspectRatio='none'%3E%3Cpath fill='%232aadb7' d='M0 3 Q 10 0 20 3 T 40 3 V60 H0Z'/%3E%3C/svg%3E");--wave-speed:4.8s;--wave-speed-hover:2.4s;--wave-rest:6px;--wave-level:12px}.water-button__wave--front{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60' preserveAspectRatio='none'%3E%3Cpath fill='%231b738d' d='M0 3 Q 10 0 20 3 T 40 3 V60 H0Z'/%3E%3C/svg%3E");--wave-speed:3.2s;--wave-speed-hover:1.6s;--wave-rest:3px;--wave-level:7px;transition-delay:60ms;animation-direction:reverse}.water-button:hover .water-button__wave,.water-button:focus-visible .water-button__wave{height:calc(var(--wave-level) + var(--crest));animation-duration:var(--wave-speed-hover)}@keyframes water-button-wave{to{background-position:40px 0}}@media (prefers-reduced-motion:reduce){.water-button__wave{animation:none}}