.circles-sticky-wrapper{position:relative}.mask-top{position:absolute;top:calc(-2 * var(--padding));left:0;width:100%;height:calc(var(--wrapper-height) - (100dvh - (3 * var(--padding))));pointer-events:none;z-index:3}.mask-top-inner{position:sticky;top:0;left:0;width:100%;height:var(--padding);background-color:var(--white)}.mask-bottom{position:absolute;top:calc(-2 * var(--padding));left:0;width:100%;height:calc(100% + var(--padding));z-index:3;pointer-events:none}.mask-bottom-inner{position:sticky;top:var(--padding);width:100%;height:calc(100vh - var(--padding) * 2);left:0}.mask-bottom-inner-inner{position:absolute;top:100%;left:0;width:100%;height:var(--padding);background-color:var(--white)}.bg-circles{position:relative;top:calc(-1 * var(--padding));height:100%}.sticky-bg{position:sticky;top:var(--padding);width:100%;height:calc(100dvh - (var(--padding) * 2));background-color:var(--light-gray);border-radius:40px;z-index:1}.sitcky-heading{position:relative;z-index:2;display:flex;top:calc((-1 * var(--wrapper-height)) - (1 * var(--padding)));height:calc((var(--wrapper-height) - 50vh) - (2 * var(--padding)))}.sitcky-heading h1::selection{background-color:var(--white)}.sitcky-heading h1{position:sticky;padding-top:43vh;padding-left:80px;height:100px;width:450px;top:0}.circles-track{position:absolute;top:0;right:60px;width:50%;display:flex;flex-direction:column;align-items:center;gap:60px;padding-top:80ch;padding-bottom:80ch;z-index:2}.circle-item{width:40vw;aspect-ratio:1/1;border-radius:50%;background-color:#dfdfd7;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;transition:background-color .6s var(--custom-ease)}.circle-item.active{background-color:var(--main)}.circle-inner{max-width:32ch;color:var(--light-gray)}.circle-item p{margin-top:20px;max-height:0;opacity:0;overflow:hidden;transform:translateY(10px);transition:max-height 2s var(--custom-ease),opacity .6s var(--custom-ease),transform 1s var(--custom-ease)}.circle-item.active p{max-height:250px;opacity:1;transform:translateY(0)}@media(max-width:768px){.circles-track{left:50%;transform:translate(-50%);width:100%;padding-top:50ch;padding-bottom:30ch;gap:20px}.circle-item{width:70vw}.sticky-bg{border-radius:30px}.sitcky-heading h1{padding-top:90px;padding-left:0;top:var(--padding);text-align:center;height:250px;background:linear-gradient(to bottom,var(--light-gray) 0%,rgba(211,211,211,.9) 60%,rgba(211,211,211,.6) 75%,rgba(211,211,211,.3) 90%,transparent 100%);border-radius:40px 40px 0 0}.mask-top{height:calc(var(--wrapper-height) - (100dvh - (8 * var(--padding))))}.circle-inner{font-size:13px}}.sentences-wrapper{position:relative;height:400dvh}.sentences-sticky{position:sticky;top:var(--padding);height:calc(100dvh - (2 * var(--padding)));overflow:hidden}.sentences-bg{position:absolute;inset:0;background-color:var(--light-gray);border-radius:40px 400px 40px 40px;z-index:1}.sentences-content{position:absolute;top:50%;left:80px;transform:translateY(-50%);z-index:3;width:25%}.sentence{position:absolute;top:50%;left:0;transform:translateY(-50%);opacity:0;transition:opacity .8s var(--custom-ease)}.sentences-content h1::selection{background-color:var(--white)}.sentence.active{opacity:1}.sentences-circle{position:absolute;height:500px;width:500px;top:50%;right:200px;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center}.circle-main-wrapper{position:absolute;inset:0}.circle-main{width:500px;height:500px;background-color:var(--main);border-radius:50%;transform:scale(0);transform-origin:center}.sentences-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:150px;color:var(--light-gray);font-family:"Instrument Serif";z-index:3;user-select:none}@media(max-width:768px){.sentences-sticky{height:calc(100dvh - (20 * var(--padding)));top:12.5%}.sentences-bg{border-radius:30px 30px 300px 300px}.sentences-content{top:100px;width:60%;text-align:center}.sentences-circle{height:300px;width:300px;left:50%;transform:translate(-50%,-50%);top:65%}.sentences-logo{font-size:60px}.circle-main{width:300px;height:300px}}
