/* ========================================================================== lp-motion.css — Motion-Fundament für die öffentlichen Seiten Scroll-Reveal, Atmosphäre-Glows, Gradient-Text, Tilt-Frame, Counter, Bars. Nutzt ausschließlich DS-Tokens (Farben, Ease, Shadows). Beide Themes. ========================================================================== */ /* --- Scroll-Reveal --------------------------------------------------------- Progressive Enhancement: Inhalt ist standardmäßig sichtbar. Erst wenn JS lädt und `lp-js` auf setzt (siehe lp-motion.js, allererste Zeile), wird überhaupt ausgeblendet — ohne JS bleibt alles sichtbar. ---------------------------------------------------------------------- */ html.lp-js .lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--lp-delay, 0s); } html.lp-js .lp-reveal.is-in { opacity: 1; transform: none; } html.lp-js .lp-reveal--left { opacity: 0; transform: translateX(-24px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--lp-delay, 0s); } html.lp-js .lp-reveal--left.is-in { opacity: 1; transform: none; } html.lp-js .lp-reveal--scale { opacity: 0; transform: scale(.94); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--lp-delay, 0s); } html.lp-js .lp-reveal--scale.is-in { opacity: 1; transform: none; } /* --- Atmosphäre-Layer & Glow ---------------------------------------------- */ .lp-atmo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .lp-glow { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--ac-dim) 0%, transparent 70%); filter: blur(40px); animation: lp-drift 18s var(--ease) infinite; pointer-events: none; } @keyframes lp-drift { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4%, -6%) scale(1.08); } 66% { transform: translate(-3%, 4%) scale(0.96); } 100% { transform: translate(0, 0) scale(1); } } /* Light-Theme: Glows deutlich zurücknehmen, damit sie nicht "schmutzig" wirken */ [data-theme="light"] .lp-glow { opacity: 0.5; } /* --- Akzent-Text (vormals Gradient, jetzt solide Farbe) -------------------- */ .lp-gradient-text { color: var(--ac-2); } /* --- Tilt-Frame (perspektivischer Produkt-Screenshot-Rahmen) --------------- */ .lp-tilt-frame { transform: perspective(1400px) rotateX(6deg); transform-origin: top center; box-shadow: 0 40px 120px -30px rgba(90, 158, 78, .35), var(--shadow-pop); transition: transform .6s var(--ease); } .lp-tilt-frame:hover { transform: perspective(1400px) rotateX(0deg); } [data-theme="light"] .lp-tilt-frame { box-shadow: 0 40px 120px -30px rgba(76, 138, 66, .18), var(--shadow-pop); } /* --- Counter (Styling-Hooks, Wertelogik in lp-motion.js) ------------------- */ .lp-counter { font-variant-numeric: tabular-nums; } /* --- Bars (Wachstum via transform: scaleY, kein Layout-Trigger) ------------ Balken wird immer in voller Höhe gerendert (data-h dient nur noch als statische Höhe/Marker) und nur unter html.lp-js zunächst auf 0 skaliert; JS setzt beim Eintritt ins Viewport scaleY(1). Ohne JS: volle Höhe sichtbar. ---------------------------------------------------------------------- */ .lp-bar { transform-origin: bottom; transition: transform 1s var(--ease); } html.lp-js .lp-bar { transform: scaleY(0); } html.lp-js .lp-bar.is-in { transform: scaleY(1); } /* --- Reduced Motion: alle neuen Animationen zentral abschalten ------------- */ @media (prefers-reduced-motion: reduce) { html.lp-js .lp-reveal, html.lp-js .lp-reveal--left, html.lp-js .lp-reveal--scale { opacity: 1 !important; transform: none !important; transition: none !important; } .lp-tilt-frame { transform: none !important; transition: none !important; } .lp-atmo, .lp-glow { animation: none !important; } html.lp-js .lp-bar { transform: none !important; transition: none !important; } }