/* judge.bar -- graffiti-futuristic chrome */
/* Palette: #C8C8C8 (chrome), #FF2D7B (neon magenta), #00E5FF (electric cyan), #1A1A1F (concrete dark), #2A2A30 (tagged gray), #F0F0F0 (mirror white), #505058 (graphite depth), #E0DDD8 (spray white) */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
    font-size:16px;
    scroll-behavior:smooth;
}

body{
    background:#1A1A1F;
    color:#E0DDD8;
    font-family:'Nunito',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.7;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Concrete texture */
body::before{
    content:'';
    position:fixed;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    background-size:200px;
    opacity:0.06;
    pointer-events:none;
    z-index:0;
}

/* Chrome sphere */
.chrome-sphere{
    position:fixed;
    bottom:2rem;
    right:2rem;
    width:40px;
    height:40px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#F0F0F0 0%,#C8C8C8 30%,#505058 70%,#2A2A30 100%);
    z-index:100;
    box-shadow:0 0 20px rgba(255,45,123,0.2);
    transition:box-shadow 0.3s ease;
}

/* Sections */
.section{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem);
    position:relative;
    z-index:1;
}

/* Chrome text effect */
.chrome-text{
    background:linear-gradient(180deg,#F0F0F0 0%,#C8C8C8 30%,#F0F0F0 50%,#808080 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Burner (Hero) */
.burner-piece{
    text-align:center;
}

.chrome-title{
    font-family:'Bungee',cursive;
    font-size:clamp(4rem,12vw,14rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:linear-gradient(180deg,#F0F0F0 0%,#C8C8C8 30%,#F0F0F0 50%,#808080 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 0 30px rgba(255,45,123,0.15));
    line-height:1;
}

.bar-label{
    font-family:'Bungee',cursive;
    font-size:clamp(1.5rem,4vw,4rem);
    letter-spacing:0.2em;
    color:#00E5FF;
    display:block;
    margin-top:0.5rem;
}

.burner-sub{
    font-family:'Nunito',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:#505058;
    margin-top:1.5rem;
    letter-spacing:0.05em;
}

/* Fill section */
.section-fill{
    gap:3rem;
}

.flow-block{
    max-width:640px;
    background:#2A2A30;
    padding:clamp(2rem,4vw,3rem);
    clip-path:polygon(0 0,100% 4%,96% 100%,3% 97%);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.flow-block.revealed{
    opacity:1;
    transform:translateY(0);
}

.section-heading{
    font-family:'Bungee',cursive;
    font-size:clamp(2rem,5vw,5rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    margin-bottom:1.5rem;
    line-height:1.1;
}

.body-text{
    color:#E0DDD8;
}

/* Throw-up section */
.section-throwup{
    gap:2rem;
    flex-wrap:wrap;
    flex-direction:row;
    max-width:900px;
    margin:0 auto;
}

.throwup-piece{
    background:#2A2A30;
    border:3px solid #FF2D7B;
    padding:clamp(1.5rem,3vw,2.5rem);
    box-shadow:0 0 20px rgba(255,45,123,0.2);
    opacity:0;
    transform:rotate(var(--enter-angle,0deg)) translateX(-30px);
    transition:opacity 0.5s ease,transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

.throwup-piece.revealed{
    opacity:1;
    transform:rotate(0deg) translateX(0);
}

.bubble-text{
    font-family:'Bungee',cursive;
    font-size:clamp(1.2rem,2.5vw,2rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    background:linear-gradient(180deg,#F0F0F0 0%,#C8C8C8 50%,#808080 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    line-height:1.2;
}

/* Fade section */
.section-fade{
    background:linear-gradient(180deg,#1A1A1F 0%,#12121A 100%);
}

.fade-content{
    max-width:560px;
    text-align:center;
    opacity:0;
    transform:translateY(16px);
    transition:opacity 1s ease,transform 1s ease;
}

.fade-content.revealed{
    opacity:1;
    transform:translateY(0);
}

.fade-statement{
    font-family:'Nunito',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:#505058;
    line-height:1.8;
}

.fade-domain{
    font-family:'Bungee',cursive;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:#FF2D7B;
    margin-top:2rem;
    text-shadow:0 0 20px rgba(255,45,123,0.3);
}

/* Responsive */
@media(max-width:768px){
    .section-throwup{
        flex-direction:column;
        align-items:center;
    }
    .flow-block{
        clip-path:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .flow-block,.throwup-piece,.fade-content{
        opacity:1;transform:none;transition:none;
    }
}