/* Libero Motion: the CSS half. Materials, press affordances and accessibility fallbacks.
 * Pair with libero-motion.js. Only transform and opacity ever animate. */

/* materials: heavier for structure (bars), lighter for controls; don't stack light glass */
.lm-bar{background:rgba(10,10,26,.62);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.08)}
.lm-glass{background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.14)}
.lm-scrim{position:fixed;inset:0;background:rgba(4,3,12,.55);opacity:0;pointer-events:none}
.lm-scrim.on{pointer-events:auto}

/* things that can be grabbed say so */
.lm-grab{cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lm-grab:active{cursor:grabbing}
.lm-grab img{pointer-events:none;-webkit-user-drag:none}

/* anything the kit moves gets a compositor layer only while it moves (set by script) */
.lm-moving{will-change:transform}

/* less motion: the script swaps movement for cross-fades; CSS kills ambient loops */
@media (prefers-reduced-motion: reduce){
  .lm-ambient{animation:none!important}
}
/* less transparency: solid, opaque surfaces, no blur */
@media (prefers-reduced-transparency: reduce){
  .lm-bar{background:#0a0a1a;-webkit-backdrop-filter:none;backdrop-filter:none}
  .lm-glass{background:#1c1938;-webkit-backdrop-filter:none;backdrop-filter:none}
  .lm-scrim{background:rgba(4,3,12,.85)}
}
/* more contrast: solid backgrounds and visible borders */
@media (prefers-contrast: more){
  .lm-bar,.lm-glass{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(255,255,255,.6)}
}