/* ========================================================================== Scroll-reveal + load animations. Defined ONCE here (skill §8) — blocks never redefine these keyframes. All motion is gated behind prefers-reduced-motion. ========================================================================== */ /* Progressive enhancement: the hidden initial states only apply when JS is present (html.js, set synchronously in ). Without JS the content is always visible. */ @media (prefers-reduced-motion: no-preference) { /* Whole-section reveal */ .js .d55-fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.6s var(--d55-ease), transform 0.6s var(--d55-ease); will-change: opacity, transform; } .js .d55-fade-up.is-visible { opacity: 1; transform: none; } /* Staggered children (parent = .d55-fade-up-stagger, children = .d55-fade-up-item) */ .js .d55-fade-up-stagger .d55-fade-up-item { opacity: 0; transform: translateY(26px); transition: opacity 0.55s var(--d55-ease), transform 0.55s var(--d55-ease); transition-delay: calc(var(--d55-i, 0) * 80ms); will-change: opacity, transform; } .js .d55-fade-up-stagger.is-visible .d55-fade-up-item { opacity: 1; transform: none; } /* Directional slide (media-rows: text slides from the opposite side of its image) */ .js .d55-slide-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.6s var(--d55-ease), transform 0.6s var(--d55-ease); } .js .d55-slide-right { opacity: 0; transform: translateX(36px); transition: opacity 0.6s var(--d55-ease), transform 0.6s var(--d55-ease); } .js .d55-slide-left.is-visible, .js .d55-slide-right.is-visible { opacity: 1; transform: none; } /* Above-the-fold hero: fade/rise in on load (no observer) */ .d55-fade-in > * { opacity: 0; transform: translateY(18px); animation: d55-rise 0.8s var(--d55-ease) forwards; } .d55-fade-in > *:nth-child(1) { animation-delay: 0.10s; } .d55-fade-in > *:nth-child(2) { animation-delay: 0.24s; } .d55-fade-in > *:nth-child(3) { animation-delay: 0.38s; } .d55-fade-in > *:nth-child(4) { animation-delay: 0.52s; } @keyframes d55-rise { to { opacity: 1; transform: none; } } } /* Reduced motion: everything visible, no transforms */ @media (prefers-reduced-motion: reduce) { .d55-fade-up, .d55-fade-up-item, .d55-slide-left, .d55-slide-right { opacity: 1 !important; transform: none !important; } .d55-fade-in > * { opacity: 1 !important; transform: none !important; animation: none !important; } }