/* =========================================================== themes.css — path-specific theming Applies when carries .theme-embedded or .theme-ai, set by router.js/app.js once a path is chosen or hovered. =========================================================== */ /* ---------- Embedded theme ---------- */ .theme-embedded { --accent-current: var(--accent-embedded); } .theme-embedded .landing-video-overlay, .theme-embedded .resume { background-image: radial-gradient(ellipse at 20% 0%, var(--accent-embedded-dim) 0%, transparent 55%); } .theme-embedded .resume { background-color: var(--color-bg); background-blend-mode: normal; } /* ---------- AI / ML theme ---------- */ .theme-ai { --accent-current: var(--accent-ai); } .theme-ai .landing-video-overlay, .theme-ai .resume { background-image: radial-gradient(ellipse at 80% 0%, var(--accent-ai-dim) 0%, transparent 55%); } .theme-ai .resume { background-color: var(--color-bg); background-blend-mode: normal; } /* ---------- Shared theme transition ---------- */ .landing, .resume { transition: background-color var(--dur-slow) var(--ease-standard), background-image var(--dur-slow) var(--ease-standard); } /* ---------- Landing hover preview (before a path is chosen) ---------- landing.js toggles these on #landing directly, ahead of the .theme-* class being committed at navigation time. */ #landing.preview-embedded { --accent-current: var(--accent-embedded); } #landing.preview-ai { --accent-current: var(--accent-ai); }