/* ============================================
   jungchi.boo — Luxury Cottagecore Political Salon
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
    --estate-charcoal: #1E1712;
    --marble-cream: #F2E6D4;
    --terracotta-ember: #C4603A;
    --burnished-gold: #B8860B;
    --deep-walnut: #2C1810;
    --parchment-glow: #F2E6D4;
    --northern-sage: #6B8F71;
    --celestial-rose: #C27D7D;
    --twilight-lavender: #8B7DAF;
    --vein-grey: #9A8E82;
    --burnt-sienna: #8B5A2B;

    --font-display: 'Barlow Condensed', sans-serif;
    --font-body: 'Cormorant Garamond', serif;
    --font-mono: 'DM Mono', monospace;
}

/* ---- 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(--estate-charcoal);
    color: var(--parchment-glow);
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.005em;
    overflow-x: hidden;
}

.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---- Fade Reveal Animation ---- */
.panel {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.panel.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Panels with rotation should preserve their rotation when revealed */
.panel-wide.revealed { transform: translateY(0) rotate(-1.5deg); }
.panel-narrow.revealed { transform: translateY(0) rotate(2deg); }
.panel-overlap.revealed { transform: translateY(0) rotate(0.5deg); }
.card-left.revealed { transform: translateY(0) rotate(-2deg); }
.card-center.revealed { transform: translateY(0); }
.card-right.revealed { transform: translateY(0) rotate(3deg); }
.panel-wide-right.revealed { transform: translateY(0) rotate(1.5deg); }
.panel-narrow-left.revealed { transform: translateY(0) rotate(-2deg); }
.panel-full.revealed { transform: translateY(0) rotate(0.5deg); }

/* ---- Aurora Blobs ---- */
.aurora-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.12;
    animation: aurora-drift 20s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

.aurora-sage { background: var(--northern-sage); top: -10vh; left: -5vw; }
.aurora-rose { background: var(--celestial-rose); top: 10vh; left: -5vw; animation-delay: -5s; }
.aurora-lavender { background: var(--twilight-lavender); top: 30vh; right: -10vw; animation-delay: -12s; }

@keyframes aurora-drift {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
    100% { transform: translate(15px, 10px) scale(1.02); }
}

/* ---- Marble Texture Background ---- */
.marble-bg {
    background-color: var(--marble-cream);
    background-image:
        repeating-linear-gradient(37deg, transparent 0px, transparent 14px, rgba(154,142,130,0.08) 14px, rgba(154,142,130,0.08) 15px, transparent 15px, transparent 40px),
        repeating-linear-gradient(113deg, transparent 0px, transparent 18px, rgba(154,142,130,0.06) 18px, rgba(154,142,130,0.06) 19px, transparent 19px, transparent 50px),
        radial-gradient(ellipse at 20% 50%, rgba(154,142,130,0.05) 0%, transparent 70%),
        radial-gradient(ellipse at 80% 20%, rgba(154,142,130,0.04) 0%, transparent 60%);
    color: var(--deep-walnut);
}

/* ---- Linen Texture Background ---- */
.linen-bg {
    background-color: var(--marble-cream);
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(139,90,43,0.03) 2px, rgba(139,90,43,0.03) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(139,90,43,0.03) 2px, rgba(139,90,43,0.03) 4px);
    color: var(--deep-walnut);
}

/* ---- Terracotta Background ---- */
.terracotta-bg {
    background: linear-gradient(135deg, var(--terracotta-ember) 0%, #A04E2D 100%);
    color: var(--parchment-glow);
}

.terracotta-wash-bg {
    background: linear-gradient(180deg, rgba(196,96,58,0.15) 0%, rgba(196,96,58,0.08) 100%);
    background-color: var(--marble-cream);
    color: var(--deep-walnut);
}

/* ==================================
   OPENING SCENE
   ================================== */
.opening-scene {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 4vw;
}

.aurora-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(107,143,113,0.3) 0%, rgba(194,125,125,0.2) 40%, rgba(139,125,175,0.15) 70%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.marble-texture-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(37deg, transparent 0px, transparent 14px, rgba(154,142,130,0.04) 14px, rgba(154,142,130,0.04) 15px, transparent 15px, transparent 40px),
        repeating-linear-gradient(113deg, transparent 0px, transparent 18px, rgba(154,142,130,0.03) 18px, rgba(154,142,130,0.03) 19px, transparent 19px, transparent 50px);
    pointer-events: none;
    z-index: 1;
}

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

