/*!
 * Clickable Effects - Light Version
 * Simple, performant clickable indicators for headings
 * Usage: Add 'clickable-shimmer' class to any heading element
 */

/* Base clickable element setup */
.clickable-shimmer {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Combined breathing effect - both glow and subtle scaling */
.clickable-shimmer {
    animation: breathingEffect 8s ease-in-out infinite;
}

@keyframes breathingEffect {
    0%, 100% {
        text-shadow: 
            var(--hms-h2-shadow), /* Keep original shadow */
            0 0 12px rgba(216, 112, 184, 0.4), /* More visible outer glow */
            0 0 20px rgba(216, 112, 184, 0.2); /* Extended glow */
        transform: scale(1); /* Normal size */
    }
    50% {
        text-shadow: 
            var(--hms-h2-shadow), /* Keep original shadow */
            0 0 20px rgba(216, 112, 184, 0.6), /* Stronger glow at peak */
            0 0 30px rgba(216, 112, 184, 0.3), /* More extended glow */
            0 0 40px rgba(216, 112, 184, 0.1); /* Very soft outer ring */
        transform: scale(1.02); /* Slightly larger - subtle breathing */
    }
}


/* Hover enhancement - strengthen effects on hover */
.clickable-shimmer:hover {
    animation-duration: 4s; /* Speed up breathing on hover */
}

/* Accessibility - respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .clickable-shimmer {
        animation: none;
    }
    
    .clickable-shimmer:hover {
        text-shadow: 
            var(--hms-h2-shadow),
            0 0 15px rgba(216, 112, 184, 0.6),
            0 0 25px rgba(216, 112, 184, 0.3);
        transform: scale(1.01);
    }
}

/* Fallback for browsers without CSS custom properties */
@supports not (color: var(--hms-h2-shadow)) {
    .clickable-shimmer {
        text-shadow: 
            1px 1px 0 #d870b8,
            -1px -1px 0 #d870b8,
            0 0 6px #d870b8,
            0 0 14px rgba(216, 112, 184, 0.3);
    }
}