/* pzz.lu -- Memphis Design Riot */
:root {
    --yellow: #FFD23F;
    --pink: #EE4266;
    --green: #0EAD69;
    --teal: #3BCEAC;
    --navy: #1A1A2E;
    --white: #FFFFFF;
    --warm-gray: #F5F0EB;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--navy); background: var(--white); overflow-x: hidden; }

/* Side navigation */
.side-nav { position: fixed; left: 0; top: 0; width: 60px; height: 100vh; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; z-index: 100; }
.nav-icon { width: 24px; height: 24px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-icon:hover { transform: scale(3); }
.nav-icon svg { width: 100%; height: 100%; }

/* Letter scatter opening */
.letter-scatter { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; background: var(--white); overflow: hidden; flex-wrap: wrap; gap: 16px; padding: 60px 80px; }
.letter-shape { display: flex; align-items: center; justify-content: center; opacity: 0; }
.scatter-letter { font-family: 'Bungee', sans-serif; font-size: 72px; color: var(--white); text-transform: uppercase; }

.letter-p { width: 120px; height: 120px; border-radius: 50%; background: var(--pink); }
.letter-z1 { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 110px solid var(--yellow); position: relative; }
.letter-z1 .scatter-letter { position: absolute; top: 30px; color: var(--navy); }
.letter-z2 { width: 110px; height: 110px; background: var(--green); }
.letter-dot { width: 80px; height: 80px; background: var(--teal); transform: rotate(45deg); }
.letter-dot .scatter-letter { transform: rotate(-45deg); }
.letter-l { width: 120px; height: 100px; background: var(--pink); clip-path: polygon(0% 0%, 30% 0%, 30% 50%, 70% 50%, 70% 0%, 100% 0%, 100% 100%, 0% 100%); display: flex; align-items: center; justify-content: center; }
.letter-u { width: 110px; height: 110px; border-radius: 50% 50% 30% 30%; background: var(--yellow); }
.letter-u .scatter-letter { color: var(--navy); }

.letter-shape.entered { opacity: 1; animation: bounce-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
@keyframes bounce-in { 0% { transform: scale(0.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.zigzag-intro { position: absolute; bottom: 40px; left: 0; right: 0; }
.zigzag-intro svg { width: 100%; height: 24px; }
.zigzag-draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; }
.zigzag-draw.drawn { animation: draw-zig 0.6s ease-out forwards; }
@keyframes draw-zig { to { stroke-dashoffset: 0; } }

/* Color sections */
.color-section { position: relative; padding: 80px 100px; overflow: hidden; }
.section-yellow { background: var(--yellow); min-height: 80vh; }
.section-pink { background: var(--pink); min-height: 100vh; }
.section-green { background: var(--green); min-height: 60vh; }
.section-teal { background: var(--teal); min-height: 80vh; }
.section-navy { background: var(--navy); min-height: 50vh; display: flex; align-items: center; justify-content: center; }

/* Content panels */
.content-panel {
    background: var(--white);
    border: 4px solid var(--navy);
    padding: 48px;
    max-width: 560px;
    position: relative;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.5s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.content-panel.visible { opacity: 1; transform: translateY(0); }

.panel-rot-neg { transform: translateY(60px) rotate(-3deg); }
.panel-rot-neg.visible { transform: translateY(0) rotate(-3deg); }
.panel-rot-pos { transform: translateY(60px) rotate(2deg); }
.panel-rot-pos.visible { transform: translateY(0) rotate(2deg); }
.panel-rot-neg-strong { transform: translateY(60px) rotate(-4deg); }
.panel-rot-neg-strong.visible { transform: translateY(0) rotate(-4deg); }

.panel-wide { max-width: 700px; }
.panel-dotgrid {
    background-image: radial-gradient(circle, var(--navy) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    background-color: rgba(255,255,255,0.92);
}

.panel-title { font-family: 'Bungee', sans-serif; font-weight: 400; font-size: 48px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--navy); margin-bottom: 16px; line-height: 1.1; }
.panel-title-white { color: var(--navy); }
.panel-title-sm { font-size: 32px; }
.panel-text { color: var(--navy); margin-bottom: 12px; }
.panel-marker { font-family: 'Permanent Marker', cursive; font-size: 18px; color: var(--pink); transform: rotate(-2deg); margin-top: 8px; }

.squiggle-underline { text-decoration: underline wavy var(--pink); text-underline-offset: 6px; }

/* Cascading panels */
.cascade-group { display: flex; flex-direction: column; gap: 0; }
.panel-cascade { max-width: 400px; }
.panel-c1 { transform: translateY(60px) rotate(-2deg); margin-left: 0; }
.panel-c1.visible { transform: translateY(0) rotate(-2deg); }
.panel-c2 { transform: translateY(60px) rotate(3deg); margin-left: 60px; margin-top: -20px; }
.panel-c2.visible { transform: translateY(0) rotate(3deg); }
.panel-c3 { transform: translateY(60px) rotate(-1deg); margin-left: 120px; margin-top: -20px; }
.panel-c3.visible { transform: translateY(0) rotate(-1deg); }

/* Geometric shapes */
.geo-shape { position: absolute; pointer-events: none; }
.geo-circle { width: 160px; height: 160px; border-radius: 50%; border: 4px solid var(--navy); background: var(--pink); opacity: 0.7; }
.geo-triangle { width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 140px solid var(--green); opacity: 0.6; }
.geo-square { width: 140px; height: 140px; background: var(--yellow); border: 3px solid var(--navy); opacity: 0.5; }
.geo-tl { top: -40px; left: -30px; }
.geo-br { bottom: -20px; right: 20px; }
.geo-right { top: 20%; right: -40px; transform: rotate(15deg); }

/* Pattern bands */
.pattern-band { width: 100%; height: 80px; overflow: hidden; }
.band-zigzag {
    background: var(--warm-gray);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cpath d='M0 12 L10 0 L20 24 L30 0 L40 24' fill='none' stroke='%231A1A2E' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 40px 24px;
}
.band-dots {
    background: var(--warm-gray);
    background-image: radial-gradient(circle, var(--navy) 2px, transparent 2px);
    background-size: 24px 24px;
}
.terrazzo-band { height: 60px; background: var(--warm-gray); position: relative; }

/* Final assembly */
.final-assembly { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.final-letter {
    font-family: 'Bungee', sans-serif;
    font-size: 80px;
    color: var(--white);
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.final-letter.assembled { opacity: 1; transform: scale(1); }

@media (max-width: 768px) {
    .side-nav { display: none; }
    .color-section { padding: 60px 24px; }
    .content-panel { padding: 32px; max-width: 100%; }
    .panel-title { font-size: 32px; }
    .scatter-letter { font-size: 48px; }
    .letter-p, .letter-z2, .letter-u { width: 80px; height: 80px; }
    .final-letter { font-size: 48px; }
}