.canvas{width:100%;position:fixed;height:100%}.canvas-container{width:100vw;height:100vh;background-color:#0b0c0b;position:relative;overflow:hidden;display:flex}.title-section{position:absolute;height:100%;align-items:flex-start;justify-content:center;color:#f5f5f5;padding:3rem;display:flex;width:27%;line-height:1;text-align:left!important;flex-direction:column}.title-el{position:relative;display:flex;width:500px;flex-wrap:wrap;font-size:6rem;gap:0 1rem}.title-el span{opacity:0}.scroll-indicator{text-align:center!important;position:fixed;width:100%;bottom:1rem;color:#7b7b7b;display:flex;justify-content:center;align-items:center;opacity:0;transition:1s;font-size:13px}.scroll-wheel{margin-left:1rem;height:18px;width:32px;min-width:30px;border:2px solid #7b7b7b;border-radius:20px;position:relative}.overlay-container.show .scroll-indicator{opacity:1}.overlay-container.show .title-el span{opacity:1;animation:clip-in 1.7s}.scroll-wheel:after{content:"";width:5px;height:5px;background-color:#a8a8a8;border-radius:3px;position:absolute;margin-top:4px;left:4px;animation:scroll-wheel-anim 1.5s infinite}@keyframes clip-in{0%{-webkit-clip-path:inset(40px 0);clip-path:inset(40px 0);transform:translateY(50px) rotate(10deg);transform-origin:left bottom}to{-webkit-clip-path:inset(0 0);clip-path:inset(0 0);transform:translateY(0) rotate(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes scroll-wheel-anim{0%{transform:translateX(0);opacity:0}50%{opacity:1}to{transform:translateX(15px);opacity:0}}@media (max-width:1024px){.title-section{justify-content:start;padding-left:2rem;padding-right:2rem;padding-top:4rem;width:100%}.title-el{font-size:2rem;width:100%}@keyframes scroll-wheel-anim{0%{transform:translateX(15px);opacity:0}50%{opacity:1}to{transform:translateX(0);opacity:0}}}