/* ============================================
   concengine.net - Styles
   Jewel-toned cottagecore with organic flow
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --forest-midnight: #0f1a14;
    --moss-velvet: #1e2a1f;
    --heather-amethyst: #7b3f7d;
    --sapphire-stream: #1a5276;
    --emerald-aurora: #2ecc71;
    --amber-hearth: #d4a03c;
    --parchment-warm: #f4ede4;
    --clay-dust: #c4b5a2;
    --rose-hip: #c0526f;
    --twilight-indigo: #2c3e6b;
    --deep-forest: #2d3a2e;
    --text-secondary-light: #e8ddd0;

    --ease-entrance: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--parchment-warm);
    background-color: var(--forest-midnight);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Paper Texture Overlay --- */
#paper-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: overlay;
}

/* --- Navigation --- */
#nav {
    position: fixed;
    top: 2rem;
    left: 2rem;
    z-index: 900;
}

#nav-mark {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s var(--ease-hover);
}

#nav-mark:hover {
    opacity: 1;
}

#nav-panel {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.2rem;
    padding: 1.5rem 2rem;
    background: rgba(15, 26, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s var(--ease-hover), transform 0.3s var(--ease-hover), visibility 0.3s;
}

#nav.open #nav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-link {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    text-transform: lowercase;
    letter-spacing: 0.18em;
    color: var(--clay-dust);
    text-decoration: none;
    transition: color 0.3s var(--ease-hover);
}

.nav-link:hover {
    color: var(--parchment-warm);
}

/* --- SVG Filters (hidden) --- */
#svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Zone Base --- */
.zone {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* --- Zone Boundaries --- */
.zone-boundary {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 10;
}

.zone-boundary svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Aurora Curtains --- */
.aurora-curtain {
    position: absolute;
    width: 100vw;
    pointer-events: none;
}

/* Zone 1 aurora */
.aurora-1 {
    top: -10%;
    left: -20%;
    width: 140%;
    height: 55vh;
    background: linear-gradient(180deg, transparent 0%, rgba(46, 204, 113, 0.18) 35%, rgba(46, 204, 113, 0.12) 65%, transparent 100%);
    filter: blur(60px);
    animation: aurora-drift-1 28s ease-in-out infinite, aurora-pulse-1 10s ease-in-out infinite;
}

.aurora-2 {
    top: -5%;
    left: -10%;
    width: 130%;
    height: 50vh;
    background: linear-gradient(180deg, transparent 0%, rgba(123, 63, 125, 0.15) 40%, rgba(123, 63, 125, 0.10) 60%, transparent 100%);
    filter: blur(60px);
    animation: aurora-drift-2 35s ease-in-out infinite, aurora-pulse-2 12s ease-in-out infinite;
}

.aurora-3 {
    top: -8%;
    left: -15%;
    width: 135%;
    height: 45vh;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 82, 118, 0.12) 38%, rgba(26, 82, 118, 0.08) 62%, transparent 100%);
    filter: blur(60px);
    animation: aurora-drift-3 22s ease-in-out infinite, aurora-pulse-3 15s ease-in-out infinite;
}

/* Zone 5 aurora (all three colors, richer) */
.aurora-5-1 {
    top: 0;
    left: -25%;
    width: 150%;
    height: 60vh;
    background: linear-gradient(180deg, transparent 0%, rgba(46, 204, 113, 0.22) 35%, rgba(46, 204, 113, 0.14) 65%, transparent 100%);
    filter: blur(60px);
    animation: aurora-drift-1 25s ease-in-out infinite, aurora-pulse-1 9s ease-in-out infinite;
}

.aurora-5-2 {
    top: 5%;
    left: -15%;
    width: 140%;
    height: 55vh;
    background: linear-gradient(180deg, transparent 0%, rgba(123, 63, 125, 0.20) 40%, rgba(123, 63, 125, 0.12) 60%, transparent 100%);
    filter: blur(60px);
    animation: aurora-drift-2 32s ease-in-out infinite, aurora-pulse-2 11s ease-in-out infinite;
}

