/* ============================================================ WaveDrops — motion layer (additive). Loads AFTER the inline base styles. Everything here is progressive enhancement gated by (added by motion.js only when motion is allowed). Without JS or with prefers-reduced-motion, the base page renders fully and legibly. ============================================================ */ /* ---- custom cursor ---- */ .cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none; border-radius:50%;transform:translate(-50%,-50%);will-change:transform;opacity:0} .cursor-dot{width:7px;height:7px;background:var(--sage-deep)} .cursor-ring{width:38px;height:38px;border:1.5px solid rgba(61,85,64,.5); transition:width .25s ease,height .25s ease,background .25s ease,border-color .25s ease} html.mo.cursor-on .cursor-dot,html.mo.cursor-on .cursor-ring{opacity:1} html.mo.cursor-on.hovering .cursor-ring{width:64px;height:64px;background:rgba(195,154,63,.12);border-color:rgba(195,154,63,.6)} html.mo.cursor-on.pressing .cursor-ring{width:30px;height:30px} @media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}} html.mo.cursor-on *{cursor:none!important} /* ---- animated gradient-mesh + grain background ---- */ #bg-mesh{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.9} .grain{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.05;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,")} /* ---- hero 3D bottle + particles ---- */ .stage{position:relative} #hero-particles{position:absolute;inset:-6% -4%;z-index:1;pointer-events:none} #bottle3d{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:none} html.mo.bottle3d-on .stage img.prod{opacity:0;transition:opacity .6s ease} /* hide flat fallback when 3D live */ html.mo.bottle3d-on #bottle3d{display:block} .stage .contact-shadow{position:absolute;left:50%;bottom:7%;width:56%;height:8%;z-index:2; transform:translateX(-50%);border-radius:50%;pointer-events:none; background:radial-gradient(ellipse at center,rgba(34,53,40,.35),transparent 70%); filter:blur(6px);opacity:0} html.mo.bottle3d-on .stage .contact-shadow{opacity:1} /* scroll cue */ .scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5; display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--sage-deep); font:600 .68rem/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;opacity:.85} .scroll-cue .mouse{width:22px;height:34px;border:2px solid rgba(61,85,64,.55);border-radius:12px;position:relative} .scroll-cue .mouse::before{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px; background:var(--sage-deep);transform:translateX(-50%);animation:cue 1.6s ease-in-out infinite} @keyframes cue{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}60%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}} /* ---- floating Buy pill (appears after hero) ---- */ .buy-float{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;gap:9px; padding:14px 22px;border-radius:999px;font:600 .95rem Inter,sans-serif;color:#3a2a05;text-decoration:none; background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-deep)); box-shadow:0 14px 34px -10px rgba(156,116,32,.75); opacity:0;transform:translateY(24px) scale(.9);pointer-events:none; transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1)} .buy-float.show{opacity:1;transform:none;pointer-events:auto} .buy-float:hover{transform:translateY(-3px)} @media (max-width:560px){.buy-float{right:14px;bottom:14px;padding:13px 18px;font-size:.9rem}} /* ---- magnetic wrapper ---- */ .mag{display:inline-flex;will-change:transform} /* ---- hero headline word-mask reveal ---- */ .hero h1 .line{display:block} .hero h1 .word{display:inline-block} html.mo .hero h1 .word{opacity:0} .hero h1 .grad .word{background:linear-gradient(120deg,var(--sage-deep),var(--leaf)); -webkit-background-clip:text;background-clip:text;color:transparent} /* ---- generic GSAP reveal targets (motion.js drives these; base page shows them via inline [data-reveal] too) ---- */ html.mo [data-mo]{opacity:0} /* ---- carvacrol radial ring (seal on the product card) ---- */ .ring-wrap{position:absolute;right:-8px;bottom:-8px;z-index:4;width:120px;height:120px; background:#fff;border-radius:50%;box-shadow:var(--shadow);display:grid;place-items:center} .ring-wrap svg{width:98px;height:98px;transform:rotate(-90deg)} .ring-wrap .track{fill:none;stroke:#e6e1d3;stroke-width:12} .ring-wrap .prog{fill:none;stroke:url(#ringgrad);stroke-width:12;stroke-linecap:round; stroke-dasharray:408;stroke-dashoffset:408} .ring-wrap .val{position:absolute;inset:0;display:flex;align-items:baseline;justify-content:center;gap:1px; font:700 1.5rem Fraunces,serif;color:var(--sage-deep)} .ring-wrap .val i{font-size:.82rem;color:var(--gold);font-style:normal} @media (max-width:900px){.ring-wrap{right:10px;bottom:-14px}} /* ---- how-to-use timeline drop path ---- */ .tl{position:relative} .tl-line{position:absolute;left:0;right:0;top:38px;height:40px;z-index:0;pointer-events:none} .tl-line svg{width:100%;height:100%;overflow:visible} .tl-line .path{fill:none;stroke:#dcd6c6;stroke-width:2;stroke-dasharray:6 8} .tl-line .path-fill{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round} .tl-drop{fill:var(--gold-deep)} @media (max-width:900px){.tl-line{display:none}} /* ---- comparison animated check ---- */ .cmp .chk{width:22px;height:22px;display:inline-block;vertical-align:middle;color:var(--leaf)} .cmp .chk path{stroke:currentColor;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:30;stroke-dashoffset:30} html:not(.mo) .cmp .chk path{stroke-dashoffset:0} /* no-JS: show checks */ /* ---- stat tilt ---- */ .stat{transform-style:preserve-3d;will-change:transform} .stat .num .count{display:inline-block} /* ---- draw-on botanical illustration ---- */ .botanical{position:absolute;pointer-events:none;z-index:0;opacity:.9} .botanical path,.botanical circle{fill:none;stroke:var(--sage);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .botanical .seed{fill:var(--sage-dark);stroke:none} html.mo .botanical .draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)} /* ---- hero product 2.5D (JS owns the transform; kill the base float) ---- */ .stage img.prod{height:auto} /* the width/height attrs must not lock the aspect */ html.mo.prod25-on .stage img.prod{animation:none;will-change:transform;max-width:560px; filter:drop-shadow(0 34px 42px rgba(34,53,40,.32))} /* ---- art-direct the real scene photos ---- */ .split .media .card{overflow:hidden} .split .media .card img{aspect-ratio:4/3;object-fit:cover;width:100%} html.mo .split .media .card img{scale:1.12} /* headroom for parallax drift, no edge gap */ .learn .frame img{aspect-ratio:4/5;object-fit:cover;width:100%} /* ---- how-to-use dropper moment ---- */ .dropper-moment{width:270px;margin:0 auto 36px;border-radius:22px;overflow:hidden; box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:4/5;position:relative} .dropper-moment img{width:100%;height:100%;object-fit:cover} .dropper-moment::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 55%,rgba(24,37,28,.28))} /* ---- final CTA lifestyle background ---- */ .final .final-bg{position:absolute;inset:0;z-index:0; background:url(../img/hero-lifestyle-1400.webp) center/cover no-repeat;opacity:.3} .final .final-scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(135deg,rgba(24,37,28,.9),rgba(34,53,40,.8))} .final .wrap{position:relative;z-index:2} .final .blob{z-index:1} /* ---- footer top wave ---- */ .foot-wave{display:block;width:100%;height:56px;line-height:0;margin-bottom:-1px} .foot-wave svg{width:100%;height:100%} /* ---- reduced motion: neutralise everything, keep content ---- */ @media (prefers-reduced-motion:reduce){ #bg-mesh,#hero-particles,.grain,.scroll-cue{display:none!important} .cursor-dot,.cursor-ring{display:none!important} html.mo *{cursor:auto!important} html.mo .hero h1 .word{transform:none!important} html.mo [data-mo]{opacity:1!important} .ring-wrap .prog{stroke-dashoffset:82!important} /* ~80% shown statically */ .cmp .chk path{stroke-dashoffset:0!important} html.mo.bottle3d-on .stage img.prod{opacity:1!important} #bottle3d{display:none!important} .buy-float{transition:none!important} }