/* ============================================
   bada.coffee - Wabi-Sabi Coastal Coffee Studio
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --fog-grey: #D5CEC5;
    --basalt: #2A2421;
    --celadon-crack: #7B9E87;
    --celadon-hover: #5F7F6B;
    --espresso-surface: #5C3D2E;
    --seafoam-wash: #C4DAD2;
    --oxidized-copper: #6B8F71;
    --warm-parchment: #F2EDE7;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--fog-grey);
    color: var(--basalt);
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
}

/* --- Grain Texture Overlay --- */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* --- Opening Viewport --- */
#opening {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        to bottom,
        var(--fog-grey) 0%,
        var(--fog-grey) 55%,
        #B8AFA5 75%,
        var(--basalt) 100%
    );
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

/* --- Fog Drift Layers --- */
.fog-layer {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    pointer-events: none;
}

.fog-layer-1 {
    background: radial-gradient(ellipse 60% 50% at 40% 45%, rgba(213, 206, 197, 0.6) 0%, transparent 70%);
    animation: fogDrift1 20s ease-in-out infinite;
}

.fog-layer-2 {
    background: radial-gradient(ellipse 50% 60% at 60% 55%, rgba(196, 218, 210, 0.3) 0%, transparent 65%);
    animation: fogDrift2 28s ease-in-out infinite;
}

.fog-layer-3 {
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(213, 206, 197, 0.5) 0%, transparent 70%);
    animation: fogDrift1 22s ease-in-out infinite;
}

.fog-layer-4 {
    background: radial-gradient(ellipse 55% 55% at 45% 50%, rgba(196, 218, 210, 0.25) 0%, transparent 65%);
    animation: fogDrift2 26s ease-in-out infinite;
}

@keyframes fogDrift1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(30px, -8px); }
    50% { transform: translate(60px, 4px); }
    75% { transform: translate(25px, 8px); }
}

@keyframes fogDrift2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-25px, 6px); }
    50% { transform: translate(-50px, -4px); }
    75% { transform: translate(-20px, -8px); }
}

/* --- Opening Content --- */
.opening-content {
    position: relative;
    z-index: 2;
    padding-left: 15vw;
    padding-top: 40vh;
}

.logotype {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(32px, 5vw, 72px);
    letter-spacing: 0.4em;
    color: var(--basalt);
    opacity: 0;
    transform: translateY(8px);
    animation: fadeInLogotype 1400ms ease-out 600ms forwards;
}

.hangul-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 200;
    font-size: clamp(28px, 4.5vw, 64px);
    letter-spacing: 0.2em;
    color: var(--oxidized-copper);
    margin-top: 0.5em;
    margin-left: 3vw;
    opacity: 0;
    transform: translateY(8px);
    animation: fadeInHangul 1200ms ease-out 1000ms forwards;
}

@keyframes fadeInLogotype {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInHangul {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 0.85; transform: translateY(0); }
}

/* --- Content Blocks --- */
.content-block {
    position: relative;
    padding: clamp(30px, 4vw, 60px) clamp(25px, 3.5vw, 50px);
    margin: 60px auto;
}

.block-wide {
    width: clamp(300px, 65vw, 900px);
}

.block-narrow {
    width: clamp(260px, 40vw, 560px);
}

.block-medium {
    width: clamp(280px, 52vw, 720px);
}

.block-left {
    margin-left: 8vw;
    margin-right: auto;
}

.block-right {
    margin-left: auto;
    margin-right: 8vw;
}

.block-center-left {
    margin-left: 12vw;
    margin-right: auto;
}

.block-center-right {
    margin-left: auto;
    margin-right: 12vw;
}

.content-block-light {
    background-color: var(--warm-parchment);
    color: var(--basalt);
    border-radius: 4px 6px 3px 7px;
}

.content-block-dark {
    background-color: var(--basalt);
    color: var(--fog-grey);
    border-radius: 6px 3px 7px 4px;
}

/* Overlapping effect - negative margin on some blocks */
.content-block:nth-child(odd) {
    margin-top: -20px;
}

.section-header {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(22px, 3vw, 42px);
    letter-spacing: 0.15em;
    margin-bottom: 1em;
    line-height: 1.3;
}

.content-block-light .section-header {
    color: var(--basalt);
}

.content-block-dark .section-header {
    color: var(--seafoam-wash);
}

