/* ggoomimi.com - Design Language Stylesheet */
/* Candle-atmospheric luxury aesthetic */

/* ========================================
   CSS Custom Properties
   ======================================== */
:root {
    --obsidian-smoke: #0F0A06;
    --charred-umber: #1A1008;
    --kiln-shadow: #2D1810;
    --burnt-persimmon: #C4722A;
    --melted-saffron: #D4983E;
    --candlewick-gold: #E8B86D;
    --warm-parchment: #D4BFA3;
    --aged-bronze: #8B7355;
    --smoked-walnut: #3D2A1A;
    --warmth: 0;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background: var(--obsidian-smoke);
    color: var(--warm-parchment);
    font-family: 'Libre Baskerville', 'Georgia', serif;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.85;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Film Grain Overlay
   ======================================== */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    mix-blend-mode: overlay;
}

#grain-overlay::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    animation: grainDrift 8s steps(1) infinite;
}

@keyframes grainDrift {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(3%, -8%); }
    30% { transform: translate(-7%, 2%); }
    40% { transform: translate(5%, 5%); }
    50% { transform: translate(-3%, 7%); }
    60% { transform: translate(8%, -3%); }
    70% { transform: translate(-2%, -6%); }
    80% { transform: translate(6%, 4%); }
    90% { transform: translate(-4%, 8%); }
    100% { transform: translate(0, 0); }
}

/* ========================================
   Scroll Progress Bar
   ======================================== */
#scroll-progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 2px;
    height: 0%;
    background: var(--burnt-persimmon);
    opacity: 0.3;
    z-index: 999;
    transition: height 0.1s linear;
}

/* ========================================
   Smoke Wisps (Global)
   ======================================== */
#smoke-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.08;
}

.smoke-wisp-svg {
    position: absolute;
    width: 80px;
    height: 300px;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
}

.smoke-wisp {
    fill: none;
    stroke: var(--aged-bronze);
    stroke-width: 1;
    opacity: 0.12;
    stroke-linecap: round;
}

.smoke-wisp-1 {
    animation: smokeRise 12s ease-in-out infinite;
}

.smoke-wisp-2 {
    animation: smokeRise 14s ease-in-out infinite;
    animation-delay: -4s;
}

.smoke-wisp-3 {
    animation: smokeRise 10s ease-in-out infinite;
    animation-delay: -7s;
}

@keyframes smokeRise {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
    50% { transform: translateY(-15px) rotate(3deg); opacity: 0.08; }
    100% { transform: translateY(-30px) rotate(-2deg); opacity: 0; }
}

/* Section Smoke Wisps */
.smoke-wisps-section {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 100px;
    pointer-events: none;
    z-index: 3;
}

.section-smoke {
    width: 100%;
    height: 100%;
}

.smoke-s1 {
    animation: smokeRise 11s ease-in-out infinite;
}

.smoke-s2 {
    animation: smokeRise 13s ease-in-out infinite;
    animation-delay: -3s;
}

.smoke-s3 {
    animation: smokeRise 9s ease-in-out infinite;
    animation-delay: -6s;
}

/* ========================================
   Chamber (Section) Base
   ======================================== */
.chamber {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15vh 10vw;
}

.chamber-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1200px;
}

/* ========================================
   Bounce-Enter Animation
   ======================================== */
