/* Dezente, hochwertige Animationen. Reduziert für prefers-reduced-motion und automatisch entschärft auf schwächeren Geräten (siehe main.js, das die Klasse "reduce-fx" auf setzen kann). */ @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes glow-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } .view { animation: fade-in var(--duration-slow) var(--ease-out); } .app-card { animation: fade-in var(--duration-base) var(--ease-out) both; } .btn.is-loading { position: relative; color: transparent !important; } .btn.is-loading::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: spin 700ms linear infinite; } .btn.just-succeeded { animation: pop var(--duration-base) var(--ease-out); } .brand__mark { animation: glow-pulse 3.6s ease-in-out infinite; } /* Skeletons */ .skeleton { background: linear-gradient( 100deg, var(--bg-surface) 30%, var(--bg-surface-3) 50%, var(--bg-surface) 70% ); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-md); } .skeleton-card { border-radius: var(--radius-lg); aspect-ratio: 3 / 4; } .toast { animation: fade-in var(--duration-base) var(--ease-out); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Von main.js gesetzt, wenn ein schwächeres Gerät erkannt wird (z. B. wenig CPU-Kerne) – reduziert aufwendigere Effekte. */ html.reduce-fx .app-card::before, html.reduce-fx .hero { background: none !important; } html.reduce-fx .skeleton { animation: none; }