/* Opening water-glass sequence */
html.intro-playing,html.intro-playing body{overflow:hidden}
.site-intro{position:fixed;inset:0;z-index:10000;display:none;place-items:center;background:radial-gradient(circle at 50% 42%,#fff 0,#f4fbfd 48%,#e6f5fa 100%);color:var(--navy);transition:opacity .65s ease,visibility .65s ease}
.intro-playing .site-intro{display:grid}.intro-skip .site-intro{display:none}.site-intro.intro-complete{opacity:0;visibility:hidden}
.intro-scene{position:relative;display:grid;justify-items:center;width:min(360px,86vw);padding:42px 30px 28px;text-align:center}
.intro-glass{position:relative;width:148px;height:184px;overflow:hidden;clip-path:polygon(3% 0,97% 0,84% 100%,16% 100%);background:rgba(8,121,189,.14);filter:drop-shadow(0 20px 24px rgba(7,59,103,.13))}
.intro-glass::before{content:"";position:absolute;inset:5px 7px 7px;z-index:0;clip-path:inherit;background:linear-gradient(105deg,rgba(255,255,255,.98),rgba(231,247,251,.72));box-shadow:inset 0 0 22px rgba(8,121,189,.09)}
.intro-glass::after{content:"";position:absolute;left:3px;right:3px;top:0;height:9px;z-index:4;border:2px solid rgba(8,121,189,.28);border-radius:50%;background:rgba(255,255,255,.8)}
.intro-water{position:absolute;left:0;right:0;bottom:0;z-index:1;height:0;background:linear-gradient(180deg,#27d4ea 0%,#0792d2 58%,#0668ad 100%);animation:introFill 2.05s cubic-bezier(.35,.02,.25,1) .35s forwards}
.intro-water::before{content:"";position:absolute;left:-8%;top:-9px;width:116%;height:20px;border-radius:50%;background:#55e1ee;animation:introSurface 1.05s ease-in-out infinite alternate}
.intro-water span,.intro-water i,.intro-water b{position:absolute;display:block;border:1.5px solid rgba(255,255,255,.72);border-radius:50%;animation:introBubble 1.5s ease-in infinite}
.intro-water span{left:27%;bottom:12%;width:10px;height:10px}.intro-water i{left:63%;bottom:21%;width:7px;height:7px;animation-delay:.35s}.intro-water b{left:47%;bottom:4%;width:5px;height:5px;animation-delay:.7s}
.intro-glass-shine{position:absolute;left:28px;top:25px;z-index:3;width:9px;height:118px;border-radius:9px;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.04));transform:rotate(-4deg)}
.intro-drop{position:absolute;z-index:5;top:-24px;left:calc(50% - 11px);width:22px;height:29px;border-radius:70% 30% 66% 34%/78% 42% 58% 22%;background:linear-gradient(145deg,var(--cyan),var(--blue));transform:rotate(42deg);animation:introDrop 1.05s cubic-bezier(.55,.02,.75,.4) .08s both}
.intro-logo{width:205px;height:72px;margin-top:26px;object-fit:contain;background:#fff;border-radius:7px}
.intro-scene p{margin:5px 0 0;color:#6a8190;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;animation:introCopy 1s ease 1.5s both}
@keyframes introFill{0%{height:0}100%{height:78%}}
@keyframes introSurface{to{transform:translateX(7px) rotate(-1deg)}}
@keyframes introBubble{0%{transform:translateY(8px);opacity:0}35%{opacity:.9}100%{transform:translateY(-100px);opacity:0}}
@keyframes introDrop{0%{transform:translateY(-90px) rotate(42deg) scale(.72);opacity:0}20%{opacity:1}84%{transform:translateY(130px) rotate(42deg) scale(1)}100%{transform:translateY(142px) rotate(42deg) scale(.18);opacity:0}}
@keyframes introCopy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Scroll-driven faucet and water path */
.scroll-water{--stream-length:30px;--flow-strength:.45;position:fixed;left:14px;top:110px;z-index:45;width:108px;height:calc(var(--stream-length) + 90px);pointer-events:none;opacity:.92;transition:opacity .35s ease}.intro-playing .scroll-water{opacity:0}
.scroll-faucet{position:relative;z-index:2;display:block;width:108px;height:81px;overflow:visible;filter:drop-shadow(0 8px 10px rgba(7,59,103,.14))}.scroll-faucet path{fill:none;stroke:#0879bd;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.scroll-faucet path:nth-child(2){stroke:#073b67;stroke-width:5}.scroll-faucet .faucet-drop{fill:#19c8e2;stroke:#fff;stroke-width:2;animation:faucetDrip 1.45s ease-in infinite}
.faucet-stream{position:absolute;top:72px;left:90px;width:8px;height:var(--stream-length);min-height:30px;overflow:hidden;border-radius:0 0 8px 8px;background:linear-gradient(90deg,rgba(25,200,226,.18),rgba(25,200,226,.9) 48%,rgba(8,121,189,.38));opacity:var(--flow-strength);box-shadow:0 0 12px rgba(25,200,226,.19);transition:height .14s linear,opacity .25s ease}
.faucet-stream::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 26px,rgba(255,255,255,.66) 28px 31px,transparent 33px 52px);animation:streamTravel 1.2s linear infinite}
.faucet-stream i{position:absolute;left:1px;width:6px;height:10px;border-radius:50% 50% 55% 55%;background:rgba(255,255,255,.68);animation:streamDrop 2s linear infinite}.faucet-stream i:nth-child(1){top:12%;animation-delay:0s}.faucet-stream i:nth-child(2){top:42%;animation-delay:.55s}.faucet-stream i:nth-child(3){top:72%;animation-delay:1.1s}
@keyframes faucetDrip{0%,58%{transform:translateY(-4px) scale(.55);opacity:0}68%{opacity:1}100%{transform:translateY(26px) scale(.82);opacity:0}}
@keyframes streamTravel{to{transform:translateY(52px)}}
@keyframes streamDrop{0%{transform:translateY(-25px);opacity:0}20%{opacity:.9}100%{transform:translateY(90px);opacity:0}}

/* Decorative water artwork for the treatment-method guide */
.filter-guide-intro{display:flex;flex-direction:column;min-width:0}.filter-water-art{position:relative;width:min(100%,340px);margin:58px auto 0;color:#fff;text-align:center}.filter-water-art svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 25px rgba(0,0,0,.12))}.filter-water-art path,.filter-water-art circle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.filter-water-art .art-drop-large{fill:rgba(25,200,226,.075);stroke:rgba(99,223,240,.72);stroke-width:2.4}.filter-water-art .art-water{fill:rgba(25,200,226,.23);stroke:#63dff0}.filter-water-art .art-wave{stroke:#fff;opacity:.78;stroke-dasharray:7 9;animation:guideWave 4s linear infinite}.filter-water-art .art-wave-two{animation-direction:reverse;animation-duration:5s}.filter-water-art .art-bubbles circle{fill:rgba(255,255,255,.08);stroke:rgba(99,223,240,.72);animation:guideBubble 3.6s ease-in-out infinite}.filter-water-art .art-bubbles circle:nth-child(2){animation-delay:.6s}.filter-water-art .art-bubbles circle:nth-child(3){animation-delay:1.1s}.filter-water-art .art-bubbles circle:nth-child(4){animation-delay:1.7s}.filter-water-art .art-drop-small{fill:rgba(25,200,226,.18);stroke:#63dff0;animation:guideFloat 3.8s ease-in-out infinite}.filter-water-art .art-drop-b{animation-delay:1.2s}.filter-water-art .art-ripple{stroke:rgba(99,223,240,.58);stroke-dasharray:9 10}.filter-water-art span{display:inline-block;margin-top:-18px;color:#63dff0;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
@keyframes guideWave{to{stroke-dashoffset:-64}}
@keyframes guideBubble{50%{transform:translateY(-11px);opacity:.42}}
@keyframes guideFloat{50%{transform:translateY(10px)}}

@media(max-width:1180px){.scroll-water{left:2px;transform:scale(.82);transform-origin:top left}}
@media(max-width:1050px){.filter-water-art{width:min(330px,72vw);margin-top:32px}.filter-water-art svg{max-height:360px}.filter-water-art span{margin-top:-5px}}
@media(max-width:700px){.intro-glass{width:126px;height:158px}.intro-logo{width:175px;height:62px}.scroll-water{left:0;top:86px;transform:scale(.55);opacity:.72}.faucet-stream{width:7px}.filter-water-art{width:min(280px,82vw);margin-top:25px}.filter-water-art svg{max-height:300px}}
@media(prefers-reduced-motion:reduce){.intro-drop,.intro-water,.intro-water::before,.intro-water span,.intro-water i,.intro-water b,.intro-scene p,.scroll-faucet .faucet-drop,.faucet-stream::before,.faucet-stream i,.filter-water-art *{animation:none!important}.intro-water{height:78%}.intro-drop{display:none}.site-intro{transition:none}}