/* ============================================================================= Page load animations (classic + neon) Triggered by .lie-proto-ready on (theme-effects.js) ============================================================================= */ /* Scroll progress (neon effects script adds the element) */ .lie-proto-scroll-line { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: left center; transform: scaleX(0); z-index: 200; pointer-events: none; } /* --- Keyframes --- */ @keyframes lie-load-nav { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes lie-load-reveal-up { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes lie-load-reveal-up-soft { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes lie-load-line-reveal { from { opacity: 0; transform: translateY(0.85em); } to { opacity: 1; transform: translateY(0); } } @keyframes lie-load-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes lie-load-scale-in { from { opacity: 0; transform: scale(0.92); filter: blur(6px); } to { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes lie-load-stat-pop { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lie-load-card { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes lie-load-mesh-pulse { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } /* --- Hidden until ready --- */ body:not(.lie-proto-ready) .lie-navbar, body:not(.lie-proto-ready) .lie-filters, body:not(.lie-proto-ready) .lie-section, body:not(.lie-proto-ready) .lie-day-group, body:not(.lie-proto-ready) .lie-deferred-toggle-wrap { opacity: 0; } body:not(.lie-proto-ready) .lie-navbar { transform: translateY(-14px); } body:not(.lie-proto-ready) .lie-filters, body:not(.lie-proto-ready) .lie-section, body:not(.lie-proto-ready) .lie-day-group, body:not(.lie-proto-ready) .lie-deferred-toggle-wrap { transform: translateY(28px); } html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__tag, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__title .lie-hero__line, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__subtitle, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__stat, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__crown, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__mesh span { opacity: 0; } html[data-theme="light"] body:not(.lie-proto-ready) .lie-hero--classic .lie-hero__title, html[data-theme="light"] body:not(.lie-proto-ready) .lie-hero--classic .lie-hero__subtitle { opacity: 0; transform: translateY(20px); } html[data-theme="neon"] body:not(.lie-proto-ready) .lie-event-list .lie-event-card { opacity: 0; transform: translateY(18px); } html[data-theme="light"] body:not(.lie-proto-ready) .lie-event-list .lie-event-card { opacity: 0; transform: translateY(14px); } /* --- Navbar --- */ body.lie-proto-ready .lie-navbar { animation: lie-load-nav 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.02s; } /* --- Classic hero --- */ html[data-theme="light"] body.lie-proto-ready .lie-hero--classic .lie-hero__title { animation: lie-load-reveal-up-soft 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.1s; } html[data-theme="light"] body.lie-proto-ready .lie-hero--classic .lie-hero__subtitle { animation: lie-load-reveal-up-soft 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.22s; } /* --- Neon hero (staggered) --- */ html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__mesh span { animation: lie-load-mesh-pulse 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__mesh span:nth-child(1) { animation-delay: 0.05s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__mesh span:nth-child(2) { animation-delay: 0.12s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__mesh span:nth-child(3) { animation-delay: 0.18s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__tag { animation: lie-load-reveal-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.08s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__title .lie-hero__line:nth-child(1) { animation: lie-load-line-reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.16s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__title .lie-hero__line:nth-child(2) { animation: lie-load-line-reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.26s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__subtitle { animation: lie-load-reveal-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.36s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__stat { animation: lie-load-stat-pop 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) backwards; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__stat:nth-child(1) { animation-delay: 0.44s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__stat:nth-child(2) { animation-delay: 0.52s; } html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__stat:nth-child(3) { animation-delay: 0.6s; } /* Opacity only — transform is reserved for lie-neon-crown-sway */ html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__crown { animation: lie-load-fade-in 1s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.2s; } /* --- Filters & sections --- */ body.lie-proto-ready .lie-filters { animation: lie-load-reveal-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.48s; } html[data-theme="light"] body.lie-proto-ready .lie-filters { animation-name: lie-load-reveal-up-soft; filter: none; } body.lie-proto-ready .lie-section, body.lie-proto-ready .lie-day-group { animation: lie-load-reveal-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards; } html[data-theme="light"] body.lie-proto-ready .lie-section, html[data-theme="light"] body.lie-proto-ready .lie-day-group { animation-name: lie-load-reveal-up-soft; } body.lie-proto-ready #section-heute { animation-delay: 0.56s; } body.lie-proto-ready #section-running { animation-delay: 0.62s; } body.lie-proto-ready #section-upcoming { animation-delay: 0.68s; } body.lie-proto-ready .lie-day-group:nth-child(1) { animation-delay: 0.74s; } body.lie-proto-ready .lie-day-group:nth-child(2) { animation-delay: 0.8s; } body.lie-proto-ready .lie-day-group:nth-child(3) { animation-delay: 0.86s; } body.lie-proto-ready .lie-day-group:nth-child(4) { animation-delay: 0.92s; } body.lie-proto-ready .lie-day-group:nth-child(n + 5) { animation-delay: 0.98s; } body.lie-proto-ready .lie-deferred-toggle-wrap { animation: lie-load-reveal-up-soft 0.75s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: 0.9s; } /* --- Event cards (first 10 per list) --- */ body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(-n + 10) { animation: lie-load-card 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(1) { animation-delay: 0.64s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(2) { animation-delay: 0.69s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(3) { animation-delay: 0.74s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(4) { animation-delay: 0.79s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(5) { animation-delay: 0.84s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(6) { animation-delay: 0.89s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(7) { animation-delay: 0.94s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(8) { animation-delay: 0.99s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(9) { animation-delay: 1.04s; } body.lie-proto-ready .lie-event-list .lie-event-card:nth-child(10) { animation-delay: 1.09s; } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { body:not(.lie-proto-ready) .lie-navbar, body:not(.lie-proto-ready) .lie-filters, body:not(.lie-proto-ready) .lie-section, body:not(.lie-proto-ready) .lie-day-group, body:not(.lie-proto-ready) .lie-deferred-toggle-wrap, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__tag, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__title .lie-hero__line, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__subtitle, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__stat, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__crown, html[data-theme="neon"] body:not(.lie-proto-ready) .lie-hero--neon .lie-hero__mesh span, html[data-theme="light"] body:not(.lie-proto-ready) .lie-hero--classic .lie-hero__title, html[data-theme="light"] body:not(.lie-proto-ready) .lie-hero--classic .lie-hero__subtitle, body:not(.lie-proto-ready) .lie-event-list .lie-event-card { opacity: 1; transform: none; filter: none; } body.lie-proto-ready .lie-navbar, body.lie-proto-ready .lie-filters, body.lie-proto-ready .lie-section, body.lie-proto-ready .lie-day-group, body.lie-proto-ready .lie-deferred-toggle-wrap, html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__tag, html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__title .lie-hero__line, html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__subtitle, html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__stat, html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__crown, html[data-theme="neon"] body.lie-proto-ready .lie-hero--neon .lie-hero__mesh span, html[data-theme="light"] body.lie-proto-ready .lie-hero--classic .lie-hero__title, html[data-theme="light"] body.lie-proto-ready .lie-hero--classic .lie-hero__subtitle, body.lie-proto-ready .lie-event-list .lie-event-card { animation: none !important; } }