/* bada.studio — White Space Heavy Gallery */
/* Palette: #ffffff, #fafafa, #1a1a1a, #d4d4d4, #0a0a0a, #8a8a8a, #f0f0f0 */
/* Fonts: Syne (display), Libre Franklin (body/captions) */

:root {
    --white: #ffffff;
    --offwhite: #fafafa;
    --text: #1a1a1a;
    --rule: #d4d4d4;
    --black: #0a0a0a;
    --caption: #8a8a8a;
    --hover: #f0f0f0;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--white);
    color: var(--text);
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 400;
    line-height: 1.7;
    font-size: 17px;
    overflow-x: hidden;
}

/* ============================
   Gallery Walls (Sections)
   ============================ */

.wall {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 80px 0;
}

.wall-white {
    background: var(--white);
}

.wall-offwhite {
    background: var(--offwhite);
}

/* Threshold: the entrance. Pure white, centered brand. */
.wall-threshold {
    justify-content: center;
    background: var(--white);
}

/* Rule walls: shorter, just hold a thin line */
.wall-rule {
    min-height: 40vh;
    justify-content: center;
    padding: 0 10vw;
}

/* Exit rule wall: shorter spacing before final word */
.wall-rule-exit {
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Final wall: ends with 200px white below */
.wall-final {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 200px;
}

/* ============================
   Content Blocks
   ============================ */

.content-block {
    max-width: 600px;
}

.anchor-left {
    margin-left: 10vw;
    margin-right: auto;
}

.anchor-right {
    margin-left: auto;
    margin-right: 10vw;
}

.anchor-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ============================
   Threshold Brand
   ============================ */

.threshold-content {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.brand-word {
    font-family: 'Syne', sans-serif;
    font-weight: 500;
    font-size: clamp(2.5rem, 5vw, 4rem);
    color: var(--text);
    opacity: 0;
    display: block;
    transition: opacity 3s ease;
}

/* "bada" at ~30% from left */
#brand-bada {
    padding-left: 30%;
}

/* "studio" at ~60% from left, slightly below */
#brand-studio {
    padding-left: 60%;
    margin-top: 0.6rem;
}

.brand-word.visible {
    opacity: 1;
}

/* ============================
   Thin Rules
   ============================ */

.thin-rule {
    border: none;
    border-top: 0.5px solid var(--rule);
    width: 35%;
    margin: 0;
}

/* Expanding rule beneath brand */
.rule-expand {
    width: 0;
    margin-top: 2.5rem;
    margin-left: 30%;
    transition: width 2s ease;
}

.rule-expand.visible {
    width: 200px;
}

/* Centered rule for exit section */
.thin-rule-center {
    width: 50%;
    margin: 0 auto;
}

/* ============================
   Typography
   ============================ */

.caption {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 300;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--caption);
    margin-bottom: 1.5rem;
}

.wall-headline {
    font-family: 'Syne', sans-serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.wall-body {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text);
}

/* Exit statement: slightly larger, Syne */
.wall-body-exit {
    font-family: 'Syne', sans-serif;
    font-weight: 500;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    line-height: 1.5;
    color: var(--text);
}

/* Final word at the gallery end */
.final-word {
    font-family: 'Syne', sans-serif;
    font-weight: 500;
    font-size: 1.2rem;
    color: var(--caption);
    display: block;
    text-align: center;
}

/* ============================
   Fade-In Animation
   Triggered by Intersection Observer
   Ultra-slow per design: 3s opacity, 2s transform
   ============================ */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 3s ease, transform 2s ease;
}

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

/* ============================
   Responsive
   ============================ */

@media (max-width: 768px) {
    .anchor-left {
        margin-left: 6vw;
    }

    .anchor-right {
        margin-right: 6vw;
    }

    .content-block {
        max-width: 85vw;
    }

    #brand-bada {
        padding-left: 10vw;
    }

    #brand-studio {
        padding-left: 30vw;
    }

    .rule-expand {
        margin-left: 10vw;
    }

    .wall-rule {
        padding: 0 6vw;
    }
}