.tech-grid { background-image: radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.2) 0%, transparent 50%); } .card-glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .dark .card-glass { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.05); } .gradient-text { background-image: linear-gradient(90deg, #8B5CF6, #3B82F6, #10B981); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: text-gradient 4s linear infinite; } .hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } #previewImage { max-height: 200px; object-fit: contain; } .theme-toggle { transition: all 0.3s ease; } #initializationScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; transition: opacity 1s ease-out; } .loader { width: 48px; height: 48px; border: 5px solid rgba(255, 255, 255, 0.2); border-radius: 50%; border-top-color: #8B5CF6; animation: spin 1.5s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .page-transition { opacity: 0; transition: opacity 1s ease-out; } #mainContent { transition: opacity 1s ease-out; } .init-message { animation: fade-in 1s ease-out 0.5s both; } .init-logo { animation: fade-in 1s ease-out, float 6s ease-in-out infinite 1s; } .security-badge { animation: fade-in 1s ease-out 1.5s both; } .stagger-delay-1 { animation-delay: 0.2s; } .stagger-delay-2 { animation-delay: 0.4s; } .stagger-delay-3 { animation-delay: 0.6s; } #resultLink { word-break: break-all; } .copy-btn { transition: all 0.2s ease; } .copy-btn:hover { transform: scale(1.05); } .copy-btn:active { transform: scale(0.95); } .copy-success { background-color: #10B981 !important; }