*{scroll-behavior:smooth}body,html{padding:0;margin:0;height:100vh;width:100vw;overflow:hidden}.d-none{display:none!important}canvas#app{position:fixed;top:0;left:0;outline:none;background-color:#1e1a20}canvas#app.scroll-based{z-index:-1}.scroll-based{overflow:auto}.scroll-based-section{display:flex;align-items:center;height:100vh;font-family:Cabin,sans-serif;color:#ffeded;text-transform:uppercase;font-size:7vmin;padding-left:10%;padding-right:10%;background-color:transparent}section.scroll-based-section:nth-child(odd){justify-content:flex-end}.loading-bar{position:fixed;top:50%;width:100%;height:2px;background-color:#fff;transform:scaleX(0);transform-origin:top left;transition:transform .5s;will-change:transform}.loading-bar.ended{transform:scaleX(0);transform-origin:top right;transition:transform 1.5s ease-in-out}.point{position:absolute;top:50%;left:50%}.point:hover .text{opacity:1}.point .label{position:absolute;top:-20px;left:-20px;width:40px;height:40px;border-radius:50%;background:#00000077;border:1px solid #ffffff77;color:#fff;font-family:Helvetica,Arial,sans-serif;text-align:center;line-height:40px;font-weight:100;font-size:14px;cursor:help;transform:scale(0);transition:transform .3s}.point.visible .label{transform:scale(1)}.point .text{position:absolute;top:30px;left:-120px;width:200px;padding:20px;border-radius:4px;background:#00000077;border:1px solid #ffffff77;color:#fff;line-height:1.3em;font-family:Helvetica,Arial,sans-serif;font-weight:100;font-size:14px;opacity:0;transition:opacity .3s;will-change:opacity;pointer-events:none}