/* ============================================================ Kose — scroll-motion layer (front-end only; NOT an editor style). Progressive enhancement: effects only apply once has .mabels-js. ============================================================ */ /* Scroll progress bar */ .mabels-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; transform:scaleX(0); transform-origin:0 50%; background:linear-gradient(90deg, var(--m-logo-clay), var(--m-clay)); will-change:transform; } /* Sticky header: shrink + shadow on scroll */ .mabels-nav{ transition:min-height .35s ease, padding .35s ease; } .mabels-header-wrap{ transition:box-shadow .35s ease, background .35s ease; } .mabels-header-wrap.m-scrolled{ box-shadow:0 6px 26px rgba(58,51,46,.08); background:rgba(248,243,237,.96); } .mabels-header-wrap.m-scrolled .mabels-nav{ min-height:60px; } /* Reveal-on-scroll (only when JS is present) */ .mabels-js .m-reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; } .mabels-js .m-reveal.m-in{ opacity:1; transform:none; } /* Hero parallax: the product drifts gently as you scroll (JS feeds --py2). */ .mabels-js .mabels-hero .mabels-hero-emoji{ transform:translateY(var(--py2, 0px)); } /* Micro-interactions */ .mabels-cat-ico{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .mabels-cat:hover .mabels-cat-ico{ transform:scale(1.1) rotate(-4deg); } .woocommerce ul.products li.product a img{ transition:transform .55s ease; } .woocommerce ul.products li.product:hover a img{ transform:scale(1.05); } .mabels-ecard .mabels-ecard-ph{ transition:transform .5s ease; } .mabels-ecard:hover .mabels-ecard-ph{ transform:scale(1.04); } .mabels-ecard{ overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; } .mabels-ecard:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(58,51,46,.10); } .mabels-ig{ transition:transform .35s ease, filter .25s ease; } .mabels-ig:hover{ transform:translateY(-4px) scale(1.02); } /* Press → infinite marquee */ .mabels-marquee{ display:block !important; overflow:hidden; padding-left:0; padding-right:0; } .mabels-marquee-wrap{ display:flex; width:max-content; animation:mabels-marq 30s linear infinite; } .mabels-marquee:hover .mabels-marquee-wrap{ animation-play-state:paused; } .mabels-marquee-track{ display:flex; align-items:center; gap:46px; padding:0 23px; } @keyframes mabels-marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } /* Respect reduced motion — belt & braces */ @media (prefers-reduced-motion: reduce){ .mabels-js .m-reveal{ opacity:1 !important; transform:none !important; } .mabels-marquee-wrap{ animation:none !important; } .mabels-progress{ display:none; } }