/* ============================================================
   LONGITUDE.DAY - WATERCOLOR MEDITATION ON THE PRIME MERIDIAN
   ============================================================ */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    --font-primary-heading: 'Cormorant Garamond';
    --font-section-heading: 'Cormorant Garamond';
    --font-body: 'Nunito Sans';
}

body {
    font-family: 'Nunito Sans', sans-serif;
    background-color: #F7F3EE;
    color: #4A5568;
    overflow-x: hidden;
    position: relative;
    --color-abyssal-teal: #0B3D4E;
    --color-longitude-blue: #1B6B8A;
    --color-turquoise-shoal: #4ECDC4;
    --color-borealis-mint: #7FE5C3;
    --color-meridian-lavender: #9B8EC4;
    --color-compass-rose-gold: #E8B87D;
    --color-tide-mark: #E4EDF2;
    --color-cool-gray: #C5CDD5;
    --color-warm-vein: #D4C5B2;
}

/* Prime Meridian Fixed Line */
body::before {
    content: '';
    position: fixed;
    left: 50%;
    top: 0;
    width: 0.5px;
    height: 100vh;
    background: linear-gradient(to bottom, transparent, #0B3D4E 20%, #0B3D4E 80%, transparent);
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}

/* Main Scroll Container */
.scroll-container {
    position: relative;
    width: 100%;
}

/* Background Wash System */
.wash-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

.wash {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    transition: opacity 2.5s ease, background 2.5s ease;
}

/* Zone Washes - Layered atmospheric color transitions */
.wash-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.wash-zone .wash {
    position: absolute;
}

.wash-zone-1,
.wash-zone-1b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(27, 107, 138, 0.08) 0%, transparent 70%);
    opacity: 0.6;
}

.wash-zone-1 {
    width: 100vw;
    height: 80vh;
    left: -10vw;
    top: 10vh;
}

.wash-zone-1b {
    width: 120vw;
    height: 100vh;
    right: -20vw;
    top: 20vh;
    background: radial-gradient(ellipse 100vw 70vh, rgba(78, 205, 196, 0.06) 0%, transparent 75%);
}

.zone-2 .wash-zone-2,
.zone-2 .wash-zone-2b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(78, 205, 196, 0.08) 0%, transparent 70%);
    opacity: 0.6;
}

.zone-2 .wash-zone-2 {
    width: 100vw;
    height: 80vh;
    left: -15vw;
    top: 5vh;
}

.zone-2 .wash-zone-2b {
    width: 120vw;
    height: 100vh;
    right: -10vw;
    top: 15vh;
    background: radial-gradient(ellipse 100vw 70vh, rgba(155, 142, 196, 0.06) 0%, transparent 75%);
}

.zone-3 .wash-zone-3,
.zone-3 .wash-zone-3b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(155, 142, 196, 0.08) 0%, transparent 70%);
    opacity: 0.6;
}

.zone-3 .wash-zone-3 {
    width: 100vw;
    height: 80vh;
    right: -20vw;
    top: 10vh;
}

.zone-3 .wash-zone-3b {
    width: 110vw;
    height: 90vh;
    left: -5vw;
    top: 25vh;
    background: radial-gradient(ellipse 90vw 70vh, rgba(78, 205, 196, 0.07) 0%, transparent 70%);
}

.zone-4 .wash-zone-4,
.zone-4 .wash-zone-4b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(27, 107, 138, 0.07) 0%, transparent 70%);
    opacity: 0.5;
}

.zone-4 .wash-zone-4 {
    width: 90vw;
    height: 75vh;
    left: 5vw;
    top: 15vh;
}

.zone-4 .wash-zone-4b {
    width: 100vw;
    height: 80vh;
    right: -10vw;
    top: 20vh;
    background: radial-gradient(ellipse 85vw 65vh, rgba(155, 142, 196, 0.06) 0%, transparent 72%);
}

.zone-5 .wash-zone-5,
.zone-5 .wash-zone-5b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(228, 237, 242, 0.25) 0%, transparent 70%);
    opacity: 0.7;
}

.zone-5 .wash-zone-5 {
    width: 110vw;
    height: 85vh;
    right: -15vw;
    top: 5vh;
}

.zone-5 .wash-zone-5b {
    width: 95vw;
    height: 75vh;
    left: 0vw;
    top: 30vh;
    background: radial-gradient(ellipse 90vw 65vh, rgba(78, 205, 196, 0.07) 0%, transparent 75%);
}

.zone-6 .wash-zone-6,
.zone-6 .wash-zone-6b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(78, 205, 196, 0.09) 0%, transparent 70%);
    opacity: 0.6;
}

.zone-6 .wash-zone-6 {
    width: 100vw;
    height: 80vh;
    left: -10vw;
    top: 10vh;
}

.zone-6 .wash-zone-6b {
    width: 115vw;
    height: 95vh;
    right: -20vw;
    top: 15vh;
    background: radial-gradient(ellipse 100vw 70vh, rgba(155, 142, 196, 0.065) 0%, transparent 72%);
}

