/* 
   Dheeru Home Tuitions - Main Stylesheet
   Contains: Alpine cloaking, Animations, and Utility Helpers
*/

/* Hides Alpine.js elements before they are initialized to prevent flicker */
[x-cloak] { 
    display: none !important; 
}

/* Tab Transitions */
.tab-content { 
    transition: opacity 0.3s ease-in-out; 
}

/* Continuous Vertical Scrolling Animation for Reviews */
@keyframes scroll-v { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(-50%); } 
}

.animate-scroll-vertical { 
    animation: scroll-v 60s linear infinite; 
}

/* Custom Shadow for Mobile Header */
.mobile-header-shadow { 
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
}

/* Background Grid Pattern */
.grid-pattern { 
    background-image: radial-gradient(#C28E5C 0.5px, transparent 0.5px); 
    background-size: 20px 20px; 
}

/* =============================================
   WHATSAPP FLOATING BUTTON - Ripple Animation
   ============================================= */
@keyframes wa-ripple {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0; }
}

.whatsapp-fab {
    position: fixed;
}

.whatsapp-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    animation: wa-ripple 2s ease-out infinite;
    pointer-events: none;
}

.whatsapp-ring.ring-2 {
    animation-delay: 0.7s;
}

/* Hover scale effect on the button itself */
.whatsapp-fab:hover span.relative {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}