/* ============================================================= SPRUCE PROJECT — Animations & Transitions ============================================================= */ /* --- Scroll Reveal --- Elements start hidden; JS adds .revealed when in viewport. data-delay attribute sets the transition delay (seconds). ============================================================= */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); will-change: opacity, transform; } .reveal.revealed { opacity: 1; transform: translateY(0); } /* Variant: slide from left */ .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } .reveal-left.revealed { opacity: 1; transform: translateX(0); } /* Variant: fade only (no movement) */ .reveal-fade { opacity: 0; transition: opacity var(--duration-slow) var(--ease-out); } .reveal-fade.revealed { opacity: 1; } /* Prefers-reduced-motion: disable all animations */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-fade { opacity: 1; transform: none; transition: none; } } /* --- Hero entry animation --- Applied on page load via JS adding .loaded to ============================================================= */ .hero-headline { opacity: 0; transform: translateY(30px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } body.loaded .hero-headline { opacity: 1; transform: translateY(0); } .hero-sub { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-slow) var(--ease-out) 0.2s, transform var(--duration-slow) var(--ease-out) 0.2s; } body.loaded .hero-sub { opacity: 1; transform: translateY(0); } .hero-cta { opacity: 0; transition: opacity var(--duration-base) var(--ease-out) 0.5s; } body.loaded .hero-cta { opacity: 1; } /* --- Nav entry --- */ .nav { opacity: 0; transform: translateY(-10px); transition: opacity var(--duration-base) var(--ease-out) 0.1s, transform var(--duration-base) var(--ease-out) 0.1s, background-color var(--duration-base) var(--ease-out); } body.loaded .nav { opacity: 1; transform: translateY(0); } /* --- Hover line underline for headings/links --- Usage: add class="hover-line" to anchor ============================================================= */ .hover-line { position: relative; display: inline-block; } .hover-line::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--duration-base) var(--ease-out); } .hover-line:hover::after { transform: scaleX(1); transform-origin: left; } /* --- Reduce motion global override --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }