/* ═══════════════════════════════════════════════════════════════ PAGE TRANSITIONS Cinematic slide + fade between pages. The .container > .card (the whole card) is the transition target. ═══════════════════════════════════════════════════════════════ */ /* ─── Progress bar ────────────────────────────────────────────── */ .la-transit-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 9999; background: linear-gradient( 90deg, var(--la-accent-teal) 0%, #7dd4f0 40%, var(--la-accent-teal) 100% ); background-size: 200% 100%; border-radius: 0 2px 2px 0; box-shadow: 0 0 12px rgba(46, 160, 200, 0.5), 0 0 4px rgba(46, 160, 200, 0.3); transform-origin: left; transform: scaleX(0); opacity: 0; pointer-events: none; transition: none; } .la-transit-progress.is-loading { opacity: 1; animation: la-progress-fill 1.8s cubic-bezier(0.22, 0.68, 0, 1) forwards, la-progress-shimmer 1.2s linear infinite; } .la-transit-progress.is-done { transform: scaleX(1) !important; opacity: 0; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s 0.15s ease; } @keyframes la-progress-fill { 0% { transform: scaleX(0); } 100% { transform: scaleX(0.85); } } @keyframes la-progress-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Hide content before JS enter-animation kicks in ─────────── */ /* The blocking