/* ===========================================================
   ART-STROY AI
   animations.css
=========================================================== */

/* ---------- Плавное появление ---------- */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.fade-in{

    animation:fadeIn .35s ease;

}

/* ---------- Появление справа ---------- */

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-left{

    animation:slideLeft .35s ease;

}

/* ---------- Появление слева ---------- */

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(-30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.slide-right{

    animation:slideRight .35s ease;

}

/* ---------- Pulse ---------- */

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

.pulse{

    animation:pulse 1.2s infinite;

}

/* ---------- Spinner ---------- */

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.spinner{

    width:18px;

    height:18px;

    border-radius:50%;

    border:3px solid rgba(0,0,0,.15);

    border-top-color:var(--primary);

    animation:spin .8s linear infinite;

}

/* ---------- Typing ---------- */

.typing{

    display:flex;

    align-items:center;

    gap:6px;

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--text-light);

    animation:typing .9s infinite;

}

.typing span:nth-child(2){

    animation-delay:.15s;

}

.typing span:nth-child(3){

    animation-delay:.3s;

}

@keyframes typing{

    0%{

        opacity:.3;

        transform:translateY(0);

    }

    50%{

        opacity:1;

        transform:translateY(-5px);

    }

    100%{

        opacity:.3;

        transform:translateY(0);

    }

}

/* ---------- Hover карточек ---------- */

.panel{

    transition:.25s ease;

}

.panel:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

/* ---------- Hover кнопок ---------- */

.btn{

    transition:.25s ease;

}

.btn:hover{

    transform:translateY(-2px);

}

/* ---------- Сообщения ---------- */

.message{

    animation:fadeIn .25s ease;

}