/* eesugi.com - Bauhaus-Japanese Aesthetic Fusion */
/* Palette */
/* Canvas White: #FAFAFA */
/* Ink Dark: #1A1A2A */
/* Earth Terracotta: #B86840 */
/* Earth Ochre: #C8A040 */
/* Earth Sage: #4A7B5A */
/* Warm Grey: #8B8B80 */

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

html {
    overflow: hidden;
    height: 100vh;
}

body {
    background: #FAFAFA;
    color: #1A1A2A;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.75;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* ===== Progress Bar ===== */
#progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: #B86840;
    z-index: 100;
    transition: width 0.1s linear;
}

/* ===== Scroll Arrow ===== */
#scroll-arrow {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    opacity: 0;
    animation: bounceArrow 1.2s ease-in-out infinite;
}

@keyframes bounceArrow {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(8px); }
}

/* ===== Scroll Container ===== */
#scroll-container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* ===== Panel Base ===== */
.panel {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    background: #FAFAFA;
}

.panel-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8vw;
    display: flex;
    align-items: center;
}

/* ===== Panel 1: Title ===== */
.panel-title .panel-content {
    justify-content: center;
    gap: 8vw;
}

.title-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.title-main {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 8vw, 120px);
    letter-spacing: 0.02em;
    color: #1A1A2A;
    opacity: 0;
}

.title-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 80px);
    color: #1A1A2A;
    opacity: 0;
    margin-top: 0.2em;
}

.title-shapes {
    position: relative;
    width: clamp(200px, 30vw, 400px);
    height: clamp(200px, 30vw, 400px);
    flex-shrink: 0;
}

.bauhaus-shape {
    position: absolute;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.bauhaus-shape:hover {
    transform: scale(1) rotate(15deg) !important;
}

.shape-circle {
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background: #B86840;
    top: 0;
    left: 0;
}

.shape-square {
    width: 45%;
    height: 45%;
    background: #C8A040;
    bottom: 5%;
    right: 0;
}

.shape-triangle {
    width: 50%;
    height: 50%;
    background: #4A7B5A;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    bottom: 0;
    left: 30%;
}

/* ===== Concept Panels ===== */
.panel-concept .panel-content {
    justify-content: space-between;
    gap: 6vw;
}

.concept-text {
    flex: 0 0 40%;
    max-width: 40%;
}

.concept-heading {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 6vw, 80px);
    letter-spacing: 0.02em;
    color: #1A1A2A;
    margin-bottom: 1.5rem;
}

.concept-body {
    color: #1A1A2A;
    max-width: 420px;
}

.concept-composition {
    flex: 1;
    position: relative;
    height: 70vh;
    max-height: 600px;
}

.geo {
    position: absolute;
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
    opacity: 0;
}

.geo:hover {
    transform: scale(1) rotate(15deg) !important;
}

.geo.visible {
    transform: scale(1);
    opacity: 1;
}

/* --- Circles Composition --- */
.geo-circle {
    border-radius: 50%;
}

