
/* MeuAfeto V8.2 — Motion System
   Motion is deliberately separated from the core design system.
   Everything remains visible and usable if JavaScript is unavailable. */
:root{
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-ease:cubic-bezier(.65,0,.35,1);
  --motion-spring:cubic-bezier(.2,.9,.25,1.16);
  --motion-fast:220ms;
  --motion-medium:560ms;
  --motion-slow:900ms;
}

/* progress / page entrance */
.mf-scroll-progress{position:fixed;z-index:100;left:0;top:0;width:100%;height:2px;pointer-events:none;transform:scaleX(var(--mf-scroll,0));transform-origin:0 50%;background:linear-gradient(90deg,#68E85F,#F4B942);box-shadow:0 0 18px rgba(103,223,93,.5)}
.mf-motion body{animation:mfPageIn .55s var(--motion-ease-out) both}
@keyframes mfPageIn{from{opacity:.001;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Header: state rather than position jump. */
.mf-motion .mf-header{transition:background .5s var(--motion-ease-out),box-shadow .5s var(--motion-ease-out),border-color .5s var(--motion-ease-out)}
.mf-motion .mf-header.is-scrolled{background:rgba(5,13,19,.94);border-color:rgba(255,255,255,.075);box-shadow:0 16px 36px rgba(0,0,0,.22)}
.mf-motion .mf-brand__mark{transition:transform .6s var(--motion-ease-out),border-radius .6s var(--motion-ease-out),background .6s var(--motion-ease-out)}
.mf-motion .mf-brand:hover .mf-brand__mark{transform:translateY(-1px) scale(1.045);border-radius:14px;background:rgba(104,232,95,.075)}
.mf-motion .mf-nav a{position:relative}
.mf-motion .mf-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--green2);transition:right .42s var(--motion-ease-out)}
.mf-motion .mf-nav a:hover:after{right:0}
.mf-motion .mf-search{transition:width .5s var(--motion-ease-out),background .5s var(--motion-ease-out),border-color .5s var(--motion-ease-out),box-shadow .5s var(--motion-ease-out),transform .5s var(--motion-ease-out)}
.mf-motion .mf-search:focus-within{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.16),0 0 0 3px rgba(103,223,93,.055)}
.mf-motion .mf-search button .mf-icon{transition:transform .45s var(--motion-spring),color .3s}
.mf-motion .mf-search:focus-within button .mf-icon{transform:rotate(-8deg) scale(1.08);color:var(--green2)}

/* Magnetic CTA: JS only sets variables; CSS handles the movement. */
.mf-motion .mf-btn,.mf-motion .mf-header__offer{--mag-x:0px;--mag-y:0px;transform:translate3d(var(--mag-x),var(--mag-y),0);transition:transform .45s var(--motion-ease-out),box-shadow .35s var(--motion-ease-out),background .35s,border-color .35s;position:relative;overflow:hidden}
.mf-motion .mf-btn:before,.mf-motion .mf-header__offer:before{content:"";position:absolute;inset:-2px;transform:translateX(-115%) skewX(-18deg);background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.25),transparent 72%);transition:transform .7s var(--motion-ease-out);pointer-events:none}
.mf-motion .mf-btn:hover:before,.mf-motion .mf-header__offer:hover:before{transform:translateX(115%) skewX(-18deg)}
.mf-motion .mf-btn span,.mf-motion .mf-product-card__cta span{display:inline-block;transition:transform .38s var(--motion-spring)}
.mf-motion .mf-btn:hover span,.mf-motion .mf-product-card__cta:hover span{transform:translateX(4px)}

/* Scroll reveal: progressive enhancement only while html.mf-motion is present. */
.mf-motion [data-motion-reveal],.mf-motion [data-reveal]{opacity:0;transform:translate3d(0,32px,0);filter:blur(6px);transition:opacity .75s var(--motion-ease-out),transform .85s var(--motion-ease-out),filter .75s var(--motion-ease-out);transition-delay:var(--motion-delay,0ms)}
.mf-motion [data-motion-reveal].is-motion-visible,.mf-motion [data-reveal].is-motion-visible{opacity:1;transform:none;filter:blur(0)}
.mf-motion [data-motion-mask]{clip-path:inset(0 0 100% 0);transform:translateY(18px);opacity:.3;transition:clip-path .85s var(--motion-ease-out),transform .85s var(--motion-ease-out),opacity .6s var(--motion-ease-out);transition-delay:var(--motion-delay,0ms)}
.mf-motion [data-motion-mask].is-motion-visible{clip-path:inset(0 0 0 0);transform:none;opacity:1}

