header{--unit:1vh;position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:url(/assets/path.svg);background-repeat:repeat-x;background-size:auto 100%;padding-bottom:32px;margin-bottom:32px}header:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(/assets/dot.png) repeat;background-size:40px;mask-image:url(/assets/path.svg);mask-repeat:repeat;mask-size:auto 100%;-webkit-mask-image:url(/assets/path.svg);-webkit-mask-repeat:repeat;-webkit-mask-size:auto 100%}#header-content{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;flex-direction:row;column-gap:24px;margin-top:8px;margin-bottom:24px;max-width:1280px;width:90%}#header-content:has(.text){max-width:100vw}#avatar{opacity:1;transition:filter .3s ease,opacity .3s ease}#avatar,#pngtuber{position:relative;display:flex;align-items:center;justify-content:center}#pngtuber{z-index:1;width:clamp(144px,20vw,196px);aspect-ratio:1/1;margin-top:-32px;pointer-events:none}#avatar:has(#pngtuber.loading) #pngtuber{opacity:0;filter:blur(8px)}#items{--orbit-duration:12s;--height:calc(var(--unit) * 6);position:absolute;width:100%;height:var(--height);margin-top:var(--height);transition:width .3s ease-in-out,height .3s ease-in-out}#avatar:hover #items{width:120%;height:calc(var(--height)*1.3)}.item-bubble{--orbit-delay:calc(-1 * var(--item-index) * var(--orbit-duration) / var(--items-total) * 2);position:absolute;z-index:2;width:clamp(24px,3vw,32px);border-radius:100vh;padding:calc(var(--unit)*.4);backdrop-filter:blur(8px);background-color:hsla(0,0%,100%,.2);box-shadow:0 4px 6px rgba(0,0,0,.5);overflow:hidden;transition:transform .3s ease;translate:-50% -50%;border:2px solid hsla(0,0%,100%,.3);opacity:0;animation:bubble-in 1s ease-in-out forwards,orbit-a var(--orbit-duration) ease-in-out alternate infinite,orbit-b calc(var(--orbit-duration)*2) linear infinite,orbit-c calc(var(--orbit-duration)*2) linear infinite,orbit-d 2s ease-in-out alternate infinite;animation-delay:calc(var(--item-index)*.2s + .8s),var(--orbit-delay),var(--orbit-delay),var(--orbit-delay),0s}.item-bubble:hover{transform:scale(1.4)}.item-bubble:after,.item-bubble:before{animation:orbit-d 2s ease-in-out infinite alternate-reverse}.item-bubble:before{content:"";position:absolute;z-index:4;top:0;left:0;width:100%;height:100%;scale:-1;background:#fff;mask-image:url(/assets/shine.svg);mask-repeat:no-repeat;mask-size:auto 100%;-webkit-mask-image:url(/assets/shine.svg);-webkit-mask-repeat:no-repeat;-webkit-mask-size:auto 100%}.item-bubble:after{content:"";position:absolute;z-index:3;bottom:calc(var(--unit)*-.05);left:calc(var(--unit)*-.05);width:120%;height:120%;background:radial-gradient(circle at center,rgba(255,255,255,.7),transparent 40%,rgb(8,1,21) 90%)}@keyframes bubble-in{to{opacity:1}}@keyframes orbit-a{0%{left:0}to{left:100%}}@keyframes orbit-b{0%,to{top:50%}20%{top:95%}25%{top:100%}30%{top:95%}70%{top:5%}75%{top:0}80%{top:5%}}@keyframes orbit-c{0%,to{scale:1}25%{scale:1.25}75%{scale:.65}70%,90%{z-index:0}}@keyframes orbit-d{0%{rotate:-10deg}to{rotate:10deg}}#socials{--height:36px;background-color:var(--color-bg);padding:6px 12px;border-radius:100vh;border:2px solid var(--color-primary);outline:2px solid var(--color-bg)}#title{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(200px,60%,600px);overflow:hidden}header:has(.text) #title{width:fit-content}#subtitle{font-size:var(--text-sm);font-weight:600}#logo-container{position:relative;height:clamp(100px,var(--unit)*18,300px);aspect-ratio:22/7;overflow:hidden;margin-block:min(-28px + 2vw,0px)}.logo{position:absolute;top:calc(50% + var(--outline-top, 0)*1px);left:50%;translate:-50% -50%;display:flex;flex-direction:row;align-items:center;justify-content:center;color:var(--color-primary);width:clamp(520px,60vw,800px)}.logo.base{position:relative;opacity:0;padding:0 calc(var(--unit)*4)}.logo-element{transform-box:fill-box;transform-origin:center;scale:0;animation:pop-in .2s ease-in-out forwards;animation-delay:var(--calculated-delay);stroke:var(--outline-color);stroke-width:calc(4*var(--outline-width));stroke-linejoin:round}.logo-element.star{animation:pop-in .2s ease-in-out forwards,spin 12s linear infinite,bob 4s ease-in-out infinite;animation-delay:var(--calculated-delay)}.logo-element .bottom,.logo-element.bottom{translate:0 -1px;color:var(--color-secondary)}#title.letter-bob .logo-element{animation:pop-in .2s ease-in-out forwards,bob 6s ease-in-out infinite;animation-delay:var(--calculated-delay),calc(var(--element-index)*-.6s)}#logo-container:has(#logo-box.text){aspect-ratio:auto;width:100%}#logo-box.text{position:relative}#logo-box.text .logo-element{--element-translate-up:calc(var(--element-up, 0));--element-translate-right:calc(var(--unit) * -3.5);flex-shrink:0;margin-right:calc(var(--unit)*-7);rotate:var(--element-rotate,0deg);translate:var(--element-translate-right) var(--element-translate-up)}#logo-box.text svg{height:calc(var(--unit)*18);width:auto}@keyframes pop-in{0%{scale:0}80%{scale:1.2}90%{scale:.9}to{scale:1}}@keyframes spin{0%{rotate:0deg}to{rotate:1turn}}@keyframes bob{0%,to{translate:var(--element-translate-right,0) var(--element-translate-up,0)}50%{translate:var(--element-translate-right,0) calc(var(--element-translate-up, 0%) + .8*var(--unit))}}@media(max-width:1248px){#items{--orbit-duration:12s;--height:calc(var(--unit) * 4);position:absolute}}@media(max-width:780px){#title{width:100%;max-width:unset}}