/* ============================================================ Dr. Zakir HM — Animations (animations.css) ============================================================ */ /* ============================================================ KEYFRAMES ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes float-delayed { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.95); } 100% { transform: scale(1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes typeWriter { from { width: 0; } to { width: 100%; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============================================================ ANIMATION UTILITY CLASSES ============================================================ */ .animate-fade-in { animation: fadeIn 0.6s ease forwards; } .animate-fade-up { animation: fadeInUp 0.6s ease forwards; } .animate-fade-down { animation: fadeInDown 0.6s ease forwards; } .animate-fade-left { animation: fadeInLeft 0.6s ease forwards; } .animate-fade-right { animation: fadeInRight 0.6s ease forwards; } .animate-scale-in { animation: scaleIn 0.4s ease forwards; } .animate-float { animation: float 4s ease-in-out infinite; } .animate-float-delayed { animation: float-delayed 5s ease-in-out infinite; animation-delay: 1s; } .animate-pulse { animation: pulse 2s ease-in-out infinite; } .animate-bounce-in { animation: bounceIn 0.8s ease forwards; } /* ============================================================ ANIMATION DELAYS ============================================================ */ .delay-100 { animation-delay: 100ms; } .delay-200 { animation-delay: 200ms; } .delay-300 { animation-delay: 300ms; } .delay-400 { animation-delay: 400ms; } .delay-500 { animation-delay: 500ms; } .delay-600 { animation-delay: 600ms; } .delay-700 { animation-delay: 700ms; } .delay-800 { animation-delay: 800ms; } /* ============================================================ HOVER EFFECTS ============================================================ */ .hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); } .hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); } .hover-glow { transition: box-shadow var(--transition-base); } .hover-glow:hover { box-shadow: var(--shadow-glow); } .hover-scale { transition: transform var(--transition-base); } .hover-scale:hover { transform: scale(1.03); } /* ============================================================ COUNTER ANIMATION ============================================================ */ .counter-animate { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .counter-animate.in-view { opacity: 1; transform: translateY(0); } /* ============================================================ PAGE TRANSITION ============================================================ */ .page-transition { opacity: 0; animation: fadeIn 0.4s ease 0.1s forwards; } /* ============================================================ SKELETON LOADING ============================================================ */ .skeleton { background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 37%, var(--gray-200) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-md); } .skeleton-text { height: 14px; margin-bottom: var(--space-2); width: 100%; } .skeleton-title { height: 24px; margin-bottom: var(--space-3); width: 60%; } .skeleton-image { height: 200px; width: 100%; } .skeleton-avatar { width: 48px; height: 48px; border-radius: var(--radius-full); } /* ============================================================ SCROLL REVEAL (for elements without AOS) ============================================================ */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.revealed { opacity: 1; transform: translateY(0); } /* ============================================================ LENIS SMOOTH SCROLL ============================================================ */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } /* ============================================================ SHADOW MOTION (Dynamic Mix) ============================================================ */ @keyframes shadowPulse { 0% { box-shadow: var(--shadow-dynamic-mix); } 50% { box-shadow: var(--shadow-dynamic-mix-hover); } 100% { box-shadow: var(--shadow-dynamic-mix); } } .animated-shadow-element, .card, .book-card, .article-card, .stat-card, .award-card, .contact-card, .btn-primary { animation: shadowPulse 4s infinite ease-in-out; } .animated-shadow-element:hover, .card:hover, .book-card:hover, .article-card:hover, .stat-card:hover, .award-card:hover, .contact-card:hover, .btn-primary:hover { animation: none; box-shadow: var(--shadow-dynamic-mix-hover) !important; } /* ============================================================ CUSTOM CURSOR (Ultra-Premium Dynamic & Magnetic) ============================================================ */ @media (pointer: fine) { body.custom-cursor-active:not(.admin-body), body.custom-cursor-active:not(.admin-body) a, body.custom-cursor-active:not(.admin-body) button, body.custom-cursor-active:not(.admin-body) input, body.custom-cursor-active:not(.admin-body) textarea, body.custom-cursor-active:not(.admin-body) select, body.custom-cursor-active:not(.admin-body) .swiper-button-next, body.custom-cursor-active:not(.admin-body) .swiper-button-prev, body.custom-cursor-active:not(.admin-body) .swiper-pagination-bullet, body.custom-cursor-active:not(.admin-body) [role="button"] { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 10px; height: 10px; background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 99999; box-shadow: 0 0 12px rgba(124, 58, 237, 0.95), 0 0 3px #FFFFFF; transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease, opacity 0.25s ease, transform 0.15s ease; opacity: 0; } .cursor-outline { position: fixed; top: 0; left: 0; width: 38px; height: 38px; border: 1.8px solid rgba(124, 58, 237, 0.7); background: rgba(124, 58, 237, 0.06); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 99998; box-shadow: 0 0 16px rgba(124, 58, 237, 0.25); backdrop-filter: blur(0.5px); transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), height 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease; opacity: 0; } .cursor-dot.visible, .cursor-outline.visible { opacity: 1; } /* Interactive Hover: Links, Buttons, Clickables */ .cursor-dot.hover-link { width: 14px; height: 14px; background: linear-gradient(135deg, #EC4899 0%, #7C3AED 100%); box-shadow: 0 0 18px rgba(236, 72, 153, 0.95), 0 0 4px #FFFFFF; } .cursor-outline.hover-link { width: 56px; height: 56px; border: 2px solid rgba(236, 72, 153, 0.9); background: rgba(236, 72, 153, 0.12); box-shadow: 0 0 24px rgba(236, 72, 153, 0.35); animation: cursorPulse 2s infinite ease-in-out; } /* Cards / Media Hover */ .cursor-dot.hover-card { width: 12px; height: 12px; background: linear-gradient(135deg, #F59E0B 0%, #7C3AED 100%); box-shadow: 0 0 14px rgba(245, 158, 11, 0.95), 0 0 3px #FFFFFF; } .cursor-outline.hover-card { width: 62px; height: 62px; border: 2px solid rgba(245, 158, 11, 0.85); background: rgba(245, 158, 11, 0.1); box-shadow: 0 0 22px rgba(245, 158, 11, 0.3); } /* Text Hover */ .cursor-dot.hover-text { width: 4px; height: 26px; border-radius: 4px; background: linear-gradient(180deg, #A855F7 0%, #3B82F6 100%); box-shadow: 0 0 12px rgba(124, 58, 237, 0.85); } .cursor-outline.hover-text { width: 14px; height: 32px; border-radius: 8px; border-color: rgba(124, 58, 237, 0.35); background: transparent; box-shadow: none; } /* Click Active State */ .cursor-dot.active { transform: translate(-50%, -50%) scale(0.7); } .cursor-outline.active { width: 30px; height: 30px; background: rgba(124, 58, 237, 0.35); border-color: var(--primary); } } @keyframes cursorPulse { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } 100% { transform: translate(-50%, -50%) scale(1); } } /* Magnetic Button utility */ .magnetic-btn { position: relative; display: inline-block; } /* ============================================================ REDUCED MOTION SUPPORT ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .animate-float, .animate-float-delayed, .animate-pulse { animation: none !important; } }