/* GENERATED by design/brand/animation/build-app-assets.mjs. Do not hand-edit. * * The entrance (E6 Spinning ball) and the loader (L3 Wave), plus the theme * colours for the two inline marks. Every hex here is read out of * design/brand/tools/mark.mjs; none is typed. * * Transforms and opacity only. Measured at a median of 16.7ms per frame, which * is 60fps, with the renderer throttled to a sixth of a laptop's speed and no * frame anywhere over two frame budgets. */ .ar-anim{overflow:visible} .ar-anim .b,.ar-anim .ball,.ar-anim .baseline{transform-box:view-box} @media (prefers-reduced-motion:reduce){.ar-anim .b{animation:none!important;transform:none!important;opacity:1!important}.ar-anim .ball,.ar-anim .baseline{animation:none!important;opacity:0!important}} /* ---- the entrance, E6 ---- */ @keyframes ar-ball-spin{0%{transform:scale(.55) rotate(0deg);opacity:0}7.69%{transform:scale(1) rotate(40deg);opacity:1}46.15%{transform:scale(1) rotate(430deg);opacity:1}58.12%,100%{transform:scale(0) rotate(560deg);opacity:0}} .ar-ball .ball{animation:ar-ball-spin 1170ms cubic-bezier(.45,.05,.3,1) both;transform-origin:50.75px 47.45px} .ar-ball .b{animation-duration:1170ms;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-fill-mode:both} .ar-ball .b1{transform-origin:24.25px 56px}.ar-ball .b2{transform-origin:38.2px 53.95px}.ar-ball .b3{transform-origin:52.6px 51.8px}.ar-ball .b4{transform-origin:66.75px 47.45px}.ar-ball .b5{transform-origin:77.4px 53.8px} @keyframes ar-ball-1{0%,46.15%{transform:translate(26.5px,-8.55px) scale(.3) rotate(-32deg);opacity:0}52.14%{opacity:1}84.62%,100%{transform:none;opacity:1}}.ar-ball .b1{animation-name:ar-ball-1}@keyframes ar-ball-2{0%,50%{transform:translate(12.55px,-6.5px) scale(.3) rotate(-32deg);opacity:0}55.98%{opacity:1}88.46%,100%{transform:none;opacity:1}}.ar-ball .b2{animation-name:ar-ball-2}@keyframes ar-ball-3{0%,53.85%{transform:translate(-1.85px,-4.35px) scale(.3) rotate(-32deg);opacity:0}59.83%{opacity:1}92.31%,100%{transform:none;opacity:1}}.ar-ball .b3{animation-name:ar-ball-3}@keyframes ar-ball-5{0%,57.69%{transform:translate(-26.65px,-6.35px) scale(.3) rotate(-32deg);opacity:0}63.68%{opacity:1}96.15%,100%{transform:none;opacity:1}}.ar-ball .b5{animation-name:ar-ball-5}@keyframes ar-ball-4{0%,61.54%{transform:translate(-16px,0px) scale(.3) rotate(-32deg);opacity:0}67.52%{opacity:1}100%,100%{transform:none;opacity:1}}.ar-ball .b4{animation-name:ar-ball-4} /* ---- the loader, L3 ---- */ @keyframes ar-wave{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4.5px)}} .ar-wave .b{animation:ar-wave 1100ms ease-in-out infinite} .ar-wave .b1{transform-origin:22.4px 63.4px}.ar-wave .b2{transform-origin:36px 63px}.ar-wave .b3{transform-origin:49.8px 63px}.ar-wave .b4{transform-origin:61.6px 67.4px}.ar-wave .b5{transform-origin:75.7px 61.6px} .ar-wave .b1{animation-delay:0ms}.ar-wave .b2{animation-delay:80ms}.ar-wave .b3{animation-delay:160ms}.ar-wave .b4{animation-delay:240ms}.ar-wave .b5{animation-delay:320ms} /* ---- where the ball sits inside the stacked lockup ---- * The concepts are written against the mark's own view-box. The lockup's * view-box is larger and starts at 0 0, so the ball's pivot moves with it. */ .ar-lockup .ball{transform-origin:283.56px 209.36px} /* ---- the wordmark arrives as the bars land ---- * Without this the word sits there from the first frame with an empty space * above it and then a ball drops into the gap, which reads as two unrelated * things. Fading it up over the last third means the lockup assembles: ball, * bars, name. Opacity only, and it ends at 1, which is where it rests. */ @keyframes ar-word-in{0%,58%{opacity:0}100%{opacity:1}} .ar-lockup>path{animation:ar-word-in 1170ms ease both} /* ---- the entrance hands over to the loader, on the BOOT SCREEN only ---- * The reasoning is in build-app-assets.mjs beside the two constants below. */ .app-loader-mark .b{animation-duration:1170ms,1100ms;animation-timing-function:cubic-bezier(.34,1.56,.64,1),ease-in-out;animation-fill-mode:both,none;animation-iteration-count:1,infinite} .app-loader-mark .b1{animation-name:ar-ball-1,ar-wave;animation-delay:0ms,1170ms} .app-loader-mark .b2{animation-name:ar-ball-2,ar-wave;animation-delay:0ms,1250ms} .app-loader-mark .b3{animation-name:ar-ball-3,ar-wave;animation-delay:0ms,1330ms} .app-loader-mark .b4{animation-name:ar-ball-4,ar-wave;animation-delay:0ms,1410ms} .app-loader-mark .b5{animation-name:ar-ball-5,ar-wave;animation-delay:0ms,1490ms} /* ---- the light theme, for the inline marks only ---- * Every other mark in the app is a background image on --brand-slip or * --brand-logo and follows the theme without help. Inline SVG cannot read a * background-image token, so its colours are overridden here. Stage is absent * on purpose: it uses the dark palette. */ [data-theme="light"] .ar-anim .b1 line,[data-app-theme="light"] .ar-anim .b1 line{stroke:#6D1FA8} [data-theme="light"] .ar-anim .b2 line,[data-app-theme="light"] .ar-anim .b2 line{stroke:#8235C0} [data-theme="light"] .ar-anim .b3 line,[data-app-theme="light"] .ar-anim .b3 line{stroke:#9A4FD6} [data-theme="light"] .ar-anim .b4 line,[data-app-theme="light"] .ar-anim .b4 line{stroke:#F4AE0F} [data-theme="light"] .ar-anim .b5 line,[data-app-theme="light"] .ar-anim .b5 line{stroke:#6D1FA8} [data-theme="light"] .ar-lockup>path,[data-app-theme="light"] .ar-lockup>path{fill:#1A1618} [data-theme="light"] .ar-anim .ball path:nth-of-type(1),[data-app-theme="light"] .ar-anim .ball path:nth-of-type(1){fill:#6D1FA8} [data-theme="light"] .ar-anim .ball path:nth-of-type(2),[data-app-theme="light"] .ar-anim .ball path:nth-of-type(2){fill:#8235C0} [data-theme="light"] .ar-anim .ball path:nth-of-type(3),[data-app-theme="light"] .ar-anim .ball path:nth-of-type(3){fill:#9A4FD6} [data-theme="light"] .ar-anim .ball path:nth-of-type(4),[data-app-theme="light"] .ar-anim .ball path:nth-of-type(4){fill:#F4AE0F} [data-theme="light"] .ar-anim .ball path:nth-of-type(5),[data-app-theme="light"] .ar-anim .ball path:nth-of-type(5){fill:#6D1FA8} /* ---- the entrance plays once per session ---- * js/entrance-boot.js puts .ar-entrance on before first paint, having * read sessionStorage. Without it the lockup is simply static, which is also * what a reduce-motion setting produces. The mark is on the document element * rather than the logo because a script in runs before exists, * and it is a file rather than an inline block because the site's own * Content-Security-Policy refuses inline script. */ :root:not(.ar-entrance) .ar-lockup .b,:root:not(.ar-entrance) .ar-lockup .ball,:root:not(.ar-entrance) .ar-lockup>path{animation:none} :root:not(.ar-entrance) .ar-lockup .ball{opacity:0} :root:not(.ar-entrance) .ar-lockup>path{opacity:1} /* ---- and a second launch still says "still working" ---- * The entrance plays once per session. Without this the second launch of the * day would show a completely static logo over a travelling bar for as long as * the app took to start. Same specificity as the rule above, placed after it. */ :root:not(.ar-entrance) .app-loader-mark .b{animation-name:ar-wave;animation-duration:1100ms;animation-timing-function:ease-in-out;animation-fill-mode:none;animation-iteration-count:infinite} :root:not(.ar-entrance) .app-loader-mark .b1{animation-delay:0ms} :root:not(.ar-entrance) .app-loader-mark .b2{animation-delay:80ms} :root:not(.ar-entrance) .app-loader-mark .b3{animation-delay:160ms} :root:not(.ar-entrance) .app-loader-mark .b4{animation-delay:240ms} :root:not(.ar-entrance) .app-loader-mark .b5{animation-delay:320ms} /* Reduce motion gets the same thing the no-play case gets: the finished lockup, no ball, no movement. BASE_CSS covers the bars and the ball; the wordmark is this file's addition so it is covered here. */ @media (prefers-reduced-motion:reduce){ .ar-lockup>path{animation:none!important;opacity:1!important} .ar-lockup .ball{animation:none!important;opacity:0!important}} /* ---- the loader, inside the app's own loading component ---- * * ALL OF THIS LIVES HERE RATHER THAN IN css/shared.css, and not for tidiness. * Another session had uncommitted work in shared.css on the night this was * wired in, and the pre-commit guard refused the overlap. Rather than override * it, the three rules moved into the file this job owns. It turns out to be * the better home anyway: everything about the animation is now in one * generated file. * * This stylesheet is loaded AFTER shared.css on both pages, so the delay * override wins on source order at equal specificity. If the link order is * ever changed, the delay silently goes back to 400ms. */ .app-loading-mark-wrap{display:block;line-height:0} .app-loading-mark-wrap .ar-mark{width:46px;height:auto;display:block} /* 300ms, down from shared.css's 400. The reason there is a delay at all is written where it always was; this is only the number. */ .app-loading{animation-delay:.3s} /* The mark stops but stays. A stopped indicator that is still there says "working"; one that has gone says "finished", which is the one thing a loader must never say by accident. */ @media (prefers-reduced-motion:reduce){ .app-loading-mark-wrap .ar-mark .b{animation:none!important;transform:none!important}}