/* ============================================
   20241204.com — Styles
   Commemorating the night democracy held.
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Palette — Sunset-Warm */
    --dark-night: #0a0a12;
    --indigo-twilight: #1a1a3e;
    --candlelight-amber: #e8a849;
    --vermillion-pulse: #c44536;
    --parchment-warm: #f2e6d0;
    --morning-gold: #fdf0d5;
    --warm-cream: #f5efe0;
    --deep-charcoal: #1c1917;
    --dusty-rose: #b07d6b;
    --tarnished-brass: #9a7b4f;

    /* Dynamic background (updated via JS) */
    --bg-color: #0a0a12;
    --text-color: #f5efe0;
}

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

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

body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Grain 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 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-repeat: repeat;
    background-size: 256px 256px;
}

/* --- Progress Indicator --- */
#progress-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.6s ease;
}

#progress-indicator.visible {
    opacity: 1;
}

.progress-track {
    width: 2px;
    height: 200px;
    background: rgba(154, 123, 79, 0.2);
    border-radius: 1px;
    position: relative;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--tarnished-brass);
    border-radius: 1px;
    transition: height 0.1s linear;
}

.progress-times {
    position: absolute;
    top: 0;
    right: 15px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.progress-time {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--tarnished-brass);
    opacity: 0.4;
    transition: opacity 0.3s ease;
    white-space: nowrap;
}

.progress-time.active {
    opacity: 1;
}

.progress-current-time {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--candlelight-amber);
    margin-top: 10px;
    transition: opacity 0.3s ease;
}

/* --- Hangul Background Fragments --- */
.hangul-fragment {
    position: fixed;
    font-family: 'Noto Serif KR', serif;
    font-weight: 700;
    color: var(--tarnished-brass);
    pointer-events: none;
    z-index: 1;
    user-select: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.hangul-fragment.visible {
    opacity: 0.04;
}

.hangul-1 {
    font-size: 18vw;
    top: 20%;
    left: -5%;
    transform: rotate(-10deg);
}

.hangul-2 {
    font-size: 14vw;
    top: 55%;
    right: -3%;
    transform: rotate(5deg);
}

.hangul-3 {
    font-size: 16vw;
    bottom: 10%;
    left: 10%;
    transform: rotate(-3deg);
}

/* --- Clock Watermark --- */
.clock-watermark {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vmin;
    height: 60vmin;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s ease;
}

.clock-watermark.visible {
    opacity: 1;
}

.clock-svg {
    width: 100%;
    height: 100%;
}

.clock-minute, .clock-hour {
    transform-origin: 100px 100px;
    transition: transform 0.5s ease;
}

/* --- Candle Flames --- */
.candle {
    position: fixed;
    width: 20px;
    height: 40px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.candle.visible {
    opacity: 1;
}

.candle-1 { left: 5%; top: 40%; }
.candle-2 { left: 15%; top: 65%; }
.candle-3 { right: 8%; top: 35%; }
.candle-4 { right: 18%; top: 55%; }
.candle-5 { left: 50%; top: 75%; }

.flame-path {
    animation: flicker 3s ease-in-out infinite;
    transform-origin: center bottom;
}

.flame-inner {
    animation: flicker-inner 2.5s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes flicker {
    0%, 100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
    15% { transform: scaleY(1.04) scaleX(0.97); filter: brightness(1.05); }
    30% { transform: scaleY(0.96) scaleX(1.02); filter: brightness(0.95); }
    50% { transform: scaleY(1.02) scaleX(0.98); filter: brightness(1.02); }
    70% { transform: scaleY(0.97) scaleX(1.03); filter: brightness(0.97); }
    85% { transform: scaleY(1.05) scaleX(0.96); filter: brightness(1.04); }
}

@keyframes flicker-inner {
    0%, 100% { transform: scaleY(1) scaleX(1); }
    20% { transform: scaleY(0.95) scaleX(1.03); }
    40% { transform: scaleY(1.05) scaleX(0.97); }
    60% { transform: scaleY(0.97) scaleX(1.02); }
    80% { transform: scaleY(1.03) scaleX(0.98); }
}

/* Different animation delays for each candle */
.candle-1 .flame-path { animation-delay: 0s; }
.candle-2 .flame-path { animation-delay: -0.7s; }
.candle-3 .flame-path { animation-delay: -1.3s; }
.candle-4 .flame-path { animation-delay: -2.1s; }
.candle-5 .flame-path { animation-delay: -0.4s; }
.candle-1 .flame-inner { animation-delay: -0.2s; }
.candle-2 .flame-inner { animation-delay: -1.1s; }
.candle-3 .flame-inner { animation-delay: -0.5s; }
.candle-4 .flame-inner { animation-delay: -1.8s; }
.candle-5 .flame-inner { animation-delay: -0.9s; }

/* --- Narrative Sections --- */
.narrative-section {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-inner {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 30px;
    position: relative;
    z-index: 10;
}

/* --- Fade Reveal Animation --- */
.fade-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

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

/* --- Section 1: The Silence Before --- */
#silence-before {
    min-height: 250vh;
    align-items: flex-end;
    padding-bottom: 0;
}

#silence-before .section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding-bottom: 10vh;
}

.the-void {
    height: 150vh;
    width: 100%;
    position: absolute;
    top: 0;
}

.silence-content {
    text-align: center;
}

.time-display {
    font-family: 'Roboto Slab', serif;
    font-weight: 900;
    font-size: clamp(6rem, 18vw, 16rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--warm-cream);
    margin-bottom: 20px;
}

.time-small {
    font-size: clamp(3rem, 8vw, 7rem);
    margin-bottom: 30px;
}

.silence-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    font-weight: 500;
    color: var(--tarnished-brass);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* --- Section 2: The Declaration --- */
#declaration {
    min-height: 120vh;
}

.declaration-content {
    position: relative;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.decree-fragment {
    position: relative;
    text-align: center;
}

.decree-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.3rem, 3vw, 2.2rem);
    color: var(--warm-cream);
    line-height: 1.5;
    display: inline-block;
}

