/* =========================================
   TEMPORARY EXPERIMENT LANDING
========================================= */


/* =========================================
   PAGE
========================================= */

html,
body {
    width: 100%;
    min-width: 0;

    margin: 0;

    overflow-x: hidden;

    background: #050505;
    color: #ffffff;
}


body {
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    overscroll-behavior-x: none;
}


/* =========================================
   LANDING
========================================= */

.landing-experiment {
    flex: 1;

    width: 100%;

    min-width: 0;

    padding:
        56px
        24px
        70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 30px;

    overflow: hidden;
}


/* =========================================
   ARTWORK CONTAINER
========================================= */

.visual-container {
    position: relative;

    width:
        min(
            72vmin,
            860px
        );

    max-width:
        calc(
            100vw
            -
            48px
        );

    aspect-ratio:
        1 / 1;

    overflow: hidden;

    background: #050505;

    touch-action: none;

    overscroll-behavior: contain;
}


/* =========================================
   ZOOMABLE / INTERACTIVE MEDIA
========================================= */

.visual-media {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    transform-origin:
        center
        center;

    will-change: transform;
}


/* =========================================
   FALLBACK ARTWORK
========================================= */

.fallback-image {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    user-select: none;

    -webkit-user-select: none;

    -webkit-touch-callout: none;

    pointer-events: none;
}


/* =========================================
   WEBGL
========================================= */

.visual-canvas {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    opacity: 0;

    transition:
        opacity
        0.4s ease;

    touch-action: none;
}


.visual-canvas.is-ready {
    opacity: 1;
}


/* =========================================
   TBA
========================================= */

.tba {
    margin: 0;

    color: #ffffff;

    font-size: 12px;

    letter-spacing: 0.28em;

    text-align: center;
}


/* =========================================
   COPYRIGHT SPACING
========================================= */

.legal-footer {
    flex: 0 0 auto;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 750px) {

    html,
    body {
        width: 100%;

        max-width: 100vw;

        overflow-x: hidden;
    }


    /* =====================================
       HEADER

       Override shared mobile header so
       everything stays centered and tidy.
    ====================================== */

    .site-header {
        width: 100%;

        padding:
            22px
            16px;

        text-align: center;
    }


    .site-logo {
        margin-bottom: 23px;
    }


    .site-nav {
        width: 100%;

        justify-content: center;

        gap:
            12px
            18px;
    }


    /* =====================================
       LANDING
    ====================================== */

    .landing-experiment {
        width: 100%;

        max-width: 100vw;

        padding:
            32px
            12px
            48px;

        gap: 24px;
    }


    /* =====================================
       ARTWORK
    ====================================== */

    .visual-container {
        width:
            min(
                calc(
                    100vw
                    -
                    24px
                ),
                620px
            );

        max-width: 100%;

        margin:
            0
            auto;
    }


    /* =====================================
       TBA
    ====================================== */

    .tba {
        font-size: 11px;

        letter-spacing: 0.25em;
    }


    /* =====================================
       LEGAL
    ====================================== */

    .legal-footer {
        width: 100%;

        padding:
            28px
            18px
            32px;
    }

}