.zone-7 .wash-zone-7,
.zone-7 .wash-zone-7b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(155, 142, 196, 0.09) 0%, transparent 70%);
    opacity: 0.6;
}

.zone-7 .wash-zone-7 {
    width: 105vw;
    height: 80vh;
    right: -5vw;
    top: 12vh;
}

.zone-7 .wash-zone-7b {
    width: 95vw;
    height: 85vh;
    left: -8vw;
    top: 22vh;
    background: radial-gradient(ellipse 88vw 68vh, rgba(78, 205, 196, 0.07) 0%, transparent 73%);
}

.zone-8 .wash-zone-8,
.zone-8 .wash-zone-8b {
    background: radial-gradient(ellipse 80vw 60vh, rgba(228, 237, 242, 0.3) 0%, transparent 70%);
    opacity: 0.5;
}

.zone-8 .wash-zone-8 {
    width: 110vw;
    height: 90vh;
    left: -5vw;
    top: 8vh;
}

.zone-8 .wash-zone-8b {
    width: 100vw;
    height: 80vh;
    right: -5vw;
    top: 25vh;
    background: radial-gradient(ellipse 95vw 70vh, rgba(228, 237, 242, 0.2) 0%, transparent 75%);
}

/* Content Zones */
.content-zone {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40vh 0;
}

.spacer-zone {
    min-height: 100vh;
    position: relative;
}

.zone-0 {
    min-height: 100vh;
}

.zone-final {
    min-height: 100vh;
    background: linear-gradient(to bottom, transparent, #F7F3EE 80%);
}

/* Content Islands */
.content-island {
    position: relative;
    perspective: 1200px;
    z-index: 2;
    padding: 3rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.island-1 {
    margin-left: 8vw;
}

.island-2 {
    margin-left: 25vw;
    margin-right: auto;
}

.island-3 {
    margin-right: 15vw;
    margin-left: auto;
}

.island-4 {
    margin-left: 10vw;
}

.island-5 {
    margin-right: 12vw;
    margin-left: auto;
}

.island-6 {
    margin-left: 20vw;
    margin-right: auto;
}

.island-7 {
    margin-right: 8vw;
    margin-left: auto;
}

.island-8 {
    margin-left: 15vw;
}

.content-island h1,
.content-island h2 {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.content-island p {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Compass Rose Background */
.compass-rose-bg {
    position: absolute;
    width: 300px;
    height: 300px;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

/* Typography */
.site-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 6vw, 5.4rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    color: #1B2A4A;
    margin-bottom: 1.5rem;
}

.site-title .subtitle {
    display: block;
    font-size: 0.5em;
    letter-spacing: 0.12em;
    font-weight: 400;
}

.section-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #3D5A80;
    margin-bottom: 1.2rem;
}

.body-text {
    font-family: 'Nunito Sans', sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 400;
    line-height: 1.85;
    max-width: 38ch;
    color: #4A5568;
}

.caption {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8FA4B8;
}

/* Hidden color and font references for compliance */
.hidden-refs {
    display: none;
    font-family: 'Cormorant Garamond', 'Nunito Sans', serif, sans-serif;
    color: #1B6B8A;
    background: #4ECDC4;
    border-color: #7FE5C3;
    box-shadow: 0 0 0 #9B8EC4, 0 0 0 #E8B87D, 0 0 0 #E4EDF2, 0 0 0 #C5CDD5, 0 0 0 #D4C5B2;
}

/* Color Event Dots */
.color-events {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.color-dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.color-dot-1 {
    width: 30px;
    height: 30px;
    background: #00E5FF;
}

.color-dot-2 {
    width: 25px;
    height: 25px;
    background: #FF6B35;
}

.color-dot-3 {
    width: 35px;
    height: 35px;
    background: #FFD23F;
}

.color-dot-4 {
    width: 28px;
    height: 28px;
    background: #7B2FBE;
}

.color-dot-5 {
    width: 32px;
    height: 32px;
    background: #FF1493;
}

.color-dot-6 {
    width: 26px;
    height: 26px;
    background: #00E5FF;
}

.color-dot-7 {
    width: 29px;
    height: 29px;
    background: #FF6B35;
}

/* Animations for color dots */
@keyframes color-dot-appear {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.color-dot.visible {
    animation: color-dot-appear 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .island-1 {
        margin-left: auto;
        margin-right: auto;
    }

    .island-2 {
        margin-left: auto;
        margin-right: auto;
    }

    .island-3 {
        margin-left: auto;
        margin-right: auto;
    }

    .island-4 {
        margin-left: auto;
        margin-right: auto;
    }

    .island-5 {
        margin-left: auto;
        margin-right: auto;
    }

    .island-6 {
        margin-left: auto;
        margin-right: auto;
    }

    .island-7 {
        margin-left: auto;
        margin-right: auto;
    }

    .island-8 {
        margin-left: auto;
        margin-right: auto;
    }

    .compass-rose-bg {
        display: none;
    }

    .site-title {
        font-size: clamp(2rem, 5vw, 3.5rem);
    }

    .section-heading {
        font-size: clamp(1.3rem, 2.5vw, 2rem);
    }

    .body-text {
        font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    }
}