/* Additive haze only. The existing water surface and caustics remain loaded. */
.wispy-smoke{position:absolute;z-index:0;left:50%;bottom:5px;transform:translateX(-50%);width:min(66vw,1160px);height:clamp(155px,24vh,240px);pointer-events:none;opacity:.95;mix-blend-mode:screen;filter:blur(.7px);mask-image:radial-gradient(ellipse 50% 60% at 50% 52%,#000 35%,transparent 100%)}
.wispy-smoke canvas{display:block;width:100%;height:100%}
@media(max-width:800px){.wispy-smoke{width:76vw;height:160px;opacity:.8}}
@media(max-width:480px){.wispy-smoke{width:80vw;height:135px;bottom:6px;opacity:.7}}
/* Asymmetric placement, independent field seeds; never repeat the same bitmap. */
.wispy-smoke--left{left:-10vw;top:32%;bottom:auto;transform:rotate(23deg);width:42vw;max-width:650px;height:clamp(160px,25vh,285px);opacity:.64;filter:blur(1.2px)}
.wispy-smoke--right{left:auto;right:-9vw;top:43%;bottom:auto;transform:rotate(-31deg);width:38vw;max-width:590px;height:clamp(180px,29vh,310px);opacity:.60;filter:blur(1.7px)}
.wispy-smoke--far{left:39%;top:24%;bottom:auto;transform:rotate(-9deg);width:38vw;max-width:720px;height:clamp(90px,15vh,175px);opacity:.36;filter:blur(3px)}
.wispy-smoke--near{left:4%;bottom:3%;transform:rotate(-12deg);width:37vw;max-width:590px;height:clamp(150px,22vh,235px);opacity:.63;filter:blur(.9px)}
@media(max-width:800px){
  .wispy-smoke--left{left:-24vw;top:34%;width:63vw;height:190px;opacity:.43}
  .wispy-smoke--right{right:-26vw;top:51%;width:66vw;height:200px;opacity:.48}
  .wispy-smoke--far{left:30%;top:19%;width:60vw;height:125px;opacity:.29}
  .wispy-smoke--near{left:-9%;bottom:8%;width:60vw;height:150px;opacity:.46}
}
@media(max-width:480px){
  .wispy-smoke--left{top:37%;height:160px;opacity:.33}
  .wispy-smoke--right{top:54%;height:180px;opacity:.37}
  .wispy-smoke--far{top:22%;height:110px;opacity:.23}
  .wispy-smoke--near{bottom:10%;height:130px;opacity:.35}
}