/* ============================================
   jeongchi.boo - Political Street Art Wall
   Concrete wall backdrop with wheat-pasted posters
   ============================================ */

:root {
    --concrete: #c0b8a8;
    --paper: #f0ece0;
    --dark: #1a1a1a;
    --charcoal: #2a2828;
    --tan: #d8d0c0;
    --gold: #e8c820;
    --red: #d42020;
    --blue: #2060c0;
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--concrete);
    color: var(--dark);
    font-size: 0.95rem;
    line-height: 1.7;
    position: relative;
}

/* Concrete Wall Texture Background */
.wall {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 60px 20px;
}

.wall-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100' height='100' fill='%23c0b8a8' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
    background-attachment: fixed;
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}

/* Hero Section */
.hero {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-bottom: 80px;
    padding: 40px 20px;
}

.stencil-text {
    font-family: 'Anton', sans-serif;
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dark);
    line-height: 1;
    text-shadow:
        3px 3px 0px rgba(0, 0, 0, 0.3),
        -2px -2px 0px rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
    position: relative;
    word-break: break-word;
}

/* Stencil effect with broken letterforms */
.stencil-text::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: transparent;
    background: linear-gradient(135deg, var(--dark) 0%, var(--charcoal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    clip-path: polygon(
        0% 0%, 8% 0%, 8% 5%, 15% 5%, 15% 0%, 25% 0%, 25% 8%, 20% 8%, 20% 15%,
        30% 15%, 30% 0%, 40% 0%, 40% 10%, 35% 10%, 35% 20%, 45% 20%, 45% 5%,
        60% 5%, 60% 15%, 55% 15%, 55% 25%, 70% 25%, 70% 8%, 65% 8%, 65% 0%,
        75% 0%, 75% 12%, 80% 12%, 80% 0%, 90% 0%, 90% 20%, 95% 20%, 95% 0%,
        100% 0%, 100% 30%, 92% 30%, 92% 25%, 85% 25%, 85% 35%, 75% 35%, 75% 30%,
        60% 30%, 60% 38%, 50% 38%, 50% 30%, 40% 30%, 40% 40%, 30% 40%, 30% 32%,
        20% 32%, 20% 42%, 10% 42%, 10% 35%, 0% 35%, 0% 100%, 100% 100%, 100% 50%,
        0% 50%
    );
    z-index: -1;
    opacity: 0;
}

.tag {
    font-family: 'Permanent Marker', 'Comic Sans MS', cursive;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    color: var(--red);
    text-transform: lowercase;
    letter-spacing: 2px;
    margin-top: 10px;
    opacity: 0.9;
    transform: rotate(-3deg) skewX(-5deg);
    animation: tagFlicker 2s ease-in-out infinite;
}

@keyframes tagFlicker {
    0%, 100% { transform: rotate(-3deg) skewX(-5deg); }
    50% { transform: rotate(-2.5deg) skewX(-4.5deg); }
}

/* Poster Collage Layout */
.poster-collage {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 0;
    perspective: 1000px;
}

.poster {
    position: relative;
    background-color: var(--paper);
    padding: 24px;
    width: clamp(250px, 90vw, 380px);
    min-height: 300px;
    transform: rotate(var(--rot));
    box-shadow:
        4px 4px 12px rgba(0, 0, 0, 0.25),
        8px 8px 24px rgba(0, 0, 0, 0.15);
    border: 2px solid var(--charcoal);

    /* Torn paper edges effect */
    clip-path: polygon(
        0% 2%, 2% 0%, 5% 1%, 8% 0%, 12% 1%, 15% 0%, 18% 2%, 22% 1%, 25% 0%,
        28% 1%, 32% 0%, 35% 2%, 38% 1%, 42% 0%, 45% 1%, 48% 0%, 52% 2%, 55% 0%,
        58% 1%, 62% 0%, 65% 2%, 68% 1%, 72% 0%, 75% 1%, 78% 0%, 82% 2%, 85% 0%,
        88% 1%, 92% 0%, 95% 2%, 98% 1%, 100% 0%,
        100% 3%, 99% 8%, 100% 12%, 99% 18%, 100% 22%, 99% 28%, 100% 32%,
        99% 38%, 100% 42%, 99% 48%, 100% 52%, 99% 58%, 100% 62%, 99% 68%,
        100% 72%, 99% 78%, 100% 82%, 99% 88%, 100% 92%, 98% 98%, 100% 100%,
        95% 99%, 92% 100%, 88% 99%, 85% 100%, 82% 99%, 78% 100%, 75% 99%,
        72% 100%, 68% 99%, 65% 100%, 62% 99%, 58% 100%, 52% 99%, 48% 100%,
        42% 99%, 38% 100%, 32% 99%, 28% 100%, 22% 99%, 18% 100%, 12% 99%,
        8% 100%, 5% 99%, 2% 100%, 0% 98%, 1% 92%, 0% 88%, 1% 82%, 0% 78%,
        1% 72%, 0% 68%, 1% 62%, 0% 58%, 1% 52%, 0% 48%, 1% 42%, 0% 38%,
        1% 32%, 0% 28%, 1% 22%, 0% 18%, 1% 12%, 0% 8%, 2% 5%
    );

    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    animation: posterDrop 0.6s ease-out backwards;
}

@keyframes posterDrop {
    0% {
        opacity: 0;
        transform: translateY(-40px) rotate(var(--rot));
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(var(--rot));
    }
}

.poster:nth-child(1) { animation-delay: 0.1s; }
.poster:nth-child(2) { animation-delay: 0.2s; }
.poster:nth-child(3) { animation-delay: 0.3s; }
.poster:nth-child(4) { animation-delay: 0.4s; }
.poster:nth-child(5) { animation-delay: 0.5s; }
.poster:nth-child(6) { animation-delay: 0.6s; }

.poster:hover {
    transform: rotate(var(--rot)) translateY(-8px) scale(1.02);
    box-shadow:
        6px 6px 16px rgba(0, 0, 0, 0.35),
        12px 12px 32px rgba(0, 0, 0, 0.2);
}

.poster-content {
    position: relative;
    z-index: 2;
}

.headline {
    font-family: 'Anton', sans-serif;
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--charcoal);
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
}

