/* =====================================================
   ARS NAVIGATION V3
   PREMIUM ORB ECOSYSTEM
   PART 01
===================================================== */


/* =====================================================
   MAIN CONTAINER
===================================================== */


.ars-navigation{

    position:relative;

    width:900px;

    height:900px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    perspective:1200px;

    z-index:20;

}



/* =====================================================
   CORE ORB
===================================================== */


.ars-core{

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-decoration:none;

    z-index:50;

    transform-style:preserve-3d;

    cursor:pointer;


    animation:

    coreFloat 8s ease-in-out infinite;


}




/* CORE PLANET */

.planet-core{

    position:absolute;

    inset:0;

    border-radius:50%;


    background:

    radial-gradient(
        circle at 30% 25%,
        rgba(255,255,255,.45),
        transparent 20%
    ),

    radial-gradient(
        circle at 50% 50%,
        #c89b45,
        #5b4018 65%,
        #120d05
    );


    box-shadow:


    inset 0 0 60px rgba(255,220,130,.35),

    0 0 50px rgba(210,160,70,.45),

    0 0 120px rgba(210,160,70,.25);



    overflow:hidden;


    transition:

    .6s ease;


}



/* CORE GLOW */


.planet-glow{


    position:absolute;

    inset:-30px;

    border-radius:50%;


    background:

    radial-gradient(

    circle,

    rgba(255,210,120,.5),

    transparent 65%

    );


    filter:blur(25px);


    animation:

    glowPulse 4s ease-in-out infinite;


}




/* CORE TEXT */


.ars-core span{


    position:relative;

    z-index:5;


    width:200px;


    color:white;


    font-size:22px;


    font-weight:700;


    letter-spacing:1px;


    text-shadow:

    0 5px 20px black;


}




/* CORE HOVER */


.ars-core:hover .planet-core{


    transform:

    scale(1.08)

    rotateY(15deg);


    box-shadow:


    inset 0 0 80px rgba(255,230,150,.5),

    0 0 100px rgba(255,200,80,.7);



}



/* =====================================================
   COMMON ORB NODE
===================================================== */


.ars-node{


    position:absolute;


    width:130px;

    height:130px;


    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    text-decoration:none;


    color:white;


    z-index:30;


    transform-style:preserve-3d;


    cursor:pointer;


    animation:

    orbFloat 6s ease-in-out infinite;



}



/* PLANET */


.planet{


    position:absolute;


    inset:0;


    border-radius:50%;


    background:


    radial-gradient(

    circle at 30% 20%,

    rgba(255,255,255,.4),

    transparent 18%

    ),


    linear-gradient(

    145deg,

    #555,

    #151515

    );


    box-shadow:


    inset 0 0 35px rgba(255,255,255,.15),

    0 0 35px rgba(0,0,0,.8);



    transition:

    .5s ease;


}



/* NODE TEXT */


.ars-node span{


    position:relative;


    z-index:5;


    font-size:14px;


    font-weight:700;


    text-align:center;


    text-shadow:

    0 3px 10px black;


}

/* =====================================================
   NODE POSITIONS
===================================================== */


/* TOP */

.node1{

    top:80px;

    left:50%;

    margin-left:-65px;


    animation-delay:.2s;

}



/* TOP RIGHT */

.node2{

    top:220px;

    right:120px;


    animation-delay:.8s;

}



/* BOTTOM RIGHT */

.node3{

    bottom:220px;

    right:120px;


    animation-delay:1.4s;

}



/* BOTTOM */

.node4{

    bottom:80px;

    left:50%;

    margin-left:-65px;


    animation-delay:2s;

}



/* BOTTOM LEFT */

.node5{

    bottom:220px;

    left:120px;


    animation-delay:2.6s;

}



/* TOP LEFT */

.node6{

    top:220px;

    left:120px;


    animation-delay:3.2s;

}



/* LEFT MIDDLE */

.node7{

    top:50%;

    left:20px;

    margin-top:-65px;


    animation-delay:3.8s;

}




/* =====================================================
   ORB HOVER SYSTEM
===================================================== */


.ars-node:hover{


    z-index:100;


    transform:

    scale(1.25)

    translateZ(80px);



}



