.pinned{position:relative;height:100vh;width:100vw;overflow:hidden}.sticky-header{position:relative;top:55%;left:50%;display:flex;transform:translate(-50%,-50%);opacity:1}.sticky-header h1{font-size:16vw;font-weight:lighter;color:transparent;-webkit-text-stroke:1px #fff;text-align:center}.card,.sticky-header h1{font-family:myfont,sans-serif}.card{position:absolute;top:150%;left:50%;transform:translate(-50%,-50%);width:50%;height:60%;display:flex;justify-content:center;align-items:center;border-radius:1em;will-change:transform}#card-1{background-color:#000;box-shadow:0 0 10px 2px #ecb74c,inset 0 2px 2px #ecb74c}#card-1:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#ecb74c 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-2{background-color:#000;box-shadow:0 0 10px 2px #7dd8cd,inset 0 2px 2px #7dd8cd}#card-2:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#7dd8cd 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-3{background-color:#000;box-shadow:0 0 10px 2px #e0ff57,inset 0 2px 2px #e0ff57}#card-3:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#e0ff57 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-4{background-color:#000;box-shadow:inset 0 2px 2px #7dd8cd}#card-4:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#7dd8cd 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-5{background-color:#000;box-shadow:inset 0 2px 2px #7dd8cd}#card-5:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#7dd8cd 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-6{background-color:#000;box-shadow:inset 0 2px 2px #7dd8cd}#card-6:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#7dd8cd 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-7{background-color:#000;box-shadow:0 0 10px 2px #ff6f61,inset 0 2px 2px #ff6f61}#card-7:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#ff6f61 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-7 .card-phase{background-color:#ff6f61}#card-7 .card-title{color:#ff6f61}#card-7 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #ff6f61;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#index-7 p{color:#ff6f61}#card-8{background-color:#000;box-shadow:0 0 10px 2px #6a89cc,inset 0 2px 2px #6a89cc}#card-8:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#6a89cc 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-8 .card-phase{background-color:#6a89cc}#card-8 .card-title{color:#6a89cc}#card-8 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #6a89cc;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#index-8 p{color:#6a89cc}#card-9{background-color:#000;box-shadow:0 0 10px 2px #f8c291,inset 0 2px 2px #f8c291}#card-9:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#f8c291 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-9 .card-phase{background-color:#f8c291}#card-9 .card-title{color:#f8c291}#card-9 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #f8c291;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#index-9 p{color:#f8c291}#card-10{background-color:#000;box-shadow:0 0 10px 2px #38ada9,inset 0 2px 2px #38ada9}#card-10:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 25% 0,#38ada9 0,#000 50%,#000 100%);opacity:.2;z-index:1}#card-10 .card-phase{background-color:#38ada9}#card-10 .card-title{color:#38ada9}#card-10 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #38ada9;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#index-10 p{color:#38ada9}.card-phase{position:absolute;top:1em;left:50%;transform:translateX(-50%);padding:.125em .25em;border-radius:.25em;color:#0a0a0a}.card-phase p{font-size:24px}#card-1 .card-phase{background-color:#ecb74c}#card-2 .card-phase{background-color:#7dd8cd}#card-3 .card-phase{background-color:#e0ff57}#card-4 .card-phase,#card-5 .card-phase,#card-6 .card-phase{background-color:#7dd8cd}.card-title{text-align:center}.card-title p{font-size:36px}.card-title h1{font-size:80px;font-weight:lighter;line-height:90%}#card-1 .card-title{color:#ecb74c}#card-2 .card-title{color:#7dd8cd}#card-3 .card-title{color:#e0ff57}#card-4 .card-title,#card-5 .card-title,#card-6 .card-title{color:#7dd8cd}#card-1 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #ecb74c;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#card-1 .card-bg h1{letter-spacing:45px}#card-2 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #7dd8cd;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#card-2 .card-bg h1{letter-spacing:45px}#card-3 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #e0ff57;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#card-3 .card-bg h1{letter-spacing:45px}#card-4 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #7dd8cd;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#card-4 .card-bg h1{letter-spacing:45px}#card-5 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #7dd8cd;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#card-5 .card-bg h1{letter-spacing:45px}#card-6 .card-bg{position:absolute;z-index:-1;font-size:30em;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;-webkit-text-stroke:1px #7dd8cd;-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none}#card-6 .card-bg h1{letter-spacing:45px}.card-title h1 span{color:transparent;-webkit-text-stroke:2px #fff}.progress-bar{position:absolute;top:0;right:0;width:8px;height:100vh;background-color:hsla(0,0%,100%,.2);opacity:0}.progress{height:0;background-color:#ecb74c;transition:height .3s ease}.progress,.progress-bar:after{position:absolute;top:0;width:100%}.progress-bar:after{content:"";left:0;height:100%;background:linear-gradient(180deg,#000,transparent 20%,transparent 50%,transparent 80%,#000);pointer-events:none}.indices{position:absolute;top:0;right:24px;height:100%;display:flex;flex-direction:column;justify-content:center;gap:4em;opacity:0}.index{text-align:right;opacity:.25}.index p{text-transform:uppercase;font-size:.95rem}.index p:nth-child(2){font-family:myfont,sans-serif;font-size:.95rem}.index p:nth-child(3){font-family:myfont,sans-serif;font-size:1.25rem}#index-1 p{color:#ecb74c}#index-2 p{color:#7dd8cd}#index-3 p{color:#e0ff57}#index-4 p,#index-5 p,#index-6 p{color:#7dd8cd}@media (max-width:900px){.card{width:75%;height:50%}.card-phase p{font-size:18px}.card-title p{font-size:24px}.card-title h1{font-size:60px;font-weight:lighter;line-height:90%}}