/* ===== ТРЕНД 6: ИНТЕРАКТИВНЫЕ ЭЛЕМЕНТЫ ===== */

.interactive-card {

    transition: var(--transition);

    cursor: pointer;

}



@media (hover: hover) {

    .interactive-card:hover {

        transform: translateY(-5px);

        border-color: var(--primary);

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

    }

}



.hover-zoom {

    transition: transform 0.3s ease;

}



.hover-zoom:hover {

    transform: scale(1.05);

}



/* Микроанимации */

.micro-animation {

    position: relative;

    overflow: hidden;

}



.micro-animation::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 50%;

    width: 5px;

    height: 5px;

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

    border-radius: 100%;

    transform: scale(0);

    transition: transform 0.3s ease;

}



.micro-animation:hover::after {

    transform: scale(40);

    opacity: 0;

}