/* ============================================
   monopole.style - Art Nouveau Digital Experience
   Fonts: Fraunces, Lora" (Google Fonts), Cormorant Garamond
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --deep-amethyst: #1A1028;
    --ruby-red: #A0203A;
    --emerald-green: #208040;
    --sapphire-blue: #2040A0;
    --gold-ornament: #D4A040;
    --cream-pearl: #F0E8D8;
    --warm-ivory: #E0D0B8;

    --font-headline: 'Fraunces', serif;
    --font-body: 'Lora', serif;
    --font-decorative: 'Cormorant Garamond', serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--deep-amethyst);
    color: var(--cream-pearl);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.75;
    overflow-x: hidden;
}

/* --- Hero Viewport --- */
.hero-viewport {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: radial-gradient(ellipse at center, #2A1838 0%, var(--deep-amethyst) 70%);
    overflow: hidden;
}

/* --- Art Nouveau Border SVG --- */
.border-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.border-path {
    stroke: var(--gold-ornament);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawBorder 3s ease-out forwards;
}

.border-path-1 { animation-delay: 0s; }
.border-path-2 { animation-delay: 0.1s; }
.border-path-3 { animation-delay: 0.2s; }
.border-path-4 { animation-delay: 0.15s; }
.border-path-5 { animation-delay: 0.25s; }
.border-path-6 { animation-delay: 0.35s; }
.border-path-7 { animation-delay: 0.3s; }
.border-path-8 { animation-delay: 0.4s; }
.border-path-9 { animation-delay: 0.5s; }
.border-path-10 { animation-delay: 0.45s; }
.border-path-11 { animation-delay: 0.55s; }
.border-path-12 { animation-delay: 0.65s; }
.border-path-13 { animation-delay: 0.7s; }
.border-path-14 { animation-delay: 0.8s; }
.border-path-15 { animation-delay: 0.9s; }
.border-path-16 { animation-delay: 0.75s; }
.border-path-17 { animation-delay: 0.85s; }
.border-path-18 { animation-delay: 0.95s; }

.accent-path {
    stroke: var(--gold-ornament);
    stroke-width: 1.5;
    opacity: 0.7;
    animation-delay: 1s;
}

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

/* Floral accent circles */
.floral-accent {
    fill: var(--gold-ornament);
    opacity: 0;
    animation: fadeBloom 1s ease-out forwards;
}

.floral-1 { animation-delay: 1.5s; }
.floral-2 { animation-delay: 1.7s; }
.floral-3 { animation-delay: 1.9s; }
.floral-4 { animation-delay: 2.1s; }
.floral-5 { animation-delay: 2.3s; fill: var(--ruby-red); }
.floral-6 { animation-delay: 2.5s; fill: var(--ruby-red); }

@keyframes fadeBloom {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

/* --- Floral Bloom Elements --- */
.floral-blooms {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.bloom {
    position: absolute;
    opacity: 0;
    transform: scale(0.8);
    animation: bloomIn 1.2s ease-out forwards;
}

.bloom-topleft {
    top: 6%;
    left: 5%;
    width: 120px;
    height: 120px;
    animation-delay: 1.8s;
}

.bloom-topright {
    top: 8%;
    right: 6%;
    width: 100px;
    height: 100px;
    animation-delay: 2.0s;
}

.bloom-bottomleft {
    bottom: 8%;
    left: 4%;
    width: 140px;
    height: 140px;
    animation-delay: 2.2s;
}

.bloom-bottomright {
    bottom: 6%;
    right: 5%;
    width: 90px;
    height: 90px;
    animation-delay: 2.4s;
}

@keyframes bloomIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

.petal {
    fill: var(--ruby-red);
    opacity: 0.7;
}

.petal-emerald {
    fill: var(--emerald-green);
}

.petal-sapphire {
    fill: var(--sapphire-blue);
}

.flower-center {
    fill: var(--gold-ornament);
}

/* --- Hero Content --- */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    opacity: 0;
    animation: heroFadeIn 1.5s ease-out 0.8s forwards;
}

@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.logotype {
    font-family: var(--font-headline);
    font-size: clamp(36px, 6vw, 80px);
    font-weight: 400;
    color: var(--cream-pearl);
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 0.3em;
    animation: breatheWeight 4s ease-in-out infinite 2.5s;
}

@keyframes breatheWeight {
    0%, 100% {
        font-variation-settings: 'wght' 200;
    }
    50% {
        font-variation-settings: 'wght' 800;
    }
}

.hero-tagline {
    font-family: var(--font-decorative);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(18px, 2vw, 28px);
    color: var(--gold-ornament);
    letter-spacing: 0.08em;
    margin-top: 0.5em;
}

/* --- Scroll Indicator --- */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    opacity: 0;
    animation: fadeInUp 1s ease-out 3s forwards;
}

.scroll-arrow {
    width: 30px;
    height: 45px;
    animation: bobDown 2s ease-in-out infinite 3.5s;
}

@keyframes fadeInUp {
    to {
        opacity: 0.6;
    }
}

@keyframes bobDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(8px);
    }
}

