/* Motion CSS: reduced-motion fallbacks + View Transitions + keyframes. All JS motion has CSS guards here. */ /* ======= Defensive title-visibility overrides ======= The letter-rise feature is disabled in main.js. These rules also force any leftover .letter spans (from stale cached JS) to stay fully visible — so a hero title can never end up invisible regardless of which JS bundle ran. */ .letter { opacity: 1 !important; transform: none !important; } .vorlage-hero__display, .hero__display { opacity: 1 !important; visibility: visible !important; } /* ======= Reduced Motion ======= */ @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; } .card:hover { transform: none; } .hero__display, .vorlage-hero__display { transform: none !important; } .letter { opacity: 1 !important; transform: none !important; } .segmented__indicator { transition: none !important; } } /* ======= View Transitions API ======= */ @supports (view-transition-name: none) { ::view-transition-old(root) { animation: vmh-vt-fade-out 160ms var(--motion-ease-exit) both; } ::view-transition-new(root) { animation: vmh-vt-fade-in 220ms var(--motion-ease-entrance) both; } @keyframes vmh-vt-fade-out { to { opacity: 0; } } @keyframes vmh-vt-fade-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } } /* ======= Scroll-Reveal Initial State ======= Progressive enhancement: content is always visible by default; the .is-revealed transition only kicks in when JS toggles the .vmh-reveal-on class on , which we set after IntersectionObserver successfully fires. Without that flag, the rules below collapse to a no-op so a paused DocumentTimeline (seen on some headless / inactive-tab states) can't strand sections at opacity 0. */ .vmh-reveal-on [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--motion-duration-reveal) var(--motion-ease-entrance), transform var(--motion-duration-reveal) var(--motion-ease-entrance); } .vmh-reveal-on [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* ======= Staggered children reveal (e.g. cards inside a grid) ======= Add data-reveal-stagger to the grid container; children fade + rise in sequence when the container enters the viewport. Pure CSS — JS just toggles .is-revealed. */ .vmh-reveal-on [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .vmh-reveal-on [data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); } [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 80ms; } [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 160ms; } [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 240ms; } [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 320ms; } [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 400ms; } [data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 480ms; } [data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 560ms; } @media (prefers-reduced-motion: reduce) { [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ======= Sticky Header Slide-In ======= */ .site-header { transform: translateY(0); transition: transform var(--motion-duration-base) var(--motion-ease-entrance); } .site-header.is-hidden { transform: translateY(-100%); } /* ======= Hamburger Icon Morph ======= */ .hamburger svg { width: 24px; height: 24px; } .hamburger .hamburger__bar { stroke: var(--color-ink); stroke-width: 2; transform-origin: center; transition: transform var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-fast) var(--motion-ease-standard); } .hamburger.is-open .hamburger__bar--top { transform: translateY(7px) rotate(45deg); } .hamburger.is-open .hamburger__bar--middle { opacity: 0; } .hamburger.is-open .hamburger__bar--bottom { transform: translateY(-7px) rotate(-45deg); } /* ======= Chevron Rotation on Details ======= */ .exp-row > summary::after { transition: transform var(--motion-duration-base) var(--motion-ease-standard); } /* ======= Success Checkmark SVG ======= */ .success-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: vmh-draw 300ms var(--motion-ease-standard) forwards; } @keyframes vmh-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .success-check path { stroke-dashoffset: 0; animation: none; } }