/* quirk.bar -- Graffiti Street Art Alley */
:root {
    --concrete: #1C1C1C;
    --brick: #2A2318;
    --blue-wash: #1A1A24;
    --rust: #241C1C;
    --spray-red: #FF3F3F;
    --spray-yellow: #FFE633;
    --spray-green: #33FF99;
    --poster-white: #E8E4DE;
    --shadow-black: #0A0A0A;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.6; color: var(--poster-white); background: var(--concrete); overflow-x: hidden; }

/* Noise overlay */
.noise-overlay { position: absolute; inset: 0; opacity: 0.04; filter: url(#noise); pointer-events: none; z-index: 0; }

/* Tag nav */
.tag-nav {
    position: fixed;
    top: 16px;
    left: 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    color: var(--spray-red);
    letter-spacing: 0.04em;
    transform: rotate(-2deg);
    z-index: 100;
    text-shadow: 0 0 8px rgba(255,63,63,0.3);
}
.tag-nav::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 2px;
    width: 2px;
    height: 12px;
    background: var(--spray-red);
    opacity: 0.35;
    border-radius: 0 0 1px 1px;
}

/* Wall sections */
.wall {
    position: relative;
    min-height: 100vh;
    padding: 60px 40px;
    overflow: hidden;
}
.wall-1 { background: var(--concrete); }
.wall-2 { background: var(--brick); }
.wall-3 { background: var(--blue-wash); }
.wall-4 { background: var(--concrete); }
.wall-5 { background: var(--rust); }

/* Crosshatch background */
.crosshatch-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.04) 40px, rgba(255,255,255,0.04) 41px),
        repeating-linear-gradient(-45deg, transparent, transparent 55px, rgba(255,255,255,0.03) 55px, rgba(255,255,255,0.03) 56px);
}
.crosshatch-dense {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,0.06) 20px, rgba(255,255,255,0.06) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,0.05) 28px, rgba(255,255,255,0.05) 29px),
        repeating-linear-gradient(30deg, transparent, transparent 35px, rgba(255,255,255,0.03) 35px, rgba(255,255,255,0.03) 36px);
}
.crosshatch-max {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,255,255,0.07) 12px, rgba(255,255,255,0.07) 13px),
        repeating-linear-gradient(-45deg, transparent, transparent 16px, rgba(255,255,255,0.06) 16px, rgba(255,255,255,0.06) 17px),
        repeating-linear-gradient(30deg, transparent, transparent 20px, rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 21px),
        repeating-linear-gradient(-20deg, transparent, transparent 25px, rgba(255,255,255,0.03) 25px, rgba(255,255,255,0.03) 26px);
}

/* Spray text */
.spray-text {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 5;
    line-height: 1;
}
.spray-red { color: var(--spray-red); text-shadow: 0 0 8px rgba(255,63,63,0.3); }
.spray-yellow { color: var(--spray-yellow); text-shadow: 0 0 8px rgba(255,230,51,0.3); }
.spray-green { color: var(--spray-green); text-shadow: 0 0 8px rgba(51,255,153,0.3); }
.spray-white { color: #FFFFFF; text-shadow: 0 0 12px rgba(255,255,255,0.2); }

/* Title spray */
.title-spray {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    z-index: 5;
}
#spray-title {
    font-size: 120px;
    transform: rotate(-3deg);
    opacity: 0;
}
.spray-bar {
    font-size: 80px;
    display: block;
    margin-top: -10px;
    margin-left: 40px;
    transform: rotate(2deg);
    opacity: 0;
}

/* Drip SVGs */
.drip-svg { position: relative; z-index: 4; overflow: visible; }
.drip-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: 0.35;
}
.drip-pool { opacity: 0; }
.drip-title { width: 300px; margin-top: -5px; margin-left: -20px; }
.drip-bar { width: 200px; margin-top: -5px; margin-left: 20px; }
.drip-wall2 { width: 400px; position: absolute; z-index: 4; }
.drip-wall3 { width: 300px; position: absolute; z-index: 4; }