.opening-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--burnt-sienna);
    opacity: 0.7;
    margin-bottom: 24px;
}

.opening-title {
    font-family: var(--font-display);
    font-size: clamp(56px, 10vw, 80px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--parchment-glow);
    line-height: 1;
    margin-bottom: 32px;
}

.opening-subtitle {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.72;
    color: var(--parchment-glow);
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto;
}

.scroll-invite {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: scroll-bob 3s ease-in-out infinite;
}

@keyframes scroll-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(12px); }
}

/* ==================================
   VINE DIVIDERS
   ================================== */
.vine-divider {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.vine-horizontal {
    width: 60vw;
    max-width: 600px;
    height: 40px;
}

.vine-closing {
    width: 40vw;
    max-width: 400px;
}

/* ==================================
   BROKEN-GRID SECTIONS
   ================================== */
.discourse-section,
.extended-discourse {
    position: relative;
    padding: 8vh 0;
    overflow: hidden;
}

.salon-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: 0;
    padding: 4vw;
    position: relative;
    z-index: 1;
}

/* Grid Panels - shared styles */
.grid-panel {
    padding: 40px 36px;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(139, 90, 43, 0.15);
    position: relative;
}

/* Panel I: Wide */
.panel-wide {
    grid-column: 1 / 8;
    grid-row: span 3;
    transform: rotate(-1.5deg);
    z-index: 2;
}

/* Panel II: Narrow tall */
.panel-narrow {
    grid-column: 6 / 12;
    grid-row: span 4;
    margin-top: 60px;
    transform: rotate(2deg);
    z-index: 3;
}

/* Panel III: Overlap */
.panel-overlap {
    grid-column: 3 / 10;
    margin-top: -40px;
    transform: rotate(0.5deg);
    z-index: 1;
}

/* Lower grid panels */
.panel-wide-right {
    grid-column: 5 / 13;
    grid-row: span 3;
    transform: rotate(1.5deg);
    z-index: 2;
}

.panel-narrow-left {
    grid-column: 1 / 7;
    grid-row: span 4;
    margin-top: 40px;
    transform: rotate(-2deg);
    z-index: 3;
}

.panel-full {
    grid-column: 2 / 11;
    margin-top: -30px;
    transform: rotate(0.5deg);
    z-index: 1;
}

/* Panel Label */
.panel-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--burnt-sienna);
    opacity: 0.7;
    margin-bottom: 16px;
}

.terracotta-bg .panel-label {
    color: var(--parchment-glow);
    opacity: 0.6;
}

/* Panel Heading */
.panel-heading {
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 20px;
}

.marble-bg .panel-heading,
.linen-bg .panel-heading,
.terracotta-wash-bg .panel-heading {
    color: var(--deep-walnut);
}

.terracotta-bg .panel-heading {
    color: var(--parchment-glow);
}

/* Panel Body */
.panel-body {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.72;
    letter-spacing: 0.005em;
    margin-bottom: 16px;
}

.panel-body:last-child {
    margin-bottom: 0;
}

.panel-body em {
    font-style: italic;
    color: var(--terracotta-ember);
}

.terracotta-bg .panel-body em {
    color: var(--burnished-gold);
}

/* ==================================
   SALON FLOOR (Three Pillars)
   ================================== */
.salon-floor {
    position: relative;
    padding: 10vh 4vw;
    overflow: hidden;
}

