/* ===================================
   reiwa.bar — Evolved-Minimal Aesthetic
   Colors: #E8DFD0, #C8B8A0, #4A3828, #6B7B5E, #C8955A, #8B8178, #F5F0E8
   Fonts: Space Grotesk, Noto Serif JP, DM Mono
   =================================== */

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

:root {
    --warm-sand: #E8DFD0;
    --clay: #C8B8A0;
    --dark-earth: #4A3828;
    --moss: #6B7B5E;
    --warm-amber: #C8955A;
    --stone-gray: #8B8178;
    --paper-white: #F5F0E8;
    --mx: -1000px;
    --my: -1000px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.8;
    color: var(--dark-earth);
    background-color: var(--warm-sand);
    overflow-x: hidden;
    position: relative;
}

/* Cursor-follow warm glow */
#cursor-glow {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,149,90,0.06), transparent);
    transform: translate(var(--mx), var(--my));
    pointer-events: none;
    z-index: 9999;
    top: -100px;
    left: -100px;
    transition: transform 0.15s ease-out;
}

/* ========== ENTRANCE SECTION ========== */

#entrance {
    width: 100%;
    min-height: 100vh;
    background-color: var(--warm-sand);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.entrance-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    padding: 0 5vw;
    gap: 6vw;
    position: relative;
    z-index: 2;
}

.wordmark-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 2vw;
}

.wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(36px, 6vw, 80px);
    letter-spacing: -0.02em;
    color: var(--dark-earth);
    opacity: 0;
    transform: translateY(20px);
    animation: wordmarkFadeIn 1.2s ease-out 0.5s forwards;
}

.wordmark-dot {
    color: var(--warm-amber);
}

.wordmark-subtitle {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--stone-gray);
    margin-top: 0.5em;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(10px);
    animation: wordmarkFadeIn 1s ease-out 1.2s forwards;
}

@keyframes wordmarkFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.botanical-entrance {
    flex: 0 0 auto;
    width: clamp(150px, 20vw, 300px);
    position: relative;
}

#botanical-branch {
    width: 100%;
    height: auto;
}

.botanical-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawBotanical 2s ease-out 0.3s forwards;
}

@keyframes drawBotanical {
    to {
        stroke-dashoffset: 0;
    }
}

/* Wave divider */
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    line-height: 0;
}

.wave-divider svg {
    width: 100%;
    height: auto;
    display: block;
}

.wave-divider-entrance {
    bottom: -1px;
}

/* ========== DIAGONAL SECTIONS ========== */

.diagonal-section {
    position: relative;
    padding: clamp(80px, 10vw, 140px) 0 clamp(100px, 12vw, 160px);
    overflow: hidden;
}

#menu-cocktails {
    background-color: var(--clay);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3vw), 0 100%);
}

#menu-spirits {
    background-color: var(--warm-sand);
    margin-top: -3vw;
    clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 calc(100% - 3vw));
}

#craft {
    background-color: var(--clay);
    margin-top: -3vw;
    clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%);
}

.section-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 5vw;
    position: relative;
}

/* Section headers */
.section-header {
    margin-bottom: clamp(30px, 4vw, 60px);
}

.section-label {
    font-family: 'DM Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: var(--stone-gray);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 8px;
}

.section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(24px, 3.5vw, 44px);
    letter-spacing: -0.01em;
    color: var(--dark-earth);
    line-height: 1.2;
}

.section-title-jp {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--stone-gray);
    margin-top: 4px;
    letter-spacing: 0.1em;
}

/* Menu grid */
.menu-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2vw, 28px);
}

.menu-item {
    padding-bottom: clamp(14px, 1.5vw, 24px);
    border-bottom: 1px solid rgba(74, 56, 40, 0.1);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.menu-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.menu-item-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.menu-item-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.8vw, 20px);
    letter-spacing: -0.01em;
    color: var(--dark-earth);
    white-space: nowrap;
}

.menu-item-dots {
    flex: 1;
    border-bottom: 1px dotted var(--stone-gray);
    margin-bottom: 4px;
    opacity: 0.4;
}

.menu-item-price {
    font-family: 'DM Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    color: var(--warm-amber);
    white-space: nowrap;
}

.menu-item-desc {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(13px, 1.2vw, 15px);
    color: var(--stone-gray);
    line-height: 1.6;
}

