/**
 * Ripple CSS
 *
 * Minimal CSS for WAAPI-powered ripple effects.
 */

/* Base ripple container */
[data-ripple] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}

/* Subtle press feedback */
[data-ripple]:active {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
}

/* The actual ripple element (created by JS) */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Theme-aware ripple colors */
[data-ripple] {
    --ripple-color: currentColor;
}

/* Light buttons get darker ripple */
.bg-white [data-ripple],
[data-ripple].bg-white,
.bg-background-50 [data-ripple],
[data-ripple].bg-background-50 {
    --ripple-color: rgba(0, 0, 0, 0.15);
}

/* Dark/accent buttons get lighter ripple */
.bg-accent-500 [data-ripple],
[data-ripple].bg-accent-500,
.bg-accent-600 [data-ripple],
[data-ripple].bg-accent-600,
.bg-content-900 [data-ripple],
[data-ripple].bg-content-900 {
    --ripple-color: rgba(255, 255, 255, 0.3);
}

/* Hover effects */
[data-ripple-hover] {
    transition: filter 150ms ease-out;
}