/* =========================================================
    ALTERMIND 3D SPHERE
    FILE: assets/css/responsive.css

    Responsibility:
    - responsive sizing
    - mobile composition
    - viewport-safe sphere dimensions
    - responsive orbit scaling
    - touch-friendly interaction space

    Frozen architecture:
    - no new files
    - no new elements
    - no new dependencies
    - no JavaScript changes
    ========================================================= */


/* =========================================================
   LARGE TABLETS / SMALL DESKTOPS
   ========================================================= */

@media (max-width: 900px) {

    :root {

        --sphere-stage-height:
            680px;

        --sphere-ring-1:
            210px;

        --sphere-ring-2:
            350px;

        --sphere-ring-3:
            500px;

    }


    .sphere-visual {

        width:
            100%;

        height:
            var(--sphere-stage-height);

    }


    .sphere-visual::before {

        width:
            52%;

        filter:
            blur(42px);

    }


    .sphere-visual::after {

        width:
            66%;

    }


    .orbit-3 {

        opacity:
            0.75;

    }

}


/* =========================================================
   TABLETS / LARGE PHONES
   ========================================================= */

@media (max-width: 640px) {

    :root {

        --sphere-stage-height:
            var(--sphere-mobile-height);

        --sphere-ring-1:
            170px;

        --sphere-ring-2:
            285px;

        --sphere-ring-3:
            405px;

    }


    .sphere-visual {

        width:
            100%;

        height:
            var(--sphere-mobile-height);

        flex:
            0 0 auto;

    }


    #aiSphere {

        width:
            100%;

        height:
            100%;

        cursor:
            crosshair;

    }


    .sphere-visual::before {

        width:
            68%;

        filter:
            blur(36px);

    }


    .sphere-visual::after {

        width:
            78%;

    }


    .orbit-1 {

        opacity:
            0.82;

    }


    .orbit-2 {

        opacity:
            0.68;

    }


    .orbit-3 {

        opacity:
            0.52;

    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    :root {

        --sphere-mobile-height:
            430px;

        --sphere-ring-1:
            145px;

        --sphere-ring-2:
            245px;

        --sphere-ring-3:
            345px;

    }


    .sphere-visual {

        height:
            var(--sphere-mobile-height);

    }


    .sphere-visual::before {

        width:
            76%;

        filter:
            blur(32px);

    }


    .sphere-visual::after {

        width:
            84%;

        border-color:
            rgba(
                56,
                189,
                248,
                0.035
            );

    }


    .orbit-1 {

        opacity:
            0.72;

    }


    .orbit-2 {

        opacity:
            0.56;

    }


    .orbit-3 {

        opacity:
            0.40;

    }

}


/* =========================================================
   VERY SHORT VIEWPORTS
   ========================================================= */

@media (max-height: 620px) {

    :root {

        --sphere-stage-height:
            560px;

    }


    .sphere-visual {

        height:
            min(
                var(--sphere-stage-height),
                100vh
            );

    }

}


@media (max-width: 640px) and (max-height: 620px) {

    :root {

        --sphere-mobile-height:
            390px;

    }


    .sphere-visual {

        height:
            min(
                var(--sphere-mobile-height),
                100vh
            );

    }

}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

    #aiSphere {

        cursor:
            default;

touch-action:
    pan-y; 

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .orbit-1,
    .orbit-2,
    .orbit-3 {

        animation:
            none;

    }


    #aiSphere {

        cursor:
            default;

    }

}


/* =========================================================
   VERY NARROW VIEWPORTS
   ========================================================= */

@media (max-width: 360px) {

    :root {

        --sphere-mobile-height:
            400px;

        --sphere-ring-1:
            130px;

        --sphere-ring-2:
            215px;

        --sphere-ring-3:
            300px;

    }


    .sphere-visual {

        width:
            100%;

        max-width:
            100vw;

        overflow:
            visible;

    }


    .hero-orbit {

        max-width:
            92vw;

        max-height:
            92vw;

    }


    .orbit-1 {

        width:
            min(
                var(--sphere-ring-1),
                42vw
            );

        height:
            min(
                var(--sphere-ring-1),
                42vw
            );

    }


    .orbit-2 {

        width:
            min(
                var(--sphere-ring-2),
                68vw
            );

        height:
            min(
                var(--sphere-ring-2),
                68vw
            );

    }


    .orbit-3 {

        width:
            min(
                var(--sphere-ring-3),
                88vw
            );

        height:
            min(
                var(--sphere-ring-3),
                88vw
            );

    }

}