/* ============================================================ MS VPN — Aurora Site Title v2.0 (Production-Ready) First paint: inline CSS in styles the directly After JS: gradient transfers to inner , resets ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@800;900&family=JetBrains+Mono:wght@700&display=swap'); /* ---------- The text span (after JS wraps it) ---------- */ .ms-at-active { --at-cyan: #00f0ff; --at-magenta: #ff2daa; --at-violet: #8b5cf6; --at-white: #e8edf5; --at-ff: 'Outfit', system-ui, sans-serif; font-family: var(--at-ff) !important; font-weight: 900 !important; letter-spacing: -0.01em; white-space: nowrap !important; line-height: inherit !important; text-decoration: none !important; color: #00f0ff !important; -webkit-text-fill-color: #00f0ff !important; text-shadow: none; transition: text-shadow .3s ease; } @supports (-webkit-background-clip: text) or (background-clip: text) { .ms-at-active { background: linear-gradient( 105deg, #00f0ff 0%, #60e0ff 14%, #e8edf5 30%, #ff2daa 50%, #8b5cf6 64%, #00f0ff 80%, #60e0ff 100% ) !important; background-size: 250% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; animation: atHoloShift 6s ease-in-out infinite; } } /* ---------- Parent reset once JS takes over ---------- */ .ms-at-parent-link { background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; color: inherit !important; -webkit-text-fill-color: inherit !important; animation: none !important; } .ms-at-parent-link, .ms-at-parent-link:hover, .ms-at-parent-link:focus, .ms-at-parent-link:visited { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; outline: none !important; } /* ---------- Glow only on hover ---------- */ .ms-at-parent-link:hover .ms-at-active, .ms-at-active:hover { text-shadow: 0 0 12px rgba(0,240,255,.50), 0 0 36px rgba(0,240,255,.20), 0 0 60px rgba(139,92,246,.12); } @supports (-webkit-background-clip: text) or (background-clip: text) { .ms-at-parent-link:hover .ms-at-active, .ms-at-active:hover { animation: atHoloShift 3s ease-in-out infinite; } } /* ---------- Scramble characters ---------- */ .ms-at-active .ms-at-scramble-char { display: inline !important; font-family: inherit !important; color: #00f0ff !important; -webkit-text-fill-color: #00f0ff !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; opacity: .7; animation: atFlicker .06s steps(1) infinite; } .ms-at-active .ms-at-scramble-resolved { display: inline !important; font-family: inherit !important; color: #00f0ff !important; -webkit-text-fill-color: #00f0ff !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; opacity: 1; animation: none; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .ms-at-active { animation: none !important; } } /* ---------- Keyframes ---------- */ @keyframes atHoloShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes atFlicker { 0% { opacity: .55; } 50% { opacity: .85; } 100% { opacity: .55; } }