/* ==========================================================================
   Mat Media - Unified button motion system (public site)
   Same feel as the client/admin panel buttons (lift + brightness + brand glow
   + shine sweep + press-down), plus extra premium micro-animations.
   Motion only - colors/shapes of existing buttons are not changed.
   ========================================================================== */
:root{
  --mmb-blue:38,120,239;
  --mmb-red:239,38,38;
  --mmb-ease:cubic-bezier(.22,.9,.3,1);
  --mmb-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 1. Targets ---------- */
.octf-btn,.mm-cta-btn,.ot-pricing-btn .reeed,.section-btn,.gradient_btn,
.mm-portal-btn,.mm-back-btn,.mm-fixed-toggle-btn,.mm-toggle-btn,.mm-expand-btn,
.mm-explore-more-btn,.tf .tf__btn,input[type=submit],.wpcf7-submit,button.btn,a.btn{
  position:relative;
  -webkit-tap-highlight-color:transparent;
  transition:transform .28s var(--mmb-ease),box-shadow .28s var(--mmb-ease),
             filter .28s var(--mmb-ease),color .28s ease,background-position .6s var(--mmb-ease),
             translate .25s ease-out !important;
  will-change:transform;
}
.section-btn,.mm-expand-btn,.mm-explore-more-btn,.tf .tf__btn,input[type=submit],.wpcf7-submit{
  overflow:hidden;
}

/* ---------- 2. Shine sweep (same as panel .cp-btn-primary::after) ---------- */
.octf-btn:not(.octf-btn-white)::after,.mm-cta-btn::after,.ot-pricing-btn .reeed::after,
.section-btn::after,.gradient_btn::after,.mm-back-btn::after,.mm-fixed-toggle-btn::after,
.mm-expand-btn::after,.mm-explore-more-btn::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg);pointer-events:none;
  transition:left .65s var(--mmb-ease);
  z-index:1;
}
@media (hover:hover){
  .octf-btn:not(.octf-btn-white):hover::after,.mm-cta-btn:hover::after,
  .ot-pricing-btn .reeed:hover::after,.section-btn:hover::after,.gradient_btn:hover::after,
  .mm-back-btn:hover::after,.mm-fixed-toggle-btn:hover::after,
  .mm-expand-btn:hover::after,.mm-explore-more-btn:hover::after{left:130%}
}

/* ---------- 3. Hover / active = panel behaviour ---------- */
@media (hover:hover){
  .octf-btn:not(.hero-col-left .octf-btn-white):hover,
  .mm-cta-btn:hover,.ot-pricing-btn .reeed:hover,.section-btn:hover,.gradient_btn:hover,
  .mm-back-btn:hover,.mm-fixed-toggle-btn:hover,.mm-expand-btn:hover,
  .mm-explore-more-btn:hover,.tf .tf__btn:hover:not(:disabled),
  input[type=submit]:hover,.wpcf7-submit:hover,button.btn:hover,a.btn:hover{
    transform:translateY(-2px) scale(1.035) !important;
    filter:brightness(1.05);
    box-shadow:0 14px 30px rgba(var(--mmb-blue),.30),0 6px 16px rgba(var(--mmb-red),.18) !important;
  }
  .mm-portal-btn-wrap:hover{
    transform:translateY(-2px) scale(1.04);
    box-shadow:0 12px 26px rgba(var(--mmb-blue),.32),0 4px 14px rgba(var(--mmb-red),.2);
  }
}
.mm-portal-btn-wrap{transition:transform .28s var(--mmb-ease),box-shadow .28s var(--mmb-ease)}
.octf-btn:not(.hero-col-left .octf-btn-white):active,
.mm-cta-btn:active,.ot-pricing-btn .reeed:active,.section-btn:active,.gradient_btn:active,
.mm-back-btn:active,.mm-fixed-toggle-btn:active,.mm-expand-btn:active,
.mm-explore-more-btn:active,.tf .tf__btn:active:not(:disabled),
input[type=submit]:active,.wpcf7-submit:active,button.btn:active,a.btn:active{
  transform:translateY(0) scale(.97) !important;
  filter:brightness(.98);
  box-shadow:0 3px 8px rgba(var(--mmb-blue),.28) !important;
  transition-duration:.08s !important;
}
.mm-portal-btn-wrap:active{transform:scale(.97)}

/* ---------- 4. Gradient shift on filled brand buttons ---------- */
.octf-btn-primary,.mm-cta-btn.primary,.gradient_btn,.ot-pricing-btn .reeed,.mm-btn-gradient{
  background-size:180% 100% !important;
  background-position:0% 50%;
}
@media (hover:hover){
  .octf-btn-primary:hover,.mm-cta-btn.primary:hover,.gradient_btn:hover,
  .ot-pricing-btn .reeed:hover,.mm-btn-gradient:hover{background-position:100% 50%}
}

