2oo5

/* ========================= SONIC-INSPIRED: BLUE SPEED (Blue Speed Energy — option 1) Paste into About Me → Style (CSS) ========================= */ /* --- background base: fast sky gradient --- */ body { background: linear-gradient(180deg, #0b1e58 0%, #08307f 35%, #0066d9 65%, #003a80 100%); background-attachment: fixed; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- subtle parallax clouds (CSS only) --- */ body::before{ content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at 20% 20%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.00) 35%), radial-gradient(ellipse at 80% 30%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.00) 30%), radial-gradient(ellipse at 50% 80%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.00) 25%); transform: translateZ(0); animation: clouds-drift 30s linear infinite; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0.9; } /* slow drifting clouds */ @keyframes clouds-drift { 0% { transform: translate3d(-6%,0,0); } 50% { transform: translate3d(6%,0,0); } 100% { transform: translate3d(-6%,0,0); } } /* --- animated speed streaks (gives sense of motion) --- */ body::after{ content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 0 2%, rgba(0,0,0,0) 2% 100%), linear-gradient(95deg, rgba(255,255,255,0.04) 0 1.5%, rgba(0,0,0,0) 1.5% 100%), linear-gradient(85deg, rgba(255,255,255,0.03) 0 1%, rgba(0,0,0,0) 1% 100%); background-size: 600% 100%, 500% 100%, 400% 100%; mix-blend-mode: overlay; animation: speed-lines 2.6s linear infinite; opacity: 0.95; filter: blur(0.6px) contrast(1.05); } /* speed-lines motion */ @keyframes speed-lines { 0% { background-position: 0% 0, 0% 0, 0% 0; transform: translateZ(0); } 50% { background-position: 50% 0, 60% 0, 70% 0; } 100% { background-position: 100% 0, 120% 0, 140% 0; } } /* --- horizontal streak accents (fast streaks that cross the screen) --- */ @keyframes streak-fly { 0% { transform: translateX(-120%) scaleX(0.8); opacity: 0; } 10% { opacity: 0.6; } 50% { transform: translateX(20%) scaleX(1.1); opacity: 0.9; } 100% { transform: translateX(120%) scaleX(1.4); opacity: 0; } } /* helper class: place a few streaks for depth */ .sonic-streak { position: fixed; top: var(--y, 50%); left: -20%; width: 140%; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(180,230,255,0) 0%, rgba(150,230,255,0.25) 30%, rgba(120,210,255,0.6) 50%, rgba(150,230,255,0.25) 70%, rgba(180,230,255,0) 100%); filter: blur(1px); transform-origin: left center; animation: streak-fly var(--dur, 1.6s) cubic-bezier(.2,.9,.2,1) var(--delay, 0s) forwards; opacity: 0; } /* insert three decorative streaks with varied timing */ #sonic-streak-1 { --y: 22vh; --dur: 1.2s; --delay: 0s; } #sonic-streak-2 { --y: 46vh; --dur: 1.8s; --delay: 0.45s; } #sonic-streak-3 { --y: 70vh; --dur: 2.2s; --delay: 1.0s; } /* --- floating ring motifs (non-Sonic ring-inspired circles) --- */ .sonic-rings { position: fixed; inset: auto 6% 12% auto; width: 220px; height: 220px; z-index: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(200,240,255,0.06) 0%, rgba(200,240,255,0.02) 40%, transparent 41%), radial-gradient(circle at 50% 50%, rgba(0,150,255,0.10) 46%, rgba(0,90,180,0.06) 60%, transparent 61%); border-radius: 999px; box-shadow: 0 0 40px rgba(0,170,255,0.08); transform: translateZ(0) scale(1); animation: rings-bob 6s ease-in-out infinite, rings-pulse 4s ease-in-out infinite; mix-blend-mode: screen; opacity: 0.95; } /* more rings, smaller and offset */ .sonic-rings.small { width: 130px; height: 130px; right: 8%; left: auto; top: 14%; animation-duration: 8s; opacity: 0.9; } /* bob and pulse */ @keyframes rings-bob { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.02); } 100% { transform: translateY(0) scale(1); } } @keyframes rings-pulse { 0% { box-shadow: 0 0 10px rgba(0,170,255,0.05); } 50% { box-shadow: 0 0 45px rgba(0,200,255,0.18); transform: scale(1.02); } 100% { box-shadow: 0 0 10px rgba(0,170,255,0.05); } } /* --- optional ring hover accent for links (ring-like pulse) --- */ a:hover { position: relative; z-index: 5; } a:hover::after { content: ""; position: absolute; inset: -8px -12px; border-radius: 10px; box-shadow: 0 0 22px rgba(0,200,255,0.18), inset 0 0 10px rgba(0,150,255,0.06); pointer-events: none; animation: hover-ring 0.9s ease; } @keyframes hover-ring { 0% { transform: scale(0.94); opacity: 0; } 40% { transform: scale(1.03); opacity: 0.9; } 100% { transform: scale(1); opacity: 0.9; } } /* --- make sure content sits above background elements --- */ .profile, main, nav, footer, .profile-info { position: relative; z-index: 3; } /* --- accessibility: reduce motion users --- */ @media (prefers-reduced-motion: reduce) { body::before, body::after, .sonic-streak, .sonic-rings { animation: none !important; transition: none !important; } }