/* ========================================================= Animations ========================================================= */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.02s; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.08s; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.14s; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; } .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.26s; } .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.32s; } .reveal-stagger.is-visible > *:nth-child(n + 7) { transition-delay: 0.36s; } /* Scroll progress bar fill (width is set via JS) */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--rust); z-index: 100; transition: width 0.1s linear; } /* Back to top button */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--off-white); border: none; font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease; z-index: 60; } .back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { background: var(--rust); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; } } /* No-JS / JS-failure fallback: if animations.js never runs, never gets the .js-ready class below, so this rule forces all reveal content visible instead of leaving it permanently hidden at opacity: 0. */ html:not(.js-ready) .reveal, html:not(.js-ready) .reveal-stagger > * { opacity: 1; transform: none; }