@keyframes pathPulse { 0%, 100% { opacity: 1; filter: url(#neon-glow) drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); } 50% { opacity: 0.8; filter: url(#neon-glow) drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); } } .initial-loading { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(135deg, #0c0c0c 0%, #151313 100%); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.6s ease-out; } .initial-loading.fade-out { opacity: 0; pointer-events: none; } .initial-loading-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; width: 250px; height: 250px; } .initial-loading-content svg { width: 100%; height: 100%; animation: initialFloat 2s ease-in-out infinite, initialScale 1.5s ease-in-out infinite; } /* SVG path'larga stil */ .logo-path { fill: url(#neon-gradient); filter: url(#neon-glow); stroke: #ffffff; stroke-width: 0.1; animation: pathPulse 1.5s ease-in-out infinite; } /* Loading dots animation */ .initial-loading-text { text-align: center; } .loading-dots { display: flex; gap: 8px; justify-content: center; } .loading-dots span { width: 12px; height: 12px; background: linear-gradient(135deg, #e0e0e0 0%, #ffffff 50%, #c0c0c0 100%); border-radius: 50%; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); animation: dotBounce 1.4s ease-in-out infinite; } .loading-dots span:nth-child(1) { animation-delay: 0s; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } /* Animations */ @keyframes initialFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes initialScale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes dotBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } /* Smooth scroll prevention */ body:has(.initial-loading:not(.fade-out)) { overflow: hidden; } /* Responsive */ @media (max-width: 768px) { .initial-loading-content { width: 200px; height: 200px; } } @media (max-width: 480px) { .initial-loading-content { width: 150px; height: 150px; } .loading-dots span { width: 10px; height: 10px; } }