/* monopole.boo -- Graffiti organic-flow street art */
/* Palette: #FF2D7B (Spray Pink), #B8FF10 (Electric Lime), #8B2BFF (UV Violet), #F5F2EE (White Wall), #1A1A1A (Asphalt), #FFD600 (Caution Yellow), #8A8580 (Concrete), #0D0D0D (Matte Black) */

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

:root{
    --pink:#FF2D7B;
    --lime:#B8FF10;
    --violet:#8B2BFF;
    --wall:#F5F2EE;
    --asphalt:#1A1A1A;
    --yellow:#FFD600;
    --concrete:#8A8580;
    --black:#0D0D0D;
}

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

body{
    background:var(--wall);
    color:var(--asphalt);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:400;
    font-size:1rem;
    line-height:1.65;
    overflow-x:hidden;
}

/* Wall texture */
.wall-texture{
    position:absolute;
    inset:0;
    background:repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(138,133,128,0.04) 3px,
        rgba(138,133,128,0.04) 4px
    );
    pointer-events:none;
    z-index:0;
}

/* Layers */
.layer{
    position:relative;
    min-height:100svh;
    overflow:hidden;
    padding:clamp(2rem,4vw,4rem);
}

/* ─── Layer 1: The Bomb ─── */
.layer-bomb{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100svh;
}

.bomb-stack{
    position:relative;
    z-index:2;
}

.bomb-text{
    font-family:'Anton',sans-serif;
    font-weight:400;
    font-size:clamp(4rem,14vw,16rem);
    text-transform:uppercase;
    letter-spacing:-0.02em;
    line-height:0.9;
    display:block;
}

.bomb-fg{
    color:var(--pink);
    position:relative;
    z-index:3;
    transform:rotate(3deg);
}

.bomb-bg-2{
    position:absolute;
    top:0;left:0;
    color:var(--violet);
    opacity:0.3;
    z-index:2;
    transform:rotate(-2deg) translate(-4px,6px);
}

.bomb-bg-3{
    position:absolute;
    top:0;left:0;
    color:var(--lime);
    opacity:0.15;
    z-index:1;
    transform:rotate(5deg) translate(8px,-8px);
    font-size:clamp(2.8rem,10vw,11rem);
}

.boo-tag{
    position:absolute;
    bottom:10%;right:8%;
    font-family:'Permanent Marker',cursive;
    font-size:clamp(2rem,5vw,4rem);
    color:var(--black);
    transform:rotate(-8deg);
    z-index:4;
}

/* ─── Layer 2: The Statement ─── */
.layer-statement{
    display:flex;
    flex-direction:column;
    gap:0;
    padding-top:6rem;
    padding-bottom:6rem;
}

.paste-block{
    position:relative;
    z-index:2;
    background:var(--wall);
    padding:clamp(1.5rem,3vw,2.5rem);
    clip-path:polygon(2% 0%,100% 1%,98% 100%,0% 97%);
    box-shadow:4px 4px 0 var(--black);
    max-width:600px;
    margin-bottom:-3rem;
}

.paste-1{transform:rotate(-2deg);margin-left:5%}
.paste-2{transform:rotate(3deg);margin-left:25%}
.paste-3{transform:rotate(-1deg);margin-left:10%}

.paste-heading{
    font-family:'Anton',sans-serif;
    font-weight:400;
    font-size:clamp(1.5rem,4vw,3rem);
    text-transform:uppercase;
    color:var(--asphalt);
    margin-bottom:0.75rem;
    line-height:1.1;
}

.paste-text{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:400;
    font-size:1rem;
    line-height:1.65;
    color:var(--asphalt);
}

/* Tag texts */
.tag-text{
    font-family:'Permanent Marker',cursive;
    display:block;
    z-index:3;
    position:relative;
}

.tag-1{
    font-size:clamp(2rem,6vw,5rem);
    color:var(--lime);
    transform:rotate(6deg);
    margin-left:55%;
    margin-top:-1rem;
    margin-bottom:2rem;
}

.tag-2{
    font-size:clamp(1.5rem,4vw,3.5rem);
    color:var(--violet);
    transform:rotate(-4deg);
    margin-left:60%;
    margin-bottom:2rem;
}

.tag-3{
    font-size:clamp(2.5rem,7vw,6rem);
    color:var(--yellow);
    transform:rotate(3deg);
    margin-left:40%;
    margin-top:1rem;
}

/* ─── Layer 3: The Throw-Up ─── */
.layer-throwup{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
}

.throwup-word{
    font-family:'Anton',sans-serif;
    font-weight:400;
    font-size:clamp(5rem,15vw,20rem);
    text-transform:uppercase;
    line-height:0.85;
    position:relative;
    z-index:2;
    mix-blend-mode:multiply;
}

.throwup-1{color:var(--pink);transform:rotate(2deg)}
.throwup-2{color:var(--lime);transform:rotate(-3deg);margin-top:-2rem}
.throwup-3{color:var(--violet);transform:rotate(1deg);margin-top:-2rem}

/* ─── Layer 4: The Fade ─── */
.layer-fade{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:60vh;
}

.fade-domain{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--concrete);
    text-align:center;
    letter-spacing:0.05em;
    z-index:2;
    position:relative;
}

/* Reveal animation */
[data-reveal]{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 500ms ease,transform 500ms ease;
}

[data-reveal].revealed{
    opacity:1;
    transform:translateY(0);
}

.paste-1[data-reveal].revealed{transform:rotate(-2deg)}
.paste-2[data-reveal].revealed{transform:rotate(3deg)}
.paste-3[data-reveal].revealed{transform:rotate(-1deg)}

.throwup-1[data-reveal].revealed{transform:rotate(2deg)}
.throwup-2[data-reveal].revealed{transform:rotate(-3deg)}
.throwup-3[data-reveal].revealed{transform:rotate(1deg)}

/* Glitch */
@keyframes glitchBands{
    0%{clip-path:inset(0)}
    20%{clip-path:inset(10% 0 60% 0);transform:translateX(10px)}
    40%{clip-path:inset(40% 0 20% 0);transform:translateX(-15px)}
    60%{clip-path:inset(70% 0 5% 0);transform:translateX(8px)}
    80%{clip-path:inset(20% 0 50% 0);transform:translateX(-5px)}
    100%{clip-path:inset(0);transform:translateX(0)}
}

.glitch-fire{animation:glitchBands 200ms steps(5) forwards}

/* Responsive */
@media(max-width:768px){
    .paste-block{max-width:100%;margin-left:0 !important}
    .tag-text{margin-left:20% !important}
    .throwup-word{mix-blend-mode:normal}
}

@media(prefers-reduced-motion:reduce){
    [data-reveal]{opacity:1;transform:none;transition:none}
    .glitch-fire{animation:none}
}