.aurora-5-3 {
    top: 2%;
    left: -20%;
    width: 145%;
    height: 50vh;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 82, 118, 0.18) 38%, rgba(26, 82, 118, 0.10) 62%, transparent 100%);
    filter: blur(60px);
    animation: aurora-drift-3 20s ease-in-out infinite, aurora-pulse-3 13s ease-in-out infinite;
}

/* Aurora keyframes */
@keyframes aurora-drift-1 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(15%); }
}

@keyframes aurora-drift-2 {
    0%, 100% { transform: translateX(5%); }
    50% { transform: translateX(-12%); }
}

@keyframes aurora-drift-3 {
    0%, 100% { transform: translateX(-5%); }
    50% { transform: translateX(10%); }
}

@keyframes aurora-pulse-1 {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.25; }
}

@keyframes aurora-pulse-2 {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.22; }
}

@keyframes aurora-pulse-3 {
    0%, 100% { opacity: 0.10; }
    50% { opacity: 0.20; }
}

/* --- Watercolor Washes --- */
.wash {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: url(#watercolor-wash);
}

.wash-emerald-1 {
    width: 500px;
    height: 400px;
    top: 25%;
    left: 5%;
    background: var(--emerald-aurora);
    opacity: 0.15;
}

.wash-amethyst-1 {
    width: 450px;
    height: 350px;
    top: 45%;
    right: 10%;
    background: var(--heather-amethyst);
    opacity: 0.12;
    filter: url(#watercolor-wash-2);
}

.wash-sapphire-2 {
    width: 400px;
    height: 380px;
    top: 15%;
    left: 40%;
    background: var(--sapphire-stream);
    opacity: 0.12;
    filter: url(#watercolor-wash-2);
}

.wash-amethyst-2 {
    width: 350px;
    height: 300px;
    top: 55%;
    left: 10%;
    background: var(--heather-amethyst);
    opacity: 0.10;
    filter: url(#watercolor-wash-3);
}

.wash-emerald-2 {
    width: 320px;
    height: 280px;
    top: 35%;
    right: 8%;
    background: var(--emerald-aurora);
    opacity: 0.08;
    filter: url(#watercolor-wash);
}

.wash-indigo-3 {
    width: 80%;
    height: 70%;
    top: 15%;
    left: 10%;
    border-radius: 45% 55% 60% 40%;
    background: var(--twilight-indigo);
    opacity: 0.18;
}

.wash-amber-4 {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    border-radius: 50% 40% 55% 45%;
    background: var(--amber-hearth);
    opacity: 0.08;
    transition: transform 0.8s var(--ease-hover);
}

.wash-emerald-5 {
    width: 500px;
    height: 400px;
    top: 30%;
    left: 15%;
    background: var(--emerald-aurora);
    opacity: 0.12;
}

.wash-amethyst-5 {
    width: 400px;
    height: 350px;
    top: 40%;
    right: 15%;
    background: var(--heather-amethyst);
    opacity: 0.10;
    filter: url(#watercolor-wash-2);
}

/* Pigment pooling at bottom of washes */
.wash::after {
    content: '';
    position: absolute;
    bottom: -5%;
    left: 10%;
    width: 80%;
    height: 30%;
    border-radius: 50%;
    background: inherit;
    opacity: 0.35;
    filter: url(#watercolor-pool);
}

/* --- Zone 1: The Meadow at Dusk --- */
.zone-1 {
    background-color: var(--forest-midnight);
    display: flex;
    align-items: center;
    padding: 0 8%;
}

.zone-1-content {
    position: relative;
    z-index: 5;
    padding-left: 7%;
    padding-top: 5vh;
}

.domain-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(64px, 14vw, 180px);
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--parchment-warm);
    text-shadow: 0 0 40px rgba(46, 204, 113, 0.15);
    opacity: 0;
    animation: fade-in-title 1200ms var(--ease-entrance) 600ms forwards, glow-pulse 4s ease-in-out 1800ms infinite;
}

.tagline {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--clay-dust);
    letter-spacing: 0.08em;
    margin-top: 1.5rem;
    opacity: 0;
    animation: fade-in-title 1000ms var(--ease-entrance) 1400ms forwards;
}

@keyframes fade-in-title {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        text-shadow: 0 0 40px rgba(46, 204, 113, 0.08);
    }
    50% {
        text-shadow: 0 0 40px rgba(46, 204, 113, 0.20);
    }
}

/* Botanical: Lavender */
.botanical-lavender {
    position: absolute;
    right: 8%;
    top: 30%;
    opacity: 0;
    transform: rotate(12deg);
    animation: fade-in-title 1200ms var(--ease-entrance) 2000ms forwards;
    z-index: 5;
}

/* --- Zone 2: The Garden Path --- */
.zone-2 {
    background-color: var(--moss-velvet);
    padding: 8rem 0 10rem;
}

.zone-2-content {
    position: relative;
    z-index: 5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}

.zone-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 6vw, 72px);
    line-height: 1.05;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--parchment-warm);
    margin-bottom: 4rem;
    position: relative;
}

