/* ==========================================================================
   bubble.css — the horizontal bubble level (home page).
   The vial itself is a base.css primitive; this file only positions it.
   ========================================================================== */

.instrument {
    padding: 4px 0 8px;
}

.vial-stage {
    position: relative;
    padding: 0 4px;
}

/* The bubble is driven by transform from JS, so the spring belongs here rather
   than on the shared primitive — other tools move theirs on both axes and want
   a different feel. */
#bubble {
    transition: transform .42s var(--ease-spring), box-shadow .3s;
}

@media (prefers-reduced-motion: reduce) {
    #bubble {
        transition: none;
    }
}