/* bada.coffee - Wabi-Sabi Ceramics Workshop */

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

:root{
    --bisque:#F4EDE4;
    --espresso:#2C1A0E;
    --caramel:#8B6914;
    --celadon:#7BA290;
    --fired:#3D2B1F;
    --ash:#A39081;
    --crema:#E8D5B7;
    --copper:#4A7C6F;
    --warm-shift:#EDE0D0;
    --space-1:4px;
    --space-2:8px;
    --space-4:16px;
    --space-8:32px;
    --space-16:64px;
    --ease-out:cubic-bezier(0.25,0.1,0.25,1.0);
}

html{scroll-behavior:smooth}

body{
    background:var(--bisque);
    color:var(--espresso);
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(1rem,1.1vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Paper texture overlay */
.paper-noise{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:9999;
    pointer-events:none;
    opacity:0.03;
}

/* Scroll progress indicator */
.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:2px;
    height:0%;
    background:var(--caramel);
    z-index:50;
    transition:none;
}

.scroll-progress.complete{
    animation:progressPulse 500ms ease;
}

@keyframes progressPulse{
    0%,100%{opacity:1}
    50%{opacity:0.6}
}

.scroll-pct{
    position:fixed;
    top:var(--space-8);
    left:var(--space-4);
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.65rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--ash);
    z-index:50;
    pointer-events:none;
}

/* Bowl icon */
.bowl-icon{
    position:fixed;
    top:var(--space-4);
    left:var(--space-4);
    z-index:60;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--caramel);
    padding:var(--space-2);
    margin-top:28px;
}

.bowl-icon:hover{
    color:var(--espresso);
}

/* Drawer */
.drawer{
    position:fixed;
    top:0;
    left:0;
    width:280px;
    height:100vh;
    background:rgba(244,237,228,0.95);
    z-index:100;
    transform:translateX(-100%);
    transition:transform 600ms var(--ease-out);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:var(--space-16);
}

.drawer.open{
    transform:translateX(0);
}

.drawer-close{
    position:absolute;
    top:var(--space-4);
    right:var(--space-4);
    background:none;
    border:none;
    font-size:1.5rem;
    color:var(--ash);
    cursor:pointer;
}

.drawer-nav{
    display:flex;
    flex-direction:column;
    gap:var(--space-8);
}

.drawer-link{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.8rem;
    letter-spacing:0.15em;
    color:var(--espresso);
    text-decoration:none;
    transition:color 300ms ease;
}

.drawer-link:hover{
    color:var(--caramel);
}

/* Floating ceramic fragments */
.ceramic-fragments{
    position:fixed;
    top:0;
    right:0;
    width:25%;
    height:100vh;
    z-index:1;
    pointer-events:none;
}

.frag{
    position:absolute;
}

.frag-1{top:8%;right:30%;transform:rotate(12deg)}
.frag-2{top:22%;right:55%;transform:rotate(-18deg)}
.frag-3{top:40%;right:20%;transform:rotate(7deg)}
.frag-4{top:58%;right:45%;transform:rotate(-25deg)}
.frag-5{top:72%;right:15%;transform:rotate(30deg)}
.frag-6{top:88%;right:40%;transform:rotate(-10deg)}

/* Section base */
.section{
    position:relative;
    overflow:hidden;
}

.section-inner{
    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:var(--space-4);
    max-width:1200px;
    margin:0 auto;
    padding:0 var(--space-8);
}

.section-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    grid-column:1/-1;
}

/* Void spacers */
.void-spacer{
    height:20vh;
}

.void-spacer-sm{
    height:15vh;
}

/* Fade-up animation */
.fade-up{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 1200ms var(--ease-out),transform 1200ms var(--ease-out);
}

.fade-up.visible{
    opacity:1;
    transform:translateY(0);
}

/* Section headings */
.section-heading{
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:clamp(1.4rem,2.8vw,2.8rem);
    font-variation-settings:'WONK' 1;
    letter-spacing:0.01em;
    line-height:1.15;
    color:var(--espresso);
    margin-bottom:1.5rem;
}

/* Body text */
.body-text{
    max-width:55ch;
    margin-bottom:1rem;
    color:var(--espresso);
}

/* Ring stains */
.ring-stain{
    position:absolute;
    pointer-events:none;
    z-index:0;
}

.ring-stain circle{
    stroke-dashoffset:600;
    transition:stroke-dashoffset 8s var(--ease-out);
}

.ring-stain.drawn circle{
    stroke-dashoffset:0;
}

.ring-stain-1{
    width:250px;
    height:250px;
    bottom:5%;
    right:10%;
}

.ring-stain-2{
    width:350px;
    height:350px;
    top:10%;
    right:-5%;
}

.ring-stain-3{
    width:500px;
    height:500px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

/* ==============================
   Section 1: Dawn
   ============================== */
.section-dawn{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bisque);
}

