*,*:after,*:before{box-sizing:border-box}body{display:grid;place-items:center;min-height:200vh;background:#1a1a1a;font-family:sans-serif,system-ui}header{position:fixed;top:50%;left:50%;translate:-50% -50%;border-radius:50%;width:40vmin;aspect-ratio:1;background:#333}.header__avatar{width:100%;position:absolute;inset:0;border-radius:50%}.header__backdrop{position:absolute;inset:0;border-radius:50%;overflow:hidden}.header__content{position:absolute;inset:.25rem;background:radial-gradient(circle at 50% 100%,#daa3f5,#8114b8 50%);border-radius:50%}.header__content:before{content:"";z-index:-1;position:absolute;inset:-100%;background:conic-gradient(transparent,white 40%,transparent 41%);animation:rotate 4s infinite linear,fade-in-out 6s -1s infinite alternate}@keyframes fade-in-out{50%{opacity:0}}@keyframes rotate{to{rotate:360deg}}.avatar__container{position:absolute;inset:.25rem;--stop-one: 32%;--stop-two: 38%;clip-path:inset(-100% 0 0 0 round calc(20vmin + -0rem));border-radius:0 0 50% 50%}.pop-up-avatar{--fps: 40;aspect-ratio:16/9;width:220%;position:absolute;bottom:0%;left:50%;translate:-46% 0%;height:auto;background-size:cover;-o-object-fit:cover;object-fit:cover;-o-object-position:0 0;object-position:0 0;animation:stop-motion steps(var(--fps));animation-timeline:scroll(root)}@keyframes stop-motion{0%{-o-object-position:0 0;object-position:0 0}70%{translate:-46% 0}to{translate:-55% 0;-o-object-position:100% 0;object-position:100% 0}}