/* A visible water-blue wave with stronger contrast on dark buttons. */
.water-button{isolation:isolate;overflow:hidden;--water-fill:linear-gradient(180deg,#38bdf8,#0ea5e9);--water-opacity:.45}
.water-button:is(.btn-navy,.nav-cta,.btn-ghost,.mn-wa,a.wa,.on){--water-fill:linear-gradient(180deg,#0284c7,#0369a1);--water-opacity:.92}
.water-button.water-static{position:relative}
.water-button.water-button::before{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  left:-50%;top:-15%;width:200%;height:145%;inset-inline-end:auto;bottom:auto;
  border-radius:0;
  background:var(--water-fill);
  opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 24 C25 -4 50 -4 75 24 S125 52 150 24 S200 -4 225 24 S275 52 300 24 V200 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 24 C25 -4 50 -4 75 24 S125 52 150 24 S200 -4 225 24 S275 52 300 24 V200 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  transform:translateY(105%);
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .12s;
  animation:buttonWaterSway 3.2s ease-in-out infinite alternate;
  animation-play-state:paused;
}
/* Keep the navy base so the blue wave remains visible in the header. */
.nav-cta.water-button:hover{background:var(--navy)}
@keyframes buttonWaterSway{from{left:-75%}to{left:-25%}}
@media(hover:hover) and (pointer:fine){
  .water-button.water-button:not(:disabled):hover::before{
    opacity:var(--water-opacity);transform:translateY(22%);animation-play-state:running;
  }
}
.water-button.water-button:focus-visible::before{
  opacity:var(--water-opacity);transform:translateY(22%);animation-play-state:running;
}
@media(prefers-reduced-motion:reduce){
  .water-button.water-button::before{animation:none;transition:none}
}

/* Product cards: a soft wave through the details, with the photo kept clear. */
.water-card{--card-water:linear-gradient(180deg,rgba(56,189,248,.22),rgba(14,165,233,.13))}
.water-card :is(.sc-b,.home-set-copy,.kit-body){position:relative;isolation:isolate;overflow:hidden}
.water-card :is(.sc-b,.home-set-copy,.kit-body)::before{
 content:"";position:absolute;left:-50%;top:0;width:200%;height:150%;z-index:-1;pointer-events:none;
 background:var(--card-water);opacity:0;transform:translateY(105%);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 24 C25 -4 50 -4 75 24 S125 52 150 24 S200 -4 225 24 S275 52 300 24 V200 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 24 C25 -4 50 -4 75 24 S125 52 150 24 S200 -4 225 24 S275 52 300 24 V200 H0 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .16s;
 animation:buttonWaterSway 3.2s ease-in-out infinite alternate;animation-play-state:paused;
}
@media(hover:hover) and (pointer:fine){
 .water-card:hover{border-color:#38bdf8;box-shadow:0 14px 32px -18px rgba(2,132,199,.35)}
 .water-card:hover :is(.sc-b,.home-set-copy,.kit-body)::before{opacity:1;transform:translateY(16%);animation-play-state:running}
}
.water-card:focus-visible{outline:2px solid #0284c7;outline-offset:3px;border-color:#38bdf8}
.water-card:focus-visible :is(.sc-b,.home-set-copy,.kit-body)::before{opacity:1;transform:translateY(16%);animation-play-state:running}
@media(hover:none),(pointer:coarse){
 .water-button.water-button:not(:disabled):active::before{opacity:var(--water-opacity);transform:translateY(22%);transition:transform .1s,opacity .05s}
 .water-card:active{border-color:#0ea5e9}
 .water-card:active :is(.sc-b,.home-set-copy,.kit-body)::before{opacity:1;transform:translateY(16%);transition:transform .1s,opacity .05s}
}
@media(prefers-reduced-motion:reduce){
 .water-card :is(.sc-b,.home-set-copy,.kit-body)::before{animation:none;transition:none}
}