/* ============================================================
   YAER — FX LAYER (motion / canvas / scrollytelling)
   Loaded after main.css
   ============================================================ */

/* ---------- 0. grain + scroll progress ---------- */
.fx-grain{
  position:fixed;inset:-60%;z-index:9996;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='.75'/></svg>");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}
  60%{transform:translate(-4%,-4%)}80%{transform:translate(5%,3%)}100%{transform:translate(0,0)}
}
.fx-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:10000;
  background:linear-gradient(90deg,var(--aqua-600),var(--aqua-300));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  box-shadow:0 0 14px rgba(46,151,168,.55);
}

/* ---------- 1. preloader ---------- */
.fx-pre{
  position:fixed;inset:0;z-index:10005;display:grid;place-items:center;
  background:radial-gradient(120% 110% at 50% -10%,#0E3242 0%,#071B24 62%);
  clip-path:inset(0 0 0 0);transition:clip-path 1.05s cubic-bezier(.77,0,.18,1);
}
.fx-pre.done{clip-path:inset(0 0 100% 0)}
.fx-pre-inner{text-align:center;color:#fff}
.fx-pre-logo{display:flex;align-items:center;justify-content:center;gap:20px}
.fx-pre svg{width:68px;height:68px;display:block;color:#fff;flex:none}
.fx-pre svg .d{stroke-dasharray:132;stroke-dashoffset:132;animation:fxDraw 1.35s cubic-bezier(.6,0,.2,1) forwards}
.fx-pre svg .d2{animation-delay:.3s}
@keyframes fxDraw{to{stroke-dashoffset:0}}
.fx-pre-brand{font-family:var(--font-display);letter-spacing:.2em;font-size:32px;line-height:1;text-align:left}
.fx-pre-brand span{display:block;font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.5em;opacity:.6;margin-top:9px}
.fx-pre-bar{width:190px;height:2px;background:rgba(255,255,255,.13);margin:28px auto 12px;border-radius:2px;overflow:hidden}
.fx-pre-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--aqua-600),var(--aqua-300));transition:width .2s linear}
.fx-pre-num{font-size:10px;letter-spacing:.34em;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
body.fx-loading{overflow:hidden}

/* ---------- 2. page curtain transition ---------- */
.fx-curtain{
  position:fixed;inset:0;z-index:10004;pointer-events:none;
  background:radial-gradient(120% 110% at 50% -10%,#0E3242 0%,#071B24 62%);
  clip-path:circle(0 at var(--cx,50%) var(--cy,50%));
}
.fx-curtain.on{
  clip-path:circle(150% at var(--cx,50%) var(--cy,50%));
  transition:clip-path .58s cubic-bezier(.77,0,.18,1);
}
.fx-curtain::after{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(60% 60% at 50% 50%,rgba(46,151,168,.35),transparent 70%);
}
.fx-curtain.on::after{opacity:1}

/* logo lockup shown while the next page loads */
.fx-curtain-logo{
  position:absolute;left:50%;top:50%;
  display:flex;align-items:center;gap:22px;color:#fff;
  transform:translate(-50%,-50%) scale(.92);opacity:0;
  transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1);
}
.fx-curtain.on .fx-curtain-logo{
  opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:.26s;
}
.fx-curtain-logo svg{width:76px;height:76px;flex:none;color:#fff}
.fx-curtain-logo .word{
  font-family:var(--font-display);font-size:36px;font-weight:600;
  letter-spacing:.2em;line-height:1;text-align:left;
}
.fx-curtain-logo .word small{
  display:block;font-family:var(--font-body);font-size:11px;font-weight:700;
  letter-spacing:.5em;opacity:.62;margin-top:10px;
}
.fx-curtain-logo .bar{
  position:absolute;left:50%;bottom:-40px;transform:translateX(-50%);
  width:170px;height:2px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.14);
}
.fx-curtain-logo .bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--aqua-600),var(--aqua-300));
}
.fx-curtain.on .fx-curtain-logo .bar i{
  animation:fxCurtainBar 1.1s cubic-bezier(.3,.7,.2,1) .3s forwards;
}
@keyframes fxCurtainBar{from{width:0}to{width:100%}}

