── */ #splash-logo { width: 80px; height: 80px; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transform: scale(0.7); animation: splash-logo-in 0.45s cubic-bezier(0, 0, 0.2, 1) 0.1s forwards; } /* ── Title ────────────────────────────────────────── */ #splash-title { font-family: var(--font-montserrat, 'Montserrat', sans-serif); font-weight: 700; font-size: 1.875rem; letter-spacing: -0.025em; line-height: 1.2; text-align: center; white-space: nowrap; opacity: 0; transform: translateY(10px); /* Animation added by JS after fonts are loaded to prevent FOUT */ } @media (min-width: 640px) { #splash-title { font-size: 2.25rem; } } #splash-title .lm { color: var(--foreground, #1a1a1a); } .dark #splash-title .lm { color: var(--foreground, #f0f0f0); } #splash-title .tr { color: var(--accent, #e31937); text-shadow: 0 0 12px rgb(227 25 55 / 0.35); } /* ── EQ bars ──────────────────────────────────────── */ #splash-eq { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 20px; opacity: 0; animation: splash-fade-in 0.35s ease-out 0.85s forwards; } #splash-eq .b { width: 3px; border-radius: 2px; background: var(--accent, #e31937); opacity: 0.65; transform-origin: bottom; } /* Negative delays start bars mid-cycle so they're at different heights immediately */ #splash-eq .b:nth-child(1) { height: 12px; animation: eq-bar 0.65s ease-in-out -0.10s alternate infinite; } #splash-eq .b:nth-child(2) { height: 20px; animation: eq-bar 0.50s ease-in-out -0.25s alternate infinite; } #splash-eq .b:nth-child(3) { height: 14px; animation: eq-bar 0.80s ease-in-out 0.00s alternate infinite; } #splash-eq .b:nth-child(4) { height: 20px; animation: eq-bar 0.55s ease-in-out -0.40s alternate infinite; } #splash-eq .b:nth-child(5) { height: 8px; animation: eq-bar 0.70s ease-in-out -0.15s alternate infinite; } /* ── Subtitle ───────────────────────────────────── */ #splash-subtitle { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--foreground-muted, #888); text-align: center; opacity: 0; /* Animation added by JS after fonts are loaded to prevent FOUT */ white-space: nowrap; } /* ── Keyframes ────────────────────────────────────── */ @keyframes splash-logo-in { to { opacity: 1; transform: scale(1); } } @keyframes splash-fade-up { to { opacity: 1; transform: translateY(0); } } @keyframes splash-fade-in { to { opacity: 1; } } @keyframes eq-bar { from { transform: scaleY(0.2); } to { transform: scaleY(1); } } @keyframes splash-fly-up { to { transform: translateY(-30vh) scale(0.55); opacity: 0; } } @keyframes splash-fade-out { to { opacity: 0; visibility: hidden; } }

Les Mills Tracks

Your favorite workout music

Track Appearances

Track Appearances