/* mechanic.party - Memphis Milano mechanical celebration */

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

:root{
    --midnight:#0A0F2E;
    --cobalt:#121B4A;
    --magenta:#FF2D8A;
    --cyan:#00E5FF;
    --acid:#E5FF00;
    --coral:#FF6B4A;
    --pattern-blue:#1E2B6E;
    --ice:#F0F2FF;
    --lavender:#7A82A8;
    --edge:#2A3570;
}

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

body{
    background:var(--midnight);
    color:var(--ice);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.05vw,1.1rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Memphis Nav */
.memphis-nav{
    position:fixed;top:0;left:0;right:0;
    z-index:1000;
    display:flex;flex-direction:column;
}

.nav-zigzag{
    height:24px;
    background:var(--cobalt);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cpolyline points='0,24 20,0 40,24' fill='none' stroke='%231E2B6E' stroke-width='1'/%3E%3C/svg%3E");
    background-size:40px 24px;
}

.nav-inner{
    display:flex;align-items:center;justify-content:center;
    gap:2rem;
    padding:0.5rem 2rem;
    background:var(--midnight);
}

.nav-label{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--ice);
    text-decoration:none;
    position:relative;
    transition:color 0.3s;
}

.nav-label:hover{color:var(--cyan)}

.nav-label:hover::after{
    content:'';
    position:absolute;
    bottom:-6px;left:50%;
    transform:translateX(-50%);
    width:10px;height:10px;
    border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 12px rgba(0,229,255,0.4);
}

.nav-border-multi{
    height:4px;
    background:linear-gradient(to right,var(--magenta) 0%,var(--magenta) 25%,var(--cyan) 25%,var(--cyan) 50%,var(--acid) 50%,var(--acid) 75%,var(--coral) 75%,var(--coral) 100%);
}

/* Sections */
.section{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    overflow:hidden;
    padding:80px 24px;
}

/* Overture */
.section-overture{
    background:var(--midnight);
    background-image:radial-gradient(circle 2px,var(--pattern-blue) 100%,transparent 100%);
    background-size:20px 20px;
}

.memphis-field{
    position:relative;
    width:100%;max-width:800px;
    min-height:80vh;
    display:flex;align-items:center;justify-content:center;
}

/* Memphis shapes */
.m-shape{
    position:absolute;
    opacity:0;transform:scale(0.5);
    transition:opacity 0.4s cubic-bezier(0.34,1.56,0.64,1),transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.m-shape.pop-in{opacity:1;transform:scale(1)}

.m-circle{border-radius:50%}
.c1{width:120px;height:120px;background:var(--magenta);top:5%;left:10%;box-shadow:0 0 12px rgba(255,45,138,0.4),0 0 24px rgba(255,45,138,0.2)}
.c2{width:80px;height:80px;background:var(--cyan);top:15%;right:15%;box-shadow:0 0 12px rgba(0,229,255,0.4),0 0 24px rgba(0,229,255,0.2)}
.c3{width:100px;height:100px;background:var(--acid);bottom:10%;left:20%;box-shadow:0 0 12px rgba(229,255,0,0.4),0 0 24px rgba(229,255,0,0.2)}

.m-tri{
    width:0;height:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:86px solid var(--coral);
    filter:drop-shadow(0 0 8px rgba(255,107,74,0.5));
}
.t1{top:40%;left:5%}
.t2{bottom:20%;right:10%;border-bottom-color:var(--cyan);filter:drop-shadow(0 0 8px rgba(0,229,255,0.5))}

.m-zig{
    width:200px;height:20px;
    background:var(--magenta);
    clip-path:polygon(0% 0%,10% 100%,20% 0%,30% 100%,40% 0%,50% 100%,60% 0%,70% 100%,80% 0%,90% 100%,100% 0%);
}
.z1{top:25%;right:5%;transform:rotate(15deg) scale(0.5)}
.z2{bottom:30%;left:30%;background:var(--acid);transform:rotate(-10deg) scale(0.5)}
.z3{top:60%;right:25%;background:var(--coral);transform:rotate(5deg) scale(0.5);width:150px}

.m-squig{position:absolute;width:120px}
.s1{bottom:15%;right:30%;filter:drop-shadow(0 0 6px rgba(255,45,138,0.4))}
.s2{top:8%;left:35%;filter:drop-shadow(0 0 6px rgba(0,229,255,0.4))}

/* Memphis gear */
.m-gear{
    position:absolute;
    width:200px;height:200px;
    top:50%;left:50%;
    margin-left:-100px;margin-top:-100px;
    border-radius:50%;
    background:repeating-linear-gradient(45deg,var(--pattern-blue),var(--pattern-blue) 4px,var(--cobalt) 4px,var(--cobalt) 12px);
    clip-path:polygon(50% 0%,58% 5%,62% 0%,66% 8%,72% 5%,74% 14%,80% 12%,80% 22%,88% 22%,86% 32%,94% 34%,90% 42%,98% 46%,92% 52%,98% 58%,90% 60%,94% 68%,86% 68%,88% 78%,80% 76%,80% 86%,74% 82%,72% 92%,66% 86%,62% 94%,58% 88%,50% 94%,42% 88%,38% 94%,34% 86%,28% 92%,26% 82%,20% 86%,20% 76%,12% 78%,14% 68%,6% 68%,10% 60%,2% 58%,8% 52%,2% 46%,10% 42%,6% 34%,14% 32%,12% 22%,20% 22%,20% 14%,26% 12%,28% 5%,34% 8%,38% 0%,42% 5%);
    animation:gear-rotate 30s linear infinite;
    box-shadow:0 0 20px rgba(0,229,255,0.2);
}

@keyframes gear-rotate{to{transform:rotate(360deg)}}

/* Hero text */
.hero-text{
    position:relative;z-index:10;
    text-align:center;
}

.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(4rem,9vw,10rem);
    letter-spacing:-0.01em;
    line-height:0.95;
    color:var(--ice);
}

