/* polytical.club v2 — duotone street-style political community */
/*
 * Palette (duotone street):
 *   --street-indigo:    #181828 (primary dark)
 *   --amber-highlight:  #D0A050 (duotone warm)
 *   --canvas-cream:     #F0E8D0 (text on dark)
 *   --botanical-green:  #508848 (floral elements)
 *   --watercolor-rose:  #D08878 (wash tint)
 *   --wall-gray:        #484858 (secondary, borders)
 *   --bloom-pink:       #E0A0A0 (floral accent)
 * Fonts: Libre Baskerville (Google Fonts).
 * Scroll-triggered reveals are powered in JS via Intersection Observer.
 */

:root {
    --street-indigo: #181828;
    --amber-highlight: #D0A050;
    --canvas-cream: #F0E8D0;
    --botanical-green: #508848;
    --watercolor-rose: #D08878;
    --wall-gray: #484858;
    --bloom-pink: #E0A0A0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', Georgia, serif;
    background-color: #181828;
    color: #F0E8D0;
    line-height: 1.85;
    font-size: clamp(15px, 1vw, 17px);
    overflow-x: hidden;
}

/* ----------------- Hero base ----------------- */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 80px 24px;
    transition: filter 800ms ease;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 660px;
    text-align: center;
    padding: 24px;
    transition: transform 600ms ease, text-shadow 600ms ease;
    opacity: 0;
    transform: translateY(28px);
}

.hero-content.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 800ms ease, transform 800ms ease;
}

/* ----------------- Watercolor washes ----------------- */

.watercolor-wash {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 800ms ease, filter 800ms ease;
    opacity: 0.85;
}

.wash-street {
    background:
        radial-gradient(ellipse 60% 40% at 25% 30%, rgba(208, 160, 80, 0.22), transparent 70%),
        radial-gradient(ellipse 70% 50% at 80% 25%, rgba(208, 136, 120, 0.18), transparent 75%),
        radial-gradient(ellipse 50% 40% at 50% 80%, rgba(80, 136, 72, 0.20), transparent 70%),
        radial-gradient(ellipse 45% 35% at 15% 75%, rgba(224, 160, 160, 0.14), transparent 75%);
}

.wash-amber {
    background:
        radial-gradient(ellipse 70% 50% at 30% 30%, rgba(208, 160, 80, 0.30), transparent 70%),
        radial-gradient(ellipse 50% 45% at 75% 70%, rgba(208, 160, 80, 0.20), transparent 75%),
        radial-gradient(ellipse 40% 30% at 50% 50%, rgba(208, 136, 120, 0.14), transparent 70%);
}

.wash-rose {
    background:
        radial-gradient(ellipse 65% 50% at 25% 35%, rgba(208, 136, 120, 0.32), transparent 70%),
        radial-gradient(ellipse 55% 45% at 80% 70%, rgba(224, 160, 160, 0.22), transparent 75%),
        radial-gradient(ellipse 40% 35% at 50% 55%, rgba(208, 160, 80, 0.14), transparent 70%);
}

.wash-green {
    background:
        radial-gradient(ellipse 65% 50% at 30% 30%, rgba(80, 136, 72, 0.34), transparent 70%),
        radial-gradient(ellipse 55% 45% at 75% 75%, rgba(80, 136, 72, 0.22), transparent 75%),
        radial-gradient(ellipse 40% 35% at 50% 50%, rgba(208, 160, 80, 0.14), transparent 70%);
}

.wash-amber-alt {
    background:
        radial-gradient(ellipse 70% 55% at 70% 30%, rgba(208, 160, 80, 0.30), transparent 70%),
        radial-gradient(ellipse 55% 45% at 25% 70%, rgba(208, 160, 80, 0.22), transparent 75%),
        radial-gradient(ellipse 40% 35% at 50% 50%, rgba(80, 136, 72, 0.16), transparent 70%);
}

