/** * Custom animations for Gyannetra website * Enhances UI with smooth transitions and dynamic effects */ /* General fade-in animation */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Slide up animation */ @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Scale in animation */ @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Pulse animation */ @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } /* Floating animation */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } /* Node pulse effect */ @keyframes nodePulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } } /* Node ripple effect */ @keyframes nodeRipple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } /* Custom cursor animation */ @keyframes cursorPulse { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.5); opacity: 0.3; } 100% { transform: scale(1); opacity: 0.7; } } /* Section transition animation */ @keyframes sectionTransition { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* Logo pulse animation */ @keyframes logoPulse { 0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); } 100% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); } } /* Rotating animation */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Shine effect animation */ @keyframes shine { 0% { background-position: -100px; } 40%, 100% { background-position: 300px; } } /* Custom animation classes */ .animate-on-scroll { opacity: 0; transition: opacity 0.8s ease, transform 0.8s ease; } .animated { opacity: 1; transform: translateY(0) !important; } .animate-on-scroll.section-heading { transform: translateY(-20px); } .animate-on-scroll.btn-primary { transform: translateY(20px); } .animate-on-scroll.exp-item { transform: translateY(30px); } /* Staggered animation for elements */ .section-hidden { opacity: 0; transition: all 1s ease; } .section-visible { opacity: 1; } .section-highlighted { animation: pulse 1s ease; } .animate-on-visible { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .element-visible { opacity: 1; transform: translateY(0); } /* Header animations */ .header-scrolled { backdrop-filter: blur(10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background-color: rgba(10, 10, 30, 0.8); } .header-hidden { transform: translateY(-100%); } .site-header { transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease; } /* Footer animations */ .footer-visible .footer-col { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .footer-visible .col-visible { opacity: 1; transform: translateY(0); } /* Custom cursor styles */ .custom-cursor { position: fixed; width: 30px; height: 30px; border: 2px solid rgba(59, 130, 246, 0.5); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, border-color 0.2s; } .cursor-dot { position: fixed; width: 4px; height: 4px; background-color: rgba(59, 130, 246, 0.8); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); } .cursor-hover { width: 40px; height: 40px; border-color: rgba(139, 92, 246, 0.7); background-color: rgba(59, 130, 246, 0.1); } /* Data node effects */ .node-hover { z-index: 10; } .node-active .node-core { animation: nodePulse 1.5s infinite; } .node-halo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(59, 130, 246, 0.7); box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); opacity: 0.8; animation: nodeRipple 1.5s ease-out infinite; } .node-pulse-effect { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background-color: rgba(59, 130, 246, 0.3); opacity: 0; animation: nodeRipple 1.5s ease-out; } .node-ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); animation: nodeRipple 0.4s ease-out; } .core-glow { box-shadow: 0 0 15px 5px rgba(59, 130, 246, 0.7); } .constellation-line { transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease; } .constellation-line-active { stroke: rgba(100, 200, 255, 0.8) !important; stroke-width: 2 !important; filter: drop-shadow(0 0 3px rgba(100, 200, 255, 0.5)); } /* Expertise item animations */ .exp-item { transition: transform 0.3s ease, box-shadow 0.3s ease; } .exp-hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .exp-click { animation: pulse 0.3s ease; } .animate-entrance { opacity: 0; transform: translateY(30px); animation: slideUp 0.5s forwards; } /* Page transitions */ .transition-ready { transition: opacity 0.5s ease-out; } .page-hidden .neural-mesh, .page-hidden .data-constellation, .page-hidden .geometric-morphs, .page-hidden .data-streams { animation-play-state: paused; }