/* ============================================================ Component · Page Load Sequence Choreography per PDF page 11 (Phase 3 § Micro-Interaction Inventory): t=0 ink-coloured screen t=100ms horizontal ruled line draws from left → right t=400ms line splits — top + bottom halves slide apart, revealing content above and below t=600ms logo fades in t=800ms nav items stagger in t=1000ms hero content rises t=1200ms CTA border draws sessionStorage flag in JS prevents re-running on same-session visits. ============================================================ */ /* Pre-animation state — set by inline boot script in */ .is-loading body { overflow: hidden; } .is-loading .hero__content > *, .is-loading .nav__list > *, .is-loading .nav__cta, .is-loading .nav__logo, .is-loading .hero__viewer, .is-loading .hero__meta { opacity: 0; } /* === The loader element ================================== */ .loader { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .loader__top, .loader__bottom { position: absolute; left: 0; right: 0; height: 50%; background: var(--color-ink); will-change: transform; transition: transform 720ms var(--ease-in-out); } .loader__top { top: 0; } .loader__bottom { bottom: 0; } .loader__rule { position: absolute; top: 50%; left: 50%; height: 1px; width: 0; background: var(--color-accent); transform: translate(-50%, -50%); transition: width 380ms var(--ease-out), opacity 200ms var(--ease-out); z-index: 1; } .loader.is-drawing .loader__rule { width: 70vw; max-width: 1200px; } .loader.is-splitting .loader__top { transform: translateY(-100%); } .loader.is-splitting .loader__bottom { transform: translateY(100%); } .loader.is-splitting .loader__rule { opacity: 0; transition: opacity 150ms var(--ease-out); } .loader.is-done { /* Removed by JS shortly after; ensure no flicker if removal delays */ visibility: hidden; } /* === Reveal animations (run once .is-loaded is set) ====== */ /* Delays are relative to is-loaded (added at 520ms, as the loader opens), so the hero enters through the opening instead of after a blank gap. */ .is-loaded .nav__logo { animation: rise-fade 520ms var(--ease-out) 280ms both; } .is-loaded .nav__item:nth-child(1) .nav__link { animation: rise-fade 520ms var(--ease-out) 380ms both; } .is-loaded .nav__item:nth-child(2) .nav__link { animation: rise-fade 520ms var(--ease-out) 440ms both; } .is-loaded .nav__item:nth-child(3) .nav__link { animation: rise-fade 520ms var(--ease-out) 500ms both; } .is-loaded .nav__item:nth-child(4) .nav__link { animation: rise-fade 520ms var(--ease-out) 560ms both; } .is-loaded .nav__item:nth-child(5) .nav__link { animation: rise-fade 520ms var(--ease-out) 620ms both; } .is-loaded .nav__cta { animation: rise-fade 520ms var(--ease-out) 680ms both; } .is-loaded .hero__rule { animation: rule-draw 720ms var(--ease-out) 330ms both; } .is-loaded .hero__eyebrow-row { animation: rise-fade 640ms var(--ease-out) 440ms both; } .is-loaded .hero__title { animation: rise-fade 740ms var(--ease-out) 520ms both; } .is-loaded .hero__lead { animation: rise-fade 680ms var(--ease-out) 640ms both; } .is-loaded .hero__ctas { animation: rise-fade 640ms var(--ease-out) 760ms both; } .is-loaded .hero__viewer { animation: image-reveal 900ms var(--ease-out) 330ms both; } .is-loaded .hero__meta { animation: rise-fade 520ms var(--ease-out) 820ms both; } /* === Returning visitors (sessionStorage flag set) ======== */ .is-returning .loader { display: none; } .is-returning .hero__rule { animation: rule-draw 500ms var(--ease-out) 100ms both; } .is-returning .hero__eyebrow-row { animation: rise-fade 500ms var(--ease-out) 150ms both; } .is-returning .hero__title { animation: rise-fade 500ms var(--ease-out) 200ms both; } .is-returning .hero__lead { animation: rise-fade 500ms var(--ease-out) 250ms both; } .is-returning .hero__ctas { animation: rise-fade 500ms var(--ease-out) 300ms both; } .is-returning .hero__viewer { animation: image-reveal 700ms var(--ease-out) 100ms both; } .is-returning .hero__meta { animation: rise-fade 500ms var(--ease-out) 350ms both; } .is-returning .nav__logo, .is-returning .nav__list > .nav__item, .is-returning .nav__cta { animation: rise-fade 400ms var(--ease-out) 100ms both; } /* === Reduced-motion fallback ============================ */ @media (prefers-reduced-motion: reduce) { .loader { display: none !important; } .is-loading body { overflow: auto; } .is-loading .hero__content > *, .is-loading .nav__list > *, .is-loading .nav__cta, .is-loading .nav__logo, .is-loading .hero__viewer, .is-loading .hero__meta { opacity: 1 !important; } .is-loaded *, .is-returning * { animation: none !important; opacity: 1 !important; transform: none !important; } }