/* ==========================================================================
   PREMIUM INTERACTION ANIMATIONS (2025 Design System)
   "Glass Pulse" & "Magnetic Tactile Response"
   ========================================================================== */

:root {
    /* Adaptive colors that work on light/dark backgrounds */
    --interaction-glow-light: rgba(255, 255, 255, 0.6);
    --interaction-glow-dark: rgba(255, 255, 255, 0.3);
    --interaction-primary: rgba(230, 126, 34, 0.15);
    /* Matches brand accent --accent-orange */

    /* Physics constants */
    --ease-elastic: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-squish: cubic-bezier(0.5, 1.5, 0.5, 1);
}

/* 
 * 1. GLOBAL RESET
 * Remove outdated blue tap highlight on mobile 
 */
html {
    -webkit-tap-highlight-color: transparent;
}

/* 
 * 2. INTERACTION HOST
 * Elements that receive the effect need position relative and overflow hidden
 * (Applied via JS class or utility)
 */
.premium-interaction-target {
    position: relative;
    overflow: hidden;
    /* Optimize for composition */
    transform: translateZ(0);
    cursor: pointer;
}

/* 
 * 3. THE GLASS PULSE (Ripple Replacement)
 * A subtle, expanding gradient orb
 */
.glass-pulse-effect {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
            var(--interaction-glow-light) 0%,
            var(--interaction-glow-dark) 40%,
            transparent 80%);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
    z-index: 1000;

    /* Hardware acceleration */
    will-change: transform, opacity;
}

/* Animation keyframe logic is handled via Web Animations API in JS for performance */

/* 
 * 4. MAGNETIC PRESS (Tactile Feedback)
 * Replaces simple :active states
 */
.magnetic-press {
    transition: transform 0.4s var(--ease-squish);
}

.magnetic-press.is-pressed {
    transform: scale(0.96) translateY(1px);
}

/* 
 * 5. CONTEXT AWARE VARIATIONS 
 */

/* Dark mode / Dark background support */
.dark-mode .glass-pulse-effect,
.bg-dark .glass-pulse-effect,
.btn-primary .glass-pulse-effect {
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            transparent 100%);
}

/* Light background support (subtle dark ripple) */
.bg-light .glass-pulse-effect {
    background: radial-gradient(circle,
            rgba(15, 44, 74, 0.08) 0%,
            rgba(15, 44, 74, 0.04) 40%,
            transparent 80%);
}