/* Hero — easing, delay, mask, dimension and parallax. */
.mf-motion .mf-hero-slide.is-active{animation:mfHeroSceneIn .72s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-kicker{animation:mfHeroText .65s .06s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-hero-copy h1{animation:mfHeroMask .82s .10s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-hero-copy>p{animation:mfHeroText .72s .20s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-hero-actions{animation:mfHeroText .72s .28s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-trust-list{animation:mfHeroText .72s .36s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-feature-card{animation:mfHeroCard .88s .12s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-mini-card:nth-child(1){animation:mfHeroCard .8s .22s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-mini-card:nth-child(2){animation:mfHeroCard .8s .30s var(--motion-ease-out) both}
.mf-motion .mf-hero-slide.is-active .mf-hero-categories a{animation:mfHeroChip .58s var(--motion-ease-out) both;animation-delay:calc(.34s + var(--stagger-index,0) * 48ms)}
@keyframes mfHeroSceneIn{from{opacity:.2;transform:scale(.992)}to{opacity:1;transform:none}}
@keyframes mfHeroText{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mfHeroMask{from{opacity:.2;clip-path:inset(0 0 100% 0);transform:translateY(18px)}to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}
@keyframes mfHeroCard{from{opacity:0;transform:translate3d(28px,18px,0) scale(.965);filter:blur(7px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes mfHeroChip{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

.mf-motion .mf-hero-slide{--parallax-x:0px;--parallax-y:0px;--parallax-x2:0px;--parallax-y2:0px}
.mf-motion .mf-feature-card__media img{transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.015);transition:transform .2s linear;will-change:transform}
.mf-motion .mf-mini-card img{transform:translate3d(var(--parallax-x2),var(--parallax-y2),0);transition:transform .25s linear;will-change:transform}
.mf-motion .mf-feature-card:after,.mf-motion .mf-product-card:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(330px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(103,223,93,.11),transparent 58%);transition:opacity .35s}
.mf-motion .mf-feature-card:hover:after,.mf-motion .mf-product-card:hover:after{opacity:1}
.mf-motion .mf-feature-card{transform-style:preserve-3d}

/* Product cards: dimensionality, zoom and stagger. */
.mf-motion .mf-product-card{--tilt-x:0deg;--tilt-y:0deg;--card-lift:0px;position:relative;transform:perspective(950px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--card-lift));transform-style:preserve-3d;transition:transform .42s var(--motion-ease-out),border-color .35s,box-shadow .42s var(--motion-ease-out)}
.mf-motion .mf-product-card:hover{--card-lift:-6px;box-shadow:0 26px 54px rgba(0,0,0,.32)}
.mf-motion .mf-product-card__media{overflow:hidden}
.mf-motion .mf-product-card__media:before{content:"";position:absolute;z-index:1;inset:-30%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);transform:translateX(-90%) rotate(6deg);transition:transform .9s var(--motion-ease-out);pointer-events:none}
.mf-motion .mf-product-card:hover .mf-product-card__media:before{transform:translateX(90%) rotate(6deg)}
.mf-motion .mf-product-card__media img{transition:transform .7s var(--motion-ease-out),filter .5s var(--motion-ease-out)}
.mf-motion .mf-product-card:hover .mf-product-card__media img{transform:scale(1.055) translateY(-2px);filter:saturate(1.03) contrast(1.02)}
.mf-motion .mf-product-card__cta{transition:background .35s,border-color .35s,transform .35s var(--motion-ease-out)}
.mf-motion .mf-product-card:hover .mf-product-card__cta{transform:translateY(-1px)}

/* Category/icon microinteraction: transform/morph principle. */
.mf-motion .mf-hero-category-icon,.mf-motion .mf-benefit-icon{transition:transform .58s var(--motion-spring),border-radius .58s var(--motion-ease-out),background .4s,border-color .4s,color .4s}
.mf-motion .mf-hero-categories a:hover .mf-hero-category-icon{transform:translateY(-3px) rotate(-5deg) scale(1.08);border-radius:50%;background:rgba(103,223,93,.14);border-color:rgba(103,223,93,.34);color:#a1ff95}
.mf-motion .mf-benefits__grid>div:hover .mf-benefit-icon{transform:translateY(-3px) scale(1.08);border-radius:50%}
.mf-motion .mf-price-pill,.mf-motion .mf-category-shortcuts>a{transition:transform .38s var(--motion-spring),background .35s,border-color .35s,color .35s}
.mf-motion .mf-price-pill:hover,.mf-motion .mf-category-shortcuts>a:hover{transform:translateY(-2px)}

/* Search chips / editorial links: depth and directional motion. */
.mf-motion .mf-search-chips a,.mf-motion .mf-editorial__links a{transition:transform .45s var(--motion-ease-out),background .35s,border-color .35s,box-shadow .45s var(--motion-ease-out)}
.mf-motion .mf-search-chips a:hover{transform:translateY(-4px) scale(1.015);box-shadow:0 16px 30px rgba(0,0,0,.18)}
.mf-motion .mf-editorial__links a:hover{transform:translateX(8px);background:rgba(103,223,93,.055);border-color:rgba(103,223,93,.2)}
.mf-motion .mf-editorial__links a em{transition:transform .42s var(--motion-spring)}
.mf-motion .mf-editorial__links a:hover em{transform:translateX(5px)}

/* Product page: subtle camera/parallax and gallery transitions. */
.mf-motion .mf-product-main{--product-x:0px;--product-y:0px;--product-scale:1;position:relative}
.mf-motion .mf-product-main img{transform:translate3d(var(--product-x),var(--product-y),0) scale(var(--product-scale));transition:transform .25s linear,opacity .32s var(--motion-ease-out);will-change:transform}
.mf-motion .mf-product-main:hover{--product-scale:1.025}
.mf-motion .mf-thumb{transition:transform .4s var(--motion-spring),outline-color .35s,opacity .35s}
.mf-motion .mf-thumb:hover{transform:translateY(-4px) scale(1.03)}
.mf-motion .mf-quick-specs>div,.mf-motion .mf-specs-grid>div{transition:transform .42s var(--motion-ease-out),background .35s,border-color .35s}
.mf-motion .mf-quick-specs>div:hover,.mf-motion .mf-specs-grid>div:hover{transform:translateY(-3px);background:rgba(103,223,93,.035);border-color:rgba(103,223,93,.16)}

/* Modal zoom: continuity/depth. */
.mf-motion .mf-zoom:not([hidden]){animation:mfZoomBg .35s var(--motion-ease-out) both}
.mf-motion .mf-zoom:not([hidden]) img{animation:mfZoomImage .55s var(--motion-ease-out) both}
@keyframes mfZoomBg{from{opacity:0}to{opacity:1}}
@keyframes mfZoomImage{from{opacity:0;transform:scale(.86);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:blur(0)}}

/* Footer and page heroes. */
.mf-motion .mf-page-hero>.mf-container{position:relative;overflow:hidden}
.mf-motion .mf-page-hero>.mf-container:after{content:"";position:absolute;width:280px;height:280px;right:-110px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(103,223,93,.13),transparent 67%);transform:translate3d(0,var(--page-glow-y,0px),0);transition:transform .2s linear;pointer-events:none}
.mf-motion .mf-footer a{transition:transform .35s var(--motion-ease-out),color .3s}
.mf-motion .mf-footer a:hover{transform:translateX(4px)}

/* Fine-pointer effects only. */
@media(hover:hover) and (pointer:fine){
  .mf-motion .mf-product-card,.mf-motion .mf-feature-card,.mf-motion .mf-mini-card{will-change:transform}
}

/* Mobile: motion stays lighter and avoids pointer-driven transforms. */
@media(max-width:900px){
  .mf-motion .mf-feature-card__media img,.mf-motion .mf-mini-card img,.mf-motion .mf-product-main img{transform:none!important;will-change:auto}
  .mf-motion .mf-product-card{transform:translateY(var(--card-lift))!important}
}

/* Accessibility: all nonessential movement disappears. */
@media(prefers-reduced-motion:reduce){
  .mf-scroll-progress{display:none!important}
  .mf-motion body{animation:none!important}
  .mf-motion [data-motion-reveal],.mf-motion [data-reveal],.mf-motion [data-motion-mask]{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
  .mf-motion .mf-hero-slide.is-active *{animation:none!important}
  .mf-motion .mf-feature-card__media img,.mf-motion .mf-mini-card img,.mf-motion .mf-product-main img,.mf-motion .mf-product-card,.mf-motion .mf-btn,.mf-motion .mf-header__offer{transform:none!important;transition:none!important}
}