.letter{position:relative;display:inline-block}

.hero-party{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(2rem,5vw,5rem);
    color:var(--magenta);
    text-shadow:0 0 20px rgba(255,45,138,0.4);
}

/* Manifesto */
.section-manifesto{
    background:var(--cobalt);
    background-image:repeating-linear-gradient(45deg,var(--pattern-blue),var(--pattern-blue) 2px,transparent 2px,transparent 12px);
    background-size:100% 100%;
}

.manifesto-grid{
    max-width:1100px;width:100%;
    display:grid;
    grid-template-columns:2fr 4px 3fr;
    gap:48px;
    align-items:center;
}

.manifesto-left{
    opacity:0;transform:translateX(-20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.manifesto-left.revealed{opacity:1;transform:translateX(0)}

.zigzag-block{
    padding:40px;
    background:rgba(30,43,110,0.6);
    transform:rotate(-3deg);
}

.pull-quote{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem,2vw,2rem);
    line-height:1.2;
    color:var(--ice);
}

.gradient-divider{
    width:4px;
    align-self:stretch;
    background:linear-gradient(to bottom,var(--magenta),var(--cyan),var(--acid));
}

.manifesto-right{
    opacity:0;transform:translateX(20px);
    transition:opacity 0.6s ease 0.2s,transform 0.6s ease 0.2s;
}

.manifesto-right.revealed{opacity:1;transform:translateX(0)}

.body-text{
    margin-bottom:1.25rem;
    color:var(--ice);
}

.memphis-bullet{
    display:flex;gap:1rem;align-items:flex-start;
    margin-bottom:1.25rem;
}

.bullet-shape{
    width:16px;height:16px;flex-shrink:0;
    margin-top:0.35rem;
    background:var(--magenta);
    clip-path:polygon(50% 0%,100% 100%,0% 100%);
}

.bullet-shape.alt{
    background:var(--cyan);
    border-radius:50%;
    clip-path:none;
}

.linkage-decor{width:200px;margin-top:1rem}

/* Workshop */
.section-workshop{
    background:var(--midnight);
    padding:80px 24px;
}

.workshop-grid{
    max-width:1100px;width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.workshop-card{
    padding:2rem;
    position:relative;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.workshop-card.revealed{opacity:1;transform:translateY(0)}

.pattern-dots{background:radial-gradient(circle 2px,var(--pattern-blue) 100%,transparent 100%);background-size:20px 20px}
.pattern-stripes{background:repeating-linear-gradient(45deg,var(--pattern-blue),var(--pattern-blue) 2px,transparent 2px,transparent 12px)}
.pattern-zigzag{
    background:var(--midnight);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpolyline points='0,20 20,0 40,20' fill='none' stroke='%231E2B6E' stroke-width='1'/%3E%3C/svg%3E");
    background-size:40px 20px;
}

.card-border{position:absolute;inset:0;pointer-events:none}
.dashed-magenta{border:4px dashed var(--magenta)}
.dotted-cyan{border:4px dotted var(--cyan)}
.solid-yellow{border:4px solid var(--acid)}

.card-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.2rem,1.5vw,1.5rem);
    color:var(--ice);
    margin-bottom:0.75rem;
    letter-spacing:0.02em;
}

.card-text{
    color:var(--lavender);
    margin-bottom:1rem;
    font-size:0.95rem;
}

.card-expand{
    max-height:0;overflow:hidden;
    transition:max-height 0.4s ease-out;
}

.workshop-card:hover .card-expand{max-height:200px}

.expand-label{
    font-family:'Courier Prime',monospace;
    font-size:0.8rem;
    letter-spacing:0.04em;
    color:var(--acid);
    display:block;
    margin-bottom:0.5rem;
    padding-top:1rem;
    border-top:1px solid var(--edge);
}

.expand-text{
    color:var(--lavender);
    font-size:0.9rem;
}

/* Encore */
.section-encore{
    background:linear-gradient(180deg,var(--cobalt) 0%,var(--midnight) 100%);
    flex-direction:column;
}

.encore-content{
    text-align:center;
    max-width:600px;
    opacity:0;transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.encore-content.revealed{opacity:1;transform:translateY(0)}

.engine-motif{margin-bottom:2rem}

.engine-svg{
    width:300px;max-width:100%;height:auto;
    filter:drop-shadow(0 0 12px rgba(0,229,255,0.3));
}

.encore-text{
    font-family:'Space Grotesk',sans-serif;
    font-weight:300;
    font-size:clamp(1.2rem,2vw,1.8rem);
    line-height:1.5;
    color:var(--ice);
    margin-bottom:2rem;
}

.encore-domain{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--magenta);
    text-shadow:0 0 20px rgba(255,45,138,0.3);
}

/* Responsive */
@media(max-width:768px){
    .nav-inner{gap:1rem}
    .manifesto-grid{grid-template-columns:1fr;gap:2rem}
    .gradient-divider{width:100%;height:4px;align-self:auto;background:linear-gradient(to right,var(--magenta),var(--cyan),var(--acid))}
    .zigzag-block{transform:none}
    .workshop-grid{grid-template-columns:1fr}
    .m-tri,.m-zig,.m-squig{display:none}
}

@media(prefers-reduced-motion:reduce){
    .m-gear{animation:none}
    .m-shape{opacity:1;transform:none;transition:none}
    .manifesto-left,.manifesto-right,.workshop-card,.encore-content{
        opacity:1;transform:none;transition:none;
    }
    .card-expand{max-height:none}
}