header{z-index:9999;flex-direction:row;justify-content:space-between;align-items:center;width:100%;padding:1rem;display:flex;position:fixed;top:0;left:0}header h1,header button{text-transform:uppercase;cursor:pointer;font-family:CormorantInf;font-size:2rem;font-weight:600;line-height:1}header .menu-btn{position:relative}header .menu-btn .btn:nth-child(2){position:absolute;top:0;right:0}
.button{cursor:pointer;white-space:nowrap;transform-style:preserve-3d;background:0 0;border:0;justify-content:center;align-items:center;gap:0;padding:0;font-family:inherit;text-decoration:none;display:inline-flex;position:relative}.button .button__text{font-family:inherit;font-weight:inherit;color:var(--foreground);align-items:center;gap:0;transition:all .5s;display:inline-flex}.button:hover .button__text{gap:3px}.button .letter{transform-origin:50%;backface-visibility:hidden;will-change:transform, opacity;font-family:inherit;font-weight:inherit;transition:transform .36s cubic-bezier(.22,1,.36,1),opacity .22s;display:inline-block;transform:perspective(320px)rotateX(0)scaleY(1)}.button.is-inactive .letter{transition-delay:calc(var(--letter-index) * 40ms);opacity:0;transform:perspective(320px)rotateY(-45deg)}.button.is-active .letter{transition-delay:calc(var(--delay) * 1ms);opacity:1;transform:perspective(320px)rotateY(0)}.button .button__sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}
.menu{background:var(--background);opacity:0;z-index:999;pointer-events:none;flex-direction:row;width:100%;height:100%;padding:1rem;transition:opacity .5s 1.06s;display:flex;position:fixed;top:0;left:0}.menu.active{opacity:1;pointer-events:auto;transition-delay:0s}.menu .menu-subject{flex-direction:column;justify-content:space-around;width:30%;height:100%;padding-top:10rem;font-size:1rem;display:flex}.menu .menu-subject .menu-links{font-size:5em}.menu .menu-subject .menu-links li{letter-spacing:0;cursor:pointer;opacity:0;line-height:1;transition:opacity .5s,transform .5s,letter-spacing .5s;transform:translateY(24px)}.menu .menu-subject .menu-links li:hover{letter-spacing:5px}.menu .menu-subject .menu-links li:first-child{transition-delay:80ms,80ms,0s}.menu .menu-subject .menu-links li:nth-child(2){transition-delay:.14s,.14s,0s}.menu .menu-subject .menu-links li:nth-child(3){transition-delay:.2s,.2s,0s}.menu .menu-subject .menu-links li a{line-height:1}.menu .menu-subject .menu-soc{flex-direction:column;font-size:2em;display:flex}.menu .menu-subject .menu-soc .soc-link{opacity:0;line-height:1.3;transition:opacity .5s,transform .5s;transform:translateY(24px)}.menu .menu-subject .menu-soc .soc-link:first-child{transition-delay:.28s,.28s}.menu .menu-subject .menu-soc .soc-link:nth-child(2){transition-delay:.34s,.34s}.menu .menu-subject .menu-soc .soc-link:nth-child(3){transition-delay:.4s,.4s}.menu .menu-subject .menu-soc .soc-link a{line-height:1.3;position:relative}.menu .menu-subject .menu-soc .soc-link a:after{content:"";background:var(--foreground);opacity:0;width:100%;height:1px;position:absolute;bottom:.2em;left:0}.menu .menu-subject .menu-soc .soc-link a:hover:after{opacity:1}.menu .decor{width:70%;height:100%;position:relative}.menu .decor .decor-block{width:100%;height:100%;position:absolute;top:0;left:0}.menu .decor .decor-block .img{opacity:0;pointer-events:none;z-index:0;transition:opacity .5s,transform .5s;position:absolute;top:0;right:0;transform:translateY(24px)}.menu .decor .decor-block .img img{object-fit:contain}.menu .decor .decor-block .img:first-child{width:45%;height:80%;top:10%;right:6%}.menu .decor .decor-block .img:nth-child(2){width:30%;height:40%;top:50%;right:65%}.menu .decor .decor-block.active .img{z-index:1}.menu.active .menu-links li{opacity:1;transform:translateY(0)}.menu.active .menu-soc .soc-link{opacity:1;transform:translateY(0)}.menu.active .decor .decor-block.active .img{opacity:1;transform:translateY(0)}@media (orientation:portrait){.menu .menu-subject{width:100%}.menu .decor{display:none}}
footer{z-index:9999;width:100%;padding:1rem;position:fixed;bottom:0;left:0}footer .sign{filter:grayscale();width:30px;height:30px;transition:all .5s;display:block;position:relative}footer .sign:hover{filter:grayscale(0)}footer .sign img{object-fit:contain}
.grain-overlay{pointer-events:none;width:100vw;height:100vh;display:block;position:fixed;inset:0}
.canvas-area{width:100%;height:100%;overflow:hidden}.canvas-area>canvas{width:100%;height:100%;display:block}
