/**
 * Ripple Effect
 * Material Design ripple animation for interactive elements
 * Requirements: 4.4, 4.5
 */

/* ============================================
   RIPPLE CONTAINER
   ============================================ */

.ripple-container {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   RIPPLE EFFECT
   ============================================ */

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple-animation 600ms ease-out;
    pointer-events: none;
}

/* Dark ripple for light backgrounds */
.ripple--dark {
    background: rgba(0, 0, 0, 0.1);
}

/* Light ripple for dark backgrounds */
.ripple--light {
    background: rgba(255, 255, 255, 0.3);
}

/* Primary color ripple */
.ripple--primary {
    background: rgba(47, 111, 237, 0.3);
}

/* ============================================
   RIPPLE ANIMATION
   ============================================ */

@keyframes ripple-animation {
    from {
        transform: scale(0);
        opacity: 1;
    }
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .ripple {
        animation: none;
        opacity: 0.3;
        transition: opacity 150ms ease-out;
    }

    @keyframes ripple-animation {
        from {
            opacity: 0.3;
        }
        to {
            opacity: 0;
        }
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Apply ripple effect to buttons */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

/* Apply ripple effect to cards */
.card-ripple {
    position: relative;
    overflow: hidden;
}

/* Apply ripple effect to list items */
.list-item-ripple {
    position: relative;
    overflow: hidden;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

[data-theme="dark"] .ripple--dark {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ripple--light {
    background: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .ripple--primary {
    background: rgba(59, 130, 246, 0.3);
}