.ars-node:hover .planet{


    background:


    radial-gradient(

    circle at 30% 20%,

    rgba(255,255,255,.65),

    transparent 20%

    ),


    linear-gradient(

    145deg,

    #d8b46a,

    #30200c

    );


    box-shadow:


    inset 0 0 50px rgba(255,220,130,.4),


    0 0 70px rgba(255,200,100,.75);



}



/* =====================================================
   CLICK FEEDBACK
===================================================== */


.ars-node:active,
.ars-core:active{


    transform:

    scale(.92);



}



/* =====================================================
   ORB IMAGE READY SYSTEM
   (برای آینده عکس داخل گوی‌ها)
===================================================== */


.planet img,
.planet-core img{


    width:100%;

    height:100%;


    object-fit:cover;


    border-radius:50%;


}



/* =====================================================
   LIGHT REFLECTION
===================================================== */


.planet::before,
.planet-core::before{


    content:"";


    position:absolute;


    width:45%;

    height:45%;


    top:10%;

    left:15%;


    border-radius:50%;


    background:

    radial-gradient(

    circle,

    rgba(255,255,255,.35),

    transparent 70%

    );


    pointer-events:none;


}



/* =====================================================
   FLOAT ANIMATIONS
===================================================== */


@keyframes orbFloat{


    0%{

        margin-top:0;

    }


    25%{

        margin-top:-18px;

    }


    50%{

        margin-top:8px;

    }


    75%{

        margin-top:-12px;

    }


    100%{

        margin-top:0;

    }


}





@keyframes coreFloat{


    0%{

        transform:

        translateY(0);

    }


    50%{

        transform:

        translateY(-20px);

    }


    100%{

        transform:

        translateY(0);

    }


}




/* =====================================================
   GLOW ENGINE
===================================================== */


@keyframes glowPulse{


    0%{

        opacity:.45;

        transform:scale(.95);

    }


    50%{

        opacity:.9;

        transform:scale(1.08);

    }


    100%{

        opacity:.45;

        transform:scale(.95);

    }


}

/* =====================================================
   ADVANCED MOTION ENGINE
===================================================== */


.ars-navigation{

    transform-style:preserve-3d;

    animation:

    navigationBreath 12s ease-in-out infinite;

}





/* =====================================================
   ORB 3D ROTATION
===================================================== */


.ars-node .planet{


    animation:

    planetRotate 18s linear infinite;


}





.ars-core .planet-core{


    animation:

    coreRotate 30s linear infinite;


}





@keyframes planetRotate{


    from{


        transform:

        rotate(0deg);


    }


    to{


        transform:

        rotate(360deg);


    }


}




@keyframes coreRotate{


    from{


        transform:

        rotateY(0deg);


    }


    to{


        transform:

        rotateY(360deg);


    }


}





/* =====================================================
   DEPTH & PARALLAX READY
===================================================== */


.ars-node,
.ars-core{


    transition:

    transform .5s cubic-bezier(.2,.8,.2,1);


}




.ars-node:hover{


    filter:

    brightness(1.25);


}





/* =====================================================
   ACTIVE NODE STATE
===================================================== */


.ars-node.active{


    transform:

    scale(1.3)

    translateZ(120px);


}



.ars-node.active .planet{


    box-shadow:


    inset 0 0 60px rgba(255,220,140,.6),

    0 0 90px rgba(255,190,90,.9);


}





/* =====================================================
   PREMIUM GLASS EDGE
===================================================== */


.planet,
.planet-core{


    border:

    1px solid rgba(255,255,255,.18);



    backdrop-filter:

    blur(5px);



}





/* =====================================================
   RANDOM ENERGY EFFECT
===================================================== */


.planet::after,
.planet-core::after{


    content:"";


    position:absolute;


    inset:0;


    border-radius:50%;


    background:

    conic-gradient(

    transparent,

    rgba(255,220,130,.35),

    transparent

    );


    opacity:.35;


    animation:

    energySpin 8s linear infinite;



}





@keyframes energySpin{


    from{


        transform:

        rotate(0deg);


    }


    to{


        transform:

        rotate(360deg);


    }


}




/* =====================================================
   NAVIGATION BREATH
===================================================== */


