/* ===== TRANSITIONS & RIPPLE EFFECTS ===== */
/* Ripple effects, hover states, and interactive transitions */

/* Ripple Effect for Buttons and Interactive Elements */
.button,
.ds-button,
.library-card,
.modal-nav,
.tool-item {
    position: relative;
    overflow: hidden;
}

.button::after,
.ds-button::after,
.library-card::after,
.modal-nav::after,
.tool-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}

.button:active::after,
.ds-button:active::after,
.library-card:active::after,
.modal-nav:active::after,
.tool-item:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
    transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
}

/* Enhanced Press Animation */
.button:active,
.ds-button:active {
    transform: translateY(1px) scale(0.97);
}

.library-card:active {
    transform: translateY(0) scale(0.98);
}

.modal-nav:active {
    transform: scale(0.95);
}

.tool-item:active {
    transform: translateY(0) scale(0.96);
}

/* Ensure icons in buttons match button text color */
.button .material-icons,
.ds-button .material-icons,
.button-primary .material-icons,
.ds-button-primary .material-icons,
.button-secondary .material-icons,
.ds-button-secondary .material-icons,
button .material-icons {
    color: inherit;
}