/* ── Keyframes ── */ @keyframes glowPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulseDot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); } 50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(52, 211, 153, 0); } } .anim-glow { animation: glowPulse 6s ease-in-out infinite; } .anim-float { animation: floaty 6s ease-in-out infinite; } .anim-float-d1 { animation: floaty 6s ease-in-out 0.8s infinite; } .anim-float-d2 { animation: floaty 6s ease-in-out 1.6s infinite; } .badge .pulse-dot { animation: pulseDot 2.2s ease-in-out infinite; } /* ── Scroll-Reveals (JS setzt .in-view) ── Standardmäßig sichtbar (kein SPOF ohne JS). Ein synchrones Inline-Script im jeder Seite setzt html.js-anim, BEVOR diese Regeln greifen — erst dann werden Reveal-Elemente überhaupt versteckt. Bleibt JS aus (Fehler, Blocker, 404 von animations.js), bleibt der Inhalt sichtbar. */ html.js-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } html.js-anim .reveal.in-view { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.1s; } .reveal-d2 { transition-delay: 0.2s; } .reveal-d3 { transition-delay: 0.3s; } /* ── SVG-Linien (JS animiert stroke-dashoffset) ── */ html.js-anim .draw-line path, html.js-anim .draw-line line { stroke-dasharray: var(--path-len, 600); stroke-dashoffset: var(--path-len, 600); transition: stroke-dashoffset 1.4s var(--ease) 0.2s; } .draw-line.in-view path, .draw-line.in-view line { stroke-dashoffset: 0; } /* ── Cursor-Spotlight auf Glass-Cards ── Ein weicher Verlaufs-Schein folgt der Maus (Position via JS als --spot-x/y). Ohne JS bleibt der Schein zentriert (50%) — fail-safe. */ .glass-card { position: relative; } .glass-card > * { position: relative; z-index: 1; } .glass-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(34, 211, 238, 0.16), rgba(59, 130, 246, 0.06) 45%, transparent 68%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; z-index: 0; } .glass-card:hover::after { opacity: 1; } /* ── Reduced Motion: alles aus ── */ @media (prefers-reduced-motion: reduce) { .glass-card::after { display: none; } html { scroll-behavior: auto; } .anim-glow, .anim-float, .anim-float-d1, .anim-float-d2, .badge .pulse-dot { animation: none; } html.js-anim .reveal { opacity: 1; transform: none; transition: none; } html.js-anim .draw-line path, html.js-anim .draw-line line { stroke-dashoffset: 0; transition: none; } .glass-card, .btn { transition: none; } }