/* Casa Salud – Startseiten-Intro (Logo-Animation) + Scroll-Effekt. Nur auf index.html eingebunden. Läuft komplett unabhängig von der React-Hydration: das Intro-Overlay wird als Geschwister-Element in gehängt (wie das Mega-Menü in site-enhance.js) und nur über eigene CSS-Animationen/Event-Listener gesteuert – React fasst es nie an. */ .cf-intro { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 44%, #fffdf9 0%, #fdfbf7 55%, #f6efe0 100%); opacity: 1; visibility: visible; transform: scale(1); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.9s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .cf-intro.cf-intro-done { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.03); } .cf-intro-stack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; } /* Sanft atmender Lichtkreis hinter dem Icon */ .cf-intro-halo { position: absolute; top: 49px; left: 50%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(61, 135, 121, 0.2) 0%, rgba(61, 135, 121, 0) 68%); opacity: 0; transform: translate(-50%, -50%) scale(0.6); animation: cfIntroHaloIn 2.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards; pointer-events: none; } .cf-intro-icon, .cf-intro-word { background-image: url("/img/logo-blue-splash.png"); background-repeat: no-repeat; background-size: 300px auto; position: relative; } .cf-intro-icon { width: 300px; height: 98px; background-position: 0 0; opacity: 0; filter: blur(10px); transform: scale(0.93); animation: cfIntroIconIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards, cfIntroBreathe 0.9s ease-in-out 1.5s 2; } .cf-intro-word { width: 300px; height: 59px; background-position: 0 -98px; opacity: 0; filter: blur(7px); transform: scale(0.96) translateY(3px); animation: cfIntroWordIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards; } .cf-intro-hairline { width: 70px; height: 1px; background: rgba(61, 135, 121, 0.5); opacity: 0; animation: cfIntroHairlineIn 1.1s ease-out 2s forwards; } @keyframes cfIntroHaloIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.55); } 28% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 48% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.18); } 68% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.32); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } } @keyframes cfIntroIconIn { to { opacity: 1; filter: blur(0); transform: scale(1); } } @keyframes cfIntroBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes cfIntroWordIn { to { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); } } @keyframes cfIntroHairlineIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cf-intro, .cf-intro-halo, .cf-intro-icon, .cf-intro-word, .cf-intro-hairline { animation-duration: 0.01s !important; transition-duration: 0.01s !important; filter: none !important; } } /* ---------- Scroll-Effekt: Lichtschein über dem Header-Logo ---------- */ header a[aria-label="Casa Salud – zur Startseite"] { position: relative; overflow: hidden; } header a[aria-label="Casa Salud – zur Startseite"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%); background-repeat: no-repeat; background-size: 220% 220%; background-position: var(--cf-shine-x, -120%) 0; mix-blend-mode: soft-light; pointer-events: none; } @media (prefers-reduced-motion: reduce) { header a[aria-label="Casa Salud – zur Startseite"]::after { display: none; } }