/* 
 * Tabaix Mobile & Premium Interactions
 */

/* 1. Physical Push (Squeeze on Tap) */
.tool-card, .btn, .nav-btn, .blog-card, .social-icon-btn {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
.tool-card:active, .btn:active, .nav-btn:active, .blog-card:active, .social-icon-btn:active {
    transform: scale(0.96) !important;
}

/* 2. Glow on Touch (Mobile Specific) */
@media (hover: none), (pointer: coarse) {
    .tool-card:active {
        border-color: var(--color-primary, #C9A84C) !important;
        box-shadow: 0 0 15px rgba(201,168,76,0.3) !important;
    }
}

/* 3. Touch Ripple Effect */
.tbd-ripple-host {
    position: relative;
    overflow: hidden;
}
.tbd-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
    z-index: 10;
}
.theme-glassmorphic .tbd-ripple {
    background: radial-gradient(circle, rgba(201,168,76,0.5) 0%, rgba(201,168,76,0) 70%);
}
@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 4. Scroll Reveal */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0, 0, 1), transform 0.8s cubic-bezier(0.2, 0, 0, 1);
    will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure no delay on fast scroll */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}