/* ==========================================================
   CodeCradle AI Experience
========================================================== */


.ai-experience{

    padding:120px 0;

    background:
    linear-gradient(
        135deg,
        #fffdf8,
        #f7edd8
    );

}



.ai-wrapper{

    max-width:900px;

    margin:auto;

    padding:70px 40px;

    text-align:center;

    position:relative;

    border-radius:40px;

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

    border:1px solid rgba(232,178,76,0.35);

    box-shadow:
    0 30px 80px rgba(11,45,92,0.15);

    overflow:hidden;

}



.ai-wrapper::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:
    rgba(232,178,76,0.25);

    border-radius:50%;

    top:-120px;

    right:-80px;

    animation:
    aiGlow 6s infinite alternate;

}



@keyframes aiGlow{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.3);

    }

}





.ai-header{

    position:relative;

    z-index:2;

}



.ai-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 25px;

    border-radius:50px;

    background:#fff0c9;

    color:#0B2D5C;

    font-weight:700;

}



.ai-header h2{

    margin-top:25px;

    font-size:48px;

    color:#0B2D5C;

}



.ai-header h2 span{

    color:#E8B24C;

}



.ai-header p{

    font-size:18px;

    color:#64748b;

}





/* AI CIRCLE */


.ai-orb{

    width:130px;

    height:130px;

    margin:40px auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

    linear-gradient(
    135deg,
    #0B2D5C,
    #E8B24C
    );

    color:white;

    font-size:45px;

    position:relative;

    animation:

    floatAI 3s infinite ease-in-out;

}



@keyframes floatAI{

    50%{

        transform:translateY(-15px);

    }

}





.orb-ring{

    position:absolute;

    width:170px;

    height:170px;

    border-radius:50%;

    border:2px dashed #E8B24C;

    animation:

    rotateRing 10s linear infinite;

}



@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}







/* SEARCH BOX */


.ai-search-box{

    max-width:520px;

    margin:auto;

    padding:8px;

    display:flex;

    background:white;

    border-radius:60px;

    box-shadow:

    0 15px 40px rgba(11,45,92,0.15);

}



.ai-search-box input{

    flex:1;

    border:none;

    outline:none;

    padding:18px 25px;

    font-size:17px;

}



.ai-search-box button{

    width:55px;

    height:55px;

    border-radius:50%;

    border:none;

    background:

    linear-gradient(
    135deg,
    #0B2D5C,
    #E8B24C
    );

    color:white;

    cursor:pointer;

    font-size:20px;

}





/* LOADER */


.ai-loader{

    display:none;

    margin-top:25px;

    color:#0B2D5C;

    font-weight:600;

}



.ai-loader.active{

    display:block;

}



.ai-loader span{

    display:inline-block;

    width:12px;

    height:12px;

    background:#E8B24C;

    border-radius:50%;

    animation:pulse 1s infinite;

}



@keyframes pulse{

    50%{

        transform:scale(1.8);

    }

}





/* RESULT */


.ai-result{

    display:none;

    margin-top:30px;

    padding:25px;

    border-radius:25px;

    background:#0B2D5C;

    color:white;

}



.ai-result.show{

    display:block;

}



/* Keep the existing AI controls above the roaming robot */

.ai-orb,
.ai-search-box,
.ai-loader,
.ai-result{

    position:relative;

    z-index:2;

}


/* ==========================================================
   CODECRADLE ROAMING TOY ROBOT
========================================================== */

.ai-wrapper{
    isolation:isolate;
}

.roaming-robot{

    position:absolute;

    left:0;

    top:0;

    width:82px;

    height:120px;

    z-index:1;

    pointer-events:none;

    opacity:.98;

    transform:
        translate3d(60px,150px,0);

    filter:
        drop-shadow(
            0 12px 18px
            rgba(11,45,92,.18)
        );

    transition:
        transform 3.8s
        cubic-bezier(.4,0,.2,1);

    will-change:transform;

}

.robot-antenna{

    position:absolute;

    width:4px;

    height:16px;

    left:50%;

    top:-12px;

    transform:translateX(-50%);

    background:#0B2D5C;

    border-radius:5px;

}

.robot-antenna span{

    position:absolute;

    width:9px;

    height:9px;

    left:50%;

    top:-5px;

    transform:translateX(-50%);

    border-radius:50%;

    background:#E8B24C;

    box-shadow:
        0 0 10px
        rgba(232,178,76,.8);

    animation:
        robotSignal 1.5s
        ease-in-out infinite;

}

@keyframes robotSignal{

    0%,
    100%{
        transform:
            translateX(-50%)
            scale(1);
    }

    50%{
        transform:
            translateX(-50%)
            scale(1.35);
    }

}

