/* ============================================================ MABA SUITEZ ยท LOADING PAGE Gold outline basketball spins centre-screen, then zooms out and lands inside the "B" of the wordmark. Coordinate anchors (logo.svg viewBox 929.2 x 392.8): ball centre in logo ....... 627.7 , 148.15 viewBox centre ............ 464.60 , 196.40 delta (ball -> centre) .... -163.1 , +48.25 Those two numbers are the whole trick: the ball starts translated to the centre of the stage at scale --K, then animates back to translate(0,0) scale(1) โ€” which is exactly its slot inside the letter. ============================================================ */ :root{ --ld-bg:#7C3A25; /* brand terracotta */ --ld-bg-glow:#8E4830; /* a touch lighter behind the ball, so the flat field still has some depth */ --ld-line:rgba(233,206,147,.16); } /* ---- overlay shell ---- */ .ld{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background: radial-gradient(120% 90% at 50% 42%, var(--ld-bg-glow) 0%, var(--ld-bg) 62%); opacity:1; transition:opacity .34s cubic-bezier(.4,0,.2,1); --K:5.2; /* how large the ball starts, x its final size */ } .ld[hidden]{display:none} .ld.is-out{opacity:0; pointer-events:none} html.ld-lock, html.ld-lock body{overflow:hidden} /* ---- stage ---- */ .ld-stage{ width:min(58vw,760px); will-change:transform; } .ld-svg{width:100%; height:auto; display:block; overflow:visible} /* both layers pivot on the ball centre, in viewBox units */ .ld-ball, .ld-ball-spin{ transform-box:view-box; transform-origin:627.7px 148.15px; } .ld-word{ opacity:0; transform-box:view-box; transform-origin:627.7px 148.15px; } /* the page's own logo stays hidden until the loader lands on it, so the two never show at once. Visible again the moment the overlay lets go of , loader on or off. */ html.ld-lock [data-logo-target]{opacity:0} html.ld-lock [data-logo-target].is-handed{opacity:1;transition:opacity .3s ease .12s} /* ---- progress hairline ---- */ .ld-bar{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ld-line); } .ld-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#A97C33,#E9CE93); } /* ============ INTRO SEQUENCE (first load) ============ */ /* ball: hold big + spinning, then fly into the B */ .ld.is-intro .ld-ball{ animation:ldMove 1800ms cubic-bezier(.72,0,.24,1) both; } .ld.is-intro .ld-ball-spin{ animation:ldSpin 1800ms cubic-bezier(.32,0,.18,1) both; } .ld.is-intro .ld-word{ animation:ldWord 420ms 1800ms cubic-bezier(.2,.7,.3,1) both; } /* the flown-in ball and the ball carved into the "B" sit on exactly the same pixels, so handing over between them is invisible โ€” and it stops gold-on-gold from flattening into a solid blob at rest */ .ld.is-intro .ld-ball-art{ animation:ldBallOut 200ms 2060ms linear both; } .ld.is-intro .ld-stage{ animation:ldSettle 620ms 1700ms cubic-bezier(.2,.7,.3,1) both; } .ld.is-intro .ld-bar i{ animation:ldBar 2700ms linear both; } @keyframes ldMove{ 0% { transform:translate(-163.1px,48.25px) scale(var(--K)); opacity:0 } 7% { opacity:1 } 57.5%{ transform:translate(-163.1px,48.25px) scale(var(--K)); opacity:1 } 100% { transform:translate(0,0) scale(1); opacity:1 } } @keyframes ldSpin{ 0% { transform:rotate(0deg) } 100% { transform:rotate(1080deg) } /* 3 turns โ€” lands upright */ } @keyframes ldWord{ from { opacity:0 } to { opacity:1 } } @keyframes ldBallOut{ from { opacity:1 } to { opacity:0 } } @keyframes ldSettle{ from { transform:scale(1.055) } to { transform:scale(1) } } @keyframes ldBar{ from { width:0 } to { width:100% } } /* hand-off: JS measures the logo already sitting on the page and flies the loader lockup onto it before the overlay fades */ .ld.is-handoff .ld-stage{ transition:transform 420ms cubic-bezier(.5,0,.15,1); animation:none; } /* ============ PAGE-TO-PAGE SEQUENCE (short) ============ */ .ld.is-quick .ld-word, .ld.is-quick .ld-bar{display:none} .ld.is-quick .ld-ball{ transform:translate(-163.1px,48.25px) scale(2.4); } .ld.is-quick .ld-ball-spin{ animation:ldSpin 900ms cubic-bezier(.3,0,.25,1) both; } /* ============ MOBILE ============ */ @media (max-width:860px){ .ld{--K:6} .ld-stage{width:82vw} .ld.is-quick .ld-ball{transform:translate(-163.1px,48.25px) scale(3)} } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion:reduce){ .ld.is-intro .ld-ball, .ld.is-intro .ld-ball-spin, .ld.is-intro .ld-stage, .ld.is-quick .ld-ball-spin{animation:none} .ld.is-intro .ld-ball-art{animation:ldBallOut 200ms 400ms linear both} .ld.is-intro .ld-word{animation:ldWord 300ms both} .ld.is-intro .ld-bar i{animation:ldBar 700ms linear both} .ld.is-handoff .ld-stage{transition:none} }