/* =============================================================================
   biolbe — bio FX styles (pairs with js/app/bio-fx.js).
   Everything is gated on `.vp.fx-ready`, which the script adds on load — so if
   the script is blocked or fails, nothing is hidden and the page degrades
   gracefully (panels just stack, reveals show immediately).
   ========================================================================== */

/* tabs / slides: collapse a group to its active panel.
   Panels show via .fx-on; tabs highlight via .fx-active — separate classes so an
   element can be both a panel and a tab without the two colliding. */
.vp.fx-ready [data-fx-panel] { display: none; }
.vp.fx-ready [data-fx-panel].fx-on { display: block; }

/* scroll-reveal: hidden until it scrolls into view */
.vp.fx-ready [data-fx-reveal] {
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.vp.fx-ready [data-fx-reveal].fx-shown { opacity: 1; transform: none; }
.vp.fx-ready [data-fx-reveal="fade-up"]    { transform: translateY(28px); }
.vp.fx-ready [data-fx-reveal="fade-down"]  { transform: translateY(-28px); }
.vp.fx-ready [data-fx-reveal="fade-left"]  { transform: translateX(28px); }
.vp.fx-ready [data-fx-reveal="fade-right"] { transform: translateX(-28px); }
.vp.fx-ready [data-fx-reveal="zoom"]       { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .vp.fx-ready [data-fx-reveal] { opacity: 1; transform: none; transition: none; }
}