/* ============================================
   munj.uk — Art Deco × Korean Heritage
   ============================================ */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: #1a1714;
    color: #d4cfc7; /* #2a2520 for light bg text, #7a9e8e celadon accent, #f0ead6 parchment */
    font-family: 'Special Elite', cursive;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.85;
    letter-spacing: 0.03em;
    overflow-x: hidden;
}

/* --- Lattice background pattern --- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(196,165,90,0.04) 30px, rgba(196,165,90,0.04) 31px),
        repeating-linear-gradient(135deg, transparent, transparent 30px, rgba(196,165,90,0.04) 30px, rgba(196,165,90,0.04) 31px);
    pointer-events: none;
    z-index: 0;
}

/* --- Progress Indicator --- */
.progress-bar {
    position: fixed;
    right: 24px;
    top: 10vh;
    height: 80vh;
    width: 2px;
    z-index: 1000;
}

.progress-track {
    position: absolute;
    inset: 0;
    background: rgba(196, 165, 90, 0.25);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #c4a55a;
    transition: height 0.1s linear;
}

.progress-diamond {
    position: absolute;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #c4a55a;
    transform: translate(-50%, -50%) rotate(45deg);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.progress-diamond:hover {
    transform: translate(-50%, -50%) rotate(45deg) scale(1.3);
    background: #d4a843;
}

/* ============================================
   Section 1: Overture
   ============================================ */
.overture {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1a1714;
    overflow: hidden;
    z-index: 1;
}

/* Sunburst */
.sunburst {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, #c4a55a 1deg, transparent 2deg,
        transparent 30deg, #c4a55a 31deg, transparent 32deg,
        transparent 60deg, #c4a55a 61deg, transparent 62deg,
        transparent 90deg, #c4a55a 91deg, transparent 92deg,
        transparent 120deg, #c4a55a 121deg, transparent 122deg,
        transparent 150deg, #c4a55a 151deg, transparent 152deg,
        transparent 180deg, #c4a55a 181deg, transparent 182deg,
        transparent 210deg, #c4a55a 211deg, transparent 212deg,
        transparent 240deg, #c4a55a 241deg, transparent 242deg,
        transparent 270deg, #c4a55a 271deg, transparent 272deg,
        transparent 300deg, #c4a55a 301deg, transparent 302deg,
        transparent 330deg, #c4a55a 331deg, transparent 332deg
    );
    opacity: 0;
    transform: scale(0);
    animation: sunburstExpand 3s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@keyframes sunburstExpand {
    0% { opacity: 0; transform: scale(0); }
    10% { opacity: 0.6; }
    100% { opacity: 0.35; transform: scale(1); }
}

/* Hero Title */
.hero-title {
    position: relative;
    z-index: 2;
    font-family: 'Poiret One', cursive;
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d4cfc7;
}

.hero-title .char {
    display: inline-block;
    opacity: 0;
}

.hero-title .char.visible {
    opacity: 1;
    animation: typeStrike 0.05s ease-out;
}

@keyframes typeStrike {
    0% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

/* Korean subtitle */
.hero-korean {
    position: relative;
    z-index: 2;
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 700;
    color: #c4a55a;
    opacity: 0;
    transition: opacity 0.8s ease;
    text-shadow: 0 0 40px rgba(196, 165, 90, 0.4);
    margin-top: 0.5rem;
}

.hero-korean.visible {
    opacity: 1;
}

/* ============================================
   Section 2: Archive Hall
   ============================================ */
.archive-hall {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15vh 2rem;
}

/* Vignette layout */
.vignette {
    display: grid;
    gap: 3rem;
    margin-bottom: 15vh;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vignette.in-view {
    opacity: 1;
    transform: translateY(0);
}

.vignette-left {
    grid-template-columns: 5fr 7fr;
    align-items: start;
}

.vignette-right {
    grid-template-columns: 7fr 5fr;
    align-items: start;
}

.vignette-center {
    grid-template-columns: 1fr;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Photo frames */
.photo-frame {
    position: relative;
    overflow: visible;
}

.photo-portrait {
    aspect-ratio: 3 / 4;
}

.photo-landscape {
    aspect-ratio: 16 / 9;
}

.photo-wide {
    aspect-ratio: 21 / 9;
}

.photo-surface {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background-color: #6b5e4f;
    box-shadow: inset 0 0 var(--vignette-spread, 80px) rgba(20, 17, 12, 0.65);
}

.photo-surface::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(180, 155, 110, 0.12);
}

.photo-surface::after {
    content: '';
    position: absolute;
    inset: 0;
    filter: url(#grain);
    opacity: var(--grain-opacity, 0.15);
    background: #6b5e4f;
    mix-blend-mode: overlay;
}

/* Corner brackets */
.corner-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    z-index: 2;
}

.corner-bracket::before,
.corner-bracket::after {
    content: '';
    position: absolute;
    background: #c4a55a;
}

.corner-tl { top: -4px; left: -4px; }
.corner-tl::before { width: 20px; height: 2px; top: 0; left: 0; }
.corner-tl::after { width: 2px; height: 20px; top: 0; left: 0; }

.corner-tr { top: -4px; right: -4px; }
.corner-tr::before { width: 20px; height: 2px; top: 0; right: 0; }
.corner-tr::after { width: 2px; height: 20px; top: 0; right: 0; }

.corner-bl { bottom: -4px; left: -4px; }
.corner-bl::before { width: 20px; height: 2px; bottom: 0; left: 0; }
.corner-bl::after { width: 2px; height: 20px; bottom: 0; left: 0; }

.corner-br { bottom: -4px; right: -4px; }
.corner-br::before { width: 20px; height: 2px; bottom: 0; right: 0; }
.corner-br::after { width: 2px; height: 20px; bottom: 0; right: 0; }

/* Photo captions */
.photo-caption {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    height: 30px;
    background: #1a1714;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8278;
}

.section-heading {
    font-family: 'Poiret One', cursive;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #c4a55a;
    margin-bottom: 1.5rem;
}

/* Typewriter text */
.typewriter-text {
    min-height: 2em;
    color: #d4cfc7;
}

.typewriter-text .cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: #d4a843;
    vertical-align: text-bottom;
    animation: cursorBlink 0.53s steps(2) infinite;
    margin-left: 2px;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* --- Deco Dividers --- */
.deco-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8vh auto;
}

/* Sunburst divider */
.deco-sunburst {
    width: 200px;
    height: 100px;
    position: relative;
    overflow: hidden;
}

.deco-sunburst::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translateX(-50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg, #c4a55a 0.5deg, transparent 1deg,
        transparent 15deg, #c4a55a 15.5deg, transparent 16deg,
        transparent 30deg, #c4a55a 30.5deg, transparent 31deg,
        transparent 45deg, #c4a55a 45.5deg, transparent 46deg,
        transparent 60deg, #c4a55a 60.5deg, transparent 61deg,
        transparent 75deg, #c4a55a 75.5deg, transparent 76deg,
        transparent 90deg, #c4a55a 90.5deg, transparent 91deg,
        transparent 105deg, #c4a55a 105.5deg, transparent 106deg,
        transparent 120deg, #c4a55a 120.5deg, transparent 121deg,
        transparent 135deg, #c4a55a 135.5deg, transparent 136deg,
        transparent 150deg, #c4a55a 150.5deg, transparent 151deg,
        transparent 165deg, #c4a55a 165.5deg, transparent 166deg,
        transparent 180deg
    );
    border-radius: 50%;
    opacity: 0.5;
}

/* Ziggurat / Stepped pyramid */
.deco-ziggurat {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.zig-step {
    height: 8px;
}

.zig-step-1 { width: 160px; background: #c4a55a; }
.zig-step-2 { width: 120px; background: #8b6f4e; }
.zig-step-3 { width: 80px; background: #c4a55a; }

/* Diamond chain */
.deco-diamond-chain {
    gap: 8px;
    align-items: center;
}

.chain-line {
    width: 40px;
    height: 1px;
    background: #c4a55a;
}

.chain-diamond {
    width: 8px;
    height: 8px;
    background: #c4a55a;
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* ============================================
   Section 3: The Salon
   ============================================ */
.salon {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #1a1714;
    padding: 2rem;
}

.calligraphy-container {
    width: clamp(200px, 40vw, 350px);
    margin-bottom: 3rem;
}

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

.cal-stroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: fill 0.8s ease;
}

.calligraphy-container.animate .cal-stroke-1 { animation: drawStroke 0.8s ease forwards 0s; }
.calligraphy-container.animate .cal-stroke-2 { animation: drawStroke 0.6s ease forwards 0.6s; }
.calligraphy-container.animate .cal-stroke-3 { animation: drawStroke 0.6s ease forwards 1.0s; }
.calligraphy-container.animate .cal-stroke-4 { animation: drawStroke 0.6s ease forwards 1.4s; }
.calligraphy-container.animate .cal-stroke-5 { animation: drawStroke 0.8s ease forwards 2.0s; }
.calligraphy-container.animate .cal-stroke-6 { animation: drawStroke 0.6s ease forwards 2.8s; }

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

.salon-text {
    max-width: 700px;
    text-align: center;
}

/* ============================================
   Section 4: Colophon
   ============================================ */
.colophon {
    position: relative;
    z-index: 1;
    height: 50vh;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0ead6;
}

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

.colophon-title {
    font-family: 'Poiret One', cursive;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: #2a2520;
    margin-bottom: 1.5rem;
}

.colophon-ornaments {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.colophon-diamond {
    width: 8px;
    height: 8px;
    background: #c4a55a;
    transform: rotate(45deg);
}

.colophon-year {
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2a2520;
}

/* Celadon accent for alternating headings */
.vignette-right .section-heading {
    color: #7a9e8e;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .progress-bar {
        display: none;
    }

    .vignette-left,
    .vignette-right {
        grid-template-columns: 1fr;
    }

    .vignette-right .vignette-text {
        order: 2;
    }

    .vignette-right .photo-frame {
        order: 1;
    }

    .sunburst {
        width: 300px;
        height: 300px;
    }

    .archive-hall {
        padding: 10vh 1.5rem;
    }

    .vignette {
        margin-bottom: 10vh;
    }

    .photo-frame {
        max-height: 350px;
    }
}

@media (min-width: 1200px) {
    .archive-hall {
        padding: 15vh calc((100vw - 1200px) / 2 + 2rem);
    }
}