/* ========================================================================== narasimhakomar.com — Motion layer Restrained, editorial motion. Everything degrades to a static page when the visitor asks for reduced motion or when JavaScript does not run. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reveal on scroll The .js-reveal hook is only activated once main.js confirms IntersectionObserver support (it adds .motion-ready to ). Without it, content is fully visible. -------------------------------------------------------------------------- */ .motion-ready .js-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.75s var(--ease-out), transform 0.85s var(--ease-out); will-change: opacity, transform; } .motion-ready .js-reveal.is-in { opacity: 1; transform: none; will-change: auto; } /* Sequenced children */ .motion-ready .js-reveal[data-delay="1"] { transition-delay: 0.08s; } .motion-ready .js-reveal[data-delay="2"] { transition-delay: 0.16s; } .motion-ready .js-reveal[data-delay="3"] { transition-delay: 0.24s; } .motion-ready .js-reveal[data-delay="4"] { transition-delay: 0.32s; } .motion-ready .js-reveal[data-delay="5"] { transition-delay: 0.40s; } /* Hairline that draws itself in */ .motion-ready .js-rule { transform: scaleX(0); transform-origin: left; transition: transform 1.05s var(--ease-out); } .motion-ready .js-rule.is-in { transform: scaleX(1); } /* -------------------------------------------------------------------------- 2. First-paint entrance for the hero (CSS only, no JS dependency) -------------------------------------------------------------------------- */ @keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } } .anim-rise { animation: riseIn 0.9s var(--ease-out) both; } .anim-fade { animation: fadeIn 1.1s var(--ease-out) both; } .anim-draw { animation: drawX 1.1s var(--ease-out) both; transform-origin: left; } .anim-d1 { animation-delay: 0.08s; } .anim-d2 { animation-delay: 0.18s; } .anim-d3 { animation-delay: 0.28s; } .anim-d4 { animation-delay: 0.38s; } .anim-d5 { animation-delay: 0.50s; } /* -------------------------------------------------------------------------- 3. Gate (index.html) entrance + error shake -------------------------------------------------------------------------- */ .gate-panel > * { animation: riseIn 0.85s var(--ease-out) both; } .gate-panel > *:nth-child(1) { animation-delay: 0.05s; } .gate-panel > *:nth-child(2) { animation-delay: 0.13s; } .gate-panel > *:nth-child(3) { animation-delay: 0.21s; } .gate-panel > *:nth-child(4) { animation-delay: 0.29s; } .gate-panel > *:nth-child(5) { animation-delay: 0.37s; } @keyframes nudge { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 88% { transform: translateX(2px); } } .gate-form.is-invalid .gate-input-wrap { animation: nudge 0.42s var(--ease); } /* Unlock transition — the panel steps back as the page hands off */ .gate-panel.is-unlocking { transition: opacity 0.45s var(--ease), transform 0.55s var(--ease-out); opacity: 0; transform: translateY(-10px); } /* -------------------------------------------------------------------------- 4. Nav & drawer motion -------------------------------------------------------------------------- */ .nav-drawer__list li { opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-out); } .nav-drawer.is-open .nav-drawer__list li { opacity: 1; transform: none; } .nav-drawer.is-open .nav-drawer__list li:nth-child(1) { transition-delay: 0.06s; } .nav-drawer.is-open .nav-drawer__list li:nth-child(2) { transition-delay: 0.10s; } .nav-drawer.is-open .nav-drawer__list li:nth-child(3) { transition-delay: 0.14s; } .nav-drawer.is-open .nav-drawer__list li:nth-child(4) { transition-delay: 0.18s; } .nav-drawer.is-open .nav-drawer__list li:nth-child(5) { transition-delay: 0.22s; } .nav-drawer.is-open .nav-drawer__list li:nth-child(6) { transition-delay: 0.26s; } .nav-drawer.is-open .nav-drawer__list li:nth-child(7) { transition-delay: 0.30s; } .nav-drawer__foot { opacity: 0; transition: opacity 0.5s var(--ease-out) 0.34s; } .nav-drawer.is-open .nav-drawer__foot { opacity: 1; } /* Reading progress hairline under the sticky bar */ .nav-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--amber); pointer-events: none; } /* -------------------------------------------------------------------------- 5. Lightbox motion -------------------------------------------------------------------------- */ .lightbox { opacity: 0; transition: opacity 0.3s var(--ease); } .lightbox.is-open { opacity: 1; } .lightbox.is-open .lightbox__fig { animation: riseIn 0.5s var(--ease-out) both; } /* -------------------------------------------------------------------------- 6. Reduced motion — the visitor's preference wins over everything above -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .motion-ready .js-reveal { opacity: 1 !important; transform: none !important; } .motion-ready .js-rule { transform: scaleX(1) !important; } .anim-rise, .anim-fade, .anim-draw { animation: none !important; opacity: 1; transform: none; } .gate-panel > * { animation: none !important; opacity: 1; transform: none; } .nav-drawer__list li { opacity: 1; transform: none; } .nav-drawer__foot { opacity: 1; } .btn:hover .btn__arrow, .arrow-link:hover span:last-child, .tile__btn:hover img { transform: none !important; } }