.decree-text.blur-bg {
    text-shadow: 0 0 30px rgba(26, 26, 62, 0.8);
}

.decree-frag-1 { transform: translateX(-30px); }
.decree-frag-2 { transform: translateX(40px); }
.decree-frag-3 { transform: translateX(-20px); }
.decree-frag-4 { transform: translateX(30px); }

.decree-frag-1.revealed { transform: translateX(0) translateY(0); }
.decree-frag-2.revealed { transform: translateX(0) translateY(0); }
.decree-frag-3.revealed { transform: translateX(0) translateY(0); }
.decree-frag-4.revealed { transform: translateX(0) translateY(0); }

.decree-overlay-number {
    position: absolute;
    font-family: 'Roboto Slab', serif;
    font-weight: 900;
    font-size: clamp(15rem, 40vw, 30rem);
    color: var(--tarnished-brass);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
    z-index: -1;
}

.decree-time {
    margin-top: 20px;
}

/* --- Section 3: The Response --- */
#response {
    min-height: 130vh;
}

.response-content {
    text-align: center;
}

.response-text {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 30px;
    color: var(--candlelight-amber);
}

.korean-text {
    font-family: 'Noto Serif KR', 'Cormorant Garamond', serif;
}

.response-body {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    max-width: 650px;
    margin: 0 auto 60px;
    line-height: 1.9;
    color: var(--parchment-warm);
}