.body-text {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.8vw, 19px);
    line-height: 1.75;
    max-width: 65ch;
}

.content-block-dark .body-text {
    color: var(--fog-grey);
}

/* --- Irregular Edges --- */
.irregular-edge-1 {
    clip-path: polygon(0% 1%, 99% 0%, 100% 98%, 2% 100%);
}

.irregular-edge-2 {
    clip-path: polygon(1% 0%, 100% 2%, 99% 100%, 0% 99%);
}

/* --- Interstitial Moments --- */
.interstitial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 25vh 5vw;
    text-align: center;
}

.interstitial-text {
    opacity: 0;
}

.interstitial-text.korean-text {
    font-family: 'Noto Serif KR', serif;
    font-weight: 200;
    font-size: clamp(20px, 3vw, 38px);
    letter-spacing: 0.3em;
    color: var(--basalt);
    margin-bottom: 1.5em;
}

.interstitial-text.english-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(16px, 2vw, 26px);
    letter-spacing: 0.2em;
    color: var(--espresso-surface);
    font-style: italic;
}

/* --- Reveal Animation --- */
.reveal-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.reveal-element.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Interstitial text gets slower animation */
.interstitial.revealed .interstitial-text {
    opacity: 1;
    transition: opacity 1400ms ease-out, letter-spacing 1400ms ease-out;
}

.interstitial.revealed .interstitial-text.korean-text {
    letter-spacing: 0.3em;
    transition-delay: 0ms;
}

.interstitial.revealed .interstitial-text.english-text {
    letter-spacing: 0.2em;
    transition-delay: 200ms;
}

/* Initial state for interstitial text letter-spacing animation */
.interstitial .interstitial-text.korean-text {
    letter-spacing: 0.5em;
}

.interstitial .interstitial-text.english-text {
    letter-spacing: 0.4em;
}

/* --- Ceramic Ring Motifs --- */
.ceramic-ring {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
}

.ceramic-ring-1 {
    margin-left: 65vw;
    padding: 60px 0;
}

.ceramic-ring-2 {
    margin: 0 auto;
    padding: 80px 0;
}

.ceramic-ring-3 {
    margin-left: 20vw;
    padding: 60px 0;
}

/* Animated ring stroke */
#ring-path {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    transition: stroke-dashoffset 2s ease-out;
}

#animated-ring.revealed #ring-path {
    stroke-dashoffset: 0;
}

/* --- Tidal Line Dividers --- */
.tidal-line {
    width: clamp(200px, 50vw, 600px);
    margin: 20px auto;
    padding: 15px 0;
}

.tidal-line svg {
    width: 100%;
    height: 20px;
}

/* --- Terminal Zone --- */
.terminal-zone {
    position: relative;
    width: 100vw;
    height: 80vh;
    background: linear-gradient(
        to bottom,
        var(--basalt) 0%,
        #B8AFA5 40%,
        var(--fog-grey) 70%,
        var(--fog-grey) 100%
    );
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.terminal-ring {
    position: relative;
    z-index: 2;
    margin-left: 15vw;
    margin-top: 10vh;
    opacity: 0.7;
}

/* --- Links (if any) --- */
a {
    color: var(--celadon-crack);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 300ms ease, border-color 300ms ease;
}

a:hover {
    color: var(--celadon-hover);
    border-bottom-color: var(--espresso-surface);
}

/* --- Selection --- */
::selection {
    background-color: var(--seafoam-wash);
    color: var(--basalt);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--fog-grey);
}

::-webkit-scrollbar-thumb {
    background: var(--celadon-crack);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--celadon-hover);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .opening-content {
        padding-left: 8vw;
        padding-top: 35vh;
    }

    .block-left,
    .block-right,
    .block-center-left,
    .block-center-right {
        margin-left: 5vw;
        margin-right: 5vw;
        width: calc(100vw - 10vw);
    }

    .ceramic-ring-1 {
        margin-left: 50vw;
    }

    .ceramic-ring-3 {
        margin-left: 10vw;
    }

    .interstitial {
        padding: 15vh 8vw;
        min-height: 40vh;
    }

    .terminal-ring {
        margin-left: 10vw;
    }
}

@media (max-width: 480px) {
    .logotype {
        letter-spacing: 0.25em;
    }

    .hangul-title {
        margin-left: 2vw;
    }
}