@keyframes navigationBreath{


    0%,100%{


        transform:

        scale(1);


    }


    50%{


        transform:

        scale(1.015);


    }


}





/* =====================================================
   MOUSE INTERACTION SUPPORT
===================================================== */


.ars-navigation.mouse-active .ars-node{


    transition:

    transform .15s ease-out;


}





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


@media(max-width:1100px){


    .ars-navigation{


        width:700px;

        height:700px;


    }



    .ars-core{


        width:280px;

        height:280px;


    }



    .ars-node{


        width:100px;

        height:100px;


    }


}





@media(max-width:700px){


    .ars-navigation{


        width:420px;

        height:420px;


    }



    .ars-core{


        width:180px;

        height:180px;


    }



    .ars-node{


        width:70px;

        height:70px;


    }



    .ars-node span{


        font-size:10px;


    }



        }

/* =====================================================
   FINAL LAYER CONTROL
===================================================== */


.ars-navigation,
.ars-core,
.ars-node{


    transform-style:preserve-3d;


}



.ars-core{


    pointer-events:auto;


}




.ars-node{


    pointer-events:auto;


}



/* =====================================================
   CINEMATIC ENTRANCE
===================================================== */


.ars-navigation{


    opacity:0;


    animation:


    navigationEnter 1.8s cubic-bezier(.2,.8,.2,1) forwards,


    navigationBreath 12s ease-in-out infinite 2s;


}




.ars-core{


    animation:


    coreEnter 1.5s ease forwards,


    coreFloat 8s ease-in-out infinite 1.8s;


}





.ars-node{


    opacity:0;


    animation-name:


    nodeEnter,


    orbFloat;


    animation-duration:


    1s,


    6s;


    animation-fill-mode:


    forwards;


    animation-timing-function:


    ease,


    ease-in-out;


}





@keyframes navigationEnter{


    from{


        opacity:0;


        transform:

        scale(.7)

        rotateX(25deg);


    }



    to{


        opacity:1;


        transform:

        scale(1)

        rotateX(0);


    }


}




@keyframes coreEnter{


    from{


        opacity:0;


        transform:

        scale(.3);


    }


    to{


        opacity:1;


        transform:

        scale(1);


    }


}




@keyframes nodeEnter{


    from{


        opacity:0;


        transform:

        scale(0)

        translateZ(-200px);


    }


    to{


        opacity:1;


        transform:

        scale(1)

        translateZ(0);


    }


}





/* =====================================================
   GPU PERFORMANCE
===================================================== */


.ars-navigation *,
.planet,
.planet-core{


    will-change:

    transform,

    opacity,

    filter;


}





/* =====================================================
   ACCESSIBILITY
===================================================== */


.ars-node:focus-visible,
.ars-core:focus-visible{


    outline:

    3px solid rgba(255,210,120,.9);


    outline-offset:

    8px;


}





/* =====================================================
   REDUCE MOTION
===================================================== */


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


    .ars-navigation *,
    .planet,
    .planet-core{


        animation:none !important;


        transition:none !important;


    }


}

/* ===============================
   ARS NODE FIX ENGINE
=============================== */


.ars-node{

    animation:none;

    transition:
    transform .45s ease,
    filter .45s ease,
    box-shadow .45s ease;

}


.ars-node .planet{

    animation:
    orbMove 7s ease-in-out infinite alternate;

}


.ars-node:hover{

    transform:
    scale(1.25)
    translateY(-10px);

    filter:
    brightness(1.25);

}


.ars-node:hover span{

    font-weight:900;

}


@keyframes orbMove{

    from{

        translate:0 0;

    }


    to{

        translate:0 -15px;

    }

}
/* ===============================
   ARS NAVIGATION STABILITY FIX
=============================== */


.ars-node{

    opacity:1 !important;

    animation:none !important;

    display:flex !important;

}



.ars-node .planet{

    animation:none !important;

    opacity:1 !important;

    filter:none;

}



.planet-glow,
.planet::after,
.planet-core::after{

    animation:none !important;

}



.ars-node:hover{

    transform:scale(1.2) !important;

    filter:brightness(1.2);

}



.ars-core{

    opacity:1