/* Drip animation */
.drip-path.animate {
    animation: drip-reveal 0.8s ease-in forwards;
}
@keyframes drip-reveal {
    to { stroke-dashoffset: 0; }
}
.drip-pool.animate {
    animation: pool-appear 0.3s ease-out 0.7s forwards;
}
@keyframes pool-appear {
    to { opacity: 0.35; }
}

/* Paste blocks */
.paste-block {
    background: rgba(0,0,0,0.6);
    padding: 12px 16px;
    max-width: 500px;
    position: relative;
    z-index: 5;
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.paste-block.visible { opacity: 1; transform: translateX(0) rotate(var(--paste-rot, -2deg)); }

.paste-block-1 { --paste-rot: -2deg; margin-top: 30px; margin-left: 15%; }
.paste-block-2 { --paste-rot: 3deg; margin-top: 20px; margin-left: 10%; }
.paste-block-3 { --paste-rot: -1deg; margin-top: 30px; margin-left: 30%; max-width: 340px; }
.paste-block-4 { --paste-rot: 2deg; margin-top: 25px; margin-left: 20%; }

/* Stickers */
.sticker {
    position: absolute;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 14px;
    border: 2px solid #FFFFFF;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
    z-index: 10;
    transform: scale(0);
    transition: transform 0.15s ease-out;
    cursor: default;
}
.sticker.visible { transform: scale(1) rotate(var(--sticker-rot, 5deg)); }
.sticker:hover { transform: scale(1) rotate(calc(var(--sticker-rot, 5deg) + 3deg)) translateY(-4px); box-shadow: 6px 8px 0 rgba(0,0,0,0.5); }

/* Sticker colors and positions */
.sticker-1 { --sticker-rot: 8deg; top: 55%; right: 15%; background: var(--spray-red); color: #FFFFFF; }
.sticker-2 { --sticker-rot: -12deg; top: 65%; right: 30%; background: #FFFFFF; color: var(--concrete); }
.sticker-3 { --sticker-rot: 15deg; top: 70%; left: 10%; background: var(--spray-yellow); color: var(--concrete); font-size: 18px; }
.sticker-4 { --sticker-rot: -6deg; top: 80%; left: 25%; background: var(--spray-green); color: var(--concrete); }

.sticker-5 { --sticker-rot: 10deg; top: 20%; right: 10%; background: #FFFFFF; color: var(--concrete); }
.sticker-6 { --sticker-rot: -8deg; top: 55%; right: 20%; background: var(--spray-red); color: #FFFFFF; }
.sticker-7 { --sticker-rot: 14deg; bottom: 15%; left: 8%; background: var(--spray-yellow); color: var(--concrete); }

.sticker-8 { --sticker-rot: -10deg; top: 15%; right: 12%; background: var(--spray-red); color: #FFFFFF; }
.sticker-9 { --sticker-rot: 7deg; top: 30%; right: 8%; background: #FFFFFF; color: var(--concrete); font-size: 18px; }
.sticker-10 { --sticker-rot: -14deg; bottom: 20%; left: 5%; background: var(--spray-green); color: var(--concrete); }
.sticker-11 { --sticker-rot: 11deg; bottom: 10%; right: 25%; background: var(--spray-yellow); color: var(--concrete); }

.sticker-12 { --sticker-rot: -5deg; top: 10%; left: 8%; background: #FFFFFF; color: var(--concrete); }
.sticker-13 { --sticker-rot: 16deg; top: 20%; right: 5%; background: var(--spray-red); color: #FFFFFF; font-size: 18px; }
.sticker-14 { --sticker-rot: -9deg; top: 50%; right: 10%; background: var(--spray-green); color: var(--concrete); }
.sticker-15 { --sticker-rot: 12deg; bottom: 25%; left: 5%; background: var(--spray-yellow); color: var(--concrete); }
.sticker-16 { --sticker-rot: -13deg; bottom: 15%; left: 30%; background: #FFFFFF; color: var(--concrete); }
.sticker-17 { --sticker-rot: 6deg; bottom: 8%; right: 15%; background: var(--spray-red); color: #FFFFFF; }

.sticker-exit {
    --sticker-rot: 0deg;
    position: relative;
    display: inline-block;
    margin-top: 40px;
    background: #FFFFFF;
    color: var(--concrete);
    font-size: 14px;
    left: 50%;
    transform: scale(0) translateX(-50%);
}
.sticker-exit.visible { transform: scale(1) translateX(-50%) rotate(0deg); }
.sticker-exit:hover { transform: scale(1) translateX(-50%) rotate(3deg) translateY(-4px); }

/* Caveat tags and arrows */
.caveat-tag {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 24px;
    position: absolute;
    z-index: 8;
    color: var(--spray-yellow);
}
.caveat-arrow {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 32px;
    position: absolute;
    z-index: 8;
    color: var(--spray-yellow);
    opacity: 0.4;
}
.arrow-down { bottom: 60px; left: 50%; transform: translateX(-50%); }
.tag-wall2 { bottom: 30px; right: 40px; transform: rotate(8deg); color: var(--spray-red); }
.tag-wall3 { top: 40px; right: 30px; transform: rotate(-12deg); }
.tag-wall4 { bottom: 40px; right: 60px; transform: rotate(12deg); font-size: 28px; }

/* Arrow doodles */
.arrow-doodle {
    position: absolute;
    z-index: 7;
    opacity: 0.5;
}
.arrow-1 { width: 60px; top: 35%; left: 60%; }
.arrow-2 { width: 50px; top: 60%; left: 15%; }
.arrow-3 { width: 60px; bottom: 30%; right: 10%; }

/* Wall-specific heading positions */
.wall2-heading { font-size: 80px; transform: rotate(4deg); margin-left: -20px; margin-top: 80px; opacity: 0; }
.wall3-heading-1 { font-size: 72px; transform: rotate(6deg); margin-left: 40px; margin-top: 60px; opacity: 0; }
.wall3-heading-2 { font-size: 72px; transform: rotate(-3deg); margin-left: 120px; margin-top: -10px; opacity: 0; }
.wall4-heading-1 { font-size: 64px; transform: rotate(-4deg); margin-left: -30px; margin-top: 40px; opacity: 0; }
.wall4-heading-2 { font-size: 64px; transform: rotate(5deg); margin-left: 80px; margin-top: -5px; opacity: 0; }
.wall4-heading-3 { font-size: 64px; transform: rotate(-2deg); margin-left: 160px; margin-top: -5px; opacity: 0; }

.wall5-heading {
    font-size: 96px;
    text-align: center;
    margin-top: 35vh;
    transform: none;
    opacity: 0;
}

/* Slide animations */
[data-slide] {
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
[data-slide="left"] { transform: translateX(-80px) rotate(var(--heading-rot, 0deg)); }
[data-slide="right"] { transform: translateX(80px) rotate(var(--heading-rot, 0deg)); }
[data-slide].visible { opacity: 1; }
.wall2-heading.visible { transform: translateX(0) rotate(4deg); opacity: 1; }
.wall3-heading-1.visible { transform: translateX(0) rotate(6deg); opacity: 1; }
.wall3-heading-2.visible { transform: translateX(0) rotate(-3deg); opacity: 1; }
.wall4-heading-1.visible { transform: translateX(0) rotate(-4deg); opacity: 1; }
.wall4-heading-2.visible { transform: translateX(0) rotate(5deg); opacity: 1; }
.wall4-heading-3.visible { transform: translateX(0) rotate(-2deg); opacity: 1; }
.wall5-heading.visible { opacity: 1; transform: none; }

/* Spray overspray particles */
.overspray {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
}

@media (max-width: 768px) {
    #spray-title { font-size: 72px; }
    .spray-bar { font-size: 48px; }
    .wall2-heading { font-size: 48px; }
    .wall3-heading-1, .wall3-heading-2 { font-size: 44px; }
    .wall4-heading-1, .wall4-heading-2, .wall4-heading-3 { font-size: 40px; }
    .wall5-heading { font-size: 56px; }
    .paste-block { max-width: 90%; margin-left: 5% !important; }
    .wall { padding: 40px 20px; }
    .sticker { font-size: 11px; }
}