.section-dawn .section-inner{
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-title{
    font-family:'Fraunces',serif;
    font-weight:400;
    font-size:clamp(2.5rem,6vw,7rem);
    letter-spacing:0.01em;
    line-height:1.15;
    color:var(--espresso);
    text-align:center;
    font-variation-settings:'WONK' 0;
    animation:wonkShift 2s var(--ease-out) forwards;
}

@keyframes wonkShift{
    from{font-variation-settings:'WONK' 0}
    to{font-variation-settings:'WONK' 1}
}

/* ==============================
   Section 2: The Grind
   ============================== */
.section-grind{
    min-height:60vh;
    display:flex;
    align-items:center;
    padding:var(--space-16) 0;
}

.grind-layout{
    grid-column:1/7;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(24px,4vw,48px);
    align-items:center;
}

.grind-text{
    position:relative;
    z-index:2;
}

.grind-image{
    position:relative;
    z-index:1;
    margin-left:-40px;
    mix-blend-mode:multiply;
}

.image-placeholder{
    background:var(--crema);
    border-radius:2px;
    box-shadow:0 0 8px var(--ash);
    padding:var(--space-8);
    filter:sepia(0.15) saturate(0.7) contrast(1.05) brightness(1.02);
}

.bean-scatter{
    width:100%;
    height:auto;
    display:block;
}

/* ==============================
   Section 3: The Pour
   ============================== */
.section-pour{
    min-height:80vh;
    display:flex;
    align-items:center;
    padding:var(--space-16) 0;
}

.section-pour .section-inner{
    position:relative;
}

.pour-stream{
    position:absolute;
    left:50%;
    top:0;
    height:100%;
    width:120px;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
}

.pour-stream path{
    stroke-dasharray:1200;
    stroke-dashoffset:1200;
    transition:stroke-dashoffset 3s var(--ease-out);
}

.pour-stream.drawn path{
    stroke-dashoffset:0;
}

.pour-text{
    grid-column:1/6;
    position:relative;
    z-index:2;
}

/* ==============================
   Section 4: The Wait
   ============================== */
.section-wait{
    min-height:45vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--warm-shift);
}

.section-wait .section-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.wait-text{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    font-variation-settings:'WONK' 1;
    color:var(--espresso);
    text-align:center;
    line-height:1.3;
}

.drip-dots{
    display:flex;
    gap:var(--space-4);
    margin-top:var(--space-8);
}

.drip-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--caramel);
    opacity:0.3;
    animation:drip 2s ease-in-out infinite;
}

.drip-dot:nth-child(2){
    animation-delay:0.33s;
}

.drip-dot:nth-child(3){
    animation-delay:0.66s;
}

@keyframes drip{
    0%,100%{opacity:0.3;transform:translateY(0)}
    50%{opacity:1;transform:translateY(4px)}
}

/* ==============================
   Section 5: The Cup
   ============================== */
.section-cup{
    min-height:80vh;
    display:flex;
    align-items:center;
    padding:var(--space-16) 0;
}

.cup-content{
    grid-column:1/6;
    position:relative;
    z-index:2;
}

/* CTA link with wavy underline */
.cta-link{
    color:var(--espresso);
    text-decoration:none;
    position:relative;
    display:inline-block;
    font-weight:600;
}

.cta-link::after{
    content:'';
    position:absolute;
    bottom:-4px;
    left:0;
    width:100%;
    height:4px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'%3E%3Cpath d='M0,3 Q10,0 15,3 Q20,6 30,3 Q40,0 45,3 Q50,6 60,3' fill='none' stroke='%238B6914' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
    background-size:60px 6px;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 400ms var(--ease-out);
}

.cta-link:hover::after{
    transform:scaleX(1);
}

.cta-text{
    margin-top:var(--space-8);
}

/* Footer */
.site-footer{
    background:var(--fired);
    padding:var(--space-16) var(--space-8);
}

.footer-inner{
    max-width:1200px;
    margin:0 auto;
    text-align:center;
}

.footer-text{
    font-family:'DM Sans',sans-serif;
    font-weight:500;
    font-size:0.8rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--ash);
}

/* Responsive */
@media(max-width:768px){
    .section-inner{
        grid-template-columns:1fr;
        padding:0 var(--space-4);
    }

    .grind-layout{
        grid-column:1/-1;
        grid-template-columns:1fr;
    }

    .grind-image{
        margin-left:0;
    }

    .pour-text{
        grid-column:1/-1;
    }

    .cup-content{
        grid-column:1/-1;
    }

    .ceramic-fragments{
        display:none;
    }

    .pour-stream{
        display:none;
    }

    .void-spacer{
        height:12vh;
    }

    .void-spacer-sm{
        height:8vh;
    }

    .drawer{
        width:100%;
    }

    .scroll-pct{
        display:none;
    }
}