/* ---------- 4. hero canvas / fx ---------- */
#fxc{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-spot{
  position:absolute;left:0;top:0;width:760px;height:760px;border-radius:50%;pointer-events:none;
  z-index:1;mix-blend-mode:screen;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle,rgba(143,196,205,.22),rgba(46,151,168,.06) 45%,transparent 66%);
  transform:translate(-50%,-50%);
}
.hero-sweep{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.hero-sweep::before{
  content:"";position:absolute;top:-45%;left:-70%;width:52%;height:190%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13) 45%,rgba(255,255,255,.2),transparent);
  transform:rotate(17deg);filter:blur(6px);animation:fxSweep 7.5s ease-in-out infinite;
}
@keyframes fxSweep{0%,100%{left:-75%;opacity:0}42%{left:118%;opacity:.9}58%{left:118%;opacity:0}}
.hero-wave{position:absolute;left:0;right:0;bottom:-2px;height:110px;z-index:2;pointer-events:none;opacity:.55}
.hero-wave path{fill:none;stroke:rgba(143,196,205,.5);stroke-width:1.2}
.hero-wave svg{width:100%;height:100%;animation:fxWave 11s ease-in-out infinite alternate}
@keyframes fxWave{from{transform:translateX(-1.6%) scaleY(.92)}to{transform:translateX(1.6%) scaleY(1.08)}}

/* hero title light shimmer */
.hero-title{
  background:linear-gradient(96deg,#FFFFFF 18%,#DFF2F4 38%,#FFFFFF 56%,#C9E7EC 76%,#FFFFFF 92%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:fxShine 10s linear infinite;
}
.hero-title em{-webkit-text-fill-color:#8FC4CD}
@keyframes fxShine{from{background-position:0 0}to{background-position:240% 0}}

/* ---------- 5. word / line reveal ---------- */
.fx-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.fx-w-i{
  display:inline-block;transform:translateY(118%) rotate(2.5deg);
  opacity:0;transition:transform .95s cubic-bezier(.22,.61,.2,1),opacity .65s ease;
}
.fx-on .fx-w-i{transform:none;opacity:1}
.fx-kicker-in{animation:fxKick .9s var(--ease) both}
@keyframes fxKick{from{letter-spacing:.6em;opacity:0}to{letter-spacing:.32em;opacity:1}}

/* ---------- 6. tilt + sheen ---------- */
.fx-tilt{transition:transform .09s linear,box-shadow .45s var(--ease)!important;will-change:transform;z-index:3}
.fx-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:linear-gradient(var(--ga,120deg),rgba(255,255,255,.22),transparent 42%,transparent 70%,rgba(255,255,255,.06));
  opacity:0;transition:opacity .35s;mix-blend-mode:soft-light}
.fx-tilt .fx-sheen{opacity:1}
.pc-media::after{
  content:"";position:absolute;top:-60%;left:-90%;width:60%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:rotate(20deg);opacity:0;
}
.product-card:hover .pc-media::after{animation:fxCardSweep .9s ease-out forwards}
@keyframes fxCardSweep{0%{left:-90%;opacity:0}25%{opacity:.85}100%{left:130%;opacity:0}}

/* ---------- 7. magnetic + ink ---------- */
.fx-mag{transition:transform .4s cubic-bezier(.22,.61,.2,1),box-shadow .35s!important;will-change:transform}
.btn{position:relative}
.btn .fx-ink{
  position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.32);
  transform:translate(-50%,-50%) scale(0);animation:fxInk .75s cubic-bezier(.22,.61,.2,1) forwards;
}
@keyframes fxInk{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- 8. parallax media ---------- */
.fx-par{will-change:transform;transition:transform .1s linear}

/* ---------- 9. ambient blobs ---------- */
.fx-blob{
  position:absolute;width:44vw;max-width:620px;aspect-ratio:1;border-radius:50%;
  pointer-events:none;z-index:0;filter:blur(64px);opacity:.55;
  background:radial-gradient(circle,rgba(143,196,205,.34),rgba(46,151,168,.06) 55%,transparent 72%);
  animation:fxBlob 18s ease-in-out infinite alternate;
}
.fx-blob.b2{
  background:radial-gradient(circle,rgba(217,207,188,.4),transparent 70%);
  animation-duration:24s;animation-direction:alternate-reverse;
}
.fx-blob.b3{
  background:radial-gradient(circle,rgba(30,122,140,.3),transparent 70%);
  animation-duration:21s;
}
@keyframes fxBlob{from{transform:translate(-7%,-5%) scale(.94)}to{transform:translate(9%,7%) scale(1.16)}}
.section>.container,.section-tight>.container,.hero-content{position:relative;z-index:1}

/* ---------- 10. FILMSTRIP ---------- */
.filmstrip{position:relative;overflow:hidden;padding:6px 0}
.fs-track{display:flex;gap:18px;width:max-content;will-change:transform;animation:fsRoll 34s linear infinite}
.filmstrip:hover .fs-track{animation-play-state:paused}
.fs-item{
  position:relative;flex:none;width:min(44vw,470px);aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  box-shadow:0 18px 40px rgba(10,37,48,.14);transform:var(--skx,none);
}
.fs-item img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.fs-item:hover img{transform:scale(1.09);filter:saturate(1.1)}
.fs-item::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,27,36,.72));
  opacity:.85;transition:opacity .4s;
}
.fs-item:hover::after{opacity:.55}
.fs-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.fs-cap b{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.01em}
.fs-cap span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.6}
.fs-hint{display:flex;align-items:center;gap:12px;color:var(--ink-300);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-top:22px}
.fs-hint i{width:40px;height:1px;background:var(--aqua-600);display:block}
@keyframes fsRoll{to{transform:translateX(-50%)}}

