/* Stylefair — motion layer: scroll reveal, button shine & ripple, live chat button, back-to-top, small micro-interactions.
   Everything here is decorative and switches off for visitors who ask for reduced motion. */

/* ---------- scroll reveal ---------- */
.sf-rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0ms);will-change:opacity,transform}
.sf-rv--zoom{transform:scale(.94)}
.sf-rv--left{transform:translate3d(-30px,0,0)}
.sf-rv--right{transform:translate3d(30px,0,0)}
.sf-rv.is-in{opacity:1;transform:none}
.sf-head .sf-h2::after{transition:width .8s cubic-bezier(.2,.7,.2,1) .25s}
.sf-head.sf-rv:not(.is-in) .sf-h2::after{width:0}

/* ---------- buttons: lift, shine sweep, ripple ---------- */
.sf-btn--red,.sf-join,.sfr-btn--red,.sf-hero .sf-btn,.woocommerce .sf-pdp form.cart .single_add_to_cart_button,.sfc-btn--red,.sf-search button[type=submit]{position:relative;overflow:hidden;isolation:isolate}
.sf-btn--red::before,.sf-join::before,.sfr-btn--red::before,.sfc-btn--red::before,.woocommerce .sf-pdp form.cart .single_add_to_cart_button::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);pointer-events:none;z-index:1}
.woocommerce .sf-pdp form.cart .single_add_to_cart_button::after{-webkit-mask:none!important;mask:none!important;height:auto!important;width:50%!important}
@media (hover:hover){
  .sf-btn--red:hover::before,.sf-join:hover::before,.sfr-btn--red:hover::before,.sfc-btn--red:hover::before,.woocommerce .sf-pdp form.cart .single_add_to_cart_button:hover::after{left:130%;transition:left .75s ease}
  .sf-btn--red:hover,.sf-btn--ghost:hover,.sf-btn--light:hover,.sfr-btn--red:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(227,21,79,.75)}
  .sf-btn--light:hover{box-shadow:0 12px 24px -16px rgba(22,33,62,.45)}
}
.sf-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.45);transform:scale(0);animation:sfRipple .6s ease-out forwards;z-index:0}
.sf-btn--light .sf-ripple,.sf-btn--ghost .sf-ripple,.sfr-btn--light .sf-ripple{background:rgba(227,21,79,.18)}
@keyframes sfRipple{to{transform:scale(2.6);opacity:0}}

/* "Join as reseller" — a soft heartbeat so it is noticed */
.sf-join{animation:sfGlow 2.6s ease-in-out infinite}
.sf-join:hover{animation:none}
@keyframes sfGlow{0%,100%{box-shadow:0 0 0 0 rgba(227,21,79,.45)}55%{box-shadow:0 0 0 9px rgba(227,21,79,0)}}

