/* Dennis Wilms · Ernährungsberatung — Motion (Lenis + GSAP) Wird von motion.js aktiviert: erst wenn beide Libs geladen sind und der Nutzer keine reduzierte Bewegung angefordert hat, landet .dw-motion auf . Ohne diese Klasse bleibt alles beim bisherigen CSS-Reveal aus styles.css. */ /* --- Lenis Grundlagen (aus lenis/dist/lenis.css, lokal statt CDN) --- */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; } /* --- Übergabe der Reveals an GSAP --- motion.js benennt .reveal in .dw-rev um, damit der IntersectionObserver aus script.js sie nicht zusätzlich anfasst. Startzustand hier, Rest macht GSAP. */ html.dw-motion .dw-rev { opacity: 0; will-change: opacity, transform; } /* Parallax-Ebenen brauchen eine eigene Kompositions-Schicht */ html.dw-motion [data-parallax] { will-change: transform; } /* --- Ablauf: Linie läuft nach dem letzten Punkt weiter aus dem Bild --- styles.css:317 (.step:last-child .step__line{display:none}) blendet die Linie am vierten Schritt aus, sie endete am Punkt der 04. Hier wird sie als ::after nachgebildet und läuft über die 04 hinaus bis zum rechten Rand. Bewusst hier statt in styles.css: die wird vom Design-Export überschrieben, diese Datei überlebt. */ /* Sicherheitsnetz gegen horizontales Scrollen durch den 20px-Überstand. */ .section.process { overflow-x: clip; } /* Maße identisch zu .step__line (styles.css:316) — gleiche Länge wie die anderen drei Linien, nur eben nach dem letzten Punkt. */ .process__grid .step:last-child::after { content: ""; position: absolute; top: 16px; left: 18px; right: -20px; height: 2px; background: repeating-linear-gradient(90deg, var(--green-600) 0 8px, transparent 8px 16px); opacity: .5; pointer-events: none; } /* Ab 960px blendet styles.css:477 alle Linien aus — hier genauso. */ @media (max-width: 960px) { .process__grid .step:last-child::after { display: none; } } /* Gleiches Einfahren wie die anderen drei Linien (styles.css:524). */ @media (prefers-reduced-motion: no-preference) { .process__grid .step:last-child::after { transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.4, 0, .2, 1) calc(var(--sd, .24s) + .2s); } .process__grid .step:last-child.in::after { transform: scaleX(1); } } /* Sicherheitsnetz: Wer reduzierte Bewegung eingestellt hat, sieht alles sofort. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* styles.css setzt sonst pauschal smooth */ html.dw-motion .dw-rev { opacity: 1 !important; transform: none !important; } }