/* StarBio — motion layer.
   Loaded after main.css and the sandbox style blocks, so it wins on equal
   specificity. Rules here do three jobs:
     1. Replace all-property `transition:.2s` shorthands with explicit,
        cheap property lists (a bare shorthand animates background, color,
        border, shadow, filter and layout properties all at once).
     2. Remove the two continuously-repainting effects that made scrolling
        feel heavy: the blurred hero glow and the header backdrop blur.
     3. Add the entrance / hover / press motion, transform + opacity only.
   Everything collapses to static under prefers-reduced-motion. */

:root{
  /* One easing family, used everywhere. */
  --sb-ease:cubic-bezier(.22,.61,.36,1);       /* general purpose */
  --sb-ease-out:cubic-bezier(.16,1,.3,1);      /* entrances, drawers */
  --sb-ease-press:cubic-bezier(.2,.8,.3,1);
  --sb-t-xs:120ms;
  --sb-t-sm:180ms;
  --sb-t-md:260ms;
  --sb-t-lg:420ms;
}

/* ------------------------------------------------------------------ *
 * 1. Cheap, explicit transitions (replacing all-property shorthands)
 * ------------------------------------------------------------------ */

.nav-links a,
.mm-links a,
.foot-col a,
.socials a,
.sb-navgroup-btn{
  transition:color var(--sb-t-xs) var(--sb-ease),
             border-color var(--sb-t-sm) var(--sb-ease);
}

.icon-btn{
  transition:color var(--sb-t-sm) var(--sb-ease),
             border-color var(--sb-t-sm) var(--sb-ease),
             background-color var(--sb-t-sm) var(--sb-ease),
             transform var(--sb-t-sm) var(--sb-ease-press);
}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0) scale(.94);transition-duration:80ms}

.qtab,
.check,
.sb-cart-x,
.promo-x,
.sb-cart-body ul.cart_list a.remove,
.sb-cart-body .woocommerce-mini-cart__buttons a{
  transition:color var(--sb-t-sm) var(--sb-ease),
             background-color var(--sb-t-sm) var(--sb-ease),
             border-color var(--sb-t-sm) var(--sb-ease),
             transform var(--sb-t-sm) var(--sb-ease-press);
}

/* Overlays fade opacity only — never the whole shorthand. */
#overlay,
#navOverlay,
.sb-cart-overlay{
  transition:opacity var(--sb-t-md) var(--sb-ease);
  will-change:opacity;
}

/* Drawers ride one transform on their own compositor layer. */
.drawer,
.mobile-menu,
.sb-cart{
  transition:transform var(--sb-t-lg) var(--sb-ease-out);
  will-change:transform;
  backface-visibility:hidden;
}

/* The FAQ answer still animates height (that is what an accordion is), but a
   shorter curve and paint containment keep the reflow local to the panel. */
.faq-a{transition:max-height var(--sb-t-md) var(--sb-ease);contain:content}
.faq-q .chev{transition:transform var(--sb-t-md) var(--sb-ease),color var(--sb-t-sm) var(--sb-ease)}

/* ------------------------------------------------------------------ *
 * 2. Remove the always-on repaint cost
 * ------------------------------------------------------------------ */

/* The hero glow is a radial-gradient — already soft. The extra 20px blur
   filter on a 700x700 box bought no visible softness and forced a large
   filtered layer to recomposite over the animated starfield on every frame. */
.hero::before{filter:none;opacity:.55}

/* The sticky header sat at 90% opacity with a backdrop blur, so the browser
   re-blurred the strip behind it against a moving canvas on every scroll
   frame. At this alpha the blur was not visible; dropping it is the single
   biggest scroll win on the site. */
body>header{
  background:rgba(8,11,17,.94);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background-color var(--sb-t-md) var(--sb-ease),
             border-color var(--sb-t-md) var(--sb-ease),
             box-shadow var(--sb-t-md) var(--sb-ease);
}
html.sb-light body>header{background:rgba(255,255,255,.94)}

/* Once the page has scrolled, the header earns a hairline of elevation.
   Class is toggled from motion.js on a rAF-batched passive scroll listener. */
body.sb-scrolled>header{
  border-bottom-color:var(--line2);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.9);
}

/* The fullscreen canvas gets its own layer and is barred from invalidating
   anything around it. */
#sb-space{contain:strict;will-change:transform;transform:translateZ(0)}

