/* gabs.quest -- Bauhaus Candy Playground */
/* Palette: #FF2D78, #FF6B2B, #00D4FF, #FFF4A3, #7B2FBE, #FEFCF8, #2A2A35, #FFD6E0 */

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

:root{
    --magenta:#FF2D78;
    --tangerine:#FF6B2B;
    --cyan:#00D4FF;
    --lemon:#FFF4A3;
    --grape:#7B2FBE;
    --snow:#FEFCF8;
    --charcoal:#2A2A35;
    --blush:#FFD6E0;
}

html{scroll-behavior:smooth}

body{
    background:var(--snow);
    color:var(--charcoal);
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.55;
    overflow-x:hidden;
}

/* Bauhaus nav */
.bauhaus-nav{
    position:fixed;
    top:1.2rem;left:1.2rem;
    z-index:100;
    cursor:pointer;
    opacity:0.7;
    transition:opacity 0.3s ease,transform 0.3s ease;
}
.bauhaus-nav:hover{opacity:1;transform:scale(1.1)}

/* Zones */
.zone{
    min-height:100vh;
    position:relative;
    padding:clamp(3rem,6vw,6rem) clamp(2rem,5vw,5rem);
    overflow:hidden;
}

.zone-perspective{
    perspective:1200px;
    position:relative;
    z-index:2;
}

/* Watercolor wash */
.watercolor-wash{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    pointer-events:none;
    z-index:0;
}
.wash-lemon{
    background:
        radial-gradient(ellipse 600px 400px at 30% 40%,rgba(255,244,163,0.35),transparent),
        radial-gradient(ellipse 400px 300px at 70% 60%,rgba(255,214,224,0.25),transparent),
        radial-gradient(ellipse 300px 500px at 50% 80%,rgba(255,244,163,0.2),transparent);
}

/* Hero zone */
.zone-hero{
    display:flex;
    align-items:center;
}
.hero-layout{
    margin-left:15%;
    position:relative;
    z-index:2;
}
.hero-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,10vw,8rem);
    letter-spacing:-0.02em;
    line-height:1.0;
    color:var(--magenta);
    display:flex;
    flex-wrap:wrap;
}
.hero-letter{
    display:inline-block;
    opacity:0;
    transform:translateX(-30px);
    transition:opacity 0.5s cubic-bezier(0.23,1,0.32,1),transform 0.5s cubic-bezier(0.23,1,0.32,1);
}
.hero-letter.visible{
    opacity:1;
    transform:translateX(0) rotate(var(--r,0deg));
}
.hero-desc{
    font-family:'Caveat',cursive;
    font-size:clamp(1.2rem,2vw,1.6rem);
    color:var(--grape);
    margin-top:1rem;
    opacity:0;
    transition:opacity 0.8s ease 1s;
}
.hero-desc.visible{opacity:1}

/* Geometric decorations */
.geo-deco{
    position:absolute;
    pointer-events:none;
    z-index:1;
}
.geo-circle-1{width:120px;top:15%;right:10%;transform:rotate(8deg)}
.geo-tri-1{width:100px;bottom:20%;right:25%;transform:rotate(-12deg)}

/* Caveat notes */
.caveat-note{
    font-family:'Caveat',cursive;
    font-size:clamp(0.9rem,1.5vw,1.2rem);
    color:var(--grape);
    position:absolute;
    z-index:3;
    transform:rotate(-12deg);
    opacity:0.6;
}
.note-1{bottom:25%;right:8%}
.note-2{top:10%;right:5%}

/* Kente strips */
.kente-strips{
    display:flex;
    flex-direction:column;
    gap:2px;
    width:100%;
    position:relative;
    z-index:2;
}
.kente-strip{
    width:100%;
    height:8px;
    animation:kente-slide 40s linear infinite;
}
@keyframes kente-slide{
    from{background-position:0 0}
    to{background-position:200px 0}
}

/* Papel picado */
.papel-picado{
    width:100%;
    position:relative;
    z-index:2;
    animation:picado-sway 4s ease-in-out infinite;
}
.papel-picado svg{width:100%;height:60px;display:block}
@keyframes picado-sway{
    0%,100%{transform:rotateX(0deg)}
    50%{transform:rotateX(2deg)}
}

