/* styles/page-loader.css — full-screen page loader. Shows the instant the page starts painting purely via HTML/CSS (see the inline markup at the very top of in every page) — no JS needs to run for it to appear, which is the whole point: JS only decides when to HIDE it, via js/components/page-loader.js. Launching the site, reloading the current page, and landing on a page right after a form submission all hold it for one full cycle (1s, matching the animation below); plain navigation between pages hides it immediately instead, with no artificial delay. */ .page-loader { position: fixed; inset: 0; z-index: 10000; background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); transition: opacity 300ms ease, visibility 300ms ease; } .page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .page-loader-icon-wrap { width: 72px; height: 72px; /* One full spin per growth cycle below, so the two stay locked together and the bloom always lands at the same orientation. */ animation: page-loader-spin 1s linear infinite; } .page-loader-icon { width: 100%; height: 100%; overflow: visible; } @keyframes page-loader-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --------------------------------------------------------------- One continuous act of growth rather than three separate pictures crossfading: the helix dissolves into a bare vine ring, leaves pop out along it, then flowers open on top of them, and the whole bloom dissolves back to the helix to loop. Each layer is a real element with its own opacity/scale keyframes on a shared 1s clock, so they overlap and hand off instead of cutting. --------------------------------------------------------------- */ .page-loader-helix { animation: page-loader-helix-cycle 1s ease-in-out infinite; } @keyframes page-loader-helix-cycle { 0%, 18% { opacity: 1; } 28%, 90% { opacity: 0; } 100% { opacity: 1; } } @keyframes page-loader-vine-cycle { 0%, 18% { opacity: 0; } 28%, 88% { opacity: 1; } 98%, 100% { opacity: 0; } } /* Slight overshoot past scale(1) is baked into the keyframes rather than an easing curve, so the pop stays crisp at this speed. */ @keyframes page-loader-leaf-pop { 0%, 32% { opacity: 0; transform: scale(0); } 46% { opacity: 1; transform: scale(1.18); } 52%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.6); } } @keyframes page-loader-flower-pop { 0%, 52% { opacity: 0; transform: scale(0); } 66% { opacity: 1; transform: scale(1.25); } 72%, 88% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(0.6); } } /* ---- Helix ---- */ /* Two smooth strands wound into a ring: r = 30 + 6.5*sin(4t), with the second strand the same curve phase-shifted half a period (a 45deg rotation), so they braid past each other at eight crossings. */ .page-loader-dna-strand { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* One path holding all eight rungs as separate subpaths. */ .page-loader-dna-rung { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; } /* ---- Vine, leaves, flowers ---- */ /* A true circle, so the stem reads as perfectly smooth. Same color as the leaves -- the flowers are the one colorful thing here. */ .page-loader-vine { fill: none; stroke: var(--color-accent); stroke-width: 3; opacity: 0; animation: page-loader-vine-cycle 1s ease-in-out infinite; } .page-loader-leaf { fill: var(--color-accent); opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; animation: page-loader-leaf-pop 1s ease-out infinite; } /* Same small-flower style and palette as the vine's flowers on the right margin (see .decor-vine-flower-small in styles/page-decor.css) -- each sets its own --flower-color inline. The positioning transform lives on an outer so this CSS scale can't clobber it. */ .page-loader-flower { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; animation: page-loader-flower-pop 1s ease-out infinite; } .page-loader-flower ellipse { fill: var(--flower-color, #fff); } .page-loader-flower circle { fill: var(--color-primary-dark); } .page-loader-wordmark { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; letter-spacing: 0.05em; color: var(--color-primary); }