/* ============================================================== */
/* 🚀 SHUVI GLOBAL ANIMATION ENGINE - CSS                         */
/* ============================================================== */

/* 1. Base Reveal Class (जो सबको कण्ट्रोल करेगी) */
.reveal {
    opacity: 0;
    will-change: transform, opacity, filter;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Professional Animations (अलग-अलग स्टाइल्स) */

/* (A) Fade Effects - टेक्स्ट और कार्ड्स के लिए */
.reveal.fade-up { transform: translateY(40px); }
.reveal.fade-down { transform: translateY(-40px); }
.reveal.fade-left { transform: translateX(40px); } /* राईट से लेफ्ट */
.reveal.fade-right { transform: translateX(-40px); } /* लेफ्ट से राईट */

/* (B) Cinematic Blur Reveal - Apple/Behance स्टाइल (हेडिंग्स के लिए बवाल) */
.reveal.blur-up { transform: translateY(30px); filter: blur(15px); }

/* (C) Zoom & Scale - प्रोफाइल फोटो या गैलरी के लिए */
.reveal.zoom-in { transform: scale(0.85); }
.reveal.zoom-out { transform: scale(1.1); }

/* 3. Active State (जब चीज़ स्क्रीन पर दिखेगी तो ये होगा) */
.reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
    filter: blur(0);
}

/* 4. Staggered Delays (ग्रिड या एक-एक करके कार्ड्स लाने के लिए) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* 5. 3D Hover & Glow Effects (बटन्स और कार्ड्स के लिए) */
.hover-glow { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.hover-glow:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -10px rgba(243, 192, 63, 0.3);
    border-color: rgba(243, 192, 63, 0.5);
}

.hover-tilt { transition: transform 0.4s ease-out; }
.hover-tilt:hover { transform: perspective(1000px) rotateX(4deg) rotateY(-4deg) scale(1.02); }

/* 6. Floating Effects (बैकग्राउंड शेप्स के लिए) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }