
:root { --mz-motion-ease: cubic-bezier(.22,1,.36,1); }
.mz-circular .mz-hero-product { isolation:isolate; }
.mz-motion-stamp { z-index:2; display:grid;place-items:center;position:absolute;top:18px;right:18px;width:118px;aspect-ratio:1;border-radius:50%;background:#111;color:#e2ffc5;transform:rotate(12deg);box-shadow:0 12px 30px rgba(0,0,0,.14);text-align:center;font-size:13px;font-weight:900;letter-spacing:.02em;line-height:1.25;pointer-events:none }
.mz-motion-stamp-star{display:inline-block;font-size:15px}
.mz-motion-ticker{display:flex;align-items:center;background:#d9f6b1;color:#111;min-height:62px;border-top:1px solid rgba(0,0,0,.09);border-bottom:1px solid rgba(0,0,0,.09)}
.mz-motion-ticker-viewport{overflow:hidden;min-width:0;flex:1;display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.mz-motion-track{width:max-content;display:flex;align-items:center;animation:mz-ticker-scroll 34s linear infinite;will-change:transform}
.mz-motion-phrase{flex:0 0 auto;white-space:nowrap;font-weight:900;letter-spacing:.035em;font-size:clamp(16px,2.1vw,22px);line-height:1;padding:10px 0}
.mz-motion-phrase span{font-size:24px;margin:0 24px;color:#26845a}
.mz-motion-control{flex:0 0 auto;align-self:stretch;display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:11px 21px;border:0;border-left:1px solid rgba(0,0,0,.13);background:#e7facf;color:#163625;font:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;min-height:50px;touch-action:manipulation}
.mz-motion-control:hover{background:#c1ec94}
.mz-motion-control:focus-visible{outline:3px solid #20744d;outline-offset:-4px}
.mz-motion-ready.mz-motion-on .mz-hero h1{animation:mz-motion-rise .85s var(--mz-motion-ease) both}
.mz-motion-ready.mz-motion-on .mz-hero .mz-lead{animation:mz-motion-rise .85s .13s var(--mz-motion-ease) both}
.mz-motion-ready.mz-motion-on .mz-hero .mz-actions{animation:mz-motion-rise .85s .24s var(--mz-motion-ease) both}
.mz-motion-ready.mz-motion-on .mz-hero .mz-promise{animation:mz-motion-rise .85s .32s var(--mz-motion-ease) both}
.mz-motion-on .mz-hero-product img{animation:mz-motion-float 5.8s ease-in-out infinite;will-change:transform}
.mz-motion-on .mz-motion-stamp{animation:mz-motion-stamp-pop 1s .5s var(--mz-motion-ease) both,mz-motion-rock 9s 1.5s ease-in-out infinite}
.mz-motion-ready.mz-motion-on [data-mz-reveal].mz-motion-pending{opacity:0;transform:translate3d(0,34px,0)}
.mz-motion-ready.mz-motion-on [data-mz-reveal]{transition:opacity .8s var(--mz-motion-ease),transform .8s var(--mz-motion-ease)}
.mz-motion-ready.mz-motion-on [data-mz-reveal].mz-motion-inview{opacity:1;transform:translateZ(0)}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *{transition:opacity .6s var(--mz-motion-ease),transform .6s var(--mz-motion-ease)}
.mz-motion-ready.mz-motion-on [data-mz-stagger].mz-motion-stagger-pending > *{opacity:0;transform:translate3d(0,22px,0) scale(.985)}
.mz-motion-ready.mz-motion-on [data-mz-stagger].mz-motion-stagger-inview > *{opacity:1;transform:none}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *:nth-child(2){transition-delay:.07s}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *:nth-child(3){transition-delay:.14s}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *:nth-child(4){transition-delay:.21s}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *:nth-child(5){transition-delay:.28s}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *:nth-child(6){transition-delay:.35s}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *:nth-child(7){transition-delay:.42s}
.mz-motion-ready.mz-motion-on [data-mz-stagger] > *:nth-child(8){transition-delay:.49s}
@media (hover:hover) and (pointer:fine){
  .mz-motion-on .mz-card-img img{transition:transform .55s var(--mz-motion-ease);will-change:transform}
  .mz-motion-on .mz-card:hover .mz-card-img img{transform:scale(1.075) rotate(-2deg)}
  .mz-motion-on .mz-category .mz-arrow{transition:transform .38s cubic-bezier(.34,1.56,.64,1),background .28s}
  .mz-motion-on .mz-category:hover .mz-arrow{transform:translate(4px,-5px) rotate(18deg);background:#111;color:#fff}
  .mz-motion-on .mz-cta{transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s,box-shadow .2s}
  .mz-motion-on .mz-cta:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(0,0,0,.17)}
}
@keyframes mz-ticker-scroll{to{transform:translateX(-50%)}}
@keyframes mz-motion-float{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(0,-11px,0) rotate(1deg)}}
@keyframes mz-motion-rise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:translateZ(0)}}
@keyframes mz-motion-stamp-pop{from{opacity:0;transform:scale(.75) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(12deg)}}
@keyframes mz-motion-rock{0%,100%{transform:rotate(12deg)}50%{transform:rotate(4deg)}}
.mz-motion-off .mz-motion-track,.mz-motion-off .mz-hero-product img,.mz-motion-off .mz-motion-stamp,.mz-motion-off .mz-hero h1,.mz-motion-off .mz-hero .mz-lead,.mz-motion-off .mz-hero .mz-actions,.mz-motion-off .mz-hero .mz-promise{animation:none!important;transform:none!important}
.mz-motion-off [data-mz-reveal],.mz-motion-off [data-mz-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
.mz-motion-off .mz-motion-track{will-change:auto}
@media(max-width:650px){.mz-motion-ticker{min-height:52px}.mz-motion-control{font-size:11px;padding:8px 11px;gap:6px}.mz-motion-phrase span{margin:0 14px}.mz-motion-stamp{width:79px;top:12px;right:12px;font-size:10px}.mz-motion-stamp-star{font-size:11px}.mz-motion-on .mz-hero-product img{animation-duration:7s}}
@media(prefers-reduced-motion:reduce){
 .mz-motion-track,.mz-hero-product img,.mz-motion-stamp,.mz-hero h1,.mz-hero .mz-lead,.mz-hero .mz-actions,.mz-hero .mz-promise{animation:none!important;transform:none!important}
 [data-mz-reveal],[data-mz-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
 .mz-card-img img,.mz-cta,.mz-category,.mz-category .mz-arrow{transition:none!important}
}

.mz-motion-on .mz-grade-button[aria-pressed="true"]{animation:mz-motion-grade-pop .28s cubic-bezier(.34,1.56,.64,1)}
.mz-motion-on .mz-trade-step:not([hidden]){animation:mz-motion-step-in .4s cubic-bezier(.22,1,.36,1)}
.mz-motion-control:disabled{cursor:default;opacity:.8}
@keyframes mz-motion-grade-pop{from{transform:scale(.975)}to{transform:scale(1)}}
@keyframes mz-motion-step-in{from{opacity:.35;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mz-trade-step,.mz-grade-button{animation:none!important}}