/* ------------------------------------------------------------------ *
 * 3. Entrance motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion:no-preference){

  @keyframes sbRise{
    from{opacity:0;transform:translate3d(0,18px,0)}
    to{opacity:1;transform:none}
  }

  /* Hero intro is pure CSS, so it runs at first paint with no JS dependency
     and has no "stuck invisible" failure mode. */
  .hero-grid>*{animation:sbRise 620ms var(--sb-ease-out) both}
  .hero-grid>*:nth-child(2){animation-delay:80ms}
  .hero-grid>*:nth-child(3){animation-delay:150ms}
  .hero .hero-cta{animation:sbRise 620ms var(--sb-ease-out) 200ms both}
  .hero .hero-stats{animation:sbRise 620ms var(--sb-ease-out) 280ms both}

  /* Scroll reveals (engine lives in starbio-modern.php; this is the timing).
     Transform + opacity only, and short enough that a fast scroll never
     catches a half-faded section. */
  html.sb-anim .sbv-hide{opacity:0;transform:translate3d(0,14px,0)}
  html.sb-anim .sbv-in{
    opacity:1;transform:none;
    transition:opacity var(--sb-t-md) var(--sb-ease-out),
               transform var(--sb-t-md) var(--sb-ease-out);
  }
  /* Product grids reveal flat and instantly — a staggered catalogue reads as
     "still loading". */
  html.sb-anim .card.sbv-hide,
  html.sb-anim .sb-pop-card.sbv-hide{transform:none}
  html.sb-anim .card.sbv-in,
  html.sb-anim .sb-pop-card.sbv-in{
    transition:opacity 200ms linear;
    transition-delay:0s;
  }
}

/* ------------------------------------------------------------------ *
 * 4. Hover + press feedback
 * ------------------------------------------------------------------ */

.btn,
.single_add_to_cart_button,
.sb-pay-btn,
.sb-lp-cta,
.sb-verify-btn,
.sb-rd-cta{
  transition:transform var(--sb-t-sm) var(--sb-ease-press),
             box-shadow var(--sb-t-sm) var(--sb-ease),
             filter var(--sb-t-sm) var(--sb-ease);
}
.btn:active,
.single_add_to_cart_button:active,
.sb-pay-btn:active,
.sb-lp-cta:active,
.sb-verify-btn:active,
.sb-rd-cta:active{
  transform:translateY(0) scale(.975);
  transition-duration:80ms;
}

.card,.feat,.info-card,.spec,
.sb-coa-doc,.sb-rd-card,.sb-frt-card,.sb-guide-card,
.sb-further-card,.sb-spec-card,.sb-verify-step,
.sb-lp-feat,.sb-lp-tcard,.sb-dash-card,.sb-pay-card{
  transition:transform var(--sb-t-md) var(--sb-ease),
             border-color var(--sb-t-md) var(--sb-ease),
             box-shadow var(--sb-t-md) var(--sb-ease);
}
/* will-change only while hovered, so idle cards do not each hold a layer. */
.card:hover,.feat:hover,.info-card:hover,
.sb-coa-doc:hover,.sb-rd-card:hover,.sb-guide-card:hover,
.sb-further-card:hover,.sb-verify-step:hover{will-change:transform}

.card .thumb img,
.card .thumb .real-vial,
.pd-visual img{
  transition:transform var(--sb-t-lg) var(--sb-ease);
  will-change:auto;
}
.card:hover .thumb img,
.card:hover .thumb .real-vial{transform:scale(1.045)}

/* Keyboard users get the same affordance as the mouse. */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
.icon-btn:focus-visible,.btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:6px;
}

/* ------------------------------------------------------------------ *
 * 4b. Logo aspect ratio
 *
 * header.php and footer.php carry width="933" height="276" on the logo so the
 * browser can reserve space and the header stops shifting on load. The header
 * copes because its CSS already sets width:auto; .foot-brand img in main.css
 * sets only height:40px, so the 933px width attribute became the used width
 * and squashed the footer logo to 933x40.
 *
 * width:auto hands sizing back to CSS while the browser still derives the
 * aspect ratio from the attributes - so the layout-shift fix is kept and the
 * distortion goes away. Applied to every logo instance defensively.
 * ------------------------------------------------------------------ */
.foot-brand img,
.nav img.logo,
.logo-link img,
.mm-logo img{width:auto;max-width:100%}

/* ------------------------------------------------------------------ *
 * 5. Reduced motion — everything becomes instant, nothing disappears
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  .sbv-hide{opacity:1!important;transform:none!important}
}