.commentary {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 0.95rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.6;
    font-style: italic;
    opacity: 0.85;
}

.red-stamp {
    display: inline-block;
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: 'Anton', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--red);
    border: 3px solid var(--red);
    padding: 4px 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transform: rotate(-15deg);
    opacity: 0.8;
    z-index: 3;
}

/* Scattered Graffiti Tags */
.graffiti-tags {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
}

.tag-scrawl {
    position: fixed;
    font-family: 'Permanent Marker', 'Comic Sans MS', cursive;
    font-size: clamp(0.9rem, 3vw, 1.8rem);
    color: var(--red);
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.05em;
    opacity: 0.5;
    transform: rotate(-8deg) skewX(-5deg);
    white-space: nowrap;
    text-shadow:
        1px 1px 0px rgba(255, 255, 255, 0.3),
        -1px -1px 0px rgba(0, 0, 0, 0.2);
    animation: tagBounce 3s ease-in-out infinite;
}

@keyframes tagBounce {
    0%, 100% { transform: rotate(-8deg) skewX(-5deg) translateY(0); }
    50% { transform: rotate(-8deg) skewX(-5deg) translateY(-4px); }
}

.tag-scrawl:nth-child(1) { animation-delay: 0s; }
.tag-scrawl:nth-child(2) { animation-delay: 0.5s; }
.tag-scrawl:nth-child(3) { animation-delay: 1s; }
.tag-scrawl:nth-child(4) { animation-delay: 1.5s; }

/* Responsive Design */
@media (max-width: 768px) {
    .wall {
        padding: 40px 15px;
    }

    .poster-collage {
        flex-direction: column;
        align-items: center;
    }

    .poster {
        width: 90vw;
        max-width: 320px;
    }

    .headline {
        font-size: 1.4rem;
    }

    .stencil-text {
        font-size: clamp(2rem, 6vw, 4rem);
    }

    .tag-scrawl {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .wall {
        padding: 30px 10px;
    }

    .hero {
        margin-bottom: 50px;
    }

    .poster {
        padding: 16px;
        min-height: 250px;
    }

    .poster-collage {
        gap: 20px;
    }
}

/* Footer with Metadata */
.wall-footer {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: 100px;
    padding: 40px 20px 20px;
    border-top: 2px dashed var(--charcoal);
}

.metadata {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--charcoal);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    opacity: 0.6;
}

/* Print Styles (Hide animations) */
@media print {
    .wall-texture {
        display: none;
    }

    .poster,
    .tag-scrawl {
        animation: none;
    }

    body {
        background-color: white;
    }

    .poster {
        background-color: white;
        page-break-inside: avoid;
    }
}