/* ========================================================================== Only Upwards — brand loading screen Icon mark assembles, opens apart, and becomes the wordmark; curtain lifts. loader.js (in ) adds html.ou-loading before first paint, injects #ou-loader at DOMContentLoaded, then steps through .s1 -> .s4. Repeat visits in the same session get a quick veil fade instead. ========================================================================== */ html.ou-loading body { visibility: hidden; } html.ou-loader-open body { overflow: hidden; } #ou-loader { position: fixed; inset: 0; z-index: 2147483000; background: var(--ou-cream, #F4F0EB); display: flex; align-items: center; justify-content: center; visibility: visible; transform: translateY(0); } /* Curtain lift */ #ou-loader.s4 { transition: transform .7s cubic-bezier(.83, 0, .17, 1); transform: translateY(-100%); } /* Quick veil for repeat visits */ #ou-loader.quick { transition: opacity .35s ease; opacity: 1; } #ou-loader.quick.s4 { transform: none; opacity: 0; } .oul-stage { position: relative; width: min(560px, 78vw); display: flex; align-items: center; justify-content: center; } /* --- The icon mark (inline SVG, one path per shape) -------------------- */ .oul-mark { width: min(230px, 40vw); height: auto; display: block; overflow: visible; transition: transform .55s cubic-bezier(.22, 1, .36, 1); } .oul-p { transition: transform .55s cubic-bezier(.34, 1.4, .5, 1), opacity .45s ease; transform-box: fill-box; transform-origin: center; } /* s0 — pieces apart, invisible */ #ou-loader:not(.s1) .oul-o { transform: translateX(-70px) rotate(-8deg); opacity: 0; } #ou-loader:not(.s1) .oul-u1 { transform: translateY(-70px); opacity: 0; } #ou-loader:not(.s1) .oul-u2 { transform: translateY(70px); opacity: 0; } /* s1 — assemble to the full mark */ #ou-loader.s1 .oul-p { transform: none; opacity: 1; } #ou-loader.s1 .oul-u1 { transition-delay: .07s; } #ou-loader.s1 .oul-u2 { transition-delay: .14s; } /* s2 — the mark opens: O swings left, Us slide right, whole mark shrinks toward wordmark height */ #ou-loader.s2 .oul-mark { transform: scale(.42); } #ou-loader.s2 .oul-o { transform: translateX(-340px) rotate(-14deg); } #ou-loader.s2 .oul-u1 { transform: translateX(340px) translateY(-8px); } #ou-loader.s2 .oul-u2 { transform: translateX(340px) translateY(8px); } /* s3 — pieces dissolve into the arriving wordmark */ #ou-loader.s3 .oul-mark { transform: scale(.34); } #ou-loader.s3 .oul-p { opacity: 0; transition-duration: .35s; } #ou-loader.s3 .oul-o { transform: translateX(-560px) rotate(-10deg) scale(.9); } #ou-loader.s3 .oul-u1 { transform: translateX(180px) translateY(-6px) scale(.9); } #ou-loader.s3 .oul-u2 { transform: translateX(180px) translateY(6px) scale(.9); } /* --- The wordmark ------------------------------------------------------- */ .oul-word { position: absolute; left: 50%; top: 50%; width: min(460px, 66vw); height: auto; transform: translate(-50%, -50%); opacity: 0; clip-path: inset(-8% 100% -8% 0); } #ou-loader.s3 .oul-word { transition: clip-path .95s cubic-bezier(.22, 1, .36, 1) .05s, opacity .35s ease .05s; opacity: 1; clip-path: inset(-8% 0% -8% 0); } /* --- Guards ------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .oul-mark, .oul-p, .oul-word { transition: none !important; } #ou-loader { transition: opacity .25s ease; } #ou-loader.s4 { transform: none; opacity: 0; } }