#overlay,
#overlay_AI {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--transparent-main-bg-color-light);
    z-index: 999999999999999999999999999999999999999999999999999999999999999;
    animation: fadeIn 0.5s ease-in-out;
    cursor: wait;
}




#overlay {
    display: block;
}


#overlay_AI {
    /* background-color: var(--transparent-main-bg-color); */
    /* animation: fadeIn 0.5s ease-in; */
}

#overlay.hidden-important {
    display: none !important;
}

/* Centered spinner styles */
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    margin-top: -75px;
    /* half of width */
    margin-left: -75px;
    /* half of height */
    border: 30px solid var(--grey-accent-color);
    box-shadow: 0 0 5px 1px var(--inv-bg-color);
    border-radius: 50%;
    border-top: 30px solid var(--grey-table-th);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.AI_Container {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: 900px;
    height: 200px;
    transform: translate(-50%, -50%);
    justify-content: center;
    display: flex;
    align-items: center;
}

.AI_Title {
    font-size: 75px;
    font-family: orbitron;
    font-weight: 1000;
    width: 300px;
    color: var(--grey-table-th);
    -webkit-text-stroke: 2px var(--inv-bg-color);
}

/* SPINNING CIRCLE */
.circle-border {
    width: 300px;
    height: 300px;
    padding: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--lightblue);
    background: linear-gradient(0deg, rgba(51, 193, 236, 0.1) 33%, rgba(8, 81, 126, 1) 100%);
    animation: spin 1s linear 0s infinite;
    position: absolute;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

.circle-core {
    width: 100%;
    height: 100%;
    background-color: var(--main-bg-color);
    border-radius: 50%;
}

/* KEYFRAMES */
@keyframes spin {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(359deg);
    }
}



/* GRID STYLING */
.spinner-box {
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: opacity 0.3s ease;
    opacity: 0;
}

/* SPINNING ORBITS */
.ai_ring {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.blue-ring {
    width: 210px;
    height: 210px;
    border: 2px solid var(--purple);

    -webkit-animation: spin3D 3s linear .2s infinite;
}

.green-ring {
    width: 165px;
    height: 165px;
    border: 3px solid var(--secondary-grey-color);

    -webkit-animation: spin3D 2s linear 0s infinite;
}

.red-ring {
    width: 135px;
    height: 135px;
    border: 2px solid var(--darkblue);
    box-shadow: 0 0 3px 0 var(--lightblue);
    -webkit-animation: spin3D 1s linear 0s infinite;
}

.inner-ring {
    width: 105px;
    height: 105px;
    border: 1px solid var(--lightblue);
    box-shadow: 0 0 3px 0 var(--lightblue);
    -webkit-animation: spin3D 10s linear 0s infinite;
}

.w1 {
    transform: rotate3D(1, 1, 1, 90deg);
}

.w2 {
    transform: rotate3D(1, 2, .5, 90deg);
}

.w3 {
    transform: rotate3D(.5, 1, 2, 90deg);
}

/* KEYFRAMES */
@keyframes spin3D {
    from {
        transform: rotate3d(.5, .5, .5, 360deg);
    }

    to {
        transform: rotate3d(0deg);
    }
}


#overlay_AI {
    background-color: var(--transparent-main-bg-color-heavy);
    box-shadow:
        inset 0 0 30px 10px var(--lightblue),
        inset 0 0 50px 15px var(--purple);
    animation: inset-shadow-motion 4s infinite linear;
}

@keyframes inset-shadow-motion {
    0% {
        box-shadow:
            inset 5px 0 30px 10px var(--lightblue),
            inset -5px 0 50px 15px var(--purple);
    }

    25% {
        box-shadow:
            inset 0 5px 30px 10px var(--purple),
            inset 0 -5px 50px 15px var(--lightblue);
    }

    50% {
        box-shadow:
            inset -5px 0 30px 10px var(--lightblue),
            inset 5px 0 50px 15px var(--purple);
    }

    75% {
        box-shadow:
            inset 0 -5px 30px 10px var(--purple),
            inset 0 5px 50px 15px var(--lightblue);
    }

    100% {
        box-shadow:
            inset 5px 0 30px 10px var(--lightblue),
            inset -5px 0 50px 15px var(--purple);
    }
}




