/* * MetaEdge global preloader * The loading class is applied inline in so the overlay exists before * any page content can flash on screen. */ html.site-is-loading, html.site-is-loading body { overflow: hidden !important; } /* * Keep the application completely behind the preloader until its fade has * finished. Pausing CSS motion here also prevents hero animations from * progressing invisibly and being revealed halfway through. */ html.site-is-loading body { visibility: hidden; } html.site-is-loading body * { animation-play-state: paused !important; } html.site-is-loading::before, html.site-is-loading::after, html.site-is-loading body::before { position: fixed; pointer-events: none; opacity: 1; visibility: visible; transition: opacity 300ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 300ms; } html.site-is-loading::before { content: ""; inset: 0; z-index: 2147483645; background: radial-gradient(circle at 50% 48%, rgba(95, 108, 244, .09), transparent 30%), #ffffff; } html.site-is-loading::after { content: ""; top: 50%; left: 50%; z-index: 2147483646; width: clamp(154px, 15vw, 214px); aspect-ratio: 4 / 1; background: url("assets/logo.svg") center / contain no-repeat; transform: translate(-50%, -50%); transform-origin: 50% 50%; filter: drop-shadow(0 14px 28px rgba(79, 91, 246, .14)); animation: metaedge-preloader-breathe 1.35s cubic-bezier(.4, 0, .2, 1) infinite; } /* * A separate masked layer creates the moving highlight while preserving the * original logo artwork underneath. The light can only appear inside the * visible pixels of the MetaEdge logo. */ html.site-is-loading body::before { content: ""; top: 50%; left: 50%; z-index: 2147483647; width: clamp(154px, 15vw, 214px); aspect-ratio: 4 / 1; background: linear-gradient( 105deg, transparent 32%, rgba(116, 135, 255, 0) 39%, rgba(116, 135, 255, .28) 45%, rgba(255, 255, 255, .96) 50%, rgba(80, 190, 255, .34) 55%, rgba(80, 190, 255, 0) 61%, transparent 68% ); background-position: 145% 50%; background-size: 260% 100%; transform: translate(-50%, -50%); -webkit-mask: url("assets/logo.svg") center / contain no-repeat; mask: url("assets/logo.svg") center / contain no-repeat; animation: metaedge-preloader-shine .72s cubic-bezier(.3, .15, .2, 1) infinite; } html[data-theme="dark"].site-is-loading::before { background: radial-gradient(circle at 50% 48%, rgba(80, 190, 255, .12), transparent 31%), #1b1d26; } html[data-theme="dark"].site-is-loading::after { background: linear-gradient( 90deg, #642dfc 0%, #5c67fd 11%, #50c0ff 21.65%, #ffffff 21.8%, #ffffff 100% ); -webkit-mask: url("assets/logo.svg") center / contain no-repeat; mask: url("assets/logo.svg") center / contain no-repeat; filter: drop-shadow(0 16px 32px rgba(80, 190, 255, .16)); } html[data-theme="dark"].site-is-loading body::before { background: linear-gradient( 105deg, transparent 32%, rgba(80, 190, 255, 0) 39%, rgba(80, 190, 255, .22) 45%, rgba(255, 255, 255, 1) 50%, rgba(126, 103, 255, .28) 55%, rgba(126, 103, 255, 0) 61%, transparent 68% ); background-position: 145% 50%; background-size: 260% 100%; } html.site-is-loading.site-is-ready::before, html.site-is-loading.site-is-ready::after, html.site-is-loading.site-is-ready body::before { opacity: 0; visibility: hidden; } html.site-is-loading.site-is-ready::after { transform: translate(-50%, -48%) scale(.97); } @keyframes metaedge-preloader-breathe { 0%, 100% { transform: translate(-50%, -50%) scale(.965); opacity: .72; } 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes metaedge-preloader-shine { 0%, 10% { background-position: 145% 50%; opacity: 0; } 18% { opacity: .92; } 78% { opacity: .92; } 88%, 100% { background-position: -45% 50%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { html.site-is-loading::before, html.site-is-loading::after, html.site-is-loading body::before { transition-duration: 120ms; } html.site-is-loading::after, html.site-is-loading body::before { animation: none; } html.site-is-loading body::before { display: none; } }