/* Orbit Elements */ .tnaado-orbit { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .tnaado-orbit-circle { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); animation: orbit-rotate 120s linear infinite; will-change: transform; } .tnaado-orbit-circle-1 { top: 20%; left: 10%; width: 50vw; height: 50vw; opacity: 0.4; } .tnaado-orbit-circle-2 { bottom: 10%; right: 5%; width: 40vw; height: 40vw; opacity: 0.3; animation-direction: reverse; animation-duration: 180s; } .tnaado-orbit-circle-3 { top: 50%; left: 60%; width: 25vw; height: 25vw; opacity: 0.2; animation-duration: 100s; } /* Light Streaks */ .tnaado-streaks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; } .tnaado-streak { position: absolute; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transform: rotate(-45deg); will-change: transform; } .tnaado-streak-1 { top: 20%; left: -10%; width: 150%; height: 1px; opacity: 0.5; animation: streak-move 10s ease-in-out infinite alternate; } .tnaado-streak-2 { top: 40%; left: -10%; width: 150%; height: 2px; opacity: 0.4; animation: streak-move 15s ease-in-out infinite alternate; animation-delay: 2s; } .tnaado-streak-3 { top: 60%; left: -10%; width: 150%; height: 1px; opacity: 0.3; animation: streak-move 12s ease-in-out infinite alternate; animation-delay: 4s; } /* Background Elements */ .tnaado-tornado-background { position: absolute; inset: 0; overflow: hidden; z-index: 2; } .tnaado-tornado { position: absolute; transform-origin: center center; border-radius: 50%; animation: tornado-spin var(--tornado-duration, 15s) linear infinite; will-change: transform; background: conic-gradient( from 0deg, transparent, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1), transparent ); } .tnaado-tornado-1 { top: -30%; left: -20%; width: 80%; height: 80%; opacity: 0.15; --tornado-duration: 120s; } .tnaado-tornado-2 { bottom: -40%; right: -30%; width: 100%; height: 100%; opacity: 0.1; --tornado-duration: 180s; animation-direction: reverse; } .tnaado-tornado-3 { top: 30%; right: 10%; width: 40%; height: 40%; opacity: 0.08; --tornado-duration: 90s; } .tnaado-particle-container { position: absolute; inset: 0; overflow: hidden; } .tnaado-particles { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: 40px 40px; animation: particle-fall 120s linear infinite; } .tnaado-gradient-overlay { position: absolute; inset: 0; background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 60%), radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.05), transparent 60%); }