/* ============================================================ LUXCAB FX — Animations-Upgrade EINBINDUNG: nach styles.css im ============================================================ */ /* 1) Scroll-Fortschrittsbalken */ #fxScrollProgress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #e94560, #ff7a92); box-shadow: 0 0 12px rgba(233, 69, 96, 0.8); z-index: 10002; pointer-events: none; } /* 2) Header schrumpft beim Scrollen */ header { transition: padding 0.35s ease, box-shadow 0.35s ease; } header.fx-scrolled { padding: 0.45rem 0; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45); } /* 3) Cursor-Spotlight auf Karten (folgt der Maus) */ .service-card, .workflow-step-card, .faq-item, .onboarding-step-item, .founder-stat { position: relative; } .fx-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.45s ease; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(233, 69, 96, 0.13), transparent 65%); } .service-card:hover .fx-spot, .workflow-step-card:hover .fx-spot, .faq-item:hover .fx-spot, .onboarding-step-item:hover .fx-spot, .founder-stat:hover .fx-spot { opacity: 1; } .service-card>*, .workflow-step-card>* { position: relative; z-index: 1; } /* 4) Glanz-Sweep über Buttons */ .btn { position: relative; overflow: hidden; } .btn::after { content: ""; position: absolute; top: 0; left: -90%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-22deg); transition: left 0.65s ease; } .btn:hover::after { left: 140%; } /* 5) Hero: lebendiger Hintergrund (driftendes Netz + Glow) */ .hero { position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -60px; pointer-events: none; background-image: linear-gradient(rgba(233, 69, 96, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(233, 69, 96, 0.055) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 25%, transparent 78%); animation: fxGrid 16s linear infinite; } @keyframes fxGrid { to { transform: translate(46px, 46px); } } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 300px at 78% 18%, rgba(233, 69, 96, 0.14), transparent 70%), radial-gradient(500px 280px at 15% 80%, rgba(15, 52, 96, 0.35), transparent 70%); animation: fxGlow 9s ease-in-out infinite alternate; } @keyframes fxGlow { from { opacity: 0.55; } to { opacity: 1; } } .hero .container { position: relative; z-index: 2; } /* 6) Live-Chip im Hero */ .fx-live-chip { display: inline-flex; align-items: center; gap: 0.55rem; background: rgba(39, 201, 63, 0.08); border: 1px solid rgba(39, 201, 63, 0.35); color: #27c93f; padding: 0.4rem 1rem; border-radius: 30px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.6px; margin-bottom: 1.4rem; } .fx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #27c93f; box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.6); animation: fxLive 1.8s infinite; } @keyframes fxLive { 70% { box-shadow: 0 0 0 9px rgba(39, 201, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(39, 201, 63, 0); } } /* 7) Laufband / Marquee */ .fx-ticker { overflow: hidden; background: #0a0d18; padding: 0.85rem 0; position: relative; border-block: 1px solid rgba(233, 69, 96, 0.18); } .fx-ticker::before, .fx-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .fx-ticker::before { left: 0; background: linear-gradient(90deg, #0a0d18, transparent); } .fx-ticker::after { right: 0; background: linear-gradient(-90deg, #0a0d18, transparent); } .fx-ticker-track { display: flex; gap: 3rem; width: max-content; will-change: transform; animation: fxMarquee 26s linear infinite; } .fx-ticker:hover .fx-ticker-track { animation-play-state: paused; } .fx-ticker-track span { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; color: #8ea0b8; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.5px; text-transform: uppercase; } .fx-ticker-track i { color: #e94560; font-size: 0.7rem; } @keyframes fxMarquee { to { transform: translateX(-50%); } } /* 8) Blur-Up für Section-Titel */ .fx-blur { opacity: 0; filter: blur(14px); transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.2, 1, 0.3, 1), filter 0.9s cubic-bezier(0.2, 1, 0.3, 1), transform 0.9s cubic-bezier(0.2, 1, 0.3, 1); } .fx-blur.visible { opacity: 1; filter: blur(0); transform: none; } /* 9) 3D-Tilt für Phone-Mockups */ .fx-tilt { transition: transform 0.18s ease-out; will-change: transform; } /* 10) Back-to-top (Falls dein AI-Chat unten rechts sitzt: bottom auf 96px erhöhen) */ #fxToTop { position: fixed; left: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(233, 69, 96, 0.45); background: rgba(10, 13, 24, 0.85); backdrop-filter: blur(8px); color: #e94560; cursor: pointer; z-index: 9998; opacity: 0; transform: translateY(16px); pointer-events: none; transition: all 0.35s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } #fxToTop.show { opacity: 1; transform: none; pointer-events: auto; } #fxToTop:hover { background: #e94560; color: #fff; transform: translateY(-3px); } /* Reduced Motion respektieren */ @media (prefers-reduced-motion: reduce) { .fx-ticker-track, .hero::before, .hero::after, .fx-live-dot { animation: none !important; } .fx-blur { opacity: 1; filter: none; transform: none; transition: none; } .fx-tilt { transition: none; } }