/* daitoua.com - Graffiti Walk Horizontal Scroll */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #1a1018;
    color: #f2ece4;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    line-height: 1.65;
}

/* ===== SCROLL WRAPPER ===== */
#scroll-wrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

#horizontal-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100vh;
    will-change: transform;
}

/* ===== PANEL BASE ===== */
.panel {
    min-width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* ===== PANEL 1: THE WALL (HERO) ===== */
.panel-wall {
    background: #1a1018;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sunburst-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200vmax;
    height: 200vmax;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        #2d2233 0deg 5deg, #1a1018 5deg 15deg,
        #2d2233 15deg 20deg, #1a1018 20deg 30deg,
        #2d2233 30deg 35deg, #1a1018 35deg 45deg,
        #2d2233 45deg 50deg, #1a1018 50deg 60deg,
        #2d2233 60deg 65deg, #1a1018 65deg 75deg,
        #2d2233 75deg 80deg, #1a1018 80deg 90deg,
        #2d2233 90deg 95deg, #1a1018 95deg 105deg,
        #2d2233 105deg 110deg, #1a1018 110deg 120deg,
        #2d2233 120deg 125deg, #1a1018 125deg 135deg,
        #2d2233 135deg 140deg, #1a1018 140deg 150deg,
        #2d2233 150deg 155deg, #1a1018 155deg 165deg,
        #2d2233 165deg 170deg, #1a1018 170deg 180deg,
        #2d2233 180deg 185deg, #1a1018 185deg 195deg,
        #2d2233 195deg 200deg, #1a1018 200deg 210deg,
        #2d2233 210deg 215deg, #1a1018 215deg 225deg,
        #2d2233 225deg 230deg, #1a1018 230deg 240deg,
        #2d2233 240deg 245deg, #1a1018 245deg 255deg,
        #2d2233 255deg 260deg, #1a1018 260deg 270deg,
        #2d2233 270deg 275deg, #1a1018 275deg 285deg,
        #2d2233 285deg 290deg, #1a1018 290deg 300deg,
        #2d2233 300deg 305deg, #1a1018 305deg 315deg,
        #2d2233 315deg 320deg, #1a1018 320deg 330deg,
        #2d2233 330deg 335deg, #1a1018 335deg 345deg,
        #2d2233 345deg 350deg, #1a1018 350deg 360deg
    );
    opacity: 0.5;
    animation: rotateSunburst 360s linear infinite;
    z-index: 1;
}

