/* Ambient mode styles — activated by .ambient-active on */ /* Smooth transitions on interactive elements */ .ambient-active a { transition: color 0.3s ease, text-shadow 0.3s ease; } .ambient-active a:hover { text-shadow: 0 0 8px rgba(102, 126, 234, 0.4); } @media (prefers-color-scheme: dark) { .ambient-active a:hover { text-shadow: 0 0 8px rgba(102, 126, 234, 0.5); } } /* Staggered fade-in for blog post list items */ .ambient-active ul.blog-posts li { opacity: 0; transform: translateY(12px); animation: ambientFadeIn 0.5s ease forwards; } .ambient-active ul.blog-posts li:nth-child(1) { animation-delay: 0.05s; } .ambient-active ul.blog-posts li:nth-child(2) { animation-delay: 0.10s; } .ambient-active ul.blog-posts li:nth-child(3) { animation-delay: 0.15s; } .ambient-active ul.blog-posts li:nth-child(4) { animation-delay: 0.20s; } .ambient-active ul.blog-posts li:nth-child(5) { animation-delay: 0.25s; } .ambient-active ul.blog-posts li:nth-child(6) { animation-delay: 0.30s; } .ambient-active ul.blog-posts li:nth-child(7) { animation-delay: 0.35s; } .ambient-active ul.blog-posts li:nth-child(8) { animation-delay: 0.40s; } .ambient-active ul.blog-posts li:nth-child(9) { animation-delay: 0.45s; } .ambient-active ul.blog-posts li:nth-child(10) { animation-delay: 0.50s; } .ambient-active ul.blog-posts li:nth-child(n+11) { animation-delay: 0.55s; } @keyframes ambientFadeIn { to { opacity: 1; transform: translateY(0); } } /* Blockquote animated left border */ .ambient-active blockquote { border-left: 2px solid; border-image: linear-gradient(180deg, #667eea, #8abeb7, #b294bb) 1; transition: border-color 0.5s ease; } @media (prefers-color-scheme: dark) { .ambient-active blockquote { border-image: linear-gradient(180deg, #667eea, #8abeb7, #b294bb) 1; } } /* Gentle text glow on headings */ .ambient-active h1:hover, .ambient-active h2:hover { text-shadow: 0 0 12px rgba(102, 126, 234, 0.15); } @media (prefers-color-scheme: dark) { .ambient-active h1:hover, .ambient-active h2:hover { text-shadow: 0 0 12px rgba(102, 126, 234, 0.2); } } /* Scroll-triggered fade-in for content sections */ .ambient-active #blog-contents > * { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; } .ambient-active #blog-contents > .ambient-visible { opacity: 1; transform: translateY(0); } /* Reduced motion: disable all ambient animations */ @media (prefers-reduced-motion: reduce) { .ambient-active ul.blog-posts li { opacity: 1; transform: none; animation: none; } .ambient-active #blog-contents > * { opacity: 1; transform: none; transition: none; } .ambient-active a { transition: none; } }