/* =========================================================
    ALTERMIND COMPONENTS
    FILE: assets/css/components.css

    Responsibility:
    - existing orbit elements
    - existing sphere-stage visual components
    - shared visual details

    Constraint:
    - no new DOM requirements
    - no JavaScript dependencies
    - no new architecture
    ========================================================= */


/* =========================================================
   ORBIT BASE
   ========================================================= */

.hero-orbit {

    position: absolute;

    top: 50%;

    left: 50%;

    border:
        1px solid
        rgba(
            56,
            189,
            248,
            0.13
        );

    border-radius:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    transform-origin:
        center center;

    pointer-events:
        none;

    will-change:
        transform;

}


/* =========================================================
   ORBIT 1
   ========================================================= */

.orbit-1 {

    width:
        var(--sphere-ring-1);

    height:
        var(--sphere-ring-1);

    border-color:
        rgba(
            142,
            232,
            255,
            0.16
        );

    opacity:
        0.72;

}


/* =========================================================
   ORBIT 2
   ========================================================= */

.orbit-2 {

    width:
        var(--sphere-ring-2);

    height:
        var(--sphere-ring-2);

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

    opacity:
        0.62;

}


/* =========================================================
   ORBIT 3
   ========================================================= */

.orbit-3 {

    width:
        var(--sphere-ring-3);

    height:
        var(--sphere-ring-3);

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

    opacity:
        0.52;

}


/* =========================================================
   ORBIT HIGHLIGHT

   Existing orbital borders remain subtle so that the
   actual canvas sphere remains the primary visual focus.
   ========================================================= */

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

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 5px;

    height: 5px;

    margin:
        -2.5px;

    border-radius:
        50%;

    background:
        rgba(
            142,
            232,
            255,
            0.75
        );

    box-shadow:
        0 0 12px
        rgba(
            56,
            189,
            248,
            0.65
        );

    opacity:
        0.55;

}


/* =========================================================
   SPHERE VISUAL EDGE LIGHT
   ========================================================= */

.sphere-visual {

    overflow:
        visible;

}


/* =========================================================
   LINKS / INTERACTIVE ELEMENTS
   ========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

}


a:focus-visible {

    outline:
        1px solid
        rgba(
            142,
            232,
            255,
            0.85
        );

    outline-offset:
        5px;

}

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

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

    .hero-orbit {

        animation:
            none !important;

        transition:
            none !important;

    }

}