/* Hero purification animation: dirty water -> membrane layers -> clean water. */
.hero-purification-stage{aspect-ratio:1/1}
.purification-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 34px 42px rgba(7,59,103,.23))}
.purification-stage-bg{stroke:rgba(255,255,255,.9);stroke-width:5;stroke-linejoin:round}
.purification-stage-glow{pointer-events:none}
.purification-orbit{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1;stroke-dasharray:6 13;transform-origin:310px 310px}
.purification-orbit.orbit-a{animation:purificationOrbit 30s linear infinite}
.purification-orbit.orbit-b{animation:purificationOrbit 22s linear infinite reverse}
.dirty-stream,.clean-stream,.clean-splash{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dirty-stream-wide{stroke:url(#dirtyStreamGradient);stroke-width:34;opacity:.88;stroke-dasharray:80 14;animation:dirtyWaterFlow 4s linear infinite}
.dirty-stream-highlight{stroke:#b6d2d6;stroke-width:5;opacity:.45;stroke-dasharray:16 15;animation:dirtyWaterFlow 2.4s linear infinite}
.clean-stream-wide{stroke:url(#cleanStreamGradient);stroke-width:32;opacity:.96;stroke-dasharray:88 13;animation:cleanWaterFlow 3.2s linear infinite}
.clean-stream-highlight{stroke:#fff;stroke-width:5;opacity:.84;stroke-dasharray:18 14;animation:cleanWaterFlow 2s linear infinite}
.clean-splash{stroke:#fff;stroke-width:5;filter:drop-shadow(0 0 8px rgba(92,231,242,.75));animation:cleanSplashPulse 3.4s ease-in-out infinite}
.dirty-particle{fill:#8e624c;stroke:#dfb89d;stroke-width:2;animation:dirtyParticle 3.8s ease-in-out infinite}
.dirty-particle.p2{animation-delay:.45s}.dirty-particle.p3{animation-delay:.9s}.dirty-particle.p4{animation-delay:1.35s}.dirty-particle.p5{animation-delay:1.8s}
.dirty-speck{fill:#c28c6f;opacity:.85;animation:dirtyParticle 4.1s ease-in-out infinite}.dirty-speck.s2{animation-delay:.7s}.dirty-speck.s3{animation-delay:1.4s}
.membrane-sheet{filter:drop-shadow(7px 8px 8px rgba(1,26,48,.3));transform-box:fill-box;transform-origin:center;animation:membraneBreathe 4s ease-in-out infinite}
.membrane-sheet>path:first-child{fill:url(#membraneFill);stroke:#fff;stroke-width:4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.membrane-grid{fill:none;stroke:rgba(255,255,255,.56);stroke-width:1.35;vector-effect:non-scaling-stroke}
.sheet-two{animation-delay:.35s}.sheet-three{animation-delay:.7s}
.blocked-particles circle{fill:#c17a5d;stroke:#fff;stroke-width:2;animation:blockedPulse 2.6s ease-in-out infinite}.blocked-particles circle:nth-child(2){animation-delay:.4s}.blocked-particles circle:nth-child(3){animation-delay:.8s}.blocked-particles circle:nth-child(4){animation-delay:1.2s}
.clean-bubble{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:2;animation:cleanBubble 3s ease-in-out infinite}.clean-bubble.b2{animation-delay:.45s}.clean-bubble.b3{animation-delay:.9s}.clean-bubble.b4{animation-delay:1.35s}
.clean-drop{fill:rgba(92,231,242,.12);stroke:#fff;stroke-width:2.5;animation:cleanDrop 3.2s ease-in-out infinite}.clean-drop.d2{animation-delay:.7s}
.intro-playing .purification-svg *{animation-play-state:paused}
@keyframes purificationOrbit{to{transform:rotate(360deg)}}
@keyframes dirtyWaterFlow{to{stroke-dashoffset:-188}}
@keyframes cleanWaterFlow{to{stroke-dashoffset:-202}}
@keyframes dirtyParticle{0%,100%{transform:translate(0);opacity:.9}60%{transform:translate(38px,5px);opacity:.55}}
@keyframes membraneBreathe{50%{transform:translateY(-5px)}}
@keyframes blockedPulse{50%{transform:scale(1.25);opacity:.58}}
@keyframes cleanSplashPulse{50%{transform:translateY(-5px);opacity:.75}}
@keyframes cleanBubble{50%{transform:translateY(-16px);opacity:.35}}
@keyframes cleanDrop{50%{transform:translateY(10px);opacity:.48}}
@media(max-width:700px){.dirty-stream-wide,.clean-stream-wide{stroke-width:27}.clean-splash{stroke-width:4}.membrane-sheet>path:first-child{stroke-width:3}}
@media(prefers-reduced-motion:reduce){.purification-svg *{animation:none!important}}