/* ========================================================================== Kindertagespflege Hirschacker – Animationen -------------------------------------------------------------------------- Alle Bewegungs-Effekte sind hier gebündelt und respektieren die Systemeinstellung "Bewegung reduzieren" (prefers-reduced-motion). ========================================================================== */ /* --- Scroll-Reveal --------------------------------------------------------- Elemente mit [data-reveal] werden per IntersectionObserver (animations.js) eingeblendet. Ohne JavaScript bleiben sie sichtbar – die Startzustände werden nur gesetzt, wenn die Klasse "js" trägt. */ .js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .js [data-reveal="left"] { transform: translateX(-36px); } .js [data-reveal="right"] { transform: translateX(36px); } .js [data-reveal="scale"] { transform: scale(0.92); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* Gestaffelte Verzögerung für Kartenraster: per Attribut steuerbar */ .js [data-reveal-delay="1"] { --reveal-delay: 0.1s; } .js [data-reveal-delay="2"] { --reveal-delay: 0.2s; } .js [data-reveal-delay="3"] { --reveal-delay: 0.3s; } .js [data-reveal-delay="4"] { --reveal-delay: 0.4s; } /* --- Schwebende Deko-Elemente ---------------------------------------------- */ @keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(3deg); } } @keyframes float-fast { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .anim-float { animation: float-slow 7s ease-in-out infinite; } .anim-float-fast { animation: float-fast 4.5s ease-in-out infinite; } .anim-float-late { animation: float-slow 8.5s ease-in-out 1.2s infinite; } /* --- Organische Blob-Bewegung ---------------------------------------------- */ @keyframes blob-morph { 0%, 100% { border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%; } 33% { border-radius: 45% 55% 48% 52% / 48% 58% 42% 52%; } 66% { border-radius: 52% 48% 42% 58% / 45% 52% 48% 55%; } } .blob { position: absolute; background: radial-gradient(circle at 30% 30%, rgba(108, 212, 227, 0.35), rgba(77, 179, 217, 0.15)); animation: blob-morph 14s ease-in-out infinite; pointer-events: none; z-index: 0; } /* --- Sanft wandernder Verlauf (CTA-Banner, Hero) ---------------------------- */ @keyframes gradient-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .anim-gradient { background-size: 180% 180%; animation: gradient-drift 14s ease infinite; } /* --- Trampolin-Animation (Loader & Deko) ------------------------------------ Der springende Punkt in images/trampolin-anim.svg wird über CSS bewegt, wenn das SVG inline eingebettet ist. Für -Einbindungen springt das gesamte Bild sanft. */ @keyframes bounce { 0%, 100% { transform: translateY(0); animation-timing-function: ease-out; } 50% { transform: translateY(-26px); animation-timing-function: ease-in; } } .anim-bounce { animation: bounce 1.1s infinite; } @keyframes trampoline-squash { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.94) translateY(2px); } } .anim-squash { transform-origin: center bottom; animation: trampoline-squash 1.1s infinite; } /* --- Puls für Hinweis-Elemente ----------------------------------------------- */ @keyframes soft-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(108, 212, 227, 0.45); } 70% { box-shadow: 0 0 0 16px rgba(108, 212, 227, 0); } } .anim-pulse { animation: soft-pulse 2.6s infinite; } /* --- Leichter Parallax-Effekt ------------------------------------------------- Elemente mit [data-parallax] werden in animations.js über transform verschoben; hier nur die Performance-Optimierung. */ [data-parallax] { will-change: transform; } /* --- Glanz-Reflex auf Glaskarten ---------------------------------------------- */ .card--glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 48%, transparent 62%); background-size: 220% 100%; background-position: 120% 0; pointer-events: none; transition: background-position 0.9s ease; } .card--glass:hover::after { background-position: -60% 0; } /* --- Bewegung reduzieren -------------------------------------------------------- Nutzerinnen und Nutzer mit Vestibular-Empfindlichkeit bekommen eine ruhige Seite: alles sofort sichtbar, keine Endlos-Animationen. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } }