/* gz-web motion.css — premium micro-interactions (clinical-trust + editorial) * Fail-open: ohne .has-motion auf sind alle Elemente sofort sichtbar. * JS in /js/motion.js armiert die Klasse + Observer. */ :root { --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-ease-hov: cubic-bezier(0.4, 0, 0.2, 1); --motion-dur: clamp(450ms, 1.2vw, 700ms); --motion-y: 20px; } /* ---------- Reveal-on-Scroll (Fail-Open) ---------- */ html.has-motion [data-reveal] { opacity: 0; transform: translateY(var(--motion-y)); transition: opacity var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease); will-change: opacity, transform; } html.has-motion [data-reveal="fade"] { transform: none; } html.has-motion [data-reveal="up"] { transform: translateY(var(--motion-y)); } html.has-motion [data-reveal="left"] { transform: translateX(calc(var(--motion-y) * -1)); } html.has-motion [data-reveal="right"] { transform: translateX(var(--motion-y)); } html.has-motion [data-reveal="scale"] { transform: scale(0.96); } html.has-motion [data-reveal].revealed { opacity: 1; transform: none; } /* Stagger-Container: Kinder erben Delays */ html.has-motion [data-reveal-stagger] > *:nth-child(1) { transition-delay: 60ms; } html.has-motion [data-reveal-stagger] > *:nth-child(2) { transition-delay: 100ms; } html.has-motion [data-reveal-stagger] > *:nth-child(3) { transition-delay: 140ms; } html.has-motion [data-reveal-stagger] > *:nth-child(4) { transition-delay: 180ms; } html.has-motion [data-reveal-stagger] > *:nth-child(5) { transition-delay: 220ms; } html.has-motion [data-reveal-stagger] > *:nth-child(6) { transition-delay: 260ms; } html.has-motion [data-reveal-stagger] > *:nth-child(n+7){ transition-delay: 260ms; } /* ---------- Letter-Reveal (Display-Headlines) ---------- */ .letter-reveal { display: inline; } .letter-reveal .lr-word { display: inline-block; white-space: nowrap; } .letter-reveal .letter { display: inline-block; white-space: pre; } html.has-motion .letter-reveal .letter { opacity: 0; transform: translateY(0.5em); transition: opacity var(--motion-dur) var(--motion-ease), transform var(--motion-dur) var(--motion-ease); transition-delay: calc(var(--i, 0) * 25ms); will-change: opacity, transform; } html.has-motion .letter-reveal.revealed .letter { opacity: 1; transform: none; } /* ---------- Magnet-CTA ---------- */ .magnet-cta { display: inline-block; transition: transform 220ms var(--motion-ease-hov); will-change: transform; } @media (hover: hover) and (pointer: fine) { html.has-motion .magnet-cta { transform: translate(var(--mx, 0), var(--my, 0)); } } /* ---------- View-Transition (Chromium 111+) ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: var(--motion-ease); } /* ---------- Parallax-Soft (Background-Position-Shift) ---------- */ .parallax-soft { background-attachment: scroll; background-position: center var(--py, 50%); will-change: background-position; transition: background-position 80ms linear; } @media (max-width: 880px) { /* Kein Parallax auf Touch/Mobile */ .parallax-soft { background-position: center 50% !important; will-change: auto; } } /* ---------- Photo-Reveal (Ken-Burns subtle) ---------- */ .photo-reveal { overflow: hidden; position: relative; } .photo-reveal > img, .photo-reveal > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 900ms var(--motion-ease), transform 6000ms linear; will-change: opacity, transform; } html:not(.has-motion) .photo-reveal > img, html:not(.has-motion) .photo-reveal > picture > img { opacity: 1; transform: none; transition: none; } html.has-motion .photo-reveal.revealed > img, html.has-motion .photo-reveal.revealed > picture > img { opacity: 1; transform: scale(1); } /* ---------- Reduced-Motion (hard override) ---------- */ @media (prefers-reduced-motion: reduce) { html.has-motion [data-reveal], html.has-motion .letter-reveal .letter, .magnet-cta, .parallax-soft, .photo-reveal > img, .photo-reveal > picture > img { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transform: none !important; opacity: 1 !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }