/* ============================================================
   Matterbee interactions — add-on stylesheet
   Load after global.css and the page stylesheet.
   ============================================================ */

/* Conditional content (tabs, panels, menus, accordions).
   A [data-mb-if] wrapper is layout-neutral; it is hidden whenever
   its data-mb-val is falsy. interactions.js flips data-mb-val. */
[data-mb-if] { display: contents; }
[data-mb-if]:not([data-mb-val]),
[data-mb-if][data-mb-val=""],
[data-mb-if][data-mb-val="false"],
[data-mb-if][data-mb-val="null"],
[data-mb-if][data-mb-val="undefined"] { display: none; }

[data-mb-action] { cursor: pointer; }

/* Scroll-reveal fallback for browsers without animation-timeline: view()
   (Firefox, Safari < 18). interactions.js adds .mb-reveal-fallback to <html>
   and .mb-in to each [data-mb-reveal] element as it enters the viewport. */
.mb-reveal-fallback [data-mb-reveal] {
  animation-duration: 0.8s !important;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  animation-play-state: paused !important;
}
.mb-reveal-fallback [data-mb-reveal].mb-in { animation-play-state: running !important; }

@media (prefers-reduced-motion: reduce) {
  .mb-reveal-fallback [data-mb-reveal] { animation: none !important; }
}