@keyframes surface{0%{opacity:0;background-position:center bottom;background-size:calc(3*var(--highHeight)) var(--highHeight)}20%{opacity:var(--opacity)}to{opacity:0;background-position:center bottom calc(-1*var(--lowHeight));background-size:calc(1*var(--lowHeight)) var(--lowHeight)}}@keyframes caustics{0%{background-position:bottom var(--gapY) left}to{background-position:bottom var(--gapY) left -100vw}}@keyframes sun{0%{opacity:.1;transform:skew(5deg) scale3d(3,1.5,1)}50%{opacity:.08;transform:skew(0deg) scale3d(1.5,1,1)}to{opacity:.1;transform:skew(-5deg) scale3d(3,1,1)}}#caustics::after,#caustics::before,#sun div,#surface::after,#surface::before{transform:translateZ(0);will-change:transform,opacity,background-position}.water-background{overflow-x:hidden;background:linear-gradient(to bottom,oklch(60%.2 230),oklch(.571 .105 221.067))}#bg,#surface::after,#surface::before{display:block;left:0;width:100vw;height:100vh}#bg,#surface{mix-blend-mode:overlay}#bg{position:fixed;top:0;background-image:linear-gradient(to bottom,#fff,gray 25%,gray 60%,khaki);opacity:.5}#surface{left:0}#surface::after,#surface::before{content:"";position:absolute;bottom:0;background-image:url(./../img/waterAnimation/cloud-x.webp);background-repeat:repeat-x;--duration:6s;--lowHeight:20vh;--highHeight:40vh;--layerNum:2;--opacity:0.4;animation:surface var(--duration) linear infinite;animation-delay:calc((var(--duration)/var(--layerNum))*var(--index)*-1);opacity:0}#surface::after{--index:0}#surface::before{--index:0;transform:scale3d(1,-1,1)}#surface::after{--index:1;transform:scale3d(-1,-1,1)}#caustics,#sun,#surface{position:fixed;top:0;width:100vw;height:100vh}#caustics{bottom:0;transform-origin:bottom center;transform:scale3d(2,1,1)}#caustics::after,#caustics::before,#sun div{content:"";display:block;position:absolute;bottom:0;left:0}#caustics::after,#caustics::before{width:100vw;height:100vh;background-image:url(./../img/waterAnimation/caustics.webp);background-repeat:repeat;--duration:10s;--height:30vh;--gapY:0px;background-size:calc(100vw/(var(--ratioW))) 40vh;animation:caustics calc(var(--duration)*(var(--ratioW))) linear infinite;opacity:.3;mask-image:linear-gradient(to top,white,transparent var(--height),transparent)}#caustics::after{--duration:11s;--gapY:10vh;animation-delay:-2s;transform:scale3d(-1,1,1)}#sun{mix-blend-mode:overlay;left:0}#sun div{width:100%;height:100%;transform-origin:50vw 0;animation:sun 7s ease infinite alternate;mask-image:linear-gradient(to bottom,transparent 15%,#fff 50%,#fff 55%,transparent 80%)}#sun #sun_layer1,#sun #sun_layer2,#sun #sun_layer3{background:linear-gradient(to right,transparent,#fff,transparent)}@media (min-width:2560px){#caustics::after,#caustics::before,#surface::after,#surface::before{--duration:12s;--opacity:0.2}#sun div{animation-duration:12s}}@media (min-width:3840px){#caustics::after,#caustics::before,#surface::after,#surface::before{--duration:15s;--opacity:0.15}#sun div{animation-duration:15s}}@media (min-width:7680px){#caustics,#sun,#surface{display:none}}@media (orientation:portrait){:root{--ratioW:1}}@media (min-aspect-ratio:1/1){:root{--ratioW:2}}@media (min-aspect-ratio:2/1){:root{--ratioW:3}}@media (min-aspect-ratio:3/1){:root{--ratioW:4}}@media (min-aspect-ratio:4/1){:root{--ratioW:5}}@media (min-aspect-ratio:5/1){:root{--ratioW:6}}@media (min-aspect-ratio:6/1){:root{--ratioW:7}}@media (min-aspect-ratio:7/1){:root{--ratioW:8}}@media (min-aspect-ratio:8/1){:root{--ratioW:9}}@media (min-aspect-ratio:9/1){:root{--ratioW:10}}@media (min-aspect-ratio:10/1){:root{--ratioW:11}}