/* Home page transitions and motion polish. Loaded only by index.html — index.css is shared with the old pages and stays untouched. */ :root { --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); } /* Fixed navbar: keep anchor targets from hiding underneath it */ section[id] { scroll-margin-top: 5rem; } /* Interactive particle constellation (sits above the blurred circles, behind all content) */ #particle-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* Typewriter cursor */ .type-cursor { display: inline-block; width: 3px; height: 1.15em; margin-left: 5px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; vertical-align: text-bottom; animation: cursor-blink 1.1s steps(1) infinite; } html:not(.js) .type-cursor { display: none; } @keyframes cursor-blink { 50% { opacity: 0; } } /* --------------------------------------------------------------------------- Scroll reveal index.js tags the element with .js and gives elements the .reveal class, so without JavaScript everything stays fully visible. --------------------------------------------------------------------------- */ html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: none; } /* Section title underline grows in once the title is revealed */ html.js .section-title:after { width: 0; transition: width 0.8s var(--ease-out-soft) 0.25s; } html.js .section-title.is-visible:after, html.js .is-visible .section-title:after { width: 100px; } /* --------------------------------------------------------------------------- Navbar: gains depth once the page is scrolled --------------------------------------------------------------------------- */ .navbar { transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease; } .navbar.scrolled { background: rgba(0, 90, 0, 0.98); padding: 0.6rem 2rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } /* --------------------------------------------------------------------------- Hover polish: springier easing and small secondary movements --------------------------------------------------------------------------- */ .about-card, .fact-card, .gallery-item, .track-item { transition: transform 0.45s var(--ease-out-soft), box-shadow 0.45s var(--ease-out-soft), background 0.45s var(--ease-out-soft); } .card-icon { display: inline-block; transition: transform 0.45s var(--ease-out-soft); } .about-card:hover .card-icon { transform: translateY(-4px) scale(1.12); } .fact-number { display: inline-block; transition: transform 0.45s var(--ease-out-soft); } .fact-card:hover .fact-number { transform: scale(1.18); } .profile-img { transition: box-shadow 0.5s ease; } .image-container:hover .profile-img { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4); } /* Buttons: soft light sweep across on hover */ .btn { position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 105deg, transparent, rgba(255, 255, 255, 0.35), transparent ); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; } .btn:hover::before { left: 125%; } /* Nav links ease their color a touch more gently */ .nav-link { transition: color 0.35s ease; } /* --------------------------------------------------------------------------- Recently Played: fades in when lastfm.js reveals the section, tracks cascade in one after another --------------------------------------------------------------------------- */ .music-section { animation: section-fade-in 0.8s var(--ease-out-soft) both; } .track-item { animation: track-slide-in 0.6s var(--ease-out-soft) both; } .track-item:nth-child(1) { animation-delay: 0.05s; } .track-item:nth-child(2) { animation-delay: 0.13s; } .track-item:nth-child(3) { animation-delay: 0.21s; } .track-item:nth-child(4) { animation-delay: 0.29s; } .track-item:nth-child(5) { animation-delay: 0.37s; } .track-item:nth-child(6) { animation-delay: 0.45s; } @keyframes section-fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes track-slide-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------------- Accessibility: honor reduced-motion preference --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .reveal { opacity: 1; transform: none; transition: none; } html.js .section-title:after { width: 100px; transition: none; } .music-section, .track-item, .wave, .profile-img, .image-glow, .circle { animation: none; } .btn::before { display: none; } #particle-canvas, .type-cursor { display: none; } }