/* Photo Band */
.photo-band {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.photo-frame {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
}

.photo-placeholder {
    position: relative;
    width: 100%;
    padding-top: 130%;
    border-radius: 3px;
    overflow: hidden;
    filter: sepia(0.15) contrast(1.1) saturate(0.85);
}

.photo-1 { background: linear-gradient(135deg, #2a1f1a 0%, #3d2b1e 40%, #1a1510 100%); }
.photo-2 { background: linear-gradient(135deg, #1a1510 0%, #2a2015 40%, #3d3020 100%); }
.photo-3 { background: linear-gradient(135deg, #2a2520 0%, #1a1510 40%, #2a1f1a 100%); }

.photo-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    opacity: 0.3;
    mix-blend-mode: overlay;
}

.photo-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 15px;
    background: linear-gradient(transparent, rgba(10, 10, 18, 0.8));
}

.photo-caption {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--tarnished-brass);
    letter-spacing: 0.05em;
}

/* --- Horizontal Rule Animation --- */
.horizontal-rule {
    width: 0;
    height: 1px;
    background: var(--tarnished-brass);
    margin: 40px auto;
    transition: width 1.2s ease;
}

.horizontal-rule.animate-rule.drawn {
    width: 200px;
}

.animate-rule {
    width: 0;
    height: 1px;
    background: var(--tarnished-brass);
    transition: width 1.2s ease;
}

.animate-rule.drawn {
    width: 100%;
}

/* --- Section 4: The Vote --- */
#the-vote {
    min-height: 120vh;
}

.vote-content {
    text-align: center;
    position: relative;
}

.vote-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    font-weight: 500;
    color: var(--dusty-rose);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.vote-counter-wrapper {
    position: relative;
    margin-bottom: 40px;
}

.vote-counter {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(8rem, 25vw, 18rem);
    font-weight: 500;
    color: var(--candlelight-amber);
    line-height: 1;
    letter-spacing: -0.02em;
}

.vote-of {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 500;
    color: var(--tarnished-brass);
    margin-top: -10px;
}

.vote-result {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--parchment-warm);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.8;
}

.vote-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid var(--candlelight-amber);
    opacity: 0;
    pointer-events: none;
}

.vote-pulse.pulsing {
    animation: pulse-ring 1s ease-out;
}

@keyframes pulse-ring {
    0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); }
}

/* --- Section 5: The Dawn --- */
#the-dawn {
    min-height: 100vh;
}

.dawn-content {
    text-align: center;
}

.dawn-text {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.7;
    position: relative;
    display: inline-block;
    color: var(--deep-charcoal);
}

.dawn-line {
    display: inline;
}

.underline-svg {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 5px;
}

.underline-path {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    transition: stroke-dashoffset 1.5s ease;
}

.underline-path.drawn {
    stroke-dashoffset: 0;
}

#the-dawn .time-display {
    color: var(--deep-charcoal);
    opacity: 0.6;
}

/* --- Section 6: The Aftermath --- */
#aftermath {
    min-height: 120vh;
    color: var(--deep-charcoal);
}

#aftermath .section-inner {
    max-width: 700px;
}

.aftermath-content {
    padding: 80px 0;
}

.aftermath-heading {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--deep-charcoal);
    margin-bottom: 80px;
    position: relative;
    display: inline-block;
}

.heading-underline {
    width: 80%;
}

.timeline-entry {
    margin-bottom: 60px;
    position: relative;
}

.timeline-date {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tarnished-brass);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.timeline-line {
    height: 1px;
    background: var(--tarnished-brass);
    margin-bottom: 20px;
}

.timeline-heading {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    color: var(--deep-charcoal);
    margin-bottom: 12px;
}

.timeline-body {
    font-size: clamp(1rem, 2vw, 1.15rem);
    line-height: 1.8;
    color: var(--deep-charcoal);
    opacity: 0.85;
}

/* Aftermath Coda */
.aftermath-coda {
    margin-top: 100px;
    text-align: center;
}

.coda-text {
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--deep-charcoal);
    margin-bottom: 15px;
}

.coda-translation {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: var(--tarnished-brass);
    margin-bottom: 60px;
}

.final-rule {
    max-width: 100px;
}

.coda-date {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--tarnished-brass);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 40px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    #progress-indicator {
        right: 10px;
    }

    .progress-track {
        height: 150px;
    }

    .progress-times {
        height: 150px;
        right: 12px;
    }

    .progress-time {
        font-size: 8px;
    }

    .section-inner {
        padding: 40px 20px;
    }

    .photo-band {
        flex-direction: column;
        align-items: center;
    }

    .photo-frame {
        max-width: 280px;
        width: 100%;
    }

    .decree-overlay-number {
        font-size: 20rem;
    }

    .hangul-1 { font-size: 30vw; }
    .hangul-2 { font-size: 22vw; }
    .hangul-3 { font-size: 26vw; }

    .candle-2, .candle-4 {
        display: none;
    }
}

@media (max-width: 480px) {
    .time-display {
        font-size: clamp(4rem, 20vw, 8rem);
    }

    .time-small {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .vote-counter {
        font-size: clamp(6rem, 30vw, 10rem);
    }
}