/*=========================================================
 MICROCORE HERO EFFECTS
=========================================================*/


/*=========================================================
 BACKGROUND EFFECTS
=========================================================*/

.mc-bg-effects{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:-1;
    pointer-events:none;
}


/*=========================================================
 GLOW CIRCLES
=========================================================*/

.mc-circle{
    position:absolute;
    border-radius:50%;
    background:rgba(0,174,255,.08);
    filter:blur(24px);
    animation:mcFloat 18s linear infinite;
}

.mc-circle1{
    width:420px;
    height:420px;
    top:-150px;
    left:-120px;
}

.mc-circle2{
    width:300px;
    height:300px;
    right:-60px;
    top:120px;
}

.mc-circle3{
    width:240px;
    height:240px;
    bottom:-80px;
    left:45%;
}


/*=========================================================
 ROBOT GLOW
=========================================================*/

.mc-robot-glow{

    position:absolute;

    left:50%;
    top:50%;

    width:58%;
    aspect-ratio:1;

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

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,174,255,.35),
        rgba(0,174,255,.10),
        transparent 72%);

    filter:blur(30px);

    z-index:1;

    animation:mcGlow 4s ease-in-out infinite;

}


/*=========================================================
 HUD
=========================================================*/

.mc-hud{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
}

.mc-hud .ring{
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(0,174,255,.18);
}

.mc-hud .ring1{
    width:74%;
    aspect-ratio:1;
    animation:mcRotate 30s linear infinite;
}

.mc-hud .ring2{
    width:58%;
    aspect-ratio:1;
    animation:mcRotateReverse 24s linear infinite;
}

.mc-hud .ring3{
    width:42%;
    aspect-ratio:1;
    animation:mcRotate 18s linear infinite;
}


/*=========================================================
 CENTER DOT
=========================================================*/

.mc-robot-area::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

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

    width:12px;
    height:12px;

    border-radius:50%;

    background:#00c8ff;

    box-shadow:
        0 0 15px #00c8ff,
        0 0 35px #00c8ff;

    z-index:40;

}


/*=========================================================
 OUTER RING
=========================================================*/

.mc-robot-area::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

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

    width:92%;
    aspect-ratio:1;

    border-radius:50%;

    border:1px solid rgba(0,174,255,.08);

    animation:mcPulseRing 6s ease-in-out infinite;

}


/*=========================================================
 CARD ICON EFFECT
=========================================================*/

.mc-card-icon{

    background:rgba(0,174,255,.12);

    color:#00c8ff;

    box-shadow:0 0 20px rgba(0,174,255,.20);

}


/*=========================================================
 CARD HOVER
=========================================================*/

.mc-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    animation:mcCardFloat 5s ease-in-out infinite;

}

.mc-card:hover{

    transform:translateY(-8px) scale(1.04);

    border-color:#00c8ff;

    box-shadow:
        0 18px 40px rgba(0,174,255,.28),
        0 0 35px rgba(0,174,255,.18);

}

.mc-card2{
    animation-delay:.5s;
}

.mc-card3{
    animation-delay:1s;
}

.mc-card4{
    animation-delay:1.5s;
}


/*=========================================================
 BUTTON EFFECTS
=========================================================*/

.mc-btn{

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

.mc-btn-primary:hover{

    background:#008fe8;

    border-color:#008fe8;

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(30,167,255,.35);

}

.mc-btn-outline:hover{

    background:#1ea7ff;

    border-color:#1ea7ff;

    transform:translateY(-4px);

}


/*=========================================================
 STAT CARD EFFECT
=========================================================*/

.mc-stat{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.mc-stat:hover{

    transform:translateY(-8px);

    border-color:#00c8ff;

    box-shadow:0 18px 35px rgba(0,174,255,.20);

}


/*=========================================================
 SCROLL BUTTON
=========================================================*/

.mc-scroll{

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;

    animation:mcBounce 2s infinite;

}

.mc-scroll:hover{

    background:#00c8ff;

    border-color:#00c8ff;

}


/*=========================================================
 KEYFRAMES
=========================================================*/

@keyframes mcFloat{

    0%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-35px) rotate(180deg);
    }

    100%{
        transform:translateY(0) rotate(360deg);
    }

}

@keyframes mcGlow{

    0%{
        transform:translate(-50%,-50%) scale(.95);
        opacity:.7;
    }

    50%{
        transform:translate(-50%,-50%) scale(1.08);
        opacity:1;
    }

    100%{
        transform:translate(-50%,-50%) scale(.95);
        opacity:.7;
    }

}

@keyframes mcRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes mcRotateReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}

@keyframes mcPulseRing{

    0%{
        transform:translate(-50%,-50%) scale(.96);
        opacity:.35;
    }

    50%{
        transform:translate(-50%,-50%) scale(1.03);
        opacity:.9;
    }

    100%{
        transform:translate(-50%,-50%) scale(.96);
        opacity:.35;
    }

}

@keyframes mcCardFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes mcBounce{

    0%,20%,50%,80%,100%{
        transform:translateX(-50%) translateY(0);
    }

    40%{
        transform:translateX(-50%) translateY(-10px);
    }

    60%{
        transform:translateX(-50%) translateY(-5px);
    }

}