.hayat-journey{--wj-river: #a6a396;--wj-plant1: #b9c1bf;--wj-plant2: #a9cbdc;--wj-tank: #b3ada3;--wj-shower: #b3ada3}.hayat-journey__head{display:grid;gap:12px;margin-bottom:32px}.hayat-journey__intro{max-width:36em}.hayat-journey__steps{display:grid;gap:32px;margin:0;padding:0;list-style:none}.hayat-journey__step{--step-water: var(--wj-river);--rail-x: 18.5px;--rail-top: 46px;--rail-gap: 30px;position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px}.hayat-journey__step--plant{--step-water: var(--wj-plant2)}.hayat-journey__step--pipes{--step-water: var(--wj-tank)}.hayat-journey__step--shower{--step-water: var(--wj-shower)}.hayat-journey__step:not(:last-child):before{content:"";position:absolute;top:var(--rail-top);bottom:calc(var(--rail-gap) * -1);inset-inline-start:var(--rail-x);width:3px;border-radius:3px;background:repeating-linear-gradient(to bottom,var(--step-water) 0 8px,transparent 8px 16px);animation:hayat-journey-rail 1.2s linear infinite}.hayat-journey__step:not(:last-child):after{content:"";position:absolute;top:var(--rail-top);inset-inline-start:calc(var(--rail-x) - 5px);width:13px;height:13px;border:1.5px solid var(--hayat-navy);border-radius:50% 0 50% 50%;background:var(--step-water);transform:rotate(-45deg);opacity:0;animation:hayat-journey-drop 3.6s ease-in infinite}.hayat-journey__marker{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--hayat-navy);color:var(--hayat-white);font-family:var(--hayat-font);font-size:15px;font-weight:var(--hayat-weight-bold);box-shadow:0 0 0 4px var(--hayat-white)}.hayat-section--tint .hayat-journey__marker{box-shadow:0 0 0 4px var(--hayat-tint)}.hayat-journey__body{display:grid;gap:14px;min-width:0}.hayat-journey__copy{display:grid;gap:8px;align-content:start;padding-top:6px}.hayat-journey__title{font-size:20px;font-weight:var(--hayat-weight-bold)}.hayat-journey__status{display:inline-flex;align-items:center;justify-self:start;gap:6px;margin:0;padding:4px 12px 4px 10px;border:1px solid var(--hayat-line);border-radius:var(--hayat-radius-pill);background:var(--hayat-white);color:var(--hayat-navy);font-family:var(--hayat-font);font-size:13px;font-weight:var(--hayat-weight-semibold);line-height:1.5}.hayat-journey__status .hayat-icon{width:16px;height:16px;color:var(--hayat-navy);fill:var(--step-water)}.hayat-journey__frame{position:relative}.hayat-journey__bubble{position:absolute;z-index:1;width:var(--s, 12px);height:var(--s, 12px);border:1px solid rgba(var(--hayat-sky-rgb),.55);border-radius:50%;background:radial-gradient(circle at 32% 30%,#fffffff2,rgba(var(--hayat-card-rgb),.6) 60%,rgba(var(--hayat-line-rgb),.4));opacity:0;pointer-events:none;animation:hayat-journey-bubble var(--d, 6s) ease-in-out infinite;animation-delay:var(--delay, 0s)}.hayat-journey__bubble:nth-child(1){--s: 14px;--d: 6.5s;--delay: -1s;top:18%;inset-inline-start:-6px}.hayat-journey__bubble:nth-child(2){--s: 9px;--d: 5.5s;--delay: -3.2s;top:58%;inset-inline-start:-4px}.hayat-journey__bubble:nth-child(3){--s: 12px;--d: 7s;--delay: -2s;bottom:12%;inset-inline-end:-5px}.hayat-journey__bubble:nth-child(4){--s: 8px;--d: 6s;--delay: -4.4s;top:8%;inset-inline-end:14%}.hayat-journey__art{position:relative;aspect-ratio:16 / 9;overflow:hidden;border:1px solid var(--hayat-line);border-radius:var(--hayat-radius-media);background:var(--hayat-tint)}.hayat-jart,.hayat-journey__img{display:block;width:100%;height:100%;object-fit:cover}.hayat-journey__cta{display:grid;gap:16px;margin-top:40px;padding:24px 20px;border-radius:var(--hayat-radius-card);background:var(--hayat-navy);color:var(--hayat-white)}.hayat-journey__cta-drop{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--hayat-sky);color:var(--hayat-navy)}.hayat-journey__cta-drop .hayat-icon{width:26px;height:26px}.hayat-journey__cta-title{margin:0;color:var(--hayat-white);font-family:var(--hayat-font);font-size:clamp(20px,16px + 1.2vw,26px);font-weight:var(--hayat-weight-bold);line-height:1.4;letter-spacing:0}.hayat-journey__cta-text{margin:6px 0 0;color:var(--hayat-line);font-size:16px;line-height:1.7}.hayat-journey__cta-actions{display:flex;flex-wrap:wrap;gap:10px}.hayat-journey__cta-ghost{color:var(--hayat-white);box-shadow:inset 0 0 0 1.5px var(--hayat-white)}.hayat-journey__cta-ghost:hover{background:var(--hayat-white);color:var(--hayat-navy)}.wj-smoke circle,.wj-plume--spread,.wj-dirt--drift circle,.wj-dirt--bob circle,.wj-arm--spin,.wj-bubbles--rise circle,.wj-cl-drops path,.wj-splash,.wj-drip{transform-box:fill-box;transform-origin:center}.wj-sky{fill:var(--hayat-tint)}.wj-bank,.wj-ground{fill:var(--hayat-card)}.wj-earth{fill:rgba(var(--hayat-muted-rgb),.28)}.wj-ground-line{fill:none;stroke:var(--hayat-muted);stroke-width:2}.wj-water{stroke:none}.wj-water--river{fill:var(--wj-river)}.wj-water--plant1{fill:var(--wj-plant1)}.wj-water--plant2{fill:var(--wj-plant2)}.wj-water--tank{fill:var(--wj-tank)}.wj-wave-roll{animation:hayat-journey-wave 2.4s linear infinite}.wj-wave-roll--tank{animation-name:hayat-journey-wave-tank;animation-duration:1.8s}.wj-current path{fill:none;stroke:var(--hayat-white);stroke-opacity:.55;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:16 24;animation:hayat-journey-current 2.2s linear infinite}.wj-current path:nth-child(2){animation-duration:2.8s;animation-delay:-1s}.wj-current path:nth-child(3){animation-duration:2.4s;animation-delay:-.5s}.wj-current path:nth-child(4){animation-duration:3.2s;animation-delay:-1.6s}.wj-building,.wj-roof,.wj-roofslab,.wj-sign,.wj-tank,.wj-basin,.wj-mouth,.wj-head,.wj-pipe-rect{fill:var(--hayat-white);stroke:var(--hayat-navy);stroke-opacity:.6;stroke-width:1.2}.wj-roof,.wj-roofslab{fill:var(--hayat-card)}.wj-window,.wj-door{fill:var(--hayat-card);stroke:var(--hayat-navy);stroke-opacity:.4;stroke-width:1}.wj-cross{fill:none;stroke:var(--hayat-link);stroke-width:2.4;stroke-linecap:round}.wj-smoke circle{fill:var(--hayat-muted);opacity:.7;animation:hayat-journey-smoke 3.6s ease-out infinite}.wj-smoke circle:nth-child(2){animation-delay:-1.2s}.wj-smoke circle:nth-child(3){animation-delay:-2.4s}.wj-pipe{fill:none;stroke:var(--hayat-navy);stroke-opacity:.55;stroke-width:5}.wj-pipe--thin{stroke-width:3;stroke:var(--hayat-link);stroke-opacity:.8}.wj-flow{fill:none;stroke:var(--wj-plant2);stroke-width:2;stroke-linecap:round;stroke-dasharray:5 7;animation:hayat-journey-flow .9s linear infinite}.wj-hole{fill:var(--hayat-navy);fill-opacity:.6}.wj-dump{fill:none;stroke:#6f6a60;stroke-width:4;stroke-linecap:round;stroke-dasharray:4 5;animation:hayat-journey-flow .8s linear infinite}.wj-plume{fill:#6f6a60;opacity:.35}.wj-plume--spread{animation:hayat-journey-plume 3.4s ease-out infinite}.wj-plume--late{animation-delay:-1.7s}.wj-dirt circle{fill:var(--hayat-navy);fill-opacity:.4}.wj-dirt--drift circle{animation:hayat-journey-drift 4s linear infinite}.wj-dirt--drift circle:nth-child(2n){animation-duration:5s;animation-delay:-2s}.wj-dirt--drift circle:nth-child(3n){animation-duration:4.5s;animation-delay:-1s}.wj-dirt--bob circle{animation:hayat-journey-bob 2.6s ease-in-out infinite}.wj-dirt--bob circle:nth-child(2n){animation-delay:-1.3s}.wj-arm,.wj-leg{fill:none;stroke:var(--hayat-navy);stroke-opacity:.5;stroke-width:1.4}.wj-arm--spin{vector-effect:non-scaling-stroke;animation:hayat-journey-spin 9s linear infinite}.wj-hub{fill:var(--hayat-white);stroke:var(--hayat-navy);stroke-opacity:.5}.wj-bubbles circle{fill:none;stroke:var(--hayat-white);stroke-width:1}.wj-bubbles--rise circle{animation:hayat-journey-rise 2.4s ease-out infinite}.wj-bubbles--rise circle:nth-child(2){animation-delay:-.5s}.wj-bubbles--rise circle:nth-child(3){animation-delay:-1s}.wj-bubbles--rise circle:nth-child(4){animation-delay:-1.5s}.wj-bubbles--rise circle:nth-child(5){animation-delay:-2s}.wj-cl{fill:var(--hayat-link);font-family:var(--hayat-font);font-size:18px;font-weight:var(--hayat-weight-bold)}.wj-cl-drops path{fill:var(--hayat-link);opacity:0;animation:hayat-journey-cl-drop 1.8s ease-in infinite}.wj-cl-drops path:nth-child(2){animation-delay:.6s}.wj-cl-drops path:nth-child(3){animation-delay:1.2s}.wj-splash{fill:none;stroke:var(--hayat-white);stroke-width:1.2;opacity:0;animation:hayat-journey-splash 1.8s ease-out infinite;animation-delay:.55s}.wj-splash--late{animation-delay:1.15s}.wj-splash--floor{stroke:var(--wj-shower);stroke-width:1.6;animation-duration:1.4s;animation-delay:0s}.wj-splash--floor.wj-splash--late{animation-delay:-.5s}.wj-splash--floor.wj-splash--later{animation-delay:-.9s}.wj-tank-window{fill:var(--hayat-card);stroke:var(--hayat-navy);stroke-opacity:.4}.wj-algae{fill:none;stroke:var(--hayat-link);stroke-width:1.2;stroke-linecap:round}.wj-oldpipe-outline{fill:none;stroke:var(--hayat-navy);stroke-opacity:.55;stroke-width:16;stroke-linejoin:round}.wj-oldpipe{fill:none;stroke:#efece6;stroke-width:13;stroke-linejoin:round}.wj-pipeflow{fill:none;stroke:var(--wj-tank);stroke-width:4;stroke-linecap:round;stroke-dasharray:10 8;animation:hayat-journey-pipeflow 1s linear infinite}.wj-pipegrit{fill:none;stroke:#8a7f6c;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.1 31.9;animation:hayat-journey-pipegrit 1.8s linear infinite}.wj-rust path{fill:#9a8f7c;opacity:.8}.wj-crack{fill:none;stroke:var(--hayat-navy);stroke-width:1.4;stroke-linecap:round}.wj-drip{fill:var(--wj-tank);stroke:var(--hayat-navy);stroke-opacity:.5;stroke-width:.8;opacity:0;animation:hayat-journey-drip 2s ease-in infinite}.wj-drip--late{animation-delay:-1s}.wj-puddle{fill:var(--wj-tank);opacity:.5}.wj-tiles path{fill:none;stroke:var(--hayat-line);stroke-width:1.4}.wj-pool{fill:var(--wj-shower);opacity:.45}.wj-stream{fill:none;stroke:var(--wj-shower);stroke-width:3;stroke-linecap:round;stroke-dasharray:5 9;animation:hayat-journey-flow .9s linear infinite}.wj-grit{fill:none;stroke:var(--hayat-navy);stroke-opacity:.45;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.1 27.9;animation:hayat-journey-grit 1.8s linear infinite}.wj-grit--late{animation-delay:-.9s}.wj-nozzles circle{fill:var(--hayat-navy);fill-opacity:.45}.wj-tag rect{fill:var(--hayat-white);stroke:var(--hayat-line);stroke-width:1}.wj-tag text{fill:var(--hayat-navy);font-family:var(--hayat-font);font-size:10px;font-weight:var(--hayat-weight-semibold)}.wj-tag--warn rect{fill:var(--hayat-navy);stroke:var(--hayat-navy)}.wj-tag--warn text{fill:var(--hayat-white)}@keyframes hayat-journey-rail{to{background-position:0 16px}}@keyframes hayat-journey-drop{0%{top:var(--rail-top);opacity:0}12%{opacity:1}85%{opacity:1}to{top:calc(100% + var(--rail-gap) - 16px);opacity:0}}@keyframes hayat-journey-bubble{0%{opacity:0;transform:translateY(8px) scale(.8)}25%{opacity:.95}75%{opacity:.8}to{opacity:0;transform:translateY(-26px) scale(1.05)}}@keyframes hayat-journey-wave{to{transform:translate(-80px)}}@keyframes hayat-journey-wave-tank{to{transform:translate(-16px)}}@keyframes hayat-journey-current{to{stroke-dashoffset:-40}}@keyframes hayat-journey-flow{to{stroke-dashoffset:-14}}@keyframes hayat-journey-grit{to{stroke-dashoffset:-28}}@keyframes hayat-journey-pipeflow{to{stroke-dashoffset:-18}}@keyframes hayat-journey-pipegrit{to{stroke-dashoffset:-32}}@keyframes hayat-journey-smoke{0%{transform:translateY(4px) scale(.7);opacity:0}30%{opacity:.75}to{transform:translateY(-10px) scale(1.35);opacity:0}}@keyframes hayat-journey-plume{0%{transform:translate(0) scale(.55);opacity:.45}to{transform:translate(-26px) scale(1.5);opacity:0}}@keyframes hayat-journey-drift{0%{transform:translate(8px);opacity:0}20%{opacity:1}80%{opacity:1}to{transform:translate(-30px);opacity:0}}@keyframes hayat-journey-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-2.5px)}}@keyframes hayat-journey-spin{to{transform:rotate(360deg)}}@keyframes hayat-journey-rise{0%{transform:translateY(2px);opacity:0}30%{opacity:1}to{transform:translateY(-9px);opacity:0}}@keyframes hayat-journey-cl-drop{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateY(14px);opacity:0}}@keyframes hayat-journey-splash{0%{transform:scale(.3);opacity:0}20%{opacity:.9}to{transform:scale(1.8);opacity:0}}@keyframes hayat-journey-drip{0%{transform:translateY(0) scale(.6);opacity:0}20%{transform:translateY(0) scale(1);opacity:1}90%{opacity:1}to{transform:translateY(16px) scale(1);opacity:0}}.hayat-journey__step.is-offscreen *,.hayat-journey__step.is-offscreen:before,.hayat-journey__step.is-offscreen:after{animation-play-state:paused}@media screen and (min-width:750px){.hayat-journey__head{margin-bottom:48px}.hayat-journey__steps{gap:48px}.hayat-journey__step{--rail-gap: 48px}.hayat-journey__cta{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;padding:28px 32px}}@media screen and (min-width:990px){.hayat-journey__step{--rail-x: 22.5px;--rail-top: 54px;grid-template-columns:48px minmax(0,1fr);column-gap:24px}.hayat-journey__marker{width:48px;height:48px;font-size:17px}.hayat-journey__body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:40px}.hayat-journey__title{font-size:24px}}@media(prefers-reduced-motion:reduce){.hayat-journey__step:before,.hayat-journey__step:after,.hayat-journey__bubble,.hayat-jart *{animation:none}.hayat-journey__step:after,.hayat-journey__bubble{display:none}.wj-cl-drops path:first-child,.wj-drip:not(.wj-drip--late){opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/hayat-water-journey.css.map */