.gradient-bg{height:100vh;width:100vw;background-color:#222;position:absolute;inset:0;display:flex;place-content:center;align-items:center}*{transition:all .25s ease-out}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gradient{--size: 400px;--speed: 50s;--easing: cubic-bezier(.8, .2, .2, .8);width:var(--size);height:var(--size);filter:blur(calc(var(--size) / 5));background-image:linear-gradient(rgba(55,235,169,.85),#5b37eb);animation:rotate var(--speed) var(--easing) alternate infinite;border-radius:30% 70% 70% 30%/30% 30% 70% 70%}body{background-color:#222;height:100vh;margin:0;display:grid;place-items:center;text-align:center;font-family:Outfit,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{position:relative;color:#fff}.headline{opacity:0;width:100%;font:7vw system-ui,sans-serif;font-family:Outfit,sans-serif;font-weight:600;height:12vw;animation:fadeIn 3s cubic-bezier(.075,.82,.165,1) .5s forwards}@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))){.visually-hidden{position:absolute;top:-100px;left:-100px}h1{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgb(255,255,255);-webkit-clip-path:url(#lockup-headline-mask-path);clip-path:url(#lockup-headline-mask-path)}}.logo{width:30px;height:30px;position:absolute;left:50%;top:20px;transform:translate(-50%);animation:fadeIn 3s cubic-bezier(.075,.82,.165,1) 0s;z-index:10;filter:opacity(.8)}@keyframes fadeIn{0%{transform:translateY(-20px);opacity:0;filter:blur(10px)}to{transform:translateY(0);opacity:.8;filter:blur(0)}}