.dot-spinner {
    display: flex;
    gap: 10px;
    margin-top: 25px;
}

.dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
    box-shadow: 0 0 3px 0 var(--inv-bg-color);
}

.dot-purple {
    background-color: var(--purple);
    animation: dot-purple-animation 4s infinite;
}

.dot-grey {
    background-color: rgb(86, 154, 241);
    animation: dot-grey-animation 4s infinite;
}

.dot-lightblue {
    background-color: var(--lightblue);
    animation: dot-lightblue-animation 4s infinite;
}

/* Keyframes for the first dot */
@keyframes dot-purple-animation {

    0%,
    25% {
        opacity: 0;
        /* Hidden */
    }

    26%,
    100% {
        opacity: 1;
        /* Visible */
    }
}

/* Keyframes for the second dot */
@keyframes dot-grey-animation {

    0%,
    50% {
        opacity: 0;
        /* Hidden */
    }

    51%,
    100% {
        opacity: 1;
        /* Visible */
    }
}

/* Keyframes for the third dot */
@keyframes dot-lightblue-animation {

    0%,
    75% {
        opacity: 0;
        /* Hidden */
    }

    76%,
    100% {
        opacity: 1;
        /* Visible */
    }
}

#overlay_AI div.inner {
    font-size: 70px;
    color: var(--inv-bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    width: 100%;
}

#overlay_AI div.inner p {
    font-size: 25px;
    color: var(--inv-bg-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    margin: 0;
    margin-top: 20px;
}



#overlay_AI div.inner b {
    color: var(--lightblue);
    animation: colorShift 4s ease-in-out infinite;
}

@keyframes colorShift {
    0% {
        color: var(--lightblue);
    }

    50% {
        color: var(--purple);
    }

    100% {
        color: var(--lightblue);
    }
}

.overlay-ai-title {
    font-family: orbitron !important;
    position: relative !important;
    display: flex;
}

.overlay-ai-logo {
    opacity: 1 !important;
    margin-top: 5px !important;
    margin-right: 20px;
    margin-left: -15px !important;
}

.overlay-ai-trademark {
    font-family: var(--font-main) !important;
    font-size: 24px !important;
    position: absolute !important;
    top: 12px !important;
    right: -28px !important;
}

.overlay-ai-disclaimer {
    position: fixed !important;
    z-index: 99999999999999 !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-weight: 600 !important;
    color: var(--inv-bg-color) !important;
    opacity: 0.4 !important;
    font-size: 12px !important;
}

.overlay-ai-cancel {
    position: fixed !important;
    z-index: 99999999999999 !important;
    top: 20px !important;
    right: 20px !important;
}

/* ── Mobile overlay_AI ── */
@media (max-width: 768px){
    #overlay_AI div.inner{
        font-size: 32px;
        gap: 10px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    #overlay_AI div.inner p{
        font-size: 14px;
        gap: 10px;
        margin-top: 12px;
    }
    .overlay-ai-logo{
        width: 36px !important;
        height: 36px !important;
        margin-right: 10px !important;
        margin-left: -8px !important;
        margin-top: 2px !important;
    }
    .overlay-ai-trademark{
        font-size: 12px !important;
        top: 4px !important;
        right: -16px !important;
    }
    .dot{
        width: 16px;
        height: 16px;
    }
    .dot-spinner{
        gap: 6px;
        margin-top: 14px;
    }
    .overlay-ai-disclaimer{
        font-size: 10px !important;
        bottom: 12px !important;
        width: 90%;
        text-align: center;
    }
}