(function () { if (location.pathname !== "/" || !window.Promise || !document.body) return; var d = document, html = d.documentElement, start = performance.now(); var reduce = window.matchMedia && matchMedia("(prefers-reduced-motion: reduce)").matches; var root = d.createElement("div"); root.className = "bl-preload"; root.setAttribute("aria-hidden", "true"); root.innerHTML = '

' + '

'; d.body.appendChild(root); // The page behind must not scroll while it is shut (the scroll engine also stops for the class below, once it is running). var hold = function (e) { e.preventDefault(); }; root.addEventListener("wheel", hold, { passive: false }); root.addEventListener("touchmove", hold, { passive: false }); html.classList.add("beloved-preloading"); var num = root.querySelector(".bl-preload__count span"), fill = root.querySelector(".bl-preload__fill"); var got = { page: 0, fonts: 0, photo: 0 }, all = false, opened = false, shown = 0; function check() { if (got.page && got.fonts && got.photo) all = true; } function goal() { var g = got.page * 25 + got.fonts * 15 + got.photo * 60; if (!got.photo) g += 60 * 0.85 * (1 - Math.exp(-(performance.now() - start) / 2200)); return all ? 100 : Math.min(g, 99); } function tick() { var g = goal(); shown += (g - shown) * (all ? 0.22 : 0.08); if (all && g - shown < 0.6) shown = 100; num.textContent = String(Math.floor(shown)); fill.style.transform = "scaleY(" + (shown / 100).toFixed(3) + ")"; if (all && shown >= 100) { window.setTimeout(open, 120); return; } requestAnimationFrame(tick); } requestAnimationFrame(tick); function parsed() { got.page = 1; var img = d.querySelector(".hh .hh__img"); var settle = function () { got.photo = 1; check(); }; if (!img) settle(); else { var ready = function () { (img.decode ? img.decode() : Promise.resolve()).then(settle, settle); }; if (img.complete && img.naturalWidth) ready(); else { img.addEventListener("load", ready, { once: true }); img.addEventListener("error", settle, { once: true }); } } check(); } if (d.readyState === "loading") d.addEventListener("DOMContentLoaded", parsed, { once: true }); else parsed(); var fontsDone = function () { got.fonts = 1; check(); }; (d.fonts && d.fonts.ready ? d.fonts.ready : Promise.resolve()).then(fontsDone, fontsDone); window.setTimeout(function () { all = true; }, 8000); function play(el, frames, opts) { if (!el || !el.animate) return Promise.resolve(); opts.fill = "forwards"; return el.animate(frames, opts).finished.then(null, function () {}); } function open() { if (opened) return; opened = true; html.classList.remove("beloved-preloading"); window.dispatchEvent(new Event("beloved:preload-done")); var q = function (s) { return root.querySelector(s); }; var done; if (reduce || !root.animate) done = play(root, [{ opacity: 1 }, { opacity: 0 }], { duration: 300, easing: "ease-out" }); else { var OPEN = 820, ease = "cubic-bezier(.2,.7,.2,1)"; play(q(".bl-preload__count"), [{ opacity: 1 }, { opacity: 0 }], { duration: 160, easing: "ease-out" }); done = Promise.all([ play(q(".bl-preload__glint"), [{ opacity: 0, transform: "translateY(-30vh)" }, { opacity: 0.9, transform: "translateY(10vh)", offset: 0.3 }, { opacity: 0, transform: "translateY(115vh)" }], { duration: OPEN * 1.15, easing: "cubic-bezier(.3,.1,.3,1)" }), play(q(".bl-preload__glow"), [{ opacity: 0, transform: "scaleX(.4)" }, { opacity: 0.6, transform: "scaleX(1)", offset: 0.3 }, { opacity: 0, transform: "scaleX(2.4)" }], { duration: OPEN, easing: "ease-out" }), play(q(".bl-preload__half--l"), [{ transform: "translateX(0)" }, { transform: "translateX(-101%)" }], { duration: OPEN, easing: ease, delay: 90 }), play(q(".bl-preload__half--r"), [{ transform: "translateX(0)" }, { transform: "translateX(101%)" }], { duration: OPEN, easing: ease, delay: 90 }), play(q(".bl-preload__line"), [{ opacity: 1, transform: "scaleX(1)" }, { opacity: 1, transform: "scaleX(2.2)", offset: 0.25 }, { opacity: 0, transform: "scaleX(4)" }], { duration: OPEN * 0.7, easing: "ease-out" }) ]); } done.then(function () { root.remove(); }); } })();

Hear it first.

Press play.