/* --- Flowing Curve Dividers --- */
.curve-divider {
    width: 100%;
    height: 80px;
    overflow: hidden;
    position: relative;
}

.curve-divider svg {
    width: 100%;
    height: 100%;
}

.flowing-curve {
    stroke: var(--gold-ornament);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.curve-accent {
    stroke: var(--ruby-red);
    stroke-width: 1;
    opacity: 0.5;
}

/* --- Content Sections --- */
.content-section {
    position: relative;
    padding: 80px 5% 80px;
    overflow: hidden;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.organic-left {
    margin-left: 5%;
    flex-direction: row;
}

.organic-right {
    margin-left: 10%;
    flex-direction: row;
}

.organic-center {
    margin-left: auto;
    margin-right: auto;
    flex-direction: column;
    align-items: center;
}

/* --- Text Blocks --- */
.text-block {
    flex: 1;
    max-width: 680px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.text-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.section-heading {
    font-family: var(--font-headline);
    font-size: clamp(32px, 5vw, 72px);
    font-weight: 600;
    color: var(--cream-pearl);
    margin-bottom: 0.3em;
    line-height: 1.2;
}

.decorative-label {
    font-family: var(--font-decorative);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(18px, 2vw, 28px);
    color: var(--gold-ornament);
    margin-bottom: 1.5em;
    letter-spacing: 0.04em;
}

.text-block p {
    margin-bottom: 1.2em;
    color: var(--cream-pearl);
}

/* --- Botanical Float Illustrations --- */
.botanical-float {
    flex-shrink: 0;
    width: 160px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.botanical-float.visible {
    opacity: 0.8;
    transform: scale(1);
}

.botanical-left {
    margin-right: 20px;
}

.botanical-right {
    margin-left: 20px;
}

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

.vine-path {
    stroke: var(--emerald-green);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
}

.vine-alt {
    stroke: var(--emerald-green);
}

.vine-lily {
    stroke: var(--emerald-green);
}

.leaf-path {
    fill: var(--emerald-green);
    opacity: 0.7;
}

.berry {
    fill: var(--ruby-red);
    opacity: 0.8;
}

.berry-emerald {
    fill: var(--emerald-green);
    opacity: 0.9;
}

/* Rose */
.rose-petal {
    fill: var(--ruby-red);
    opacity: 0.75;
}

.rose-center {
    fill: var(--gold-ornament);
}

/* Iris */
.iris-petal {
    fill: var(--sapphire-blue);
    opacity: 0.8;
}

.iris-petal-2 {
    fill: var(--sapphire-blue);
    opacity: 0.6;
}

.iris-beard {
    fill: var(--gold-ornament);
    opacity: 0.9;
}

.leaf-iris-1,
.leaf-iris-2 {
    fill: var(--emerald-green);
    opacity: 0.7;
}

/* Lily */
.lily-petal {
    fill: var(--cream-pearl);
    opacity: 0.8;
    stroke: var(--gold-ornament);
    stroke-width: 0.5;
}

.lily-petal-back {
    fill: var(--warm-ivory);
    opacity: 0.5;
    stroke: var(--gold-ornament);
    stroke-width: 0.5;
}

.stamen {
    stroke: var(--gold-ornament);
    stroke-width: 1;
}

.anther {
    fill: var(--gold-ornament);
}

.leaf-lily-1,
.leaf-lily-2 {
    fill: var(--emerald-green);
    opacity: 0.7;
}

/* --- Section Backgrounds --- */
.section-philosophy {
    background: linear-gradient(135deg, var(--deep-amethyst) 0%, #1E1430 50%, var(--deep-amethyst) 100%);
}

.section-organic {
    background: linear-gradient(225deg, var(--deep-amethyst) 0%, #1A1830 50%, var(--deep-amethyst) 100%);
}

.section-jewel {
    background: radial-gradient(ellipse at center, #221535 0%, var(--deep-amethyst) 80%);
}

.section-variable {
    background: linear-gradient(135deg, var(--deep-amethyst) 0%, #201428 50%, var(--deep-amethyst) 100%);
}

.section-garden {
    background: linear-gradient(225deg, var(--deep-amethyst) 0%, #181830 50%, var(--deep-amethyst) 100%);
}

/* --- Morph Dividers --- */
.morph-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    overflow: hidden;
}

.morph-svg {
    width: 200px;
    height: 100px;
}

.morph-shape {
    fill: none;
    stroke: var(--gold-ornament);
    stroke-width: 1.5;
    opacity: 0.7;
}

.morph-shape-2 {
    stroke: var(--emerald-green);
}

/* --- Jewel Display --- */
.jewel-panel {
    text-align: center;
    max-width: 700px;
}

.jewel-display {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}

.jewel-gem {
    width: 100px;
    height: 100px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s ease;
}

.jewel-gem.visible {
    opacity: 1;
    transform: scale(1);
}

.jewel-ruby {
    background: radial-gradient(ellipse at 40% 40%, #C83050 0%, var(--ruby-red) 60%, #701828 100%);
    box-shadow: 0 0 30px rgba(160, 32, 58, 0.4), inset 0 -5px 15px rgba(0,0,0,0.3);
}

.jewel-emerald {
    background: radial-gradient(ellipse at 40% 40%, #30A050 0%, var(--emerald-green) 60%, #105020 100%);
    box-shadow: 0 0 30px rgba(32, 128, 64, 0.4), inset 0 -5px 15px rgba(0,0,0,0.3);
}

.jewel-sapphire {
    background: radial-gradient(ellipse at 40% 40%, #3050C0 0%, var(--sapphire-blue) 60%, #102060 100%);
    box-shadow: 0 0 30px rgba(32, 64, 160, 0.4), inset 0 -5px 15px rgba(0,0,0,0.3);
}

.jewel-gold {
    background: radial-gradient(ellipse at 40% 40%, #E8C060 0%, var(--gold-ornament) 60%, #906020 100%);
    box-shadow: 0 0 30px rgba(212, 160, 64, 0.4), inset 0 -5px 15px rgba(0,0,0,0.3);
}

.jewel-gem:hover {
    box-shadow: 0 0 50px rgba(212, 160, 64, 0.6), inset 0 -5px 15px rgba(0,0,0,0.2);
    transform: scale(1.1);
}

.gem-label {
    font-family: var(--font-decorative);
    font-weight: 300;
    font-style: italic;
    font-size: 14px;
    color: var(--cream-pearl);
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* --- Footer --- */
.site-footer {
    padding: 60px 20px 40px;
    text-align: center;
    position: relative;
}

.footer-ornament {
    margin: 0 auto 30px;
    max-width: 600px;
}

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

.footer-curve {
    stroke: var(--gold-ornament);
    fill: none;
    stroke-width: 1.5;
}

.footer-petal {
    fill: var(--ruby-red);
    opacity: 0.6;
}

.footer-center {
    fill: var(--gold-ornament);
}

.footer-text {
    font-family: var(--font-headline);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 300;
    color: var(--gold-ornament);
    letter-spacing: 0.05em;
    margin-bottom: 0.3em;
}

.footer-sub {
    font-family: var(--font-decorative);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 18px);
    color: var(--warm-ivory);
    opacity: 0.6;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .section-inner {
        flex-direction: column;
    }

    .organic-left,
    .organic-right {
        margin-left: 0;
    }

    .botanical-float {
        width: 100px;
        margin: 0 auto 20px;
    }

    .botanical-left {
        margin-right: 0;
    }

    .botanical-right {
        margin-left: 0;
    }

    .jewel-display {
        gap: 20px;
    }

    .jewel-gem {
        width: 80px;
        height: 80px;
    }

    .bloom-topleft,
    .bloom-topright,
    .bloom-bottomleft,
    .bloom-bottomright {
        width: 70px;
        height: 70px;
    }
}

/* --- Utility: Stagger animations for section entrance --- */
.content-section .text-block {
    transition-delay: 0.1s;
}

.content-section .botanical-float {
    transition-delay: 0.3s;
}

.content-section .jewel-gem:nth-child(1) { transition-delay: 0.1s; }
.content-section .jewel-gem:nth-child(2) { transition-delay: 0.3s; }
.content-section .jewel-gem:nth-child(3) { transition-delay: 0.5s; }
.content-section .jewel-gem:nth-child(4) { transition-delay: 0.7s; }