/* ========================================================================== Fixx – Landingpage animations.css · Bewegung Grundsatz: Bewegung unterstützt die Orientierung, sie ersetzt keinen Inhalt. Ohne JavaScript sind alle Elemente vollständig sichtbar — die Startzustände der Scroll-Animation setzt script.js erst, wenn es tatsächlich läuft (Klasse `js-reveal` am -Element). Ganz unten schaltet `prefers-reduced-motion` sämtliche Bewegung ab. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Scroll-Reveal Elemente mit [data-reveal] werden von einem IntersectionObserver beim Eintreten in den Viewport auf .is-visible gesetzt. -------------------------------------------------------------------------- */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); will-change: opacity, transform; } .js-reveal [data-reveal].is-visible { opacity: 1; transform: none; } /* Richtungsvarianten */ .js-reveal [data-reveal="left"] { transform: translateX(-28px); } .js-reveal [data-reveal="right"] { transform: translateX(28px); } .js-reveal [data-reveal="scale"] { transform: scale(0.965); } .js-reveal [data-reveal="left"].is-visible, .js-reveal [data-reveal="right"].is-visible, .js-reveal [data-reveal="scale"].is-visible { transform: none; } /* Gestaffelte Verzögerung für Karten in einer Reihe. Wird als data-delay="1".."6" am Element gesetzt. */ .js-reveal [data-delay="1"] { transition-delay: 70ms; } .js-reveal [data-delay="2"] { transition-delay: 140ms; } .js-reveal [data-delay="3"] { transition-delay: 210ms; } .js-reveal [data-delay="4"] { transition-delay: 280ms; } .js-reveal [data-delay="5"] { transition-delay: 350ms; } .js-reveal [data-delay="6"] { transition-delay: 420ms; } /* -------------------------------------------------------------------------- 2. Eintritt des Hero – läuft direkt beim Laden, ohne Observer -------------------------------------------------------------------------- */ @keyframes fixx-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes fixx-fade { from { opacity: 0; } to { opacity: 1; } } .hero__content > * { animation: fixx-rise 720ms var(--ease) backwards; } .hero__content > *:nth-child(1) { animation-delay: 60ms; } .hero__content > *:nth-child(2) { animation-delay: 140ms; } .hero__content > *:nth-child(3) { animation-delay: 220ms; } .hero__content > *:nth-child(4) { animation-delay: 300ms; } .hero__content > *:nth-child(5) { animation-delay: 380ms; } .mockup { animation: fixx-rise 900ms var(--ease) 220ms backwards; } .mockup__badge { animation: fixx-fade 600ms var(--ease) 900ms backwards; } /* -------------------------------------------------------------------------- 3. Sanftes Schweben des Mockup-Badges -------------------------------------------------------------------------- */ @keyframes fixx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .mockup__badge { animation: fixx-fade 600ms var(--ease) 900ms backwards, fixx-float 5s ease-in-out 1.5s infinite; } /* -------------------------------------------------------------------------- 4. Mobiles Menü -------------------------------------------------------------------------- */ @keyframes fixx-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .mobile-nav.is-open { animation: fixx-drop 260ms var(--ease); } /* Einträge laufen leicht versetzt ein */ .mobile-nav.is-open .mobile-nav__list > li { animation: fixx-rise 340ms var(--ease) backwards; } .mobile-nav.is-open .mobile-nav__list > li:nth-child(1) { animation-delay: 40ms; } .mobile-nav.is-open .mobile-nav__list > li:nth-child(2) { animation-delay: 80ms; } .mobile-nav.is-open .mobile-nav__list > li:nth-child(3) { animation-delay: 120ms; } .mobile-nav.is-open .mobile-nav__list > li:nth-child(4) { animation-delay: 160ms; } .mobile-nav.is-open .mobile-nav__list > li:nth-child(5) { animation-delay: 200ms; } .mobile-nav.is-open .mobile-nav__list > li:nth-child(6) { animation-delay: 240ms; } /* -------------------------------------------------------------------------- 5. Reduzierte Bewegung Systemeinstellung des Nutzers hat Vorrang: alles wird statisch dargestellt, Inhalte bleiben vollständig sichtbar. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; } .btn:hover, .card:hover, .benefit:hover, .industry:hover, .footer__social a:hover { transform: none; } }