@layer components, utilities;

/* =====================================
MARK: Layout Components
===================================== */
@layer components {

    /* ---------- Layout ---------- */
    .container {
        height: 80vh;
        position: relative;
    }

    .animation-section {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        --animation-height: 80vh;
    }

    #anim-5 {
        height: 100%;
    }

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

    /* ---------- Adaptation Animation ---------- */
    .adaptation-background {
        position: absolute;
        inset: 0 5vw;
        display: flex;
    }

    @media (min-width: 1024px) {
        .adaptation-background {
            inset: 0;
        }
    }

    .adaptation-pane {
        flex: 1;
    }

    .pane-black {
        background-color: var(--color-background);
    }

    .pane-white {
        background-color: var(--color-text);
    }

    .adaptation-word {
        position: relative;
        z-index: 10;
        font-size: clamp(2rem, 10vw, 10rem);
        white-space: nowrap;
        font-weight: 900;
        text-transform: uppercase;
        mix-blend-mode: difference;
        /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mix-blend-mode */
        color: var(--color-text);
        pointer-events: none;
        letter-spacing: 0.02em;
    }
}