@charset "UTF-8"; /* ========================================================= RH Motion, Animationen Reveals laufen nur wenn html.rhm-anim-ready gesetzt ist (synchroner JS-Ready-Marker im ). Ohne JS oder bei prefers-reduced-motion bleibt der Marker aus, alle Blöcke sind sofort sichtbar (kein FOUC, kein versteckter Inhalt). Reveals: spürbare Distanzen + leichter Back-Out-Overshoot. Loops: kontinuierlich, deutlich sichtbar. Sie laufen auf [data-rhm-loop].is-rhm-loop, das Gating (view.js) verhindert Konflikt mit dem Reveal-Transform. Scroll-Scrub via @supports (animation-timeline: view()) als Progressive Enhancement, Safari fällt auf statisch zurück. ========================================================= */ @media (prefers-reduced-motion: no-preference) { /* === Reveals (one-shot on intersection) === */ html.rhm-anim-ready [data-rhm-anim=fade-in], html.rhm-anim-ready [data-rhm-anim=fly-left], html.rhm-anim-ready [data-rhm-anim=fly-right], html.rhm-anim-ready [data-rhm-anim=fly-up] { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: opacity, transform; } html.rhm-anim-ready [data-rhm-anim=fade-in] { transform: translateY(48px) scale(0.94); } html.rhm-anim-ready [data-rhm-anim=fly-left] { transform: translateX(-160px) scale(0.96); } html.rhm-anim-ready [data-rhm-anim=fly-right] { transform: translateX(160px) scale(0.96); } html.rhm-anim-ready [data-rhm-anim=fly-up] { transform: translateY(120px) scale(0.96); } html.rhm-anim-ready [data-rhm-anim=expand] { transform: scale(0.35); transform-origin: center; } } /* Mobile: kürzere Reveal-Distanzen, damit der Initial-State nicht so weit aus dem Viewport schiebt (horizontal Overflow). */ @media (prefers-reduced-motion: no-preference) and (max-width: 767px) { html.rhm-anim-ready [data-rhm-anim=fade-in] { transform: translateY(28px) scale(0.96); } html.rhm-anim-ready [data-rhm-anim=fly-left] { transform: translateX(-60px) scale(0.98); } html.rhm-anim-ready [data-rhm-anim=fly-right] { transform: translateX(60px) scale(0.98); } html.rhm-anim-ready [data-rhm-anim=fly-up] { transform: translateY(60px) scale(0.98); } html.rhm-anim-ready [data-rhm-anim=expand] { transform: scale(0.6); } } @media (prefers-reduced-motion: no-preference) { html.rhm-anim-ready [data-rhm-anim=fade-in].is-rhm-in, html.rhm-anim-ready [data-rhm-anim=fly-left].is-rhm-in, html.rhm-anim-ready [data-rhm-anim=fly-right].is-rhm-in, html.rhm-anim-ready [data-rhm-anim=fly-up].is-rhm-in, html.rhm-anim-ready [data-rhm-anim=expand].is-rhm-in { opacity: 1; transform: none; } /* === Stagger-Up: Parent triggert, direkte Kinder gestaffelt === */ html.rhm-anim-ready [data-rhm-anim=stagger-up] > * { opacity: 0; transform: translateY(70px) scale(0.94); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } } @media (prefers-reduced-motion: no-preference) and (max-width: 767px) { html.rhm-anim-ready [data-rhm-anim=stagger-up] > * { transform: translateY(36px) scale(0.96); } } @media (prefers-reduced-motion: no-preference) { html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > * { opacity: 1; transform: none; } html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > *:nth-child(1) { transition-delay: 0ms; } html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > *:nth-child(2) { transition-delay: 140ms; } html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > *:nth-child(3) { transition-delay: 280ms; } html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > *:nth-child(4) { transition-delay: 420ms; } html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > *:nth-child(5) { transition-delay: 560ms; } html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > *:nth-child(6) { transition-delay: 700ms; } html.rhm-anim-ready [data-rhm-anim=stagger-up].is-rhm-in > *:nth-child(n+7) { transition-delay: 840ms; } /* === Loops (gated durch .is-rhm-loop, view.js setzt es) === */ @keyframes rhm-wobble { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(6deg); } } [data-rhm-loop=loop-wobble].is-rhm-loop { animation: rhm-wobble 2.4s ease-in-out infinite; transform-origin: center; } @keyframes rhm-shake-pulse { 0%, 45%, 100% { transform: translate(0, 0) rotate(0); } 47% { transform: translate(-6px, 1px) rotate(-3deg); } 50% { transform: translate(6px, -1px) rotate(3deg); } 53% { transform: translate(-5px, 2px) rotate(-2.5deg); } 56% { transform: translate(5px, -2px) rotate(2.5deg); } 59% { transform: translate(-4px, 1px) rotate(-2deg); } 62% { transform: translate(4px, -1px) rotate(2deg); } 65% { transform: translate(-3px, 0) rotate(-1deg); } 68% { transform: translate(2px, 0) rotate(1deg); } } [data-rhm-loop=loop-shake].is-rhm-loop { animation: rhm-shake-pulse 2.2s ease-in-out infinite; transform-origin: center; } @keyframes rhm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } [data-rhm-loop=loop-pulse].is-rhm-loop { animation: rhm-pulse 2s ease-in-out infinite; transform-origin: center; } @keyframes rhm-bounce { 0%, 100% { transform: translateY(0) scaleY(1); } 5% { transform: translateY(0) scaleY(0.92); } 45% { transform: translateY(-30px) scaleY(1.04); } 55% { transform: translateY(-30px) scaleY(1.04); } 95% { transform: translateY(0) scaleY(0.92); } } [data-rhm-loop=loop-bounce].is-rhm-loop { animation: rhm-bounce 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: center bottom; } @keyframes rhm-drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(8px, -10px) rotate(1.5deg); } 50% { transform: translate(-6px, -16px) rotate(-1deg); } 75% { transform: translate(-10px, -6px) rotate(2deg); } } [data-rhm-loop=loop-drift].is-rhm-loop { animation: rhm-drift 6s ease-in-out infinite; } /* === Scroll-Scrub (Chrome/Firefox; Safari = statisch via @supports) === */ @supports (animation-timeline: view()) { @keyframes rhm-rotate-scroll { from { transform: rotate(-35deg); } to { transform: rotate(35deg); } } [data-rhm-anim=scroll-rotate] { animation: rhm-rotate-scroll linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; transform-origin: center; } @keyframes rhm-parallax-scroll { from { transform: translateY(120px); } to { transform: translateY(-120px); } } [data-rhm-anim=scroll-parallax] { animation: rhm-parallax-scroll linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; } @media (prefers-reduced-motion: no-preference) and (max-width: 1023px) { @keyframes rhm-rotate-scroll-mobile { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } [data-rhm-anim=scroll-rotate] { animation-name: rhm-rotate-scroll-mobile; } @keyframes rhm-parallax-scroll-mobile { from { transform: translateY(40px); } to { transform: translateY(-40px); } } [data-rhm-anim=scroll-parallax] { animation-name: rhm-parallax-scroll-mobile; } } } }