/* --- Content Blocks --- */
.content-block {
    position: relative;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    max-width: 550px;
}

.block-left {
    margin-left: 15%;
}

.block-right {
    margin-left: 45%;
}

.block-center {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

.content-block p {
    color: var(--clay-dust);
    position: relative;
    z-index: 2;
}

.zone-2 .content-block p {
    color: var(--text-secondary-light);
}

.content-block h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--parchment-warm);
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

/* Block watercolor wash background */
.block-wash {
    position: absolute;
    top: -20%;
    left: -15%;
    width: 130%;
    height: 140%;
    border-radius: 50%;
    opacity: 0.12;
    filter: url(#watercolor-wash);
    transition: opacity 0.3s var(--ease-hover), filter 0.3s var(--ease-hover);
    pointer-events: none;
    z-index: 1;
}

.block-left .block-wash {
    background: var(--heather-amethyst);
}

.block-right .block-wash {
    background: var(--sapphire-stream);
}

.block-center .block-wash {
    background: var(--amber-hearth);
}

.workshop-col-left .block-wash {
    background: var(--emerald-aurora);
}

.workshop-col-right .block-wash {
    background: var(--sapphire-stream);
}

/* Hover micro-interaction: intensify wash */
.content-block:hover .block-wash {
    opacity: 0.22;
    filter: url(#watercolor-wash) hue-rotate(10deg);
}

/* Botanical: Rosemary */
.botanical-rosemary {
    position: absolute;
    left: 3%;
    top: 50%;
    opacity: 0.4;
    transform: rotate(-8deg);
    z-index: 2;
}

/* --- Zone 3: The Workshop --- */
.zone-3 {
    background-color: var(--forest-midnight);
    padding: 8rem 0 10rem;
}

.zone-3-content {
    position: relative;
    z-index: 5;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}

.workshop-columns {
    display: flex;
    gap: 10%;
    margin-left: 15%;
}

.workshop-col {
    flex: 0 0 35%;
}

.workshop-col .content-block {
    margin-left: 0;
    max-width: 100%;
}

/* Botanical line-draw animations */
.botanical-sweetpea {
    position: absolute;
    left: 2%;
    top: 25%;
    opacity: 0.4;
    transform: rotate(-5deg);
    z-index: 2;
}

.botanical-strawberry {
    position: absolute;
    right: 2%;
    top: 55%;
    opacity: 0.4;
    transform: rotate(8deg) scaleX(-1);
    z-index: 2;
}

.draw-on-scroll .draw-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 2s var(--ease-entrance);
}

.draw-on-scroll.drawing .draw-path {
    stroke-dashoffset: 0;
}

/* --- Zone 4: The Hearth --- */
.zone-4 {
    background-color: var(--forest-midnight);
    padding: 10rem 0 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zone-4-content {
    position: relative;
    z-index: 5;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 3rem;
    text-align: center;
}

.pull-quote {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(24px, 4vw, 56px);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--parchment-warm);
    margin-bottom: 3rem;
    border: none;
    padding: 0;
}

.hearth-cta {
    display: inline-block;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: lowercase;
    color: var(--parchment-warm);
    text-decoration: none;
    padding: 1rem 2.5rem;
    margin-top: 2rem;
    background: var(--rose-hip);
    opacity: 0.85;
    border-radius: 50px 20px 45px 25px;
    transition: box-shadow 0.3s var(--ease-hover), opacity 0.3s var(--ease-hover);
    position: relative;
}

.hearth-cta::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    background: var(--rose-hip);
    opacity: 0;
    filter: blur(15px);
    z-index: -1;
    transition: opacity 0.3s var(--ease-hover);
}