/* ---------- micro-interactions ---------- */
.sf-cat__ph{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.sf-cat__ph img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .sf-cat:hover .sf-cat__ph{transform:translateY(-4px);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--red),0 16px 26px -16px rgba(227,21,79,.6)}
  .sf-cat:hover .sf-cat__ph img{transform:scale(1.1)}
  .sf-cat:hover b{color:var(--red)}
  .sf-hf:hover .sf-hf__ico,.sf-act:hover .sf-act__ico{transform:translateY(-2px) rotate(-6deg)}
}
.sf-hf__ico,.sf-act__ico{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.sf-wish[aria-pressed="true"] svg,.sf-pdp__act[aria-pressed="true"] svg{animation:sfPop .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes sfPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.sf-count__box.is-tick b{animation:sfTick .45s ease}
@keyframes sfTick{0%{transform:translateY(-35%);opacity:.2}100%{transform:none;opacity:1}}
.sf-deal__bolt{animation:sfBolt 1.8s ease-in-out infinite}
@keyframes sfBolt{0%,100%{transform:scale(1) rotate(0)}10%{transform:scale(1.18) rotate(-10deg)}20%{transform:scale(1) rotate(0)}}
.sf-card__badges>*:first-child{position:relative;overflow:hidden}
.sf-card__badges>*:first-child::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:sfShimmer 3.2s ease-in-out infinite}
@keyframes sfShimmer{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}

/* mobile top bar: rotate the messages */
@media (max-width:767px){
  .sf-topbar--rot .sf-ti{display:none!important}
  .sf-topbar--rot .sf-ti.is-cur{display:inline-flex!important;animation:sfTiIn .55s cubic-bezier(.2,.7,.2,1)}
  .sf-topbar--rot .sf-topbar__in{justify-content:center}
}
@keyframes sfTiIn{from{opacity:0;transform:translateY(8px)}to{opacity:.96;transform:none}}

/* ---------- live chat button ---------- */
.sf-fab{position:fixed;right:20px;bottom:24px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.sf-fab__btn{position:relative;width:58px;height:58px;border-radius:50%;border:0;background:linear-gradient(140deg,#F43F6E,var(--red));color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -10px rgba(227,21,79,.7);transition:transform .3s cubic-bezier(.2,.8,.2,1.2)}
.sf-fab__btn svg{width:26px;height:26px;transition:transform .3s,opacity .2s}
.sf-fab__btn .sf-fab__x{position:absolute;opacity:0;transform:rotate(-90deg)}
.sf-fab.is-open .sf-fab__btn .sf-fab__chat{opacity:0;transform:rotate(90deg)}
.sf-fab.is-open .sf-fab__btn .sf-fab__x{opacity:1;transform:none}
.sf-fab__btn:hover{transform:scale(1.07)}
.sf-fab__btn::before,.sf-fab__btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(227,21,79,.55);animation:sfRing 2.4s ease-out infinite;pointer-events:none}
.sf-fab__btn::after{animation-delay:1.2s}
.sf-fab.is-open .sf-fab__btn::before,.sf-fab.is-open .sf-fab__btn::after{display:none}
@keyframes sfRing{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.sf-fab__dot{position:absolute;top:3px;right:3px;width:12px;height:12px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 2px #fff}
.sf-fab__tip{position:absolute;right:70px;bottom:12px;background:#fff;color:var(--navy);font-weight:600;font-size:.86rem;white-space:nowrap;padding:8px 12px;border-radius:12px;box-shadow:0 12px 26px -12px rgba(22,33,62,.45);opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.sf-fab__tip::after{content:"";position:absolute;right:-5px;top:50%;margin-top:-5px;width:10px;height:10px;background:#fff;transform:rotate(45deg)}
.sf-fab.show-tip .sf-fab__tip{opacity:1;transform:none}
.sf-fab.is-open .sf-fab__tip{opacity:0}
.sf-fab__menu{display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.sf-fab__menu a{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(14px) scale(.9);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1.2);transition-delay:calc(var(--i,0) * 50ms)}
.sf-fab__menu a span{background:#fff;color:var(--navy);font-weight:600;font-size:.86rem;padding:6px 11px;border-radius:10px;box-shadow:0 10px 22px -14px rgba(22,33,62,.5);white-space:nowrap}
.sf-fab__menu a i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 10px 22px -10px rgba(0,0,0,.35)}
.sf-fab__menu a i svg{width:22px;height:22px}
.sf-fab.is-open .sf-fab__menu{pointer-events:auto}
.sf-fab.is-open .sf-fab__menu a{opacity:1;transform:none}
.sf-fab__wa i{background:#22C55E}
.sf-fab__ms i{background:linear-gradient(135deg,#0695FF,#A334FA)}
.sf-fab__call i{background:var(--navy)}

/* ---------- back to top with scroll progress ---------- */
.sf-top{position:fixed;right:92px;bottom:31px;z-index:94;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -12px rgba(22,33,62,.5);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s}
.sf-top.is-on{opacity:1;transform:none;pointer-events:auto}
.sf-top svg.sf-top__ring{position:absolute;inset:0;width:44px;height:44px;transform:rotate(-90deg)}
.sf-top svg.sf-top__ring circle{fill:none;stroke-width:3}
.sf-top .sf-top__bg{stroke:var(--line)}
.sf-top .sf-top__fg{stroke:var(--red);stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .1s linear}
.sf-top .sf-top__arr{width:18px;height:18px;position:relative}
.sf-top:hover{color:var(--red)}
.sf-fab.is-open~.sf-top{opacity:0;pointer-events:none}
body:not(:has(.sf-fab)) .sf-top{right:24px}

@media (max-width:767px){
  .sf-fab{right:14px;bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .sf-fab__btn{width:52px;height:52px}
  .sf-fab__tip{display:none}
  .sf-top{right:76px;bottom:calc(82px + env(safe-area-inset-bottom,0px));width:40px;height:40px}
  .sf-top svg.sf-top__ring{width:40px;height:40px}
  body.single-product .sf-fab,body.single-product .sf-top,body.sfr-panel-page .sf-top{display:none}
}

@media (prefers-reduced-motion:reduce){
  .sf-rv{opacity:1!important;transform:none!important;transition:none!important}
  .sf-join,.sf-deal__bolt,.sf-card__badges>*:first-child::after,.sf-fab__btn::before,.sf-fab__btn::after{animation:none!important}
}
.sf-fab__live i{background:linear-gradient(140deg,#F43F6E,var(--red))}