/* Natural photography with one restrained OIC finish in cards and details.
   Preserve source colors; keep the brand tint at the edges and label area. */
.product-card{padding:0;min-height:0;overflow:hidden}
.product-photo,.chemical-detail-visual{position:relative;isolation:isolate;overflow:hidden;background:#e8e5e9}
.product-photo{height:174px;border-bottom:1px solid #e8dfec;flex:none}
.product-photo>img,.chemical-detail-visual>img{position:relative;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.88) contrast(1.04) brightness(.99);transition:transform .85s cubic-bezier(.2,.7,.2,1),filter .55s ease}
.product-photo:before,.chemical-detail-visual:before{content:'';position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(120deg,#3420420d,transparent 45%,#2f1a3e0d)}
.product-photo:after,.chemical-detail-visual:after{content:'';position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(90deg,#c19bd9 0 70%,#ef174c 70% 100%) left bottom/62px 2px no-repeat,linear-gradient(0deg,#1b0d2c66,transparent 58%);box-shadow:inset 0 0 0 1px #2c163d0d}
.product-photo-category{position:absolute;left:19px;bottom:15px;z-index:3;color:#3c214e;background:#f7effbed;border:1px solid #ffffff80;box-shadow:0 3px 14px #1d092326;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:5px 8px;font-size:9px;font-weight:550;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}
.product-card-body{padding:24px;min-height:223px;display:flex;flex-direction:column;flex:1}
.product-card-body>h3{font-size:23px;margin:0 0 13px;line-height:1.22}
.product-card-body>p{font-size:13px;line-height:1.85;margin-bottom:21px}
.product-card-body>.product-bottom{margin-top:auto;font-size:11px;line-height:1.5}
.product-card:focus-within .product-photo>img{filter:saturate(.94) contrast(1.04) brightness(1.02)}
.product-open:after{z-index:2}
.product-card:after{z-index:3}
.product-photo[data-media="wax"]>img{object-position:center 65%}
.product-photo[data-media="hydrate"]>img{object-position:center 48%}
.product-photo[data-media="h2s"]>img{object-position:center 60%}
.product-photo[data-media="water-disinfection"]>img{object-position:center 66%}
.product-photo[data-media="pure-water"]>img{object-position:center 49%}
.product-photo[data-media="mining-water"]>img{object-position:center 64%}
.product-photo[data-media="agri"]>img{object-position:center 61%}
.chemical-detail-visual{height:245px}
.chemical-detail-visual[data-media="wax"]>img{object-position:center 64%}
.chemical-detail-visual[data-media="h2s"]>img{object-position:center 59%}
.chemical-detail-visual[data-media="water-disinfection"]>img{object-position:center 66%}
.chemical-detail-visual[data-media="mining-water"]>img{object-position:center 64%}
.chemical-detail-visual[data-media="agri"]>img{object-position:center 61%}

/* Scroll entrances use translate independently of a card's hover transform. */
.reveal{opacity:0;transform:none;translate:0 22px;transition:opacity .65s ease,translate .75s cubic-bezier(.16,1,.3,1),transform .25s ease,border-color .25s ease,box-shadow .25s ease;transition-delay:var(--reveal-delay,0ms)}
.reveal.visible{opacity:1;translate:0 0}
.reveal:focus-within{opacity:1;translate:0 0;transition-delay:0s}

/* Shared light and signal paths, with colors adapted to each surface. */
.footer-next{--flow-motion-state:paused}
.footer-next.footer-motion-ready:not(.footer-is-idle):not(.footer-motion-paused){--flow-motion-state:running}
.flow-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:paint}
.flow-glow{position:absolute;display:block;pointer-events:none;animation-play-state:var(--flow-motion-state)!important}
.flow-glow-violet{width:min(760px,75vw);height:540px;left:-100px;top:-170px;background:radial-gradient(ellipse,#8b49c53d,transparent 67%);animation:flow-violet-drift 22s ease-in-out infinite alternate}
.flow-glow-rose{width:min(500px,65vw);height:400px;left:35%;bottom:-200px;background:radial-gradient(ellipse,#e1326230,transparent 66%);animation:flow-rose-drift 27s ease-in-out infinite alternate}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;fill:none;opacity:.75}
.flow-lines use{vector-effect:non-scaling-stroke}
.flow-traces{stroke:#c1a2d22b;stroke-width:1}
.flow-signal{stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:3 97;animation:flow-signal-travel 18s linear infinite;animation-play-state:var(--flow-motion-state);filter:drop-shadow(0 0 4px #aa69d25c)}
.signal-violet{color:#d1a4f1b3;animation-delay:-3s}
.signal-pearl{color:#e9d7fa8c;animation-duration:23s;animation-delay:-12s}
.signal-rose{color:#f05b83a3;animation-duration:21s;animation-delay:-7s}
.footer-next:after{background-size:200% 100%;animation:footer-edge-flow 12s ease-in-out infinite alternate;animation-play-state:var(--flow-motion-state)}
.footer-next>.footer-main,.footer-next>.footer-bottom{position:relative;z-index:1}
.footer-motion{width:32px;height:32px;flex:none;border:1px solid #b68dcc45;border-radius:50%;display:grid;place-items:center;background:#ffffff05;color:#dcc5e9;transition:background .2s,border-color .2s}
.footer-motion>.icon{width:12px;height:12px}
.footer-motion:hover{background:#ffffff10;border-color:#d2a8e5}
.footer-motion:focus-visible{outline:2px solid #deb7f0;outline-offset:4px}
.footer-motion[hidden]{display:none}
@keyframes flow-violet-drift{from{transform:translate3d(-30px,0,0) scale(.95)}to{transform:translate3d(160px,90px,0) scale(1.14)}}
@keyframes flow-rose-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-140px,-100px,0) scale(1.1)}}
@keyframes flow-signal-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes footer-edge-flow{from{background-position:0 0}to{background-position:100% 0}}

/* Compact return-to-top control; its ring also shows reading progress. */
.scroll-top{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:45;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#352045;color:#f7effb;border:1px solid #ffffffcc;box-shadow:0 4px 20px #27133726;animation:scroll-top-arrive .25s ease both;transition:background .2s,box-shadow .2s}
.scroll-top[hidden]{display:none}
.scroll-top>.icon{width:17px;height:17px;transform:rotate(-90deg)}
.scroll-top-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1.1;pointer-events:none}
.scroll-top-track{stroke:#d9b8e72b}
.scroll-top-progress{stroke:#d3a5ec;stroke-dasharray:100;stroke-dashoffset:var(--scroll-top-offset,100);transform:rotate(-90deg);transform-origin:center}
.scroll-top:hover{background:#573169;box-shadow:0 5px 25px #27133738}
.scroll-top:focus-visible{outline:2px solid #86519d;outline-offset:4px}
@keyframes scroll-top-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}

/* Quiet motion within the existing diagonal photo field. */
.page-banner{--flow-motion-state:running}
.page-banner.banner-motion-paused,.page-banner.banner-is-idle{--flow-motion-state:paused}
.banner-atmosphere{z-index:1;inset:0 auto 0 0;width:60%;clip-path:polygon(0 0,100% 0,87% 100%,0 100%);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 95%,transparent)}
.banner-atmosphere .flow-glow-violet{width:620px;height:330px;left:8%;top:-95px;background:radial-gradient(ellipse,#9d77c326,transparent 70%);animation-duration:26s}
.banner-atmosphere .flow-glow-rose{width:360px;height:240px;left:36%;bottom:-120px;background:radial-gradient(ellipse,#cf678514,transparent 69%)}
.banner-atmosphere .flow-lines{opacity:.9}
.banner-atmosphere .flow-traces{stroke:#80589926;stroke-width:.85}
.banner-atmosphere .flow-signal{stroke-width:1.7;filter:drop-shadow(0 0 3px #ad7bcc33)}
.banner-atmosphere .signal-violet{color:#9765b2b3}
.banner-atmosphere .signal-pearl{color:#7b5d9d80;stroke-dasharray:1.6 98.4}
.banner-atmosphere .signal-rose{color:#d4466d91;stroke-dasharray:.35 99.65;stroke-width:3}
.banner-photo-drift{position:absolute;inset:-12px;animation:banner-photo-breathe 15s ease-in-out infinite alternate;will-change:transform}
.banner-photo-drift>.page-banner-photo{transform:translate3d(var(--banner-mx,0px),var(--banner-my,0px),0) scale(1.015);transition:transform .85s cubic-bezier(.2,.7,.2,1);will-change:transform}
.page-banner-visual:after{inset:-20% auto auto -35%;width:32%;height:140%;box-shadow:none;background:linear-gradient(90deg,transparent,#ffffff18,transparent);transform:translateX(-100%) skewX(-18deg);animation:banner-light-pass 12s ease-in-out infinite;pointer-events:none}
.banner-trace:after{animation:banner-signal-travel 8s ease-in-out infinite alternate}
.page-banner-title{animation:banner-title-arrive .72s .08s both}
.banner-motion{position:absolute;z-index:4;right:max(28px,calc((100vw - 1320px)/2));bottom:23px;display:grid;place-items:center;width:34px;height:34px;background:#24152b73;color:#fff;border:1px solid #e2c8f052;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,border-color .2s}
.banner-motion>.icon{width:13px;height:13px}
.banner-motion:hover{background:#4d2c64b3;border-color:#dfb8f3}
.banner-motion:focus-visible{outline-color:#e4bcf8;outline-offset:3px}
.banner-motion[hidden]{display:none}
.banner-motion-paused .banner-photo-drift,.banner-motion-paused .page-banner-visual:after,.banner-motion-paused .banner-trace:after,.banner-is-idle .banner-photo-drift,.banner-is-idle .page-banner-visual:after,.banner-is-idle .banner-trace:after{animation-play-state:paused}
@keyframes banner-photo-breathe{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.055) translate3d(-5px,1px,0)}}
@keyframes banner-light-pass{0%,18%{transform:translateX(-100%) skewX(-18deg);opacity:0}25%{opacity:.8}55%,100%{transform:translateX(610%) skewX(-18deg);opacity:0}}
@keyframes banner-signal-travel{from{transform:translateX(0)}to{transform:translateX(165px)}}
@keyframes banner-title-arrive{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:860px){
  .product-photo{height:182px}
  .product-card-body{padding:24px;min-height:218px}
  .product-card-body>h3{font-size:22px}
  .banner-motion{right:24px;bottom:22px}
}
@media(max-width:600px){
  .product-card{padding:0;min-height:0}
  .product-photo{height:192px}
  .product-photo-category{font-size:10px;left:19px;bottom:15px;padding:5px 9px}
  .product-card-body{padding:24px;min-height:218px}
  .product-card-body>h3{font-size:24px;line-height:1.23;margin-bottom:13px}
  .product-card-body>p{font-size:13px;line-height:1.85}
  .product-card-body>.product-bottom{font-size:12px;padding-top:16px}
  .chemical-detail-visual{height:195px}
  .footer-atmosphere .flow-glow-violet{width:100vw;top:-80px;left:-90px}
  .footer-atmosphere .flow-glow-rose{width:85vw;left:5%;bottom:5%}
  .footer-next .footer-bottom{padding-bottom:77px}
  .scroll-top{width:42px;height:42px;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .banner-motion{right:20px;bottom:18px;width:32px;height:32px;background:#3b244ab3}
  .banner-atmosphere{width:100%;clip-path:none;opacity:.72}
  .banner-atmosphere .flow-glow-violet{width:100vw;left:0;top:-70px}
  .page-banner-visual:after{background:linear-gradient(90deg,transparent,#ffffff35,transparent)}
}
@media(hover:hover) and (pointer:fine){
  .product-card:hover .product-photo>img{transform:scale(1.045);filter:saturate(.94) contrast(1.04) brightness(1.02)}
}
@media(prefers-reduced-motion:reduce){
  .banner-photo-drift,.banner-trace:after,.page-banner-title,.page-banner-visual:after{animation:none!important}
  .banner-photo-drift>.page-banner-photo{transform:none!important;transition:none!important}
  .page-banner-visual:after{opacity:0}
  .banner-motion{display:none}
  .product-photo>img,.chemical-detail-visual>img{transition:none;transform:none!important}
  .reveal{opacity:1;translate:none;transform:none;transition:none}
  .flow-glow,.flow-signal,.footer-next:after,.scroll-top{animation:none!important}
  .flow-signal{display:none}
  .footer-motion{display:none}
}