/* Decorative wash-cycle scene. All continuous motion uses transforms/opacity. */
.hero{position:relative;grid-template-columns:1fr 1.12fr;gap:10px;padding-top:24px;padding-bottom:24px;min-height:700px}
.hero-copy{position:relative;z-index:1}.hero h1{font-size:clamp(60px,6.2vw,89px);line-height:1.04}.hero .eyebrow{color:var(--muted)}
.laundry-scene{min-width:0;position:relative;--drum-speed:4.8s;--water-opacity:.5;--foam-opacity:.9;--motion-state:running;align-self:center}
.laundry-art{height:570px;position:relative;isolation:isolate;overflow:hidden;border-radius:22px}
.wash-halo{position:absolute;inset:6% 0 0;background:radial-gradient(ellipse at 57% 56%,#c5e8ff 0%,#e4f5ff 37%,#f3faff66 59%,transparent 72%);border-radius:50%;z-index:-1}
.washer{position:absolute;aspect-ratio:1;width:77%;left:-1%;bottom:6%;filter:drop-shadow(0 22px 13px #5984ac24)}
.washer-front{z-index:2}.washer-back{width:61%;left:43%;bottom:20%;z-index:1;--drum-speed:6.5s}
.washer-body{width:100%;height:100%;object-fit:contain;position:relative}
.drum-window{position:absolute;left:27.3%;top:24.8%;width:45.4%;aspect-ratio:1;border-radius:50%;overflow:hidden;isolation:isolate;transform:translateZ(0)}
.drum-load{position:absolute;inset:0;border-radius:50%;background-image:url('../images/washer-studio.webp');background-size:220.264% 220.264%;background-position:50% 45.421%;animation:drum-tumble var(--drum-speed) linear infinite;animation-play-state:var(--motion-state)}
.drum-water{position:absolute;inset:53% -22% -28%;background:linear-gradient(175deg,#d7f8ff88,#4da9e6b3);border-radius:43%;opacity:var(--water-opacity);animation:water-swish 3.3s ease-in-out infinite alternate;animation-play-state:var(--motion-state);transition:opacity .6s}
.drum-foam{position:absolute;inset:55% -10% -7%;background:radial-gradient(circle at 7px 8px,#fffffff0 0 3px,#e9f8ffb8 3.5px 4.5px,transparent 5px) 0 0/17px 19px,radial-gradient(circle at 11px 12px,#ffffffde 0 5px,#d7f2ff91 5.5px 6.5px,transparent 7px) 7px 9px/29px 27px,linear-gradient(transparent,#ffffffab);mask-image:linear-gradient(transparent,#000 38%);opacity:var(--foam-opacity);animation:foam-swish 2.5s ease-in-out infinite alternate;animation-play-state:var(--motion-state);transition:opacity .6s}
.door-reflection{position:absolute;inset:0;border-radius:50%;background:linear-gradient(125deg,#fff7 0%,#fff1 19%,transparent 27% 67%,#d1f0ff33 80%,#fff4 93%);box-shadow:inset 0 0 12px #12395365,inset 3px 3px 8px #ffffff36;pointer-events:none}
.floor-suds{position:absolute;bottom:5%;left:7%;width:89%;height:90px;z-index:3;pointer-events:none}
.floor-suds i{position:absolute;bottom:0;border:1px solid #e3f7ffcc;border-radius:50%;background:radial-gradient(circle at 32% 22%,#fff 0%,#fcffffd9 24%,#e9f9ffd9 61%,#c4e8fa88 91%);box-shadow:inset 2px 3px 7px #fff,0 4px 9px #7aacd321;width:var(--size,64px);height:var(--size,64px);left:var(--x,0);animation:foam-breathe 3s ease-in-out var(--delay,0s) infinite alternate;animation-play-state:var(--motion-state)}
.floor-suds i:nth-child(1){--x:0%;--size:45px;--delay:-1s}.floor-suds i:nth-child(2){--x:7%;--size:70px;--delay:-2s}.floor-suds i:nth-child(3){--x:18%;--size:51px}.floor-suds i:nth-child(4){--x:27%;--size:34px;--delay:-.7s}.floor-suds i:nth-child(5){--x:34%;--size:48px;--delay:-1.6s}.floor-suds i:nth-child(6){--x:44%;--size:27px}.floor-suds i:nth-child(7){--x:53%;--size:48px;--delay:-2.2s}.floor-suds i:nth-child(8){--x:62%;--size:65px}.floor-suds i:nth-child(9){--x:72%;--size:38px;--delay:-1s}.floor-suds i:nth-child(10){--x:79%;--size:52px;--delay:-.4s}.floor-suds i:nth-child(11){--x:88%;--size:31px;--delay:-1.4s}.floor-suds i:nth-child(12){--x:94%;--size:21px}
.floating-suds{position:absolute;inset:0;pointer-events:none;z-index:4}
.bubble{position:absolute;width:var(--size);height:var(--size);left:var(--x);top:var(--y);border-radius:50%;border:1px solid #a2d8f6a6;background:radial-gradient(circle at 28% 22%,#ffffffed 0%,#ffffffde 3%,#fff4 7%,transparent 20%),radial-gradient(circle at 74% 80%,#b8eaf980,transparent 48%),radial-gradient(circle at 90% 38%,#ecdff666,transparent 49%);box-shadow:inset 2px 2px 5px #ffffffd9,inset -3px -4px 8px #8bc9f05c,0 3px 9px #5095b315;animation:bubble-drift var(--duration,7s) ease-in-out var(--delay) infinite alternate;animation-play-state:var(--motion-state);opacity:.86}
.bubble::after{content:'';position:absolute;inset:8%;border:2px solid transparent;border-top-color:#fffffff0;border-left-color:#ffffff6b;border-radius:50%;transform:rotate(-23deg)}
.bubble:nth-child(1){--x:4%;--y:30%;--size:76px;--delay:-2s;--duration:6s}.bubble:nth-child(2){--x:24%;--y:7%;--size:39px;--delay:-4s}.bubble:nth-child(3){--x:61%;--y:4%;--size:70px;--delay:-1s;--duration:8s}.bubble:nth-child(4){--x:85%;--y:13%;--size:37px;--delay:-6s}.bubble:nth-child(5){--x:87%;--y:49%;--size:66px;--delay:-3s}.bubble:nth-child(6){--x:11%;--y:67%;--size:29px;--delay:-2s}.bubble:nth-child(7){--x:43%;--y:20%;--size:23px;--delay:-5s}.bubble:nth-child(8){--x:72%;--y:31%;--size:26px;--delay:-1s}.bubble:nth-child(9){--x:57%;--y:80%;--size:54px;--delay:-4s}.bubble:nth-child(10){--x:92%;--y:77%;--size:27px;--delay:-6s}.bubble:nth-child(11){--x:2%;--y:7%;--size:27px;--delay:-1s}.bubble:nth-child(12){--x:77%;--y:89%;--size:39px;--delay:-3s}.bubble:nth-child(13){--x:38%;--y:91%;--size:24px;--delay:-7s}.bubble:nth-child(14){--x:48%;--y:2%;--size:18px;--delay:-2s}.bubble:nth-child(15){--x:4%;--y:91%;--size:32px;--delay:-4s}.bubble:nth-child(16){--x:95%;--y:33%;--size:19px;--delay:-1s}
.wash-controls{display:flex;justify-content:center;align-items:center;gap:25px;margin:7px 0 0;position:relative;z-index:5}
.wash-cycle{display:flex;gap:5px;background:var(--surface);padding:4px;border:1px solid var(--line);border-radius:40px}.wash-cycle button{border:0;background:transparent;padding:9px 17px;border-radius:30px;font-size:13px;min-height:40px;transition:color .2s,background .2s}.wash-cycle button[aria-pressed=true]{background:var(--button);color:var(--button-ink)}.motion-toggle{font-size:12px;background:none;border:0;border-bottom:1px solid var(--line);padding:10px 0;min-height:40px;color:var(--muted)}
.laundry-scene[data-cycle=rinse]{--drum-speed:8s;--water-opacity:.75;--foam-opacity:.2}.laundry-scene[data-cycle=spin]{--drum-speed:.8s;--water-opacity:0;--foam-opacity:0}.laundry-scene[data-cycle=spin] .washer-back{--drum-speed:1.1s}.laundry-scene[data-cycle=rinse] .washer-back{--drum-speed:9s}.laundry-scene.is-paused,.laundry-scene.is-offscreen{--motion-state:paused}
@keyframes drum-tumble{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes water-swish{from{transform:translate(-2%,3%) rotate(-8deg)}to{transform:translate(3%,-4%) rotate(8deg)}}
@keyframes foam-swish{from{transform:translate(-4%,7%) rotate(-7deg)}to{transform:translate(3%,-5%) rotate(7deg)}}
@keyframes foam-breathe{from{transform:translateY(1px) scale(.96)}to{transform:translateY(-5px) scale(1.035)}}
@keyframes bubble-drift{0%{transform:translate3d(-6px,18px,0) scale(.94)}50%{transform:translate3d(9px,-5px,0) scale(1.02)}100%{transform:translate3d(-8px,-32px,0) scale(.98)}}
@media(max-width:1200px){.hero h1{font-size:69px}.laundry-art{height:500px}.hero{min-height:610px}.bubble{scale:.85}.floor-suds{scale:.85;transform-origin:bottom left;width:100%}}
@media(max-width:1020px){.hero h1{font-size:57px}.laundry-art{height:450px}.hero{gap:10px}.wash-controls{gap:12px}.wash-cycle button{padding-inline:12px}.motion-toggle{font-size:11px}.washer{width:84%;left:-7%}.washer-back{width:68%;left:38%}}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:12px;padding-top:36px;padding-bottom:26px;min-height:0}.hero h1{font-size:clamp(49px,11.8vw,72px)}.hero-intro{margin-block:22px 24px}.laundry-scene{margin-inline:-10px}.laundry-art{height:380px;border-radius:0}.washer{width:80%;left:-2%;bottom:6%}.washer-back{width:64%;left:39%;bottom:19%}.bubble{scale:.65}.floor-suds{bottom:5%;scale:.67;width:133%;left:4%}.wash-controls{gap:23px;margin-top:2px}.wash-cycle button{padding:6px 16px}.motion-toggle{font-size:12px}.wash-halo{inset:0 -10%}.store-info{padding-top:7px}}
@media(max-width:380px){.laundry-art{height:330px}.wash-controls{gap:16px}.wash-cycle button{padding-inline:12px}.floor-suds{scale:.58;width:145%}}
@media(prefers-color-scheme:dark){.wash-halo{background:radial-gradient(ellipse at 57% 56%,#234665 0%,#192c4166 52%,transparent 73%)}.bubble{border-color:#92c9ef78;background:radial-gradient(circle at 28% 22%,#ffffffe0 0%,#ffffffae 3%,#fff3 7%,transparent 20%),radial-gradient(circle at 74% 80%,#83d8f33b,transparent 48%)}.floor-suds{opacity:.9}}
@media(prefers-reduced-motion:reduce){.laundry-scene *{animation:none!important;transition:none!important}.motion-toggle{display:none}.bubble{opacity:.6}.bubble:nth-child(n+9){display:none}}