@keyframes bounceEnter {
    0% { opacity: 0; transform: translateY(40px); }
    60% { opacity: 1; transform: translateY(-8px); }
    80% { transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-bounce {
    opacity: 0;
    transform: translateY(40px);
}

.animate-bounce.is-visible {
    animation: bounceEnter 800ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ========================================
   Wax Drip Dividers
   ======================================== */
.wax-drip-divider {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 16px;
    z-index: 4;
}

.wax-drip-svg {
    width: 100%;
    height: 100%;
}

/* ========================================
   Chamber I: The Threshold (Hero)
   ======================================== */
#chamber-1 {
    background: linear-gradient(180deg, var(--charred-umber) 0%, var(--kiln-shadow) 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.flame-glow-pulse {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.flame-glow-pulse::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse 400px 600px at 50% 55%, var(--burnt-persimmon), transparent);
    opacity: 0.06;
    animation: flamePulse 6s ease-in-out infinite;
}

@keyframes flamePulse {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.10; }
}

.hero-logotype {
    text-align: center;
    position: relative;
    z-index: 5;
}

.logotype-korean {
    display: block;
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 300;
    font-size: clamp(18px, 2.5vw, 32px);
    letter-spacing: 0.2em;
    color: var(--aged-bronze);
    margin-bottom: 1rem;
}

.logotype-main {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 300;
    font-size: clamp(48px, 12vw, 180px);
    letter-spacing: 0.08em;
    line-height: 1.05;
    color: var(--warm-parchment);
    text-transform: lowercase;
}

.hero-subtitle {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 300;
    font-size: clamp(16px, 2vw, 24px);
    letter-spacing: 0.15em;
    color: var(--aged-bronze);
    margin-top: 2.5rem;
}

.hero-subtitle-en {
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(11px, 1vw, 13px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--aged-bronze);
    margin-top: 0.8rem;
    opacity: 0.7;
}

/* ========================================
   Chamber II: The Flame Chamber
   ======================================== */
#chamber-2 {
    background: linear-gradient(180deg, var(--kiln-shadow) 0%, var(--charred-umber) 50%, var(--obsidian-smoke) 100%);
}

.chamber-two-col {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 6vw;
    align-items: start;
}

.col-text {
    padding-top: 8vh;
}

.section-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 500;
    font-size: clamp(36px, 6vw, 80px);
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--warm-parchment);
    margin-bottom: 1rem;
}

.section-label {
    display: block;
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(10px, 0.8vw, 12px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--aged-bronze);
    margin-bottom: 2rem;
}

.text-body {
    font-family: 'Libre Baskerville', 'Georgia', serif;
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.85;
    color: var(--warm-parchment);
}

.text-body p + p {
    margin-top: 1.5em;
}

.col-visual {
    position: relative;
    margin-top: 0;
}

.photo-frame {
    position: relative;
    width: 100%;
    padding-bottom: 140%;
    overflow: hidden;
    border-radius: 2px;
}

.photo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, var(--kiln-shadow) 0%, var(--smoked-walnut) 40%, var(--charred-umber) 100%);
    overflow: hidden;
}

/* Bokeh circles simulating candlelight photography */
.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
}

.bokeh-1 {
    width: 120px;
    height: 120px;
    background: var(--candlewick-gold);
    opacity: 0.15;
    top: 20%;
    left: 30%;
    animation: bokehFloat 8s ease-in-out infinite;
}

.bokeh-2 {
    width: 80px;
    height: 80px;
    background: var(--melted-saffron);
    opacity: 0.12;
    top: 45%;
    left: 55%;
    animation: bokehFloat 10s ease-in-out infinite;
    animation-delay: -2s;
}

.bokeh-3 {
    width: 60px;
    height: 60px;
    background: var(--burnt-persimmon);
    opacity: 0.18;
    top: 65%;
    left: 25%;
    animation: bokehFloat 7s ease-in-out infinite;
    animation-delay: -4s;
}

.bokeh-4 {
    width: 100px;
    height: 100px;
    background: var(--candlewick-gold);
    opacity: 0.08;
    top: 35%;
    left: 60%;
    animation: bokehFloat 12s ease-in-out infinite;
    animation-delay: -6s;
}

.bokeh-5 {
    width: 40px;
    height: 40px;
    background: var(--warm-parchment);
    opacity: 0.1;
    top: 80%;
    left: 45%;
    animation: bokehFloat 9s ease-in-out infinite;
    animation-delay: -3s;
}

@keyframes bokehFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(10px, -15px) scale(1.1); }
    50% { transform: translate(-8px, 10px) scale(0.95); }
    75% { transform: translate(12px, 5px) scale(1.05); }
}

/* ========================================
   Chamber III: The Materials Atelier
   ======================================== */