/* Botanical accents */
.botanical-accent {
    position: absolute;
    width: clamp(80px, 10vw, 120px);
    opacity: 0.3;
}

.botanical-accent-right {
    right: 2vw;
    top: 50%;
    transform: translateY(-50%);
}

.botanical-accent-left {
    left: 2vw;
    top: 50%;
    transform: translateY(-50%);
}

.botanical-accent svg {
    width: 100%;
    height: auto;
}

/* ========== CRAFT SECTION ========== */

.craft-inner {
    max-width: 1100px;
}

.craft-content {
    display: flex;
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}

.craft-text {
    flex: 1;
}

.craft-paragraph {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.9;
    color: var(--dark-earth);
    margin-bottom: 1.5em;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.craft-paragraph.visible {
    opacity: 1;
    transform: translateY(0);
}

.craft-botanicals {
    flex: 0 0 clamp(200px, 25vw, 350px);
}

#craft-botanical-large {
    width: 100%;
    height: auto;
}

#craft-botanical-large .botanical-path,
#craft-botanical-large path,
#craft-botanical-large circle {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 2.5s ease-out;
}

#craft-botanical-large.drawn path,
#craft-botanical-large.drawn circle {
    stroke-dashoffset: 0;
}

/* ========== EVENING FOOTER ========== */

#evening-footer {
    background-color: var(--dark-earth);
    padding: clamp(80px, 10vw, 140px) 5vw clamp(40px, 5vw, 60px);
    position: relative;
    margin-top: -3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 60vh;
}

.footer-botanical-left,
.footer-botanical-right {
    position: absolute;
    width: clamp(120px, 14vw, 200px);
    bottom: 0;
}

.footer-botanical-left {
    left: 3vw;
}

.footer-botanical-right {
    right: 3vw;
}

.footer-botanical-left svg,
.footer-botanical-right svg {
    width: 100%;
    height: auto;
}

.footer-content {
    text-align: center;
    max-width: 800px;
    position: relative;
    z-index: 2;
}

.footer-wordmark {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 4vw, 52px);
    letter-spacing: -0.02em;
    color: var(--paper-white);
    margin-bottom: 0.3em;
}

.footer-tagline {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(14px, 1.3vw, 16px);
    color: var(--stone-gray);
    letter-spacing: 0.08em;
    margin-bottom: clamp(40px, 5vw, 70px);
}

.footer-details {
    display: flex;
    justify-content: center;
    gap: clamp(30px, 5vw, 80px);
    margin-bottom: clamp(40px, 5vw, 70px);
    flex-wrap: wrap;
}

.footer-detail {
    text-align: center;
}

.footer-detail-label {
    font-family: 'DM Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: var(--warm-amber);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 10px;
}

.footer-detail-value {
    font-family: 'Noto Serif JP', serif;
    font-weight: 400;
    font-size: clamp(13px, 1.2vw, 15px);
    color: var(--clay);
    line-height: 1.7;
}

.footer-copy {
    font-family: 'DM Mono', monospace;
    font-weight: 400;
    font-size: 11px;
    color: var(--stone-gray);
    opacity: 0.5;
    letter-spacing: 0.05em;
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .entrance-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .wordmark-container {
        align-items: center;
        padding-right: 0;
    }

    .botanical-entrance {
        width: 50vw;
        max-width: 200px;
    }

    .craft-content {
        flex-direction: column;
    }

    .craft-botanicals {
        flex: 0 0 auto;
        width: 60vw;
        max-width: 280px;
        margin: 0 auto;
    }

    .botanical-accent {
        display: none;
    }

    .footer-botanical-left,
    .footer-botanical-right {
        opacity: 0.3;
    }

    .footer-details {
        flex-direction: column;
        gap: 28px;
    }

    #menu-cocktails,
    #menu-spirits,
    #craft {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%);
    }

    #menu-spirits {
        clip-path: polygon(0 5vw, 100% 0, 100% 100%, 0 calc(100% - 5vw));
    }

    #craft {
        clip-path: polygon(0 5vw, 100% 0, 100% calc(100% - 5vw), 0 100%);
    }
}

@media (max-width: 480px) {
    .wordmark {
        font-size: 32px;
    }

    .footer-wordmark {
        font-size: 26px;
    }
}