@keyframes rotateSunburst {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.concrete-noise {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    z-index: 2;
    pointer-events: none;
}

.spray-halo {
    position: absolute;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
}

.spray-halo-1 {
    width: 500px;
    height: 400px;
    top: 30%;
    left: 35%;
    background: radial-gradient(ellipse, rgba(232,69,69,0.15) 0%, transparent 70%);
}

.spray-halo-2 {
    width: 400px;
    height: 350px;
    top: 25%;
    left: 45%;
    background: radial-gradient(ellipse, rgba(232,120,48,0.1) 0%, transparent 70%); /* #e87830 */
}

.spray-halo-3 {
    width: 350px;
    height: 300px;
    top: 40%;
    left: 40%;
    background: radial-gradient(ellipse, rgba(245,166,35,0.08) 0%, transparent 70%);
}

.panel-wall-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

.hero-title {
    font-family: 'Bungee Shade', cursive;
    font-size: clamp(5rem, 12vw, 11rem);
    color: #e84545;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
}

.hero-annotation {
    display: block;
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(0.75rem, 1vw, 1rem);
    color: #f5a623;
    transform: rotate(-5deg);
    margin-top: 1rem;
}

.scroll-arrow {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    animation: pulseArrow 2s ease-in-out infinite;
}

@keyframes pulseArrow {
    0%, 100% { transform: translateX(-50%) translateX(0); opacity: 1; }
    50% { transform: translateX(-50%) translateX(-12px); opacity: 0.5; }
}

/* ===== PANEL 2: THE PASTE-UP ===== */
.panel-paste {
    background: #2d2233;
    position: relative;
}

.paste-card {
    position: absolute;
    width: 280px;
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    z-index: 5;
    opacity: 0;
    transform: translateY(40px);
}

.paste-card.visible {
    opacity: 1;
    transform: translateY(0) rotate(var(--rotation, 0deg));
}

.paste-card:hover {
    transform: translateY(-4px) rotate(var(--rotation, 0deg));
    box-shadow: 8px 8px 0 #1a1018;
}

.paste-card-1 {
    top: 12%;
    left: 8%;
    --rotation: -2deg;
    clip-path: polygon(2% 0%, 98% 1%, 100% 3%, 99% 97%, 97% 100%, 3% 99%, 0% 97%, 1% 2%);
}

.paste-card-2 {
    top: 15%;
    left: 35%;
    --rotation: 1.5deg;
    clip-path: polygon(1% 2%, 97% 0%, 100% 2%, 99% 98%, 98% 100%, 2% 99%, 0% 98%, 0% 1%);
}

.paste-card-3 {
    top: 50%;
    left: 15%;
    --rotation: -1deg;
    clip-path: polygon(0% 1%, 99% 0%, 100% 1%, 100% 99%, 98% 100%, 1% 100%, 0% 98%, 0% 2%);
}

.paste-card-4 {
    top: 8%;
    left: 62%;
    --rotation: 2.5deg;
    clip-path: polygon(3% 0%, 100% 2%, 99% 100%, 0% 98%);
}

.paste-card-5 {
    top: 48%;
    left: 55%;
    --rotation: -1.5deg;
    clip-path: polygon(1% 1%, 98% 0%, 100% 2%, 100% 100%, 2% 99%, 0% 97%);
}

.paste-card-inner {
    padding: 1.5rem;
    box-shadow: 4px 4px 0 #1a1018;
}

.leather-surface {
    background-color: #8b5e3c;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    background-blend-mode: multiply;
}

.concrete-surface {
    background-color: #2d2233;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");
    border: 1px solid rgba(242,236,228,0.1);
}

.paste-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    letter-spacing: 0.04em;
    color: #f2ece4;
    margin-bottom: 0.5rem;
}

.paste-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: #9a8e82;
    line-height: 1.65;
}

.drip-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 10;
    pointer-events: none;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s ease-out;
}

.drip-container.visible {
    clip-path: inset(0);
}

.drip-svg {
    width: 100%;
    height: 100%;
}

/* ===== PANEL 3: THE TAG ===== */
.panel-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.leather-full-bg {
    position: absolute;
    inset: 0;
    background-color: #8b5e3c;
    z-index: 1;
}

.leather-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    z-index: 2;
    pointer-events: none;
}

.leather-creases {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(82deg, rgba(0,0,0,0.08) 0%, transparent 2%),
        linear-gradient(97deg, rgba(0,0,0,0.08) 0%, transparent 3%),
        linear-gradient(174deg, rgba(0,0,0,0.06) 0%, transparent 1.5%),
        linear-gradient(263deg, rgba(0,0,0,0.05) 0%, transparent 2.5%);
    z-index: 3;
    pointer-events: none;
}

.tag-motif {
    width: clamp(250px, 50vw, 400px);
    height: clamp(250px, 50vw, 400px);
    position: relative;
    z-index: 5;
}

.motif-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2s ease-out;
}

.panel-tag.active .motif-path {
    stroke-dashoffset: 0;
}

.tag-caption {
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: #1a1018;
    margin-top: 2rem;
    position: relative;
    z-index: 5;
    transform: rotate(-2deg);
}

/* ===== PANEL 4: THE THROW-UP ===== */
.panel-throwup {
    background: #1a1018;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.throwup-text-container {
    position: relative;
    z-index: 5;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.throwup-text {
    font-family: 'Bungee Shade', cursive;
    font-size: clamp(6rem, 15vw, 14rem);
    color: #e84545;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    will-change: transform;
    transition: color 0.5s ease-out;
}

.speed-lines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 6px,
        rgba(232,120,48,0.06) 6px,
        rgba(232,120,48,0.06) 7px
    );
    z-index: 2;
    pointer-events: none;
}

