/* ============================================================ ULTRALIFE DESIGN KIT · kit-motion.css Optional motion layer. Include AFTER kit.css, with kit-motion.js. Everything here is opt-in via the `m` class that kit-motion.js adds to ; with JS off or reduced-motion on, kit.css rules apply. Principle: one ease, real weight, nothing performs. ============================================================ */ :root{ --ease-liquid:cubic-bezier(.16,1,.3,1); /* fast start, long settle */ --ease-soft:cubic-bezier(.4,0,.2,1); --dur-word:1.1s; --dur-reveal:1.2s; } /* ---------- nav: fixed + glass once scrolled ---------- */ html.m nav:not(.nav-solid){ position:fixed; transition:padding .5s var(--ease-liquid),background .5s var(--ease-soft),border-color .5s var(--ease-soft),transform .6s var(--ease-liquid); border-bottom:1px solid transparent; } html.m nav:not(.nav-solid).is-scrolled{ padding:14px 0; background:rgba(14,13,11,.72); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line); } /* ---------- hero: load sequence ---------- */ html.m .hero-photo{ transform:scale(1.12); transform-origin:center 40%; will-change:transform; transition:transform 2.2s var(--ease-liquid); } html.m.loaded .hero-photo{transform:scale(1) translate3d(0,var(--hy,0px),0)} html.m.loaded .hero-photo.settled{transition:none} /* drifting ink pools: two blurred pools of rust + paper light, very low opacity. Pure transform + border-radius morph, so it stays cheap. */ .hero-pools{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 2.4s .3s var(--ease-soft);contain:strict} .hero-pools.is-idle{visibility:hidden} .hero-pools.is-idle .pool{animation-play-state:paused} html.m.loaded .hero-pools{opacity:1} .pool{position:absolute;border-radius:52% 48% 44% 56% / 55% 45% 55% 45%;filter:blur(72px);will-change:transform;mix-blend-mode:screen} .pool-a{width:56vw;height:56vw;max-width:760px;max-height:760px;left:-14vw;bottom:-22vw;background:radial-gradient(circle at 40% 40%,rgba(207,99,52,.7),rgba(207,99,52,0) 68%);animation:pool-a 26s var(--ease-soft) infinite alternate} .pool-b{width:44vw;height:44vw;max-width:600px;max-height:600px;right:-10vw;top:-16vw;border-radius:48% 52% 56% 44% / 46% 54% 46% 54%;background:radial-gradient(circle at 60% 60%,rgba(244,240,230,.16),rgba(244,240,230,0) 66%);animation:pool-b 34s var(--ease-soft) infinite alternate} @keyframes pool-a{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 50%{transform:translate3d(9vw,-6vw,0) rotate(18deg) scale(1.08)} 100%{transform:translate3d(3vw,-11vw,0) rotate(-12deg) scale(.96)} } @keyframes pool-b{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 50%{transform:translate3d(-8vw,7vw,0) rotate(-20deg) scale(1.1)} 100%{transform:translate3d(-2vw,12vw,0) rotate(14deg) scale(.94)} } @media(max-width:640px){.pool{filter:blur(48px)}.pool-a{width:85vw;height:85vw;bottom:-30vw}.pool-b{display:none}} /* hero text: the kit's per-span rise is replaced by word masks */ html.m .hero .eyebrow,html.m .hero .hero-sub,html.m .hero .hero-cta,html.m .hero .cta-note{ animation:none;opacity:0;transform:translateY(22px);filter:blur(6px); transition:opacity 1.1s var(--ease-liquid),transform 1.1s var(--ease-liquid),filter 1.1s var(--ease-liquid); } html.m.loaded .hero .eyebrow{opacity:1;transform:none;filter:none;transition-delay:.15s} html.m.loaded .hero .hero-sub{opacity:1;transform:none;filter:none;transition-delay:.85s} html.m.loaded .hero .hero-cta{opacity:1;transform:none;filter:none;transition-delay:1s} html.m.loaded .hero .cta-note{opacity:1;transform:none;filter:none;transition-delay:1.15s} /* ---------- word masks (hero h1 + every .sec-h) ---------- */ html.m .hero h1 span{animation:none;opacity:1} /* neutralize kit's span rise */ html.m .hero h1 .w{display:inline-block} html.m .hero h1 .wl{display:block} .m-words .wl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .hero h1.m-words .wl{display:block} .m-words .w{ display:inline-block; transform:translateY(112%) rotate(2deg); transform-origin:0 100%; transition:transform var(--dur-word) var(--ease-liquid); transition-delay:calc(var(--base,0s) + var(--i,0) * .055s); will-change:transform; } html.m.loaded .hero h1.m-words .w{transform:none} .hero h1.m-words{--base:.32s} .reveal.in .m-words .w{transform:none} /* ---------- scroll reveals: blur-to-sharp, longer settle ---------- */ html.m .reveal{ transform:translateY(34px);filter:blur(8px); transition:opacity var(--dur-reveal) var(--ease-liquid),transform var(--dur-reveal) var(--ease-liquid),filter var(--dur-reveal) var(--ease-liquid); } html.m .reveal.in{filter:none} /* children stagger: kit-motion.js sets --i on each child of [data-stagger] */ html.m [data-stagger] > *{ opacity:0;transform:translateY(18px); transition:opacity .9s var(--ease-liquid),transform .9s var(--ease-liquid),background .3s ease; transition-delay:calc(var(--i,0) * .07s); } html.m .reveal.in [data-stagger] > *{opacity:1;transform:none} /* section label: a rust rule grows in before the text */ html.m .sec-label{position:relative;display:inline-block} html.m .sec-label::before{ content:"";display:inline-block;vertical-align:middle;height:1px;width:0;margin-right:0;background:var(--rust); transition:width .9s var(--ease-liquid),margin-right .9s var(--ease-liquid); } html.m .reveal.in .sec-label::before,html.m.loaded .hero .sec-label::before{width:28px;margin-right:12px} /* image wipe: clip reveals left→right while the image settles from a zoom */ html.m [data-wipe]{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s var(--ease-liquid)} html.m [data-wipe] img{transform:scale(1.18);transition:transform 1.8s var(--ease-liquid)} html.m .reveal.in [data-wipe]{clip-path:inset(0 0 0 0)} html.m .reveal.in [data-wipe] img{transform:scale(1)} /* parallax targets: js writes --py in px */ html.m [data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform} /* quote rules draw in */ html.m .quote{border-top-color:transparent;position:relative} html.m .quote::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:100%;background:var(--rust);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease-liquid);transition-delay:calc(var(--i,0) * .12s)} html.m .reveal.in .quote::before{transform:scaleX(1)} /* ---------- buttons: magnetic + liquid fill ---------- */ html.m .btn-primary{position:relative;overflow:hidden;isolation:isolate;transition:color .3s ease,box-shadow .5s var(--ease-liquid);will-change:transform} html.m .btn-primary:hover{background:var(--rust);transform:none;box-shadow:0 14px 34px -14px rgba(207,99,52,.55)} html.m .btn-primary::after{ content:"";position:absolute;z-index:-1;left:var(--x,50%);top:var(--y,50%);width:0;height:0;border-radius:50%; background:var(--rust-bright);transform:translate(-50%,-50%); transition:width .7s var(--ease-liquid),height .7s var(--ease-liquid); } html.m .btn-primary:hover::after{width:520px;height:520px} html.m .btn-primary > *{position:relative;z-index:1} html.m .nav-cta{will-change:transform} html.m .btn-primary.magnetic{transition:transform .6s var(--ease-liquid),color .3s ease,box-shadow .5s var(--ease-liquid)} html.m .nav-cta.magnetic{transition:transform .6s var(--ease-liquid),border-color .2s ease,background .2s ease} html.m .magnetic.is-magnet{transition-duration:.12s;transition-timing-function:linear} /* ---------- misc ---------- */ html.m .pillar,html.m .day,html.m .inc{transition:background .35s var(--ease-soft),transform .6s var(--ease-liquid)} html.m .day:hover,html.m .pillar:hover{transform:translateY(-3px)} html.m .faq details{transition:background .3s ease} html.m .faq summary::after{transition:transform .5s var(--ease-liquid)} html.m .faq details[open] summary::after{transform:rotate(180deg)} /* ---------- reduced motion: kit-motion.js never adds .m, but belt and braces ---------- */ @media(prefers-reduced-motion:reduce){ html.m .reveal,html.m [data-stagger] > *,html.m .m-words .w,html.m [data-wipe],html.m [data-wipe] img,html.m .hero-photo, html.m .hero .eyebrow,html.m .hero .hero-sub,html.m .hero .hero-cta,html.m .hero .cta-note{ opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important;transition:none !important; } .pool{animation:none} }