fist step nav { position: fixed; top: 6px; left: 0; right: 0; max-width: 1200px; margin-inline: auto; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 10px 32px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(3px); border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.4); box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.25), inset -2px -2px 4px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.2); /* Turbulence-like noise */ background-image: url('https://www.transparenttextures.com/patterns/noise-pattern-with-subtle-cross-lines.png'), radial-gradient(circle at top left, rgba(255,255,255,0.25), transparent 60%); background-size: 120px 120px, cover; /* << keeps texture small */ background-blend-mode: overlay; animation: noiseMove 8s infinite linear; } @keyframes noiseMove { from { background-position: 0 0, 0 0; } to { background-position: 60px 60px, 0 0; } } @keyframes noiseMove { from { background-position: 0 0, 0 0; } to { background-position: 100px 100px, 0 0; } }