/* ===== PANEL 5: THE STICKER SLAP ===== */
.panel-sticker {
    background: #2d2233;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.speed-lines-bg {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 6px,
        rgba(232,120,48,0.04) 6px,
        rgba(232,120,48,0.04) 7px
    );
    z-index: 1;
    pointer-events: none;
}

.sticker-field {
    position: relative;
    width: 80vw;
    height: 80vh;
    z-index: 5;
}

.sticker {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(45deg, #2d2233 25%, transparent 25%, transparent 75%, #2d2233 75%),
        linear-gradient(45deg, #2d2233 25%, transparent 25%, transparent 75%, #2d2233 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-color: #1a1018;
    border: 2px solid #e87830;
    opacity: 0;
    transform: scale(0) rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
    cursor: default;
    box-shadow: inset 0 0 20px rgba(232,69,69,0.15);
}

.sticker.visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.sticker:hover {
    transform: scale(1.15) rotate(10deg) !important;
}

.sticker span {
    font-family: 'Archivo Black', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: #f2ece4;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 8px rgba(232,69,69,0.5);
}

/* Sticker positions - scattered layout */
.sticker:nth-child(1) { top: 5%; left: 10%; }
.sticker:nth-child(2) { top: 15%; left: 30%; }
.sticker:nth-child(3) { top: 5%; left: 55%; }
.sticker:nth-child(4) { top: 20%; left: 75%; }
.sticker:nth-child(5) { top: 35%; left: 5%; }
.sticker:nth-child(6) { top: 40%; left: 25%; }
.sticker:nth-child(7) { top: 30%; left: 50%; }
.sticker:nth-child(8) { top: 38%; left: 70%; }
.sticker:nth-child(9) { top: 55%; left: 12%; }
.sticker:nth-child(10) { top: 60%; left: 38%; }
.sticker:nth-child(11) { top: 50%; left: 60%; }
.sticker:nth-child(12) { top: 58%; left: 82%; }
.sticker:nth-child(13) { top: 75%; left: 8%; }
.sticker:nth-child(14) { top: 78%; left: 32%; }
.sticker:nth-child(15) { top: 72%; left: 55%; }
.sticker:nth-child(16) { top: 80%; left: 78%; }

/* ===== PANEL 6: THE FADE ===== */
.panel-fade {
    background: linear-gradient(to right, #2d2233, #1a1018);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fade-signature {
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(3rem, 8vw, 6rem);
    color: #9a8e82;
    opacity: 0;
    transition: opacity 1.5s ease-out;
}

.fade-signature.visible {
    opacity: 0.6;
}

/* ===== PROGRESS BAR ===== */
#progress-bar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 100;
    display: flex;
    align-items: flex-end;
}

#progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: #e84545;
    transition: background-color 0.3s ease;
    z-index: 101;
}

#progress-bar.complete {
    background: #f5a623;
}

.panel-dots {
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    z-index: 102;
    pointer-events: none;
}

.panel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9a8e82;
    opacity: 0.4;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.panel-dot.active {
    opacity: 1;
    background: #e84545;
}

/* ===== PANEL EDGE GLOW ===== */
.panel::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(232,120,48,0.06); /* edge-glow #e87830 */
    border-right: 1px solid #5c2e1a;
    pointer-events: none;
    z-index: 50;
}

/* ===== MOBILE: VERTICAL SCROLL FALLBACK ===== */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    #scroll-wrapper {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        scroll-snap-type: y mandatory;
    }

    #horizontal-track {
        flex-direction: column;
        height: auto;
    }

    .panel {
        min-width: 100vw;
        width: 100vw;
        min-height: 100vh;
        scroll-snap-align: start;
    }

    .paste-card {
        position: relative;
        width: 85%;
        margin: 1rem auto;
        top: auto;
        left: auto;
    }

    .sticker-field {
        width: 90vw;
        height: 80vh;
    }

    .sticker {
        width: 80px;
        height: 80px;
    }

    .sticker span {
        font-size: 0.6rem;
    }

    .hero-title {
        font-size: clamp(3rem, 15vw, 6rem);
    }

    .throwup-text {
        font-size: clamp(3rem, 12vw, 6rem);
    }

    #progress-bar-container {
        display: none;
    }
}