/* Aurora Mode overlay
Activate with . Designed to be gentle, modern, and vibrant.
*/
html[data-aurora="on"] {
/* Softer, aurora-inspired palette */
--accent-color: #7c4dff; /* violet */
--secondary-accent: #00e5ff; /* aqua */
--accent-glow: rgba(124,77,255,0.25);
--secondary-glow: rgba(0,229,255,0.2);
--glass-bg: rgba(255, 255, 255, 0.08);
--glass-border: rgba(124, 77, 255, 0.24);
--header-bg: linear-gradient(135deg, rgba(124, 77, 255, 0.12), rgba(0, 229, 255, 0.12));
}
/* Animated aurora veil */
html[data-aurora="on"] body::before {
content: '';
position: fixed;
inset: -10% -10% -10% -10%;
pointer-events: none;
z-index: 0; /* behind content */
background:
radial-gradient(50% 60% at 20% 30%, rgba(124, 77, 255, 0.18), transparent 60%),
radial-gradient(40% 50% at 80% 70%, rgba(0, 229, 255, 0.18), transparent 60%),
radial-gradient(35% 45% at 40% 80%, rgba(0, 255, 180, 0.12), transparent 60%);
filter: blur(30px) saturate(120%);
animation: aurora-shift 18s ease-in-out infinite alternate;
}
@keyframes aurora-shift {
0% { transform: translate3d(0,0,0) scale(1); opacity: 0.7; }
50% { transform: translate3d(-2%,1%,0) scale(1.02); opacity: 0.85; }
100% { transform: translate3d(2%,-1%,0) scale(1.03); opacity: 0.8; }
}
/* Slight glow on headings */
html[data-aurora="on"] header h1,
html[data-aurora="on"] section h2 {
text-shadow: 0 0 12px rgba(124,77,255,0.25), 0 0 8px rgba(0,229,255,0.2);
}
/* Nav scrolled with aurora tint */
html[data-aurora="on"] nav.scrolled {
background: rgba(18, 20, 40, 0.85);
box-shadow: 0 8px 24px rgba(124, 77, 255, 0.18);
}
/* Cards subtle elevation */
html[data-aurora="on"] .card,
html[data-aurora="on"] .contact-info,
html[data-aurora="on"] .contact-form {
box-shadow: 0 10px 30px rgba(0,0,0,0.35), 0 0 40px var(--accent-glow);
}