/* ============================================================ LexAnalytico — Page Transitions css/transitions.css ============================================================ */ /* ------------------------------------------------------------ 1. PAGE ENTRANCE (fade + rise on load) ------------------------------------------------------------ */ .page-content { opacity: 1; transform: translateY(0); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } /* Applied by inline script before paint; removed by transitions.js once the DOM is ready, triggering the fade/rise-in transition. */ html.is-entering .page-content { opacity: 0; transform: translateY(10px); transition: none; } /* ------------------------------------------------------------ 2. PAGE EXIT (fade out just before navigating away) ------------------------------------------------------------ */ .page-content.is-leaving { opacity: 0; transform: translateY(-6px); } /* ------------------------------------------------------------ 3. TOP PROGRESS BAR OVERLAY ------------------------------------------------------------ */ .page-transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9999; pointer-events: none; background: transparent; } .page-transition-overlay::before { content: ''; display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dark, #CC9E00), var(--gold, #FFCC00)); box-shadow: 0 0 8px rgba(255, 204, 0, 0.6); transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; opacity: 0; } /* Triggered by transitions.js when an internal link is clicked */ .page-transition-overlay.is-active::before { width: 92%; opacity: 1; } /* Triggered just before navigating away — quickly completes the bar */ .page-transition-overlay.is-complete::before { width: 100%; opacity: 1; transition: width 0.15s ease, opacity 0.2s ease 0.15s; } /* Respect reduced-motion preference: no animated transitions */ @media (prefers-reduced-motion: reduce) { .page-content, html.is-entering .page-content, .page-content.is-leaving, .page-transition-overlay::before { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ------------------------------------------------------------ 4. FULLSCREEN CURTAIN — prominent "rise up, drop down" transition ------------------------------------------------------------ */ .page-curtain { position: fixed; inset: 0; z-index: 10000; background: var(--navy, #012169); display: flex; align-items: center; justify-content: center; transform: translateY(100%); pointer-events: none; transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); } .page-curtain__mark { display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; transition: opacity 0.3s ease 0.15s; } .page-curtain__logo { font-family: var(--font-serif, serif); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--gold, #FFCC00); } .page-curtain__spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255, 204, 0, 0.25); border-top-color: var(--gold, #FFCC00); animation: page-curtain-spin 0.8s linear infinite; } @keyframes page-curtain-spin { to { transform: rotate(360deg); } } /* Rising: curtain climbs up from the bottom to fully cover the screen (page exit) */ .page-curtain.is-rising { transform: translateY(0); pointer-events: auto; } .page-curtain.is-rising .page-curtain__mark { opacity: 1; } /* Instantly covering — applied before first paint on the destination page so there is no flash of the new page before the curtain is ready to drop. */ html.is-curtain-covered .page-curtain { transform: translateY(0); transition: none; pointer-events: auto; } html.is-curtain-covered .page-curtain .page-curtain__mark { opacity: 1; transition: none; } /* Exiting: curtain drops back down off the bottom of the screen to reveal the new page */ .page-curtain.is-exiting { transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .page-curtain.is-exiting .page-curtain__mark { opacity: 0; transition: opacity 0.25s ease; } @media (prefers-reduced-motion: reduce) { .page-curtain { display: none !important; } }