/* ---------- 5. Arrow / icon micro-motion ---------- */
.octf-btn svg,.octf-btn i,.mm-btn-icon-circle,.mm-portal-btn svg,.mm-css-arrow,.mm-cta-btn svg,.section-btn svg{
  transition:transform .35s var(--mmb-spring);
}
@media (hover:hover){
  .octf-btn:hover svg,.octf-btn:hover .mm-btn-icon-circle,.octf-btn:hover .mm-css-arrow,
  .mm-cta-btn:hover svg,.section-btn:hover svg{transform:translateX(5px)}
  .mm-portal-btn:hover svg{transform:translateX(3px) scale(1.12)}
  .octf-btn:hover i{transform:translateX(4px)}
}

/* ---------- 6. Idle attention pulse on the main CTAs ---------- */
@keyframes mmbPulse{
  0%{box-shadow:0 0 0 0 rgba(var(--mmb-blue),.45)}
  70%{box-shadow:0 0 0 16px rgba(var(--mmb-blue),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--mmb-blue),0)}
}
.mm-cta-btn.primary,.mm-btn-gradient{animation:mmbPulse 2.8s ease-out 1.2s infinite}
.mm-cta-btn.primary:hover,.mm-btn-gradient:hover,
.mm-cta-btn.primary:focus-visible,.mm-btn-gradient:focus-visible{animation:none}

/* ---------- 7. Click ripple (span injected by mm-fx.js) ---------- */
.mmb-ripple{
  position:absolute;border-radius:50%;pointer-events:none;z-index:2;
  width:12px;height:12px;margin:-6px 0 0 -6px;
  background:rgba(255,255,255,.55);
  transform:scale(0);animation:mmbRipple .65s ease-out forwards;
}
.mm-cta-btn:not(.primary) .mmb-ripple,.octf-btn-secondary .mmb-ripple,.mm-back-btn .mmb-ripple{background:rgba(var(--mmb-blue),.28)}
@keyframes mmbRipple{to{transform:scale(var(--mmb-r,30));opacity:0}}

/* ---------- 8. Loading state on submit (mm-fx.js adds .mmb-loading) ---------- */
.mmb-loading{pointer-events:none;opacity:.85}
.mmb-loading::before{
  content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:mmbSpin .7s linear infinite;
  position:static;height:14px;background:none;
}
@keyframes mmbSpin{to{transform:rotate(360deg)}}

/* ---------- 9. Tabs, toggles, pagination ---------- */
.tab-link,.mm-toggle-btn{transition:transform .25s var(--mmb-ease),box-shadow .25s ease,color .25s ease,background .3s ease !important}
@media (hover:hover){
  .tab-link:not(.active):hover,.mm-toggle-btn:not(.active):hover{transform:translateY(-2px)}
}
.tab-link:active,.mm-toggle-btn:active{transform:scale(.96)}
@keyframes mmbPop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.tab-link.active,.mm-toggle-btn.active{animation:mmbPop .4s var(--mmb-spring)}

/* ---------- 10. Carousel / slider arrows & back-to-top ---------- */
.owl-nav button,.owl-prev,.owl-next,.swiper-button-next,.swiper-button-prev,
#back-to-top,.back-to-top,.scrollup{
  transition:transform .3s var(--mmb-spring),box-shadow .3s ease !important;
}
@media (hover:hover){
  .owl-nav button:hover,.owl-prev:hover,.owl-next:hover,#back-to-top:hover,.back-to-top:hover,.scrollup:hover{
    transform:translateY(-3px) scale(1.1);
  }
}

/* ---------- 11. Keyboard focus ring (accessible, branded) ---------- */
.octf-btn:focus-visible,.mm-cta-btn:focus-visible,.section-btn:focus-visible,.mm-portal-btn:focus-visible,
.tab-link:focus-visible,.mm-toggle-btn:focus-visible,.mm-back-btn:focus-visible,.gradient_btn:focus-visible,
.ot-pricing-btn .reeed:focus-visible{
  outline:2px solid rgba(var(--mmb-blue),.9);outline-offset:3px;
  box-shadow:0 0 0 6px rgba(var(--mmb-blue),.18) !important;
}

/* ---------- 12. Scroll-reveal for CTAs (class added by mm-fx.js) ---------- */
.mmb-reveal{opacity:0;transform:translateY(22px) scale(.96);transition:opacity .7s var(--mmb-ease),transform .7s var(--mmb-ease) !important}
.mmb-reveal.mmb-in{opacity:1;transform:none}

/* ---------- 13. Disabled ---------- */
button:disabled,.tf .tf__btn:disabled,input[type=submit]:disabled{transform:none !important;box-shadow:none !important;filter:none;animation:none}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .octf-btn,.mm-cta-btn,.ot-pricing-btn .reeed,.section-btn,.gradient_btn,.mm-portal-btn-wrap,
  .tab-link,.mm-toggle-btn{animation:none !important;transition-duration:.01s !important;translate:none !important}
  .octf-btn:hover,.mm-cta-btn:hover,.section-btn:hover,.ot-pricing-btn .reeed:hover{transform:none !important}
  .mmb-reveal{opacity:1;transform:none}
  .mmb-ripple{display:none}
}