Animierte Hero (CSS-Motion)

Baue eine Hero-Section als EINE einzelne HTML-Datei (Inline-CSS, optional minimal Vanilla-JS nur für Scroll-Trigger — kein Framework, kein externes Asset, keine externen Fonts) für Nebulyt — eine Plattform für Echtzeit-Wettervorhersage per Satellitendaten für die Landwirtschaft. Die Hero muss durch Bewegung beeindrucken, nicht nur durch Layout: - Eine markante, gestaffelte Eingangs-Animation beim Laden (CSS @keyframes): Headline, Subline und Call-to-Action erscheinen nacheinander in durchdachtem Rhythmus. - Mindestens ein fortlaufendes, subtiles Motion-Detail (z. B. animierter Verlauf, schwebende Formen, Shimmer, Parallax beim Scrollen). - Sauberes Easing und kontrolliertes Timing — edel und ruhig, kein hektisches Zappeln. - `@media (prefers-reduced-motion: reduce)`: Animationen deaktivieren oder auf ein sanftes Fade reduzieren. Inhaltlich enthalten: eine dezente Marken-/Logo-Zeile, ein starker Claim (Headline), eine erklärende Subline und genau ein klarer Call-to-Action-Button. Stilvorgabe: Hell, atmosphärisch, wissenschaftlich-elegant. Kühles Himmelblau bis Morgenlicht-Orange als weicher Verlauf, luftige Sans-Serif, großzügige Zeilenhöhe. Motion-Idee: ziehende Wolken-/Nebelschleier im Hintergrund, ein sanft aufsteigender Sonnen-/Datenpunkt, gestaffelt eingeblendete Textzeilen. Ruhig und präzise, kein Kitsch. Zielgruppe: Betriebsleiter großer Höfe. Responsive: sieht auf Desktop (1440px) und Mobil (390px) kontrolliert aus, kein horizontaler Overflow.