.wash-board {
    background:
        radial-gradient(ellipse 65% 55% at 50% 40%, rgba(208, 160, 80, 0.20), transparent 70%),
        radial-gradient(ellipse 55% 50% at 20% 80%, rgba(208, 136, 120, 0.16), transparent 75%),
        radial-gradient(ellipse 50% 45% at 80% 75%, rgba(80, 136, 72, 0.14), transparent 75%);
}

/* ----------------- Duotone overlay ----------------- */

.duotone-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(24, 24, 40, 0.4) 0%, rgba(24, 24, 40, 0.65) 100%);
    transition: opacity 800ms ease;
}

.duotone-overlay.tone-amber {
    background:
        linear-gradient(180deg, rgba(24, 24, 40, 0.45) 0%, rgba(24, 24, 40, 0.7) 100%),
        linear-gradient(135deg, transparent 50%, rgba(208, 160, 80, 0.18) 100%);
}

.duotone-overlay.tone-rose {
    background:
        linear-gradient(180deg, rgba(24, 24, 40, 0.45) 0%, rgba(24, 24, 40, 0.7) 100%),
        linear-gradient(135deg, transparent 50%, rgba(208, 136, 120, 0.18) 100%);
}

.duotone-overlay.tone-green {
    background:
        linear-gradient(180deg, rgba(24, 24, 40, 0.45) 0%, rgba(24, 24, 40, 0.7) 100%),
        linear-gradient(135deg, transparent 50%, rgba(80, 136, 72, 0.18) 100%);
}

/* ----------------- Hero typography ----------------- */

.viewpoint-label {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(240, 232, 208, 0.7);
    margin-bottom: 32px;
}

.domain-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 52px);
    color: #F0E8D0;
    margin-bottom: 28px;
    letter-spacing: -0.005em;
    transition: text-shadow 500ms ease;
}

.viewpoint-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(28px, 3.5vw, 52px);
    color: #F0E8D0;
    margin-bottom: 28px;
    transition: text-shadow 500ms ease;
}

.viewpoint-body {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.85;
    color: rgba(240, 232, 208, 0.92);
    margin-bottom: 24px;
}

.hero-caption {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 13px;
    color: rgba(240, 232, 208, 0.78);
}

.italic {
    font-style: italic;
}

.viewpoint-mark {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: 13px;
    color: rgba(240, 232, 208, 0.6);
    margin-top: 12px;
}

/* ----------------- Hero variant accents ----------------- */

#vp-grassroots .viewpoint-title { border-bottom: 1px dashed #D0A050; padding-bottom: 8px; display: inline-block; }
#vp-equity .viewpoint-title { border-bottom: 1px dashed #E0A0A0; padding-bottom: 8px; display: inline-block; }
#vp-markets .viewpoint-title { border-bottom: 1px dashed #508848; padding-bottom: 8px; display: inline-block; }
#vp-stewardship .viewpoint-title { border-bottom: 1px dashed #D0A050; padding-bottom: 8px; display: inline-block; }

#vp-grassroots .viewpoint-mark { color: #D0A050; }
#vp-equity .viewpoint-mark { color: #D08878; }
#vp-markets .viewpoint-mark { color: #508848; }
#vp-stewardship .viewpoint-mark { color: #E0A0A0; }

/* ----------------- Hero hover ----------------- */

.hero:hover .hero-content {
    text-shadow: 0 0 18px rgba(208, 160, 80, 0.28);
}

.hero[data-warm="#D08878"]:hover .hero-content {
    text-shadow: 0 0 18px rgba(208, 136, 120, 0.32);
}

.hero[data-warm="#508848"]:hover .hero-content {
    text-shadow: 0 0 18px rgba(80, 136, 72, 0.32);
}

.hero:hover .watercolor-wash {
    opacity: 1;
    filter: saturate(1.15);
}

.hero:hover .hero-content {
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(208, 160, 80, 0.18);
    border-radius: 2px;
}

/* ----------------- Botanical SVG ----------------- */

