/* * animations.css – Keyframes, Scroll-Animationen, Übergänge */ /* ============================================================ KEYFRAMES ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } } @keyframes colonBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } } @keyframes scrollPulse { 0% { opacity: 0; transform: scaleY(0); transform-origin: top; } 40% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1) translateY(16px); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================ HERO ANIMATIONEN ============================================================ */ .animate-fade-up { opacity: 0; animation: fadeUp 0.7s ease forwards; } .animate-delay-1 { animation-delay: 0.15s; } .animate-delay-2 { animation-delay: 0.30s; } .animate-delay-3 { animation-delay: 0.45s; } .animate-delay-4 { animation-delay: 0.60s; } .animate-delay-5 { animation-delay: 0.75s; } .animate-fade-in { opacity: 0; animation: fadeIn 0.5s ease forwards; } .animate-scale-in { opacity: 0; animation: scaleIn 0.5s ease forwards; } /* ============================================================ SCROLL-ANIMATIONEN (via IntersectionObserver in main.js) ============================================================ */ /* Ausgangsstand: unsichtbar */ .animate-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } /* Wird per JS gesetzt wenn Element im Viewport */ .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* ⚠️ Diese Elemente starten mit `opacity: 0` und werden erst durch JavaScript sichtbar. Faellt das Skript aus (Fehler, Blocker, langsames Netz), bleibt ein grosser Teil der Seite DAUERHAFT unsichtbar — Karten, Galerie, Zahlen. Zwei Auffangnetze: 1. Ohne JavaScript (die Klasse `no-js` am wird sonst sofort durch `js` ersetzt) ist alles von Anfang an da. 2. Wer Bewegung reduziert haben moechte, bekommt die Inhalte ohne Einblenden zu sehen — und nicht etwa gar nicht. */ .no-js .animate-on-scroll { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } } /* Varianten für Scroll-Animationen */ .animate-on-scroll.from-left { transform: translateX(-32px); } .animate-on-scroll.from-right { transform: translateX(32px); } .animate-on-scroll.from-scale { transform: scale(0.95); } .animate-on-scroll.from-left.is-visible, .animate-on-scroll.from-right.is-visible, .animate-on-scroll.from-scale.is-visible { transform: none; } /* Kaskadierendes Delay für Kinder-Elemente */ .stagger-children > *:nth-child(1) { transition-delay: 0.00s; } .stagger-children > *:nth-child(2) { transition-delay: 0.08s; } .stagger-children > *:nth-child(3) { transition-delay: 0.16s; } .stagger-children > *:nth-child(4) { transition-delay: 0.24s; } .stagger-children > *:nth-child(5) { transition-delay: 0.32s; } .stagger-children > *:nth-child(6) { transition-delay: 0.40s; } /* ============================================================ SKELETON LOADING (für raceresult Embeds etc.) ============================================================ */ .skeleton { background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-2) 50%, var(--color-surface) 75% ); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-md); } /* ============================================================ LOADING SPINNER ============================================================ */ .spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid rgba(232, 50, 26, 0.25); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } /* ============================================================ HOVER-EFFEKTE ============================================================ */ /* Bild-Zoom-Effekt für Cards */ .hover-zoom { overflow: hidden; } .hover-zoom img { transition: transform var(--transition-slow); } .hover-zoom:hover img { transform: scale(1.06); } /* Glanz-Overlay auf Hover */ .hover-shine { position: relative; overflow: hidden; } .hover-shine::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%); transform: skewX(-20deg); transition: left 0.6s ease; pointer-events: none; } .hover-shine:hover::after { left: 125%; } /* ============================================================ NOTBREMSE: Inhalt darf nicht an main.js haengen ============================================================ `.animate-on-scroll` startet mit `opacity: 0`. Sichtbar macht es sonst nur initScrollAnimations() in main.js. Die beiden bestehenden Rueckfaelle decken „JavaScript aus" (`.no-js`) und „reduzierte Bewegung" ab — nicht den Fall dazwischen: JavaScript ist an, aber main.js laedt nicht oder zu spaet. Dann blieb ein grosser Teil der Seite dauerhaft leer. `be-js-bereit` setzt main.js selbst, ganz am Anfang seiner Initialisierung. Solange die Klasse fehlt, blendet diese Animation nach 2 Sekunden alles ein. Ist main.js da, greift die Regel gar nicht erst — das gestaffelte Einblenden beim Scrollen bleibt also unveraendert. 2 Sekunden, weil das deutlich ueber jeder normalen Ladezeit liegt: Wer die Seite regulaer oeffnet, sieht die Notbremse nie. ============================================================ */ @keyframes be-notbremse-einblenden { to { opacity: 1; transform: none; } } /* ⚠️ NUR `.animate-on-scroll`. `.animate-fade-up` (Hero) ist eine reine CSS-Animation und braucht kein JavaScript — die Notbremse hier draufzulegen hat ihre eigene Animation ueberschrieben und den Hero bis zur 2-Sekunden-Marke ausgeblendet. Genau das Gegenteil dessen, wofuer die Regel da ist. */ html:not(.be-js-bereit) .animate-on-scroll { animation: be-notbremse-einblenden 0.4s ease 2s forwards; }