/* =========================================================================== preloader.css — the curtains: the calm intro preloader (shown while has .is-preload) and the curved page-transition wipe between views. =========================================================================== */ #preloader{display:none} .is-preload #preloader{ display:flex;align-items:center;justify-content:center; position:fixed;inset:0;z-index:1000;background:var(--bone); transition:transform .9s cubic-bezier(.7,0,.2,1); } /* keep page from scrolling under the curtain */ .is-preload{overflow:hidden} .pre-inner{ width:min(420px,82vw);display:flex;flex-direction:column;align-items:center;gap:1.6rem; text-align:center; } /* rotating brand mark */ .pre-mark{ width:16px;height:16px;border:1.5px solid var(--terracotta); transform:rotate(45deg); } @media (prefers-reduced-motion:no-preference){ .pre-mark{animation:pre-spin 2.8s cubic-bezier(.6,0,.4,1) infinite} } @keyframes pre-spin{ 0%{transform:rotate(45deg) scale(1)} 50%{transform:rotate(225deg) scale(1.18)} 100%{transform:rotate(405deg) scale(1)} } .pre-name{ font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,4vw,2.1rem); letter-spacing:-0.01em;color:var(--espresso); } /* thin progress line */ .pre-track{position:relative;width:100%;height:1px;background:var(--line)} .pre-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--terracotta);transition:width .25s linear} .pre-row{ width:100%;display:flex;align-items:center;justify-content:space-between; font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted); } .pre-word{position:relative;height:1.1em;overflow:hidden} .pre-word span{display:block;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s} .pre-count{color:var(--espresso);font-variant-numeric:tabular-nums} /* exit */ #preloader.done{transform:translateY(-100%)} @media (prefers-reduced-motion:reduce){ #preloader.done{transform:none;opacity:0;transition:opacity .3s} } /* ---- curved page-transition wipe (home <-> case study) ---- */ #page-transition{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden} #page-transition.active{visibility:visible;pointer-events:auto} #page-transition svg{position:absolute;inset:0;width:100%;height:100%;display:block} #page-transition path{fill:var(--espresso)} .pt-mark{position:relative;z-index:1;width:18px;height:18px;border:1.5px solid var(--terracotta);transform:rotate(45deg);opacity:0;transition:opacity .3s ease} #page-transition.active .pt-mark{opacity:1} #page-transition.leaving .pt-mark{opacity:0;transition:opacity .25s ease} @media (prefers-reduced-motion:no-preference){ #page-transition.active .pt-mark{animation:pre-spin 1.1s cubic-bezier(.6,0,.4,1) infinite} } /* ---- gate the hero load-in so it plays as the curtain lifts ---- */ @media (prefers-reduced-motion:no-preference){ .is-preload .load-stagger>*{opacity:0} html.loaded .load-stagger>*{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards} html.loaded .load-stagger>*:nth-child(1){animation-delay:.15s} html.loaded .load-stagger>*:nth-child(2){animation-delay:.28s} html.loaded .load-stagger>*:nth-child(3){animation-delay:.41s} html.loaded .load-stagger>*:nth-child(4){animation-delay:.54s} }