/* ==========================================================================
   DIMUTHU FURNITURE - ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TRANSITION DEFINITIONS
   -------------------------------------------------------------------------- */
.transition-smooth {
    transition: var(--transition-base);
}

.transition-slow {
    transition: var(--transition-slow);
}

/* --------------------------------------------------------------------------
   2. KEYFRAME DEFINITIONS
   -------------------------------------------------------------------------- */

/* Slide-in from Left (useful for Mobile Menu) */
@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide-out to Left */
@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Simple Fade In */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Fade In and Slide Up (Reveal) */
@keyframes fadeInUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Subtle Pulsing Rings (CTA & Whatsapp Actions) */
@keyframes pulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.4);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(202, 138, 4, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(202, 138, 4, 0);
    }
}

@keyframes pulseRingWhatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Premium Text Reveal Clip-path */
@keyframes textReveal {
    0% {
        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* Skeleton Loading Pulse */
@keyframes skeletonPulse {
    0% {
        background-color: var(--bg-secondary);
    }
    50% {
        background-color: var(--border-color);
    }
    100% {
        background-color: var(--bg-secondary);
    }
}

/* --------------------------------------------------------------------------
   3. ANIMATION CLASSES
   -------------------------------------------------------------------------- */
.anim-fade-in {
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.anim-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.pulse-ring-gold {
    animation: pulseRing 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.pulse-ring-whatsapp {
    animation: pulseRingWhatsapp 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Image Hover Zoom Utility */
.hover-zoom-img {
    transition: var(--transition-slow);
}

.hover-zoom-img:hover {
    transform: scale(1.06);
}

/* Text Underline Hover Effect */
.hover-underline-reveal {
    position: relative;
    display: inline-block;
}

.hover-underline-reveal::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent-wood);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.hover-underline-reveal:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}