.salon-header {
    text-align: center;
    margin-bottom: 8vh;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--parchment-glow);
    line-height: 1.1;
}

.salon-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 2vw;
}

.salon-card {
    position: relative;
    padding: 48px 36px;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(139, 90, 43, 0.15);
    width: 340px;
    min-height: 320px;
}

.card-left {
    transform: rotate(-2deg);
    z-index: 1;
    margin-right: -30px;
    margin-top: 40px;
}

.card-center {
    transform: rotate(0deg);
    z-index: 3;
    position: relative;
}

.card-right {
    transform: rotate(3deg);
    z-index: 2;
    margin-left: -30px;
    margin-top: 60px;
}

.card-corner-ornament {
    position: absolute;
}

.card-corner-ornament.top-left {
    top: 12px;
    left: 12px;
}

.card-corner-ornament.bottom-right {
    bottom: 12px;
    right: 12px;
}

.card-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 16px;
    line-height: 1.1;
}

.marble-bg .card-title,
.linen-bg .card-title,
.terracotta-wash-bg .card-title {
    color: var(--deep-walnut);
}

.card-text {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.72;
}

/* ==================================
   WAX SEAL SECTION
   ================================== */
.wax-seal-section {
    position: relative;
    padding: 6vh 4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wax-seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.seal-outer {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--terracotta-ember);
    box-shadow:
        0 2px 8px rgba(196, 96, 58, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 -2px 6px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.seal-outer::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 1px solid var(--burnished-gold);
    opacity: 0.3;
}

.seal-inner {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.seal-character {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 500;
    color: var(--parchment-glow);
}

.seal-caption {
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--burnt-sienna);
    opacity: 0.6;
}

/* ==================================
   CLOSING THRESHOLD
   ================================== */
.closing-threshold {
    position: relative;
    padding: 10vh 4vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.closing-letter {
    max-width: 480px;
    text-align: center;
    padding: 60px 40px;
    position: relative;
    z-index: 1;
}

.closing-salutation {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 500;
    font-style: italic;
    color: var(--celestial-rose);
    margin-bottom: 28px;
}

.closing-body {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.72;
    color: var(--parchment-glow);
    opacity: 0.9;
    margin-bottom: 20px;
}

.closing-signature {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 500;
    font-style: italic;
    color: var(--burnished-gold);
    margin-top: 40px;
    line-height: 1.6;
}

.closing-korean {
    font-style: normal;
    font-size: 14px;
    color: var(--vein-grey);
    letter-spacing: 0.02em;
}

.closing-gradient {
    width: 100%;
    height: 200px;
    background: linear-gradient(180deg, transparent 0%, var(--estate-charcoal) 100%);
    position: relative;
    z-index: 1;
}

/* ==================================
   RESPONSIVE — MOBILE
   ================================== */
@media (max-width: 900px) {
    .salon-grid {
        display: flex;
        flex-direction: column;
        gap: 24px;
        padding: 4vw;
    }

    .grid-panel {
        transform: none !important;
        margin-top: 0 !important;
    }

    .panel-wide.revealed,
    .panel-narrow.revealed,
    .panel-overlap.revealed,
    .panel-wide-right.revealed,
    .panel-narrow-left.revealed,
    .panel-full.revealed {
        transform: translateY(0) !important;
    }

    .salon-cards {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .salon-card {
        width: 100%;
        max-width: 480px;
        margin: 0 !important;
        transform: none !important;
    }

    .card-left.revealed,
    .card-center.revealed,
    .card-right.revealed {
        transform: translateY(0) !important;
    }

    .opening-title {
        font-size: clamp(40px, 12vw, 60px);
    }

    .vine-horizontal {
        width: 80vw;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    .grid-panel {
        padding: 28px 24px;
    }

    .salon-card {
        padding: 36px 24px;
        min-height: auto;
    }

    .closing-letter {
        padding: 40px 20px;
    }
}