.hearth-cta:hover {
    opacity: 1;
    box-shadow: 0 0 30px rgba(192, 82, 111, 0.3);
}

.hearth-cta:hover::before {
    opacity: 0.4;
}

/* --- Zone 5: The Aurora Field --- */
.zone-5 {
    background-color: var(--forest-midnight);
    padding: 8rem 0 4rem;
    min-height: 100vh;
    position: relative;
}

.zone-5-content {
    position: relative;
    z-index: 5;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 3rem;
}

.zone-5-content .block-left {
    margin-left: 10%;
}

.zone-5-content .block-right {
    margin-left: 40%;
}

.zone-5-content .block-left .block-wash {
    background: var(--emerald-aurora);
}

.zone-5-content .block-right .block-wash {
    background: var(--heather-amethyst);
}

/* Botanical framing */
.botanical-frame-left {
    position: absolute;
    left: 3%;
    top: 20%;
    opacity: 0.3;
    z-index: 2;
}

.botanical-frame-right {
    position: absolute;
    right: 3%;
    top: 20%;
    opacity: 0.3;
    z-index: 2;
}

/* Domain signature */
.domain-signature {
    text-align: center;
    margin-top: 6rem;
    position: relative;
    z-index: 5;
}

.domain-signature span {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(18px, 3vw, 42px);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--parchment-warm);
    opacity: 0.7;
}

/* Fade to darkness at bottom */
.zone-5-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: linear-gradient(transparent, var(--forest-midnight));
    z-index: 8;
    pointer-events: none;
}

/* --- Fade-in Animation (scroll triggered) --- */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms var(--ease-entrance), transform 800ms var(--ease-entrance);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Botanicals Base --- */
.botanical {
    pointer-events: none;
}

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    /* Reduce aurora curtains */
    .aurora-3,
    .aurora-5-3 {
        display: none;
    }

    /* Hide botanical illustrations */
    .botanical {
        display: none;
    }

    /* Single column content */
    .block-left,
    .block-right {
        margin-left: 8%;
        margin-right: 8%;
        max-width: 100%;
    }

    .block-center {
        margin-left: 8%;
        margin-right: 8%;
    }

    .zone-title {
        margin-left: 8%;
    }

    .workshop-columns {
        flex-direction: column;
        margin-left: 8%;
        gap: 0;
    }

    .workshop-col {
        flex: 1 1 100%;
    }

    .zone-1-content {
        padding-left: 8%;
    }

    #nav {
        top: 1rem;
        left: 1rem;
    }

    .zone-2-content,
    .zone-3-content,
    .zone-4-content,
    .zone-5-content {
        padding: 0 1.5rem;
    }

    .content-block {
        padding: 2rem;
    }

    .pull-quote {
        font-size: clamp(20px, 6vw, 36px);
    }

    /* Reduce watercolor washes */
    .wash-amethyst-1,
    .wash-amethyst-2,
    .wash-emerald-2,
    .wash-amethyst-5 {
        display: none;
    }

    .zone-5-content .block-left,
    .zone-5-content .block-right {
        margin-left: 8%;
    }

    .zone-4 {
        padding: 6rem 0 8rem;
    }
}

/* --- Mobile Touch Interactions --- */
.touch-active.hearth-cta {
    box-shadow: 0 0 30px rgba(192, 82, 111, 0.3);
    opacity: 1;
}

.touch-active.content-block .block-wash {
    opacity: 0.22;
}

/* --- Reduce motion preference --- */
@media (prefers-reduced-motion: reduce) {
    .aurora-curtain {
        animation: none;
    }

    .domain-title {
        animation: fade-in-title 1200ms var(--ease-entrance) 600ms forwards;
    }

    .fade-in {
        transition-duration: 100ms;
    }

    .draw-on-scroll .draw-path {
        stroke-dashoffset: 0;
        transition: none;
    }
}