@layer base, components, utilities;

/* =====================================
MARK: Variables
===================================== */
:root {
    --spacing-large: clamp(8px, 2vw, 32px);
    --block-size-w: clamp(14px, 4.5vw, 60px);
    --block-size-h: clamp(24px, 6vh, 60px);
    --block-font-size: clamp(12px, 4vw, 3.2rem);
}



@layer components {

    /* ---------- Layout Containers ---------- */
    .balancing-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80vh;
        width: 100%;
        background-color: var(--color-background);
        color: var(--color-text);
        font-family: var(--inter-regular);
        overflow: hidden;
        position: relative;
    }

    .animation-section {
        --animation-height: 80vh;
    }

    @media (min-width: 1024px) {
        .balancing-container {
            height: 100vh;
        }

        .animation-section {
            --animation-height: 100vh;
        }
    }

    .balancing-container .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
    }

    /* ---------- Blocks ---------- */
    .balancing-container .block {
        width: var(--block-size-w);
        height: var(--block-size-h);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 clamp(1px, 0.3vw, 2px);
        font-family: var(--inter-regular);
        font-weight: 900;
        font-size: var(--block-font-size);
        color: var(--color-text);
        user-select: none;
        will-change: transform;
        cursor: pointer;
    }
}

@layer utilities {

    /* ---------- Spacing ---------- */
    .balancing-container .margin-left {
        margin-left: var(--spacing-large);
    }
}