.robot-head{

    position:absolute;

    top:4px;

    left:50%;

    width:64px;

    height:48px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            145deg,
            #173F73,
            #0B2D5C
        );

    border-radius:
        18px 18px 15px 15px;

    border:
        2px solid
        rgba(232,178,76,.65);

    box-shadow:

        inset 0 2px 4px
        rgba(255,255,255,.18),

        0 8px 18px
        rgba(11,45,92,.2);

}

.robot-face{

    position:absolute;

    left:50%;

    top:50%;

    width:46px;

    height:27px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    background:#061B3A;

    border-radius:10px;

}

.robot-eye{

    width:7px;

    height:11px;

    border-radius:50%;

    background:#E8B24C;

    box-shadow:
        0 0 8px
        rgba(232,178,76,.9);

    animation:
        robotBlink 4s infinite;

}

@keyframes robotBlink{

    0%,
    45%,
    48%,
    100%{
        transform:scaleY(1);
    }

    46%,
    47%{
        transform:scaleY(.1);
    }

}

.robot-ear{

    position:absolute;

    top:15px;

    width:8px;

    height:18px;

    background:#E8B24C;

    border-radius:5px;

}

.robot-ear.left{
    left:-7px;
}

.robot-ear.right{
    right:-7px;
}

.robot-neck{

    position:absolute;

    top:50px;

    left:50%;

    width:17px;

    height:10px;

    transform:translateX(-50%);

    background:#061B3A;

    border-radius:4px;

}

.robot-body{

    position:absolute;

    left:50%;

    top:58px;

    width:70px;

    height:48px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            145deg,
            #174475,
            #0B2D5C
        );

    border-radius:
        14px 14px 18px 18px;

    border:
        2px solid
        rgba(232,178,76,.55);

    box-shadow:

        inset 0 2px 4px
        rgba(255,255,255,.12),

        0 8px 16px
        rgba(11,45,92,.2);

}

.robot-chest{

    position:absolute;

    left:50%;

    top:8px;

    width:25px;

    height:25px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #F6D58A,
            #E8B24C
        );

    color:#0B2D5C;

    font-size:9px;

    font-weight:800;

    box-shadow:
        0 0 14px
        rgba(232,178,76,.55);

    animation:
        robotCore 2s
        ease-in-out infinite;

}

@keyframes robotCore{

    0%,
    100%{
        box-shadow:
            0 0 10px
            rgba(232,178,76,.35);
    }

    50%{
        box-shadow:
            0 0 22px
            rgba(232,178,76,.8);
    }

}

.robot-panel{

    position:absolute;

    bottom:7px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:4px;

}

.robot-panel span{

    width:5px;

    height:3px;

    border-radius:3px;

    background:#E8B24C;

}

.robot-arm{

    position:absolute;

    top:64px;

    width:10px;

    height:35px;

    background:#0B2D5C;

    border-radius:8px;

    border:
        2px solid
        rgba(232,178,76,.5);

}

.robot-arm.left{
    left:-2px;
    transform:rotate(18deg);
}

.robot-arm.right{
    right:-2px;
    transform:rotate(-18deg);
}

.robot-leg{

    position:absolute;

    top:99px;

    width:13px;

    height:20px;

    background:#061B3A;

    border-radius:
        4px 4px 7px 7px;

}

.robot-leg.left{
    left:25px;
}

.robot-leg.right{
    right:25px;
}

.robot-shadow{

    position:absolute;

    left:50%;

    bottom:-17px;

    width:60px;

    height:9px;

    transform:translateX(-50%);

    border-radius:50%;

    background:rgba(11,45,92,.15);

    filter:blur(5px);

    animation:
        robotShadow 3.5s
        ease-in-out infinite;

}

@keyframes robotShadow{

    0%,
    100%{
        transform:
            translateX(-50%)
            scale(1);
        opacity:.35;
    }

    50%{
        transform:
            translateX(-50%)
            scale(.65);
        opacity:.15;
    }

}


@media(max-width:768px){

    .ai-wrapper{

        padding:50px 20px;

    }


    .ai-header h2{

        font-size:34px;

    }


    .roaming-robot{

        width:64px;

        height:96px;

        transform:
            translate3d(35px,120px,0)
            scale(.78);

    }

    .robot-head{
        transform:
            translateX(-50%)
            scale(.78);
        transform-origin:center top;
    }

    .robot-body{
        transform:
            translateX(-50%)
            scale(.78);
        transform-origin:center top;
    }

    .robot-neck{
        transform:
            translateX(-50%)
            scale(.78);
        transform-origin:center top;
    }

    .robot-arm{
        transform:scale(.78);
        transform-origin:top center;
    }

    .robot-arm.left{
        transform:
            scale(.78)
            rotate(18deg);
    }

    .robot-arm.right{
        transform:
            scale(.78)
            rotate(-18deg);
    }

    .robot-leg{
        transform:scale(.78);
        transform-origin:top center;
    }

}