.botanical-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 360px;
    pointer-events: none;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 6%;
}

.botanical-svg {
    width: 110px;
    height: auto;
    transition: transform 600ms ease;
}

.pos-left { transform-origin: bottom center; }
.pos-center { width: 130px; transform: translateY(-10px); }
.pos-right { transform-origin: bottom center; }

.hero:hover .botanical-svg {
    transform: scale(1.02);
}

.hero:hover .pos-center {
    transform: translateY(-10px) scale(1.02);
}

.botanical-edge {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    z-index: 2;
}

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

/* SVG stroke draw animation */

.botanical-svg .stem,
.botanical-svg .leaf,
.edge-svg .stem,
.edge-svg .leaf,
.interlude-svg .stem,
.interlude-svg .leaf,
.border-svg .stem,
.border-svg .leaf {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1200ms ease;
}

.botanical-svg .bloom,
.edge-svg .bloom,
.interlude-svg .bloom,
.border-svg .bloom {
    opacity: 0;
    transition: opacity 800ms ease 600ms;
}

.botanical-svg.is-visible .stem,
.botanical-svg.is-visible .leaf,
.edge-svg.is-visible .stem,
.edge-svg.is-visible .leaf,
.interlude-svg.is-visible .stem,
.interlude-svg.is-visible .leaf,
.border-svg.is-visible .stem,
.border-svg.is-visible .leaf {
    stroke-dashoffset: 0;
}

.botanical-svg.is-visible .bloom,
.edge-svg.is-visible .bloom,
.interlude-svg.is-visible .bloom,
.border-svg.is-visible .bloom {
    opacity: 1;
}

/* ----------------- Scroll cue ----------------- */

.scroll-cue {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(240, 232, 208, 0.55);
    animation: scrollPulse 2400ms ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { transform: translate(-50%, 0); opacity: 0.45; }
    50% { transform: translate(-50%, 6px); opacity: 0.85; }
}

/* ----------------- Interlude ----------------- */

.interlude {
    width: 100%;
    background-color: #181828;
    padding: 48px 0 32px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border-top: 1px solid #484858;
    border-bottom: 1px solid #484858;
}

.interlude-svg {
    width: min(800px, 90vw);
    height: 200px;
}

/* ----------------- Community board (footer) ----------------- */

.community-board {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-color: #181828;
    padding: 120px 24px 80px;
    overflow: hidden;
    text-align: center;
}

.community-board .watercolor-wash {
    opacity: 0.7;
}

.botanical-border-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 2;
}

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

.footer-content {
    position: relative;
    z-index: 3;
    max-width: 660px;
    margin: 0 auto;
}

.footer-label {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(240, 232, 208, 0.65);
    margin-bottom: 28px;
}

.footer-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(26px, 3vw, 44px);
    color: #F0E8D0;
    margin-bottom: 28px;
}

.footer-text {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.85;
    color: rgba(240, 232, 208, 0.9);
    margin-bottom: 28px;
}

.footer-caption {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 13px;
    color: rgba(240, 232, 208, 0.7);
}

/* ----------------- Responsive ----------------- */

@media (max-width: 720px) {
    .botanical-bottom {
        height: 240px;
        padding: 0 4%;
    }
    .botanical-svg {
        width: 78px;
    }
    .pos-center {
        width: 92px;
    }
    .interlude {
        padding: 32px 0 20px;
    }
    .interlude-svg {
        height: 140px;
    }
    .community-board {
        padding: 100px 20px 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .hero-content { opacity: 1; transform: none; }
    .botanical-svg .stem,
    .botanical-svg .leaf,
    .edge-svg .stem,
    .edge-svg .leaf,
    .interlude-svg .stem,
    .interlude-svg .leaf,
    .border-svg .stem,
    .border-svg .leaf { stroke-dashoffset: 0; }
    .botanical-svg .bloom,
    .edge-svg .bloom,
    .interlude-svg .bloom,
    .border-svg .bloom { opacity: 1; }
}