/* Workshop zone */
.zone-workshop{
    background:var(--snow);
    display:flex;
    align-items:center;
    justify-content:center;
}
.workshop-blocks{
    display:flex;
    gap:clamp(1rem,2vw,2rem);
    flex-wrap:wrap;
    justify-content:center;
    max-width:1000px;
    position:relative;
}
.w-block{
    padding:clamp(1.5rem,3vw,2.5rem);
    border-radius:4px;
    flex:1 1 250px;
    max-width:320px;
    position:relative;
}
.w-block-1{background:var(--magenta);color:#fff;transform:rotate(-2deg);mix-blend-mode:normal}
.w-block-2{background:var(--cyan);color:var(--charcoal);transform:rotate(1deg);margin-top:3rem}
.w-block-3{background:var(--lemon);color:var(--charcoal);transform:rotate(-1deg)}
.w-heading{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3rem);
    letter-spacing:-0.02em;
    line-height:1.0;
    margin-bottom:0.75rem;
}
.w-text{
    font-family:'Inter',sans-serif;
    font-size:clamp(0.9rem,1.1vw,1rem);
    line-height:1.55;
}
.mon-crest{
    width:48px;height:48px;
    position:absolute;
    bottom:2rem;right:2rem;
    animation:mon-spin 20s linear infinite;
}
@keyframes mon-spin{to{transform:rotate(360deg)}}
.mon-crest-sm{width:48px;height:48px;margin-bottom:1rem}

/* Reveal animation */
.reveal-block{
    opacity:0;
    transform:scale(0.8) translateY(20px);
    transition:opacity 0.6s cubic-bezier(0.23,1,0.32,1),transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
.reveal-block.visible{
    opacity:1;
    transform:scale(1) translateY(0);
}

/* Showcase zone */
.zone-showcase{
    background:var(--blush);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3rem;
}
.showcase-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:2rem;
    max-width:1000px;
    width:100%;
}
.s-card{
    background:var(--snow);
    padding:2rem;
    border-radius:4px;
    border:1px solid var(--charcoal);
    position:relative;
}
.s-card-1{transform:rotate(-2deg) translateY(-20px)}
.s-card-2{transform:rotate(1deg) translateY(10px)}
.s-card-3{transform:rotate(-1deg) translateY(-10px)}
.s-title{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.4rem,2.5vw,2rem);
    letter-spacing:-0.02em;
    color:var(--magenta);
    margin-bottom:0.5rem;
}
.s-text{
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    line-height:1.55;
    color:var(--charcoal);
}

/* Bojagi panel */
.bojagi-panel{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    width:200px;
    height:150px;
    gap:0;
    position:absolute;
    bottom:5%;left:5%;
    z-index:3;
    transform:rotate(5deg);
}
.bojagi-cell{transition:opacity 0.3s ease}

/* Druckerei zone */
.zone-druckerei{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--snow);
}
.typo-field{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:clamp(0.5rem,2vw,1.5rem);
    max-width:900px;
}
.typo-word{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    letter-spacing:-0.02em;
    line-height:1.0;
    display:inline-block;
}
.typo-xl{font-size:clamp(3rem,10vw,7rem)}
.typo-lg{font-size:clamp(2rem,6vw,5rem)}
.typo-md{
    font-family:'Caveat',cursive;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
}

/* Mensa zone */
.zone-mensa{
    background:var(--charcoal);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding-bottom:3rem;
    min-height:80vh;
}
.skyline{
    display:flex;
    align-items:flex-end;
    width:100%;
    gap:0;
    padding:0;
    margin-bottom:3rem;
}
.sky-block{
    flex:1;
    transform:scaleY(0);
    transform-origin:bottom;
    transition:transform 0.8s cubic-bezier(0.23,1,0.32,1);
}
.sky-block.visible{transform:scaleY(1)}
.sky-1{height:120px;background:var(--magenta)}
.sky-2{height:200px;background:var(--cyan)}
.sky-3{height:80px;background:var(--lemon)}
.sky-4{height:160px;background:var(--tangerine)}
.sky-5{height:240px;background:var(--grape)}
.sky-6{height:100px;background:var(--blush)}
.sky-7{height:180px;background:var(--cyan)}
.sky-8{height:140px;background:var(--magenta)}

.mensa-content{
    text-align:center;
    padding:0 2rem;
}
.mensa-domain{
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--snow);
    letter-spacing:-0.02em;
}
.mensa-tagline{
    font-family:'Caveat',cursive;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:var(--blush);
    margin-top:0.5rem;
}

/* Responsive */
@media(max-width:768px){
    .hero-layout{margin-left:5%}
    .workshop-blocks{flex-direction:column;align-items:center}
    .w-block{max-width:100%;transform:none !important;margin-top:0 !important}
    .geo-deco{display:none}
    .bojagi-panel{display:none}
    .s-card{transform:none !important}
}