/* ---------- 11. FINISH LAB (scrollytelling) ---------- */
.finish-lab{
  position:relative;height:230vh;background:var(--navy-950);color:#fff;overflow:clip;
}
.finish-lab .fl-glow{
  position:absolute;left:50%;top:50%;width:70vw;height:70vw;max-width:900px;max-height:900px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(46,151,168,.24),transparent 62%);
  filter:blur(30px);transition:background .8s;
}
.fl-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.fl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;width:100%}
.fl-head{position:relative;margin-bottom:clamp(14px,2.4vh,30px);z-index:3}
.fl-head .kicker{color:var(--aqua-300)}
.fl-head h2{font-size:clamp(30px,3.6vw,50px);color:#F3F7F7;margin-top:14px}
.fl-head h2 em{font-style:italic;color:#8FC4CD}

.fl-orb-wrap{display:flex;justify-content:center;align-items:center}

/* spray stage: shower head + live water columns */
.sp-stage{position:relative;width:min(560px,44vw,56vh);aspect-ratio:.86;margin:0 auto}
.sp-stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.sp-riser{
  position:absolute;left:50%;top:-9%;width:11px;height:17%;transform:translateX(-50%);
  background:linear-gradient(90deg,#46535A,#C6D3D8 42%,#6E7C82);
  border-radius:5px;z-index:1;
}
.sp-head{
  position:absolute;left:50%;top:5%;width:68%;height:15%;transform:translateX(-50%);
  border-radius:50%;z-index:3;
  background:linear-gradient(180deg,#F0F5F7 0%,#C6D2D7 44%,#7E8B91 72%,#BAC7CC 90%,#DFE9EC 100%);
  box-shadow:0 24px 48px rgba(0,0,0,.55),inset 0 -10px 20px rgba(0,0,0,.32),inset 0 7px 14px rgba(255,255,255,.6);
}
.sp-head .sp-face{
  position:absolute;inset:14% 5% 20%;
  border-radius:50%;overflow:hidden;
  background:
    radial-gradient(circle,rgba(16,32,40,.68) 1px,transparent 1.5px) 0 0/9px 9px,
    radial-gradient(ellipse at 50% 26%,rgba(255,255,255,.4),transparent 62%),
    linear-gradient(180deg,#6D7B81,#26333A);
  box-shadow:inset 0 4px 9px rgba(255,255,255,.3),inset 0 -8px 14px rgba(0,0,0,.55);
}
.sp-pool{
  position:absolute;left:8%;right:8%;bottom:1%;height:11%;border-radius:50%;z-index:4;
  background:radial-gradient(ellipse at 50% 45%,rgba(196,236,243,.26),rgba(120,190,204,.1) 52%,transparent 72%);
  filter:blur(4px);
}
.sp-glow{
  position:absolute;inset:-12% -8% -4%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 44%,rgba(143,196,205,.22),rgba(46,151,168,.07) 46%,transparent 66%);
}

.fl-side{display:flex;flex-direction:column;gap:26px}
.fl-rail{display:flex;flex-direction:column;gap:0}
.fl-rail button{
  display:flex;align-items:center;gap:16px;padding:13px 0;text-align:left;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.32);transition:color .35s,letter-spacing .35s;
  border-bottom:1px solid rgba(255,255,255,.06);width:100%;
}
.fl-rail button i{
  width:16px;height:2px;border-radius:2px;background:currentColor;flex:none;display:block;
  transition:width .35s var(--ease),background .35s,opacity .35s;opacity:.55;
}
.fl-rail button.active{color:#fff;letter-spacing:.26em}
.fl-rail button.active i{width:34px;background:var(--aqua-300);opacity:1}
.fl-name{font-family:var(--font-display);font-size:clamp(28px,3vw,44px);line-height:1.1;margin-top:4px;color:#fff}
.fl-desc{font-size:14.5px;color:rgba(234,242,243,.62);max-width:420px;margin-top:12px}
.fl-progress{display:flex;align-items:center;gap:14px;margin-top:10px;font-size:11px;letter-spacing:.26em;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.fl-progress i{flex:1;height:1px;background:rgba(255,255,255,.14);position:relative;overflow:hidden;display:block}
.fl-progress i::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--flp,0%);background:var(--aqua-300);transition:width .2s linear}
.fl-scroll-hint{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:3;
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.4);
  display:flex;align-items:center;gap:10px;
}
.fl-scroll-hint i{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.5),transparent);display:block}

/* ---------- 12. misc ---------- */
.fx-h2-word{will-change:transform}
.value-card h3,.tl-item b{position:relative}
.toc-rail{transition:opacity .4s}
@media (max-width:900px){
  .fl-grid{grid-template-columns:1fr;gap:16px}
  .fl-orb-wrap{justify-content:center}
  .sp-stage{width:min(270px,64vw,40vh);aspect-ratio:.78}
  .fl-rail button{padding:8px 0;font-size:10px;letter-spacing:.12em}
  .fl-rail button.active{letter-spacing:.16em}
  .fl-name{font-size:26px}
  .fl-desc{font-size:12.5px;line-height:1.5;margin-top:6px}
  .finish-lab{height:190vh}
  .fl-head h2{font-size:24px}
  .fl-head{margin-bottom:10px}
  .fs-item{width:78vw}
}

/* ---------- 13. reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-w-i{transform:none!important;opacity:1!important}
  .hero-title{animation:none;-webkit-text-fill-color:#fff;color:#fff;background:none}
  .hero-title em{-webkit-text-fill-color:#8FC4CD}
  #fxc,.hero-sweep,.hero-wave,.fx-blob,.fx-grain,.sp-stage canvas{display:none}
  .fx-pre{display:none!important}
  .fs-track{animation:none}
}