.comp-circles .c1 { width: 180px; height: 180px; background: #B86840; top: 5%; left: 10%; opacity: 0.8; }
.comp-circles .c2 { width: 120px; height: 120px; background: #C8A040; top: 20%; left: 45%; opacity: 0.6; }
.comp-circles .c3 { width: 220px; height: 220px; background: #4A7B5A; top: 40%; left: 25%; opacity: 0.5; }
.comp-circles .c4 { width: 80px; height: 80px; background: #B86840; top: 10%; right: 15%; opacity: 0.7; }
.comp-circles .c5 { width: 150px; height: 150px; background: #8B8B80; bottom: 10%; right: 20%; opacity: 0.4; }

/* --- Right Angles Composition --- */
.geo-rect {
    background: #B86840;
}

.comp-angles .r1 { width: 200px; height: 60px; background: #B86840; top: 10%; left: 5%; }
.comp-angles .r2 { width: 60px; height: 200px; background: #C8A040; top: 5%; left: 40%; }
.comp-angles .r3 { width: 150px; height: 150px; background: #4A7B5A; opacity: 0.6; top: 35%; left: 15%; }
.comp-angles .r4 { width: 100px; height: 40px; background: #8B8B80; bottom: 20%; right: 10%; }
.comp-angles .r5 { width: 40px; height: 160px; background: #B86840; opacity: 0.5; bottom: 5%; right: 35%; }

.geo-line {
    height: 2px;
    background: #8B8B80;
}

.comp-angles .l1 { width: 80%; top: 70%; left: 10%; }
.comp-angles .l2 { width: 50%; top: 85%; left: 25%; }

/* --- Curves and Lines Composition --- */
.comp-curves .cv1 { width: 200px; height: 200px; border-radius: 50%; background: #B86840; opacity: 0.7; top: 5%; left: 15%; }
.comp-curves .cv2 { width: 120px; height: 80px; background: #C8A040; top: 30%; left: 50%; }
.comp-curves .cv3 { width: 100px; height: 100px; border-radius: 50%; background: #4A7B5A; opacity: 0.5; bottom: 20%; left: 10%; }
.comp-curves .cv4 { height: 2px; background: #8B8B80; width: 60%; top: 55%; left: 20%; }
.comp-curves .cv5 { width: 140px; height: 140px; background: #B86840; opacity: 0.4; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bottom: 10%; right: 10%; }

/* --- Color Theory Composition --- */
.comp-color .clr1 { width: 180px; height: 180px; background: #B86840; top: 10%; left: 5%; opacity: 0.9; }
.comp-color .clr2 { width: 180px; height: 180px; background: #C8A040; top: 10%; left: calc(5% + 100px); opacity: 0.7; }
.comp-color .clr3 { width: 180px; height: 180px; background: #4A7B5A; top: 10%; left: calc(5% + 200px); opacity: 0.5; }
.comp-color .clr4 { width: 160px; height: 160px; border-radius: 50%; background: #8B8B80; opacity: 0.6; bottom: 15%; left: 20%; }
.comp-color .clr5 { width: 120px; height: 120px; border-radius: 50%; background: #B86840; opacity: 0.4; bottom: 20%; right: 15%; }

/* --- Balance Composition --- */
.comp-balance .bal1 { width: 240px; height: 240px; border-radius: 50%; background: #B86840; opacity: 0.5; top: 5%; left: 0; }
.comp-balance .bal2 { width: 80px; height: 200px; background: #C8A040; top: 15%; right: 25%; }
.comp-balance .bal3 { width: 160px; height: 160px; background: #4A7B5A; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bottom: 5%; left: 30%; }
.comp-balance .bal4 { width: 60px; height: 60px; background: #8B8B80; top: 5%; right: 10%; }
.comp-balance .bal5 { width: 100px; height: 100px; border-radius: 50%; background: #C8A040; opacity: 0.4; bottom: 15%; right: 5%; }

/* --- Function Composition --- */
.comp-function .fn1 { width: 300px; height: 40px; background: #8B8B80; top: 20%; left: 0; }
.comp-function .fn2 { width: 160px; height: 160px; border-radius: 50%; background: #B86840; opacity: 0.7; top: 10%; right: 20%; }
.comp-function .fn3 { height: 2px; background: #1A1A2A; width: 70%; top: 50%; left: 15%; }
.comp-function .fn4 { width: 120px; height: 120px; background: #4A7B5A; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bottom: 15%; left: 10%; }
.comp-function .fn5 { width: 100px; height: 200px; background: #C8A040; opacity: 0.6; bottom: 5%; right: 10%; }

/* ===== Panel 8: Collage ===== */
.collage-content {
    padding: 0;
    display: block;
    position: relative;
}

.collage-shape {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.2s ease;
}

.collage-shape:hover {
    transform: rotate(15deg);
}

.collage-shape.visible {
    opacity: 1;
}

.cs1 { width: 200px; height: 200px; border-radius: 50%; background: #B86840; opacity: 0.8; top: 10%; left: 5%; }
.cs2 { width: 150px; height: 250px; background: #C8A040; opacity: 0.5; top: 15%; left: 15%; }
.cs3 { width: 180px; height: 180px; background: #4A7B5A; opacity: 0.6; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); top: 5%; left: 30%; }
.cs4 { width: 120px; height: 120px; border-radius: 50%; background: #8B8B80; opacity: 0.4; top: 40%; left: 10%; }
.cs5 { width: 250px; height: 100px; background: #B86840; opacity: 0.3; top: 50%; left: 25%; }
.cs6 { width: 160px; height: 160px; border-radius: 50%; background: #C8A040; opacity: 0.7; top: 20%; left: 50%; }
.cs7 { width: 100px; height: 300px; background: #4A7B5A; opacity: 0.4; top: 30%; left: 60%; }
.cs8 { width: 200px; height: 200px; background: #B86840; opacity: 0.5; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bottom: 10%; left: 45%; }
.cs9 { width: 140px; height: 140px; border-radius: 50%; background: #8B8B80; opacity: 0.6; top: 10%; right: 15%; }
.cs10 { width: 180px; height: 80px; background: #C8A040; opacity: 0.5; bottom: 20%; right: 10%; }
.cs11 { width: 100px; height: 100px; background: #4A7B5A; opacity: 0.3; bottom: 30%; right: 25%; }
.cs12 { width: 220px; height: 220px; border-radius: 50%; background: #B86840; opacity: 0.35; bottom: 5%; left: 70%; }

/* ===== Panel 9: City-Urban Geometry ===== */
.city-content {
    padding: 8vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}

.city-skyline {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 60vh;
    position: relative;
}

.building {
    background: #8B8B80;
    flex-shrink: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.building.visible {
    transform: scaleY(1);
}

.b1 { width: 40px; height: 30vh; background: #1A1A2A; }
.b2 { width: 28px; height: 45vh; background: #B86840; }
.b3 { width: 50px; height: 25vh; background: #8B8B80; }
.b4 { width: 35px; height: 55vh; background: #C8A040; }
.b5 { width: 60px; height: 20vh; background: #4A7B5A; }
.b6 { width: 30px; height: 50vh; background: #1A1A2A; }
.b7 { width: 45px; height: 35vh; background: #B86840; }
.b8 { width: 25px; height: 48vh; background: #8B8B80; }
.b9 { width: 55px; height: 22vh; background: #C8A040; }
.b10 { width: 38px; height: 42vh; background: #4A7B5A; }
.b11 { width: 32px; height: 28vh; background: #1A1A2A; }
.b12 { width: 48px; height: 38vh; background: #B86840; }

.city-street {
    position: absolute;
    height: 2px;
    background: #8B8B80;
    left: 8vw;
    right: 8vw;
}

.street1 { bottom: calc(8vw + 4vh); }
.street2 { bottom: calc(8vw + 1vh); }

.city-park {
    position: absolute;
    border-radius: 50%;
    background: #4A7B5A;
    opacity: 0.3;
}

.park1 { width: 60px; height: 60px; bottom: calc(8vw + 6vh); left: 15%; }
.park2 { width: 40px; height: 40px; bottom: calc(8vw + 8vh); left: 55%; }
.park3 { width: 50px; height: 50px; bottom: calc(8vw + 5vh); right: 20%; }

.city-label {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 3vw, 48px);
    letter-spacing: 0.02em;
    color: #8B8B80;
    position: absolute;
    top: 8vw;
    left: 8vw;
}

/* ===== Panel 10: Final Assessment ===== */
.panel-final {
    background: #1A1A2A;
}

.final-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.final-kanji {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: clamp(80px, 20vw, 300px);
    color: #FAFAFA;
    line-height: 1;
    position: relative;
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, black 30%, transparent 80%);
    mask-image: radial-gradient(ellipse 50% 50% at center, black 30%, transparent 80%);
    transition: -webkit-mask-image 0.3s ease, mask-image 0.3s ease;
}

.final-kanji:hover {
    -webkit-mask-image: radial-gradient(ellipse 35% 35% at center, black 20%, transparent 70%);
    mask-image: radial-gradient(ellipse 35% 35% at center, black 20%, transparent 70%);
}

.final-subtitle {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.1vw, 17px);
    color: #8B8B80;
    margin-top: 2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ===== Parallax layers ===== */
.concept-composition {
    will-change: transform;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .panel-content {
        padding: 6vw;
        flex-direction: column;
    }

    .panel-title .panel-content {
        flex-direction: column;
        gap: 4vw;
    }

    .title-text {
        align-items: center;
        text-align: center;
    }

    .title-shapes {
        width: 50vw;
        height: 50vw;
    }

    .concept-text {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .concept-composition {
        height: 40vh;
    }

    .city-skyline {
        height: 40vh;
    }

    .building {
        width: 20px !important;
    }
}