/* misty.day - Watercolor meditation on atmospheric obscurity */

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

html {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 8%,
        #f0eff2 20%,
        #f0eff2 40%,
        #f0eff2 60%,
        #f0eff2 80%,
        #ffffff 95%
    );
    scroll-behavior: smooth;
}

body {
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    color: #6b6575;
    overflow-x: hidden;
    line-height: 2.0;
    font-size: 16px;
}

/* Particle Field */
#particle-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.particle {
    position: fixed;
    border-radius: 50%;
    background: #b8b4c0;
    opacity: 0.3;
    filter: blur(2px);
    pointer-events: none;
    animation: drift var(--drift-duration) ease-in-out infinite;
    animation-delay: var(--drift-delay);
}

@keyframes drift {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(var(--drift-amount)); }
}

/* Scenes */
.scene {
    position: relative;
    width: 100%;
}

/* Section 1: The White */
.scene-white {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.domain-whisper {
    font-family: 'Crimson Pro', serif;
    font-weight: 200;
    font-size: 24px;
    color: #b8b4c0;
    letter-spacing: 0.15em;
    opacity: 0.7;
    filter: blur(0px);
    will-change: filter, opacity;
    transition: filter 1200ms ease-in-out, opacity 1200ms ease-in-out;
}

/* Section 2: The First Shapes */
.scene-shapes {
    height: 150vh;
    position: relative;
}

.wash {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    will-change: filter, opacity, transform;
    transition: filter 1000ms ease-in-out, opacity 1000ms ease-in-out;
}

.wash-lavender {
    background: #d4c8e0;
    width: 45vw;
    height: 35vh;
    top: 15%;
    left: 10%;
    opacity: 0.7;
    mix-blend-mode: multiply;
}

.wash-steel {
    background: #c8d8e0;
    width: 50vw;
    height: 30vh;
    top: 35%;
    right: 5%;
    opacity: 0.65;
    mix-blend-mode: screen;
}

.wash-warm {
    background: #e0d4c8;
    width: 40vw;
    height: 25vh;
    bottom: 15%;
    left: 25%;
    opacity: 0.6;
    mix-blend-mode: multiply;
}

.fragment {
    position: absolute;
    font-family: 'Crimson Pro', serif;
    font-weight: 200;
    font-style: italic;
    font-size: 20px;
    color: #6b6575;
    opacity: 0.5;
    letter-spacing: 0.05em;
    will-change: filter, opacity, transform;
    transition: filter 1000ms ease-in-out, opacity 1000ms ease-in-out;
    max-width: 300px;
}

.fragment-1 {
    top: 20%;
    left: 15%;
}

.fragment-2 {
    top: 45%;
    right: 15%;
    text-align: right;
}

.fragment-3 {
    bottom: 30%;
    left: 30%;
}

.fragment-4 {
    bottom: 15%;
    right: 20%;
    text-align: right;
}

/* Section 3: The Clearing */
.scene-clearing {
    height: 150vh;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8vh;
    padding: 10vh 5vw;
}

.wash-lavender-tight {
    background: #d4c8e0;
    width: 60vw;
    height: 40vh;
    top: 10%;
    left: -5%;
    opacity: 0.4;
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    mix-blend-mode: multiply;
}

.wash-steel-tight {
    background: #c8d8e0;
    width: 50vw;
    height: 35vh;
    bottom: 10%;
    right: -5%;
    opacity: 0.35;
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    mix-blend-mode: screen;
}

.clearing-card {
    position: relative;
    z-index: 2;
    max-width: 520px;
    padding: 40px;
    will-change: filter, opacity, transform;
    transition: filter 800ms ease-in-out, opacity 800ms ease-in-out, transform 800ms ease-in-out;
}

.clearing-card h2 {
    font-family: 'Crimson Pro', serif;
    font-weight: 200;
    font-size: 32px;
    color: #6b6575;
    opacity: 0.9;
    margin-bottom: 16px;
    letter-spacing: 0.05em;
}

.clearing-card p {
    font-family: 'Karla', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 2.0;
    color: #9b95a5;
    opacity: 0.85;
}

.clearing-card-1 {
    align-self: flex-start;
    margin-left: 10vw;
}

.clearing-card-2 {
    align-self: flex-end;
    margin-right: 10vw;
}

.clearing-card-3 {
    align-self: flex-start;
    margin-left: 15vw;
}

/* Section 4: The Horizon */
.scene-horizon {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.horizon-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, transparent, #a8b8c8, transparent);
    filter: blur(20px);
    transform: translateY(-50%);
}

.horizon-element {
    width: 80vw;
    padding: 80px 40px;
    background: linear-gradient(to bottom, #c8d8e0, #f0eff2);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: filter, opacity, transform;
    transition: filter 1000ms ease-in-out, opacity 1000ms ease-in-out;
    z-index: 2;
}

.horizon-statement {
    font-family: 'Crimson Pro', serif;
    font-weight: 200;
    font-size: 32px;
    color: #6b6575;
    opacity: 0.9;
    text-align: center;
    letter-spacing: 0.04em;
    line-height: 1.6;
    max-width: 600px;
}

/* Section 5: The Return */
.scene-return {
    height: 50vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent, #ffffff);
}

.wash-return-1 {
    background: #d4c8e0;
    width: 40vw;
    height: 30vh;
    top: 10%;
    left: 15%;
    opacity: 0.3;
    mix-blend-mode: multiply;
}

.wash-return-2 {
    background: #c8d8e0;
    width: 35vw;
    height: 25vh;
    top: 20%;
    right: 10%;
    opacity: 0.25;
    mix-blend-mode: screen;
}

.domain-whisper-end {
    opacity: 0.5;
    z-index: 2;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .wash {
        filter: blur(20px);
    }

    .fragment {
        font-size: 17px;
        max-width: 200px;
    }

    .clearing-card {
        max-width: 90vw;
        padding: 24px;
    }

    .clearing-card-1,
    .clearing-card-2,
    .clearing-card-3 {
        align-self: center;
        margin-left: 0;
        margin-right: 0;
    }

    .clearing-card h2 {
        font-size: 26px;
    }

    .horizon-element {
        width: 92vw;
        padding: 48px 24px;
    }

    .horizon-statement {
        font-size: 24px;
    }

    .fragment-2 {
        right: 8%;
    }

    .fragment-4 {
        right: 8%;
    }
}