/* Button motion: lift, press, arrow nudge and a soft shine on primary buttons.
   Loaded on every page from includes/header.php. Disabled by prefers-reduced-motion. */
:root{--btn-ease:cubic-bezier(.22,.8,.3,1)}

.btn,.navbar .btn,.f-btn,.nl-btn,.cn-btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .25s var(--btn-ease),box-shadow .25s var(--btn-ease),background-color .2s ease,border-color .2s ease,color .2s ease!important}

/* hover: lift */
.btn:hover,.navbar .btn:hover,.f-btn:hover,.nl-btn:hover,.cn-btn:hover{transform:translateY(-2px)}
.btn-primary:hover,.navbar .btn-primary:hover,.f-btn:hover,.nl-btn:hover,.cn-btn.primary:hover{box-shadow:0 10px 22px -10px rgba(255,121,0,.65)}
.btn-outline:hover{background-color:rgba(244,104,0,.09)}

/* press */
.btn:active,.navbar .btn:active,.f-btn:active,.nl-btn:active,.cn-btn:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:.08s!important}

/* shine sweep on primary buttons */
.btn-primary::before,.f-btn::before,.nl-btn::before,.cn-btn.primary::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-140%) skewX(-18deg)}
.btn-primary:hover::before,.f-btn:hover::before,.nl-btn:hover::before,.cn-btn.primary:hover::before{
  transform:translateX(260%) skewX(-18deg);transition:transform .75s var(--btn-ease)}

/* arrows nudge forward */
.btn i.fa-arrow-right,.f-btn i.fa-arrow-right,.product-link i.fa-arrow-right{display:inline-block;transition:transform .25s var(--btn-ease)}
.btn:hover i.fa-arrow-right,.f-btn:hover i.fa-arrow-right,.product-link:hover i.fa-arrow-right{transform:translateX(4px)}

/* header toggles */
.theme-toggle,.mobile-toggle{transition:transform .2s var(--btn-ease),color .2s,border-color .2s,background .2s!important}
html:not([data-theme="light"]) .theme-toggle:hover .i-sun{transform:rotate(25deg) scale(1.12)}
html[data-theme="light"] .theme-toggle:hover .i-moon{transform:rotate(-15deg) scale(1.12)}
.theme-toggle:active,.mobile-toggle:active{transform:scale(.92)}

@media (prefers-reduced-motion:reduce){
  .btn,.navbar .btn,.f-btn,.nl-btn,.cn-btn,.theme-toggle,.mobile-toggle,.theme-toggle i,.btn i,.f-btn i,.product-link i{transition:none!important}
  .btn:hover,.navbar .btn:hover,.f-btn:hover,.nl-btn:hover,.cn-btn:hover,.btn:active,.f-btn:active,.theme-toggle:active,.mobile-toggle:active,.btn:hover i,.f-btn:hover i,.product-link:hover i{transform:none!important}
  .btn-primary::before,.f-btn::before,.nl-btn::before,.cn-btn.primary::before{display:none}
}