.page-banner{width:100%;margin:0 auto;padding:3rem 4rem;border-radius:30px;position:relative;display:flex;align-items:center;justify-content:flex-start;overflow:hidden;box-sizing:border-box;min-height:250px}
.page-banner h1{font-family:var(--heading-font);font-size:clamp(3rem,10vw,6rem);color:var(--text-color);position:relative;margin:0;font-variant-ligatures:none;z-index:2}
.page-banner .banner-visuals{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}
.page-banner::before{display:none}

.about-banner{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);justify-content:center;text-align:center}
.about-banner h1{color:#fff}
.about-banner .banner-trophy{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:90%;opacity:.15}
.about-banner .banner-wave{position:absolute;bottom:0;left:0;width:100%;height:50px;background:#fff;opacity:.05;border-radius:100% 100% 0 0;animation:wave-animation 10s infinite linear}
@keyframes wave-animation{0%{transform:translateX(0) scaleX(1.5)}50%{transform:translateX(-20%) scaleX(1.5)}100%{transform:translateX(0) scaleX(1.5)}}

#stars1,#stars2,#stars3{position:absolute;top:0;left:0;width:1px;height:1px;background:transparent;border-radius:50%;animation-name:anim-stars;animation-timing-function:linear;animation-iteration-count:infinite}
#stars1{box-shadow:1749px 233px #FFF,126px 1461px #FFF,946px 1324px #FFF,428px 23px #FFF,1941px 119px #FFF,1432px 1481px #FFF,1801px 1494px #FFF,137px 493px #FFF,1152px 938px #FFF,959px 1058px #FFF,482px 424px #FFF,1838px 1297px #FFF,1903px 949px #FFF,116px 1083px #FFF,1612px 1039px #FFF,1536px 512px #FFF,893px 1307px #FFF,1726px 1416px #FFF,546px 67px #FFF,1383px 143px #FFF;animation-duration:50s}
#stars2{box-shadow:1845px 678px #FFF,108px 843px #FFF,188px 1184px #FFF,1716px 746px #FFF,831px 479px #FFF,595px 1426px #FFF,1891px 648px #FFF,1475px 827px #FFF,106px 1238px #FFF,1762px 1058px #FFF,1851px 1076px #FFF,93px 802px #FFF,840px 1470px #FFF,240px 109px #FFF,1512px 1404px #FFF,1403px 402px #FFF,48px 1113px #FFF,126px 873px #FFF,1289px 348px #FFF,1029px 1218px #FFF;animation-duration:100s}
#stars3{box-shadow:1381px 1430px #FFF,1480px 1251px #FFF,764px 335px #FFF,1788px 1018px #FFF,608px 899px #FFF,532px 127px #FFF,1345px 973px #FFF,1251px 104px #FFF,1150px 755px #FFF,1459px 382px #FFF,502px 1401px #FFF,1030px 24px #FFF,1172px 1150px #FFF,109px 1228px #FFF,1118px 49px #FFF,62px 796px #FFF,837px 1139px #FFF,64px 899px #FFF,1572px 1326px #FFF,895px 683px #FFF;animation-duration:150s}
@keyframes anim-stars{from{transform:translateY(0)}to{transform:translateY(-2000px)}}

.vote-banner{background:#f0f4ff}
.vote-banner .line{position:absolute;background:var(--wca-blue);opacity:.2;border-radius:50px;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.vote-banner .line1{width:25%;height:150%;top:-25%;left:10%;transform:rotate(30deg);animation-name:move-line1;animation-duration:8s}
.vote-banner .line2{width:20%;height:200%;top:-50%;left:60%;transform:rotate(-45deg);background:var(--wca-pink);animation-name:move-line2;animation-duration:12s}
.vote-banner .line3{width:15%;height:150%;top:-25%;left:80%;transform:rotate(60deg);background:var(--wca-cyan);animation-name:move-line3;animation-duration:10s}
@keyframes move-line1{from{transform:translateY(0) rotate(30deg) scaleX(1)}to{transform:translateY(-20px) rotate(40deg) scaleX(1.1)}}
@keyframes move-line2{from{transform:translateX(0) rotate(-45deg)}to{transform:translateX(30px) rotate(-55deg)}}
@keyframes move-line3{from{transform:translate(0,0) rotate(60deg)}to{transform:translate(-20px,20px) rotate(50deg)}}

.vote-banner [data-lucide]{position:absolute;opacity:.2;animation:float-icon 10s ease-in-out infinite;will-change:transform}
.vote-banner [data-lucide="vote"]{width:80px;height:80px;top:15%;left:25%;animation-duration:12s}
.vote-banner [data-lucide="check-square"]{width:60px;height:60px;top:60%;left:10%;animation-duration:10s;animation-delay:-2s}
.vote-banner [data-lucide="award"]{width:100px;height:100px;top:50%;left:75%;animation-duration:15s;animation-delay:-5s}
.vote-banner [data-lucide="bar-chart-2"]{width:70px;height:70px;top:20%;left:85%;animation-duration:9s;animation-delay:-3s}
@keyframes float-icon{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(10deg)}100%{transform:translateY(0) rotate(0)}}

.credits-banner{background:#f5f5f5;align-items:center;justify-content:center}
.credits-banner h1{text-align:center}
.credits-banner .banner-visuals{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.credits-banner .banner-visuals img{position:absolute;opacity:.1;animation-name:float-and-move;animation-timing-function:linear;animation-iteration-count:infinite}
.credits-banner .banner-visuals .trophy-icon{filter:invert(1)}

.credits-banner .icon1 { width: 120px; height: 120px; animation-duration: 20s; animation-delay: -5s; }
.credits-banner .icon2 { width: 90px; height: 90px; animation-duration: 25s; animation-delay: -2s; }
.credits-banner .icon3 { width: 150px; height: 150px; animation-duration: 30s; animation-delay: 0s; }
.credits-banner .icon4 { width: 80px; height: 80px; animation-duration: 22s; animation-delay: -10s; }
.credits-banner .icon5 { width: 110px; height: 110px; animation-duration: 28s; animation-delay: -15s; }

@keyframes float-and-move {
    0% { transform: translate(-150%, 50%) rotate(0deg); }
    25% { transform: translate(0, 0) rotate(90deg); }
    50% { transform: translate(150%, 75%) rotate(180deg); }
    75% { transform: translate(50%, 150%) rotate(270deg); }
    100% { transform: translate(-150%, 50%) rotate(360deg); }
}