// ============================================================================
// move.gl | Bubble Scene
// ============================================================================
// A bubble animation scene with a gradient background.
// Use the mixin to apply these styles to a specific container.
// ============================================================================

///
/// Bubble Scene Mixin
/// Applies the bubble scene styling to a container.
///
/// @param {Color} $bg-start [#ffd2c1] - Start color of gradient
/// @param {Color} $bg-end [#f9d0d3] - End color of gradient
///
@mixin bubble_scene($bg-start: #ffd2c1, $bg-end: #f9d0d3) {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    height: 100vh;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(135deg, $bg-start, $bg-end);

    .scene {
        position: absolute;
        width: 100%;
        height: 100vh;
    }
}