/* AQUA ATOM V36 — flowing waveforms, reveal on scroll, seamless footer. */
:root{--flow-surface:#f7f8fc;--flow-why:#eef2f9;--flow-navy:#0d015e;--flow-footer:#091638}
/* Exact backgrounds, no differently tinted strips around transitions. */
.catalog-preview{background:var(--flow-surface)}
.why{background:var(--flow-why)}
.production{background:var(--flow-navy)}
.section-wave.waterwave{
 position:absolute;left:0;right:0;z-index:5;pointer-events:none;
 height:clamp(84px,8vw,128px);overflow:hidden;line-height:0;
 transform:translateZ(0);isolation:isolate;
}
.wave-hero{bottom:-1px;background:transparent}
.wave-from-catalog{top:-1px;background:var(--flow-surface)}
.wave-from-why{top:-1px;background:var(--flow-why)}
/* Hide the subpixel seam along the rasterized lower edge of SVG waves.
   The overlay matches the next section exactly; wave motion above is untouched. */
.section-wave.waterwave::before{
 content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
 background:var(--wave-seam-color);z-index:2;pointer-events:none;
}
.wave-hero{--wave-seam-color:var(--flow-surface)}
.wave-from-catalog{--wave-seam-color:var(--flow-why)}
.wave-from-why{--wave-seam-color:var(--flow-navy)}
/* Two full surfaces move horizontally on different cycles. A repeated 1440 unit
   waveform ensures that neither end jumps or leaves an empty wedge. */
.waterflow-canvas{width:200%!important;height:100%!important;max-width:none!important;display:block;overflow:visible}
.waterflow-back{opacity:.55;animation:waveflow-side 16s linear infinite reverse}
.waterflow-front{animation:waveflow-side 11s linear infinite}
@keyframes waveflow-side{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* A soft water-glint sweep goes past as users cross a section boundary. */
.section-wave.waterwave::after{
 content:"";position:absolute;inset:0;width:46%;left:-46%;z-index:1;
 background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.055) 49%,transparent 100%);
 animation:waterflow-glint 9s ease-in-out infinite;
}
@keyframes waterflow-glint{0%,18%{transform:translateX(0);opacity:0}29%{opacity:.55}75%{transform:translateX(330%);opacity:.35}92%,100%{transform:translateX(330%);opacity:0}}
/* Production blends into the enquiry image without a new block or visible seam. */
.production{padding-bottom:clamp(115px,11vw,165px)}
.contact{background:linear-gradient(180deg,var(--flow-navy) 0%,#0b0b56 35%,var(--flow-footer) 100%);isolation:isolate;padding-top:clamp(128px,13vw,210px);padding-bottom:clamp(120px,11vw,170px)}
.contact::before{
 background-image:url('assets/production_real.webp');background-size:cover;background-position:center 48%;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 17%,#000 34%,#000 54%,rgba(0,0,0,.55) 76%,transparent 100%);
 mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 17%,#000 34%,#000 54%,rgba(0,0,0,.55) 76%,transparent 100%);
}
.contact::after{
 background:linear-gradient(to bottom,rgba(13,1,94,.06) 0%,rgba(13,1,94,.68) 22%,rgba(13,1,94,.79) 52%,rgba(9,22,56,.88) 78%,var(--flow-footer) 100%);
}
/* Footer joins from the very same exact color at the bottom of the photo. */
.footer-water-join{display:none!important}
.foot{background:var(--flow-footer);border-top:0!important;padding-top:clamp(50px,5vw,80px);isolation:isolate}
.foot::before,.foot::after{display:none!important}
/* More visible, but restrained, entrance motion. CSS is only enabled when
   the corresponding observer is active, so no JS means all content remains visible. */
html.waterflow-motion .flow-reveal:not(.flow-visible){opacity:0;transform:translate3d(0,38px,0)}
html.waterflow-motion .flow-reveal{
 opacity:1;transform:translate3d(0,0,0);
 transition:opacity .85s cubic-bezier(.2,.74,.22,1),transform .9s cubic-bezier(.2,.74,.22,1);
 transition-delay:var(--flow-delay,0ms);will-change:opacity,transform;
}
html.waterflow-motion .flow-reveal.flow-visible{opacity:1;transform:none}
@media(max-width:650px){
 .section-wave.waterwave{height:79px}
 .production{padding-bottom:108px}
 .contact{padding-top:115px;padding-bottom:115px}
 .foot{padding-top:52px}
 html.waterflow-motion .flow-reveal:not(.flow-visible){transform:translate3d(0,25px,0)}
}
@media(prefers-reduced-motion:reduce){
 .waterflow-front,.waterflow-back,.section-wave.waterwave::after{animation:none!important}
 html.waterflow-motion .flow-reveal{opacity:1!important;transform:none!important;transition:none!important}
}