#chamber-3 {
    background: var(--obsidian-smoke);
    padding: 10vh 0;
    min-height: auto;
}

#chamber-3 .chamber-content {
    max-width: 100%;
    padding: 0;
}

.materials-panels {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.material-panel {
    position: relative;
    min-height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10vh 10vw;
    overflow: hidden;
}

.panel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.panel-bg-1 {
    background: linear-gradient(135deg, var(--charred-umber) 0%, var(--kiln-shadow) 50%, var(--obsidian-smoke) 100%);
}

.panel-bg-2 {
    background: linear-gradient(225deg, var(--kiln-shadow) 0%, var(--obsidian-smoke) 60%, var(--charred-umber) 100%);
}

.panel-bg-3 {
    background: linear-gradient(45deg, var(--obsidian-smoke) 0%, var(--charred-umber) 40%, var(--kiln-shadow) 100%);
}

.panel-text {
    position: relative;
    z-index: 5;
    max-width: 480px;
}

.panel-text-tl {
    align-self: flex-start;
}

.panel-text-center {
    margin: 0 auto;
    text-align: center;
}

.panel-text-br {
    margin-left: auto;
    text-align: right;
}

.panel-title {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 500;
    font-size: clamp(32px, 5vw, 64px);
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--candlewick-gold);
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
}

.panel-desc {
    font-family: 'Libre Baskerville', 'Georgia', serif;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.85;
    color: var(--warm-parchment);
    opacity: 0.85;
}

/* ========================================
   Chamber IV: The Ritual Space
   ======================================== */
#chamber-4 {
    background: linear-gradient(180deg, var(--obsidian-smoke) 0%, var(--charred-umber) 50%, var(--kiln-shadow) 100%);
}

.ritual-content {
    max-width: 540px;
    text-align: center;
    margin: 0 auto;
}

.ritual-title {
    font-size: clamp(48px, 8vw, 120px);
    font-weight: 300;
    color: var(--candlewick-gold);
    margin-bottom: 0.3rem;
}

.ritual-translation {
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--aged-bronze);
    margin-bottom: 3rem;
}

.ritual-text {
    font-family: 'Libre Baskerville', 'Georgia', serif;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.85;
    color: var(--warm-parchment);
}

.ritual-text p + p {
    margin-top: 1.8em;
}

/* ========================================
   Chamber V: The Afterglow
   ======================================== */
#chamber-5 {
    background: linear-gradient(180deg, var(--kiln-shadow) 0%, var(--obsidian-smoke) 40%, #050302 100%);
    min-height: 80vh;
}

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

.afterglow-logotype {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 300;
    font-size: clamp(48px, 15vw, 200px);
    letter-spacing: 0.08em;
    line-height: 1.05;
    color: var(--warm-parchment);
    opacity: 0.15;
    text-transform: lowercase;
    user-select: none;
}

.afterglow-footer {
    margin-top: 4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-mark {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-weight: 400;
    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: 0.1em;
    color: var(--aged-bronze);
}

.footer-divider {
    color: var(--smoked-walnut);
    font-size: 1.2em;
}

.footer-year {
    font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(11px, 0.9vw, 13px);
    letter-spacing: 0.15em;
    color: var(--aged-bronze);
    opacity: 0.6;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .chamber {
        padding: 10vh 6vw;
    }

    .chamber-two-col {
        grid-template-columns: 1fr;
        gap: 4vh;
    }

    .col-text {
        padding-top: 0;
    }

    .col-visual {
        margin-top: 2vh;
    }

    .photo-frame {
        padding-bottom: 100%;
    }

    .material-panel {
        min-height: 60vh;
        padding: 8vh 6vw;
    }

    .panel-text {
        max-width: 100%;
    }

    .panel-text-center {
        text-align: left;
        margin: 0;
    }

    .panel-text-br {
        text-align: left;
        margin-left: 0;
    }

    .ritual-content {
        max-width: 100%;
    }

    .logotype-main {
        font-size: clamp(48px, 16vw, 100px);
    }

    .afterglow-logotype {
        font-size: clamp(40px, 18vw, 120px);
    }
}