/* ============================================================ page-transitions.css Unified page + sidebar animation system. Design contract ─────────────── All motion tokens live here as CSS custom properties so that JS files can read them via getComputedStyle() and the two systems never drift apart. Phase timeline (page load) ────────────────────────── t=0 html opacity 0 (set by this file before paint) t=0→sidebar sidebar slides/expands to its resting width margin-left of #main-content follows (sidebar-dur) t=fade-delay page fades in (page-fade-dur) The fade-delay is chosen so the content starts appearing slightly after the sidebar has begun settling — they overlap for a feeling of cohesion rather than sequence. ============================================================ */ /* ── 1. Shared motion tokens ──────────────────────────────── */ :root { /* Sidebar */ --sidebar-dur: 600ms; --sidebar-ease: cubic-bezier(.2, .9, .3, 1); /* Page fade — slightly shorter so content settles before sidebar finishes */ --page-fade-dur: 220ms; --page-fade-ease: cubic-bezier(.2, .9, .3, 1); /* How long to wait before starting the page fade-in. Set to ~30% of sidebar-dur so they overlap naturally. */ --page-fade-delay: 80ms; /* Unload is snappier than load — user has already clicked */ --page-unload-dur: 110ms; --page-unload-ease: cubic-bezier(.4, 0, .6, 1); /* JS navigation hold — must be >= unload-dur so the fade is visible before the browser navigates away. */ --nav-hold-ms: 130; /* consumed by JS as a plain number */ } /* ── 2. Initial hidden state ──────────────────────────────── */ html { opacity: 0; transition: opacity var(--page-fade-dur) var(--page-fade-ease) var(--page-fade-delay); } /* ── 3. Visible / ready state ─────────────────────────────── */ html.page-ready { opacity: 1; } /* ── 4. Unload / navigate-away state ─────────────────────── */ html.page-unload { opacity: 0.1; transition: opacity var(--page-unload-dur) var(--page-unload-ease); } html.page-unload * { pointer-events: none; } html.page-unload, html.page-ready { scroll-behavior: auto; } /* ── 5. Main content: resting state ──────────────────────── */ /* Default transition when nothing special is happening. */ #main-content, .main-content { transition: margin-left .32s ease, opacity var(--page-fade-dur) var(--page-fade-ease); will-change: margin-left; } /* ── 6. Sidebar-transitioning: content locks to sidebar ───── */ /* JS (sidebar-sync.js) adds .sidebar-transitioning to the moment the sidebar begins moving — whether that's a CSS transition, a class snap, or a JS-driven width change. While active, margin-left matches the sidebar's exact curve so both elements move as a single connected unit. */ html.sidebar-transitioning #main-content, html.sidebar-transitioning .main-content { transition: margin-left var(--sidebar-dur) var(--sidebar-ease), opacity var(--page-fade-dur) var(--page-fade-ease) !important; will-change: margin-left, transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* ── 7. Page-load sidebar entrance ───────────────────────── */ /* On fresh load the sidebar slides into place. Give #main-content the same sidebar timing so margin-left tracks the sidebar from frame one instead of snapping. */ html.sidebar-entering #main-content, html.sidebar-entering .main-content { transition: margin-left var(--sidebar-dur) var(--sidebar-ease), opacity var(--page-fade-dur) var(--page-fade-ease) var(--page-fade-delay) !important; will-change: margin-left, opacity; } /* ── 8. Hide images during unload (prevent logo flash) ───── */ html.page-unload .sidebar-logo, html.page-unload .logo, html.page-unload .report-logo, html.page-unload .logo-container img, html.page-unload .logo-box img, html.page-unload .card img { visibility: hidden !important; opacity: 0 !important; } html.page-unload .modal-backdrop img, html.page-unload .fixed img, html.page-unload [class*="overlay"] img, html.page-unload [class*="backdrop"] img, html.page-unload [role="dialog"] img, html.page-unload .pdf-loading img { visibility: hidden !important; opacity: 0 !important; } /* ── 9. Reduced-motion respect ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { html, #main-content, .main-content, html.sidebar-transitioning #main-content, html.sidebar-transitioning .main-content, html.sidebar-entering #main-content, html.sidebar-entering .main-content { transition-duration: 1ms !important; animation-duration: 1ms !important; } }