/** * CLAUDE: Animations CSS | Quiet Luxury Tier 1 * FOIC-Prevention: Alles sichtbar ohne JS, .gsap-ready aktiviert Hidden-States * Zwei Schichten: IntersectionObserver (IO) + GSAP ScrollTrigger (ST) */ /* ========================================================= 1. FOIC Prevention — Default: Alles sichtbar (No-JS safe) ========================================================= */ /* Keine hidden-states ohne .gsap-ready auf */ /* Nur wenn JS geladen: Hidden-States fuer IO-Reveals */ .gsap-ready .wfi-a-fade-up { opacity: 0; transform: translateY(40px); } .gsap-ready .wfi-a-fade { opacity: 0; } .gsap-ready .wfi-a-slide-left { opacity: 0; transform: translateX(-60px); } .gsap-ready .wfi-a-slide-right { opacity: 0; transform: translateX(60px); } .gsap-ready .wfi-a-scale { opacity: 0; transform: scale(0.9); } .gsap-ready .wfi-a-clip-reveal { clip-path: inset(100% 0 0 0); } /* Stagger-Children: Hidden-State */ .gsap-ready .wfi-a-stagger > * { opacity: 0; transform: translateY(30px); } /* ========================================================= 2. IO Reveal States — Transition-basiert ========================================================= */ .wfi-a-fade-up, .wfi-a-fade, .wfi-a-slide-left, .wfi-a-slide-right, .wfi-a-scale { transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); } .wfi-a-clip-reveal { transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1); } .wfi-a-stagger > * { transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); transition-delay: calc(100ms * var(--stagger, 0)); } /* Revealed-State (via IO .is-visible oder GSAP) */ .wfi-a-fade-up.is-visible, .wfi-a-fade.is-visible, .wfi-a-slide-left.is-visible, .wfi-a-slide-right.is-visible, .wfi-a-scale.is-visible { opacity: 1; transform: none; } .wfi-a-clip-reveal.is-visible { clip-path: inset(0 0 0 0); } .wfi-a-stagger.is-visible > * { opacity: 1; transform: none; } /* ========================================================= 3. Hero CSS Animation — LCP-safe, kein JS noetig ========================================================= */ @keyframes wfi-hero-fadein { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes wfi-hero-img-fadein { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* Gestaffelte Hero-Einblendung */ .wfi-hero-split .wfi-section-label { animation: wfi-hero-fadein 0.6s ease both 0.1s; } .wfi-hero-split .wp-block-heading { animation: wfi-hero-fadein 0.8s ease both 0.3s; } .wfi-hero-split .wfi-hero-subtitle { animation: wfi-hero-fadein 0.6s ease both 0.6s; } .wfi-hero-split .wp-block-buttons { animation: wfi-hero-fadein 0.6s ease both 0.8s; } .wfi-hero-split .wp-block-image { animation: wfi-hero-img-fadein 0.9s ease both 0.4s; } /* ========================================================= 4. Sticky Header Styles ========================================================= */ /* Workaround fuer WP Template-Part Bug #64089 */ .wp-block-template-part:has(> .wfi-header) { position: sticky; top: calc(0px + var(--wp-admin--admin-bar--height, 0px)); z-index: 100; } @media (max-width: 600px) { .wp-block-template-part:has(> .wfi-header) { top: 0; } } /* CLAUDE: Header-Transitions nur GPU-safe Properties (transform, opacity) | Kein max-height/padding (Layout-Reflow) | Kein backdrop-filter (extrem teuer) */ .wfi-header { transition: box-shadow 0.3s ease; } .wfi-topbar { transition: transform 0.3s ease, opacity 0.2s ease, margin-bottom 0.3s ease; will-change: transform; overflow: hidden; } .wfi-header.is-scrolled .wfi-topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; /* CLAUDE: Negativer margin-bottom kollabiert den Platz den die Topbar belegt | Ohne dies entsteht ein sichtbarer Abstand über der Navbar beim Scrollen */ margin-bottom: calc(-1 * var(--wfi-topbar-h, 40px)); } .wfi-navbar { transition: padding 0.3s ease, box-shadow 0.3s ease; } .wfi-header.is-scrolled .wfi-navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; background-color: rgba(255, 255, 255, 0.98); box-shadow: var(--wp--preset--shadow--card); } /* ========================================================= 5. GPU-Layer-Promotion — will-change fuer Scroll-Animationen ========================================================= */ /* CLAUDE: Parallax-Bilder auf eigener GPU-Ebene | Verhindert Main-Thread-Jank */ [data-parallax] img, [data-parallax] .wp-block-cover__image-background { will-change: transform; } /* ========================================================= 6. Timeline-Linie Animation (Process Steps, Karriere) ========================================================= */ .wfi-timeline-line { transform-origin: top; will-change: transform; } /* ========================================================= 7. Bild-Hover Treatments ========================================================= */ .wfi-img-hover { overflow: hidden; border-radius: 12px; } .wfi-img-hover img { transition: transform 0.5s ease, filter 0.5s ease; } .wfi-img-hover:hover img { transform: scale(1.03); filter: brightness(0.95); } /* ========================================================= 8. Testimonial Italic Enhancement ========================================================= */ .wfi-testimonial-italic .wp-block-quote p, .wfi-testimonial-italic blockquote p { font-family: var(--wp--preset--font-family--heading); font-style: italic; } /* ========================================================= 9. Accessibility — prefers-reduced-motion ========================================================= */ @media (prefers-reduced-motion: reduce) { .gsap-ready .wfi-a-fade-up, .gsap-ready .wfi-a-fade, .gsap-ready .wfi-a-slide-left, .gsap-ready .wfi-a-slide-right, .gsap-ready .wfi-a-scale, .gsap-ready .wfi-a-clip-reveal, .gsap-ready .wfi-a-stagger > * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .wfi-hero-split .wfi-section-label, .wfi-hero-split .wp-block-heading, .wfi-hero-split .wfi-hero-subtitle, .wfi-hero-split .wp-block-buttons, .wfi-hero-split .wp-block-image { animation: none !important; opacity: 1 !important; transform: none !important; } }