@font-face{font-family:Banana;src:url('assets/BananaGrotesk-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Banana;src:url('assets/BananaGrotesk-Bold.otf') format('opentype');font-weight:700;font-display:swap}
:root{color-scheme:light;--paper:#e5e0c4;--ink:#0f210f;font-family:Banana,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0}
main{min-height:100svh;display:grid;place-items:center;padding:32px 20px}
.holding{display:flex;flex-direction:column;align-items:center;width:100%;transform:translateY(-2.5px)}
.logo{position:relative;width:min(282px,100%);aspect-ratio:281.5/88.2;margin:0;font-size:0}
.logo>img{display:block;width:100%;height:100%}
.eye{position:absolute;width:15.48%;aspect-ratio:1;top:34.62%;pointer-events:none;will-change:transform}
.eye-left{left:59.08%}
.eye-right{left:82.67%}
.eye>img,.blink{position:absolute;inset:0;width:100%;height:100%}
.eye.loaded>img{visibility:hidden}
.blink path{fill:var(--paper)}
.message{font-size:1.125rem;line-height:23px;text-align:center;margin:27px 0 21px}
.contact{display:grid;place-items:center;width:230px;max-width:100%;min-height:40px;border:1px solid var(--ink);border-radius:100px;color:inherit;text-decoration:none;font-size:1.125rem;line-height:23px;transition:background-color .4s ease,color .4s ease;position:relative}
.contact::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ink);opacity:0;transition:opacity .4s ease;pointer-events:none}
.contact-label,.contact-label-bold{grid-area:1/1;transition:opacity .4s ease}
.contact-label-bold{font-weight:700;opacity:0}
@media(hover:hover){.contact:hover::before,.contact:hover .contact-label-bold{opacity:1}.contact:hover .contact-label{opacity:0}}
.contact:focus-visible::before,.contact:focus-visible .contact-label-bold{opacity:1}
.contact:focus-visible .contact-label{opacity:0}
.contact:focus-visible{outline:1px dashed var(--ink);outline-offset:5px}
.contact:active{background:var(--ink);color:var(--paper)}
.contact:active .contact-label{opacity:1}
.contact:active .contact-label-bold,.contact:active::before{opacity:0}
.reveal{animation:appear 2.2s cubic-bezier(.25,.1,.25,1) both}
.message{animation-delay:200ms}
.contact{animation-delay:400ms}
@keyframes appear{from{opacity:0}to{opacity:1}}
@media(max-width:340px){.message{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none}.contact,.contact::before,.contact-label,.contact-label-bold{transition:none}.eye{will-change:auto}}