/* ============================================
   chloe.cx — Brutalist Elegance
   Creamy-Pastel | Organic-Flow | Elastic Motion
   ============================================ */

/* Custom Properties */
:root {
    --parchment: #f5efe8;
    --warm-bone: #ebe3d8;
    --umber-dark: #4a3f35;
    --warm-slate: #5c5147;
    --faded-rose: #c9a09b;
    --driftwood: #a38d7a;
    --muted-sage: #9aaa97;
    --cocoa-dusk: #2e2623;
    --peachy-cream: #e8d5c4;
    --white: #ffffff;

    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'Libre Caslon Text', serif;
    --font-caption: 'DM Sans', sans-serif;

    --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-elastic-soft: cubic-bezier(0.22, 1.3, 0.36, 1);
    --ease-elastic-gentle: cubic-bezier(0.16, 1.12, 0.42, 1);
}

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

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

body {
    background-color: var(--parchment);
    color: var(--warm-slate);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Progress Bar
   ============================================ */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--driftwood);
    z-index: 1000;
    transition: width 50ms linear;
}

/* ============================================
   Grain Overlay
   ============================================ */
#grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* ============================================
   Moments (Sections)
   ============================================ */
.moment {
    position: relative;
    overflow: hidden;
}

.moment-light {
    background-color: var(--parchment);
}

.moment-dark {
    background-color: var(--cocoa-dusk);
}

/* ============================================
   Aurora Blobs
   ============================================ */
.aurora-blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.2;
}

.aurora-blob-1 {
    width: 50vw;
    height: 50vw;
    top: 20%;
    left: -10%;
    background: radial-gradient(ellipse at center, var(--faded-rose), var(--muted-sage), transparent 70%);
    animation: aurora-drift-1 45s ease-in-out infinite;
    opacity: 0.2;
}

.aurora-blob-2 {
    width: 40vw;
    height: 40vw;
    top: 50%;
    right: -5%;
    background: radial-gradient(ellipse at center, var(--peachy-cream), var(--faded-rose), transparent 70%);
    animation: aurora-drift-2 52s ease-in-out infinite;
    animation-delay: -15s;
    opacity: 0.18;
    border-radius: 50% 30% 40% 60% / 60% 50% 40% 50%;
}

.aurora-blob-3 {
    width: 45vw;
    height: 45vw;
    top: 10%;
    right: 5%;
    background: radial-gradient(ellipse at center, var(--muted-sage), var(--peachy-cream), transparent 70%);
    animation: aurora-drift-3 48s ease-in-out infinite;
    animation-delay: -8s;
    opacity: 0.22;
    border-radius: 60% 40% 50% 50% / 40% 60% 50% 50%;
}

.aurora-blob-4 {
    width: 55vw;
    height: 55vw;
    top: 15%;
    left: -15%;
    background: radial-gradient(ellipse at center, var(--faded-rose), transparent 70%);
    animation: aurora-drift-1 50s ease-in-out infinite;
    animation-delay: -20s;
    opacity: 0.12;
}

.aurora-blob-5 {
    width: 35vw;
    height: 35vw;
    bottom: 10%;
    right: 10%;
    background: radial-gradient(ellipse at center, var(--faded-rose), transparent 70%);
    animation: aurora-drift-2 42s ease-in-out infinite;
    animation-delay: -12s;
    opacity: 0.1;
    border-radius: 50% 40% 60% 30% / 40% 50% 40% 60%;
}

.aurora-blob-6 {
    width: 50vw;
    height: 50vw;
    top: 5%;
    left: 10%;
    background: radial-gradient(ellipse at center, var(--peachy-cream), var(--muted-sage), transparent 70%);
    animation: aurora-drift-3 47s ease-in-out infinite;
    opacity: 0.2;
}

.aurora-blob-7 {
    width: 35vw;
    height: 35vw;
    bottom: 20%;
    right: -5%;
    background: radial-gradient(ellipse at center, var(--faded-rose), var(--peachy-cream), transparent 70%);
    animation: aurora-drift-1 55s ease-in-out infinite;
    animation-delay: -25s;
    opacity: 0.18;
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
}

.aurora-blob-8 {
    width: 60vw;
    height: 60vw;
    top: 10%;
    left: -10%;
    background: radial-gradient(ellipse at center, var(--faded-rose), var(--muted-sage), transparent 65%);
    animation: aurora-drift-2 50s ease-in-out infinite;
    opacity: 0.28;
}

.aurora-blob-9 {
    width: 50vw;
    height: 50vw;
    top: 30%;
    right: -10%;
    background: radial-gradient(ellipse at center, var(--peachy-cream), var(--faded-rose), transparent 65%);
    animation: aurora-drift-3 45s ease-in-out infinite;
    animation-delay: -10s;
    opacity: 0.25;
    border-radius: 55% 45% 50% 50% / 45% 55% 50% 50%;
}

.aurora-blob-10 {
    width: 45vw;
    height: 45vw;
    bottom: 5%;
    left: 20%;
    background: radial-gradient(ellipse at center, var(--muted-sage), var(--peachy-cream), transparent 65%);
    animation: aurora-drift-1 48s ease-in-out infinite;
    animation-delay: -18s;
    opacity: 0.22;
    border-radius: 50% 40% 55% 45% / 50% 50% 45% 55%;
}

@keyframes aurora-drift-1 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.2; }
    33% { transform: translate(8vw, -4vh) scale(1.08); opacity: 0.28; }
    66% { transform: translate(-5vw, 6vh) scale(0.95); opacity: 0.18; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.2; }
}

@keyframes aurora-drift-2 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.18; }
    33% { transform: translate(-6vw, 5vh) scale(1.05); opacity: 0.24; }
    66% { transform: translate(7vw, -3vh) scale(0.97); opacity: 0.15; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.18; }
}

@keyframes aurora-drift-3 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.22; }
    33% { transform: translate(5vw, 6vh) scale(1.06); opacity: 0.26; }
    66% { transform: translate(-7vw, -4vh) scale(0.94); opacity: 0.16; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.22; }
}

/* ============================================
   Vintage Image Treatment
   ============================================ */
.vintage-image {
    width: 100%;
    height: 100%;
    filter: contrast(0.92) saturate(0.7) sepia(0.08) brightness(1.04);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vintage-image-dark {
    filter: contrast(0.88) saturate(0.6) sepia(0.12) brightness(0.96);
}

/* Placeholder backgrounds using gradients to simulate vintage photos */
.moment-1-photo {
    background: linear-gradient(135deg, var(--warm-bone) 0%, var(--driftwood) 40%, var(--faded-rose) 70%, var(--peachy-cream) 100%);
    position: relative;
}

.moment-1-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(201, 160, 155, 0.15) 50%, transparent 70%);
}

.moment-2-photo {
    background: linear-gradient(180deg, var(--peachy-cream) 0%, var(--driftwood) 50%, var(--warm-bone) 100%);
    position: relative;
}

.moment-2-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(154, 170, 151, 0.12) 60%, transparent 80%);
}

.moment-3-photo {
    background: linear-gradient(135deg, var(--cocoa-dusk) 0%, var(--warm-slate) 30%, var(--driftwood) 60%, var(--faded-rose) 100%);
    position: relative;
}

.moment-3-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 20%, rgba(201, 160, 155, 0.1) 50%, transparent 80%);
}

.gallery-photo-1 {
    background: linear-gradient(160deg, var(--warm-bone) 0%, var(--faded-rose) 45%, var(--muted-sage) 100%);
}

.gallery-photo-2 {
    background: linear-gradient(200deg, var(--driftwood) 0%, var(--peachy-cream) 50%, var(--warm-bone) 100%);
}

.gallery-photo-3 {
    background: linear-gradient(120deg, var(--muted-sage) 0%, var(--warm-bone) 50%, var(--faded-rose) 100%);
}

/* ============================================
   Typography
   ============================================ */
h2 {
    font-family: var(--font-display);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 0.92;
}

.domain-name {
    font-family: var(--font-caption);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--driftwood);
    display: block;
}

.tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1rem;
    color: var(--warm-slate);
    margin-top: 0.5rem;
    margin-left: clamp(1rem, 2vw, 3rem);
}

/* ============================================
   Dot Accents
   ============================================ */
.dot-accent {
    position: absolute;
    display: flex;
    gap: 10px;
    z-index: 2;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--driftwood);
    display: block;
}

.dot-light {
    background-color: var(--faded-rose);
}

.dot-pair-1 {
    bottom: 15%;
    right: clamp(8vw, 14vw, 20vw);
}

.dot-trio-1 {
    top: 12%;
    right: clamp(6vw, 10vw, 14vw);
    gap: 8px;
}

.dot-pair-2 {
    bottom: 8%;
    left: clamp(10vw, 15vw, 22vw);
}

/* ============================================
   Horizontal Rules
   ============================================ */
.horizontal-rule {
    width: 0;
    height: 1px;
    background-color: var(--driftwood);
    margin-top: 2rem;
    transition: width 1.2s var(--ease-elastic);
}

.horizontal-rule.animated {
    width: clamp(20vw, 35vw, 50vw);
}

/* ============================================
   Pull Quote
   ============================================ */
.pull-quote {
    position: absolute;
    left: clamp(1rem, 2vw, 3rem);
    top: 35%;
    z-index: 3;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.pull-quote span {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 0.92;
    color: var(--faded-rose);
    opacity: 0.4;
}

/* ============================================
   Animation States
   ============================================ */
[data-animate] {
    opacity: 0;
}

[data-animate].animated {
    opacity: 1;
}

/* Fade in */
[data-animate="fade-in"] {
    transition: opacity 2s var(--ease-elastic-gentle);
}

/* Elastic scale */
[data-animate="elastic-scale"] {
    transform: scale(0.96);
    transition: opacity 1s var(--ease-elastic), transform 1s var(--ease-elastic);
}

[data-animate="elastic-scale"].animated {
    transform: scale(1);
}

/* Elastic slide from left */
[data-animate="elastic-slide-left"] {
    transform: translateX(-40px);
    transition: opacity 1s var(--ease-elastic), transform 1s var(--ease-elastic);
}

[data-animate="elastic-slide-left"].animated {
    transform: translateX(0);
}

/* Stagger lines */
[data-animate="stagger-lines"] > p,
[data-animate="stagger-lines"] > .horizontal-rule {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-elastic), transform 0.8s var(--ease-elastic);
}

[data-animate="stagger-lines"].animated > p,
[data-animate="stagger-lines"].animated > .horizontal-rule {
    opacity: 1;
    transform: translateY(0);
}

/* Rule extend */
[data-animate="rule-extend"] {
    opacity: 1;
}

/* ============================================
   MOMENT 1 — The Threshold
   ============================================ */
#moment-1 {
    min-height: 110vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 45vh;
    position: relative;
}

.moment-1-identity {
    margin-left: clamp(8vw, 12vw, 18vw);
    position: relative;
    z-index: 2;
}

.moment-1-image {
    position: relative;
    z-index: 1;
    margin-top: -20px;
    margin-left: 20vw;
    width: 65vw;
    aspect-ratio: 5 / 2;
}

.moment-1-image .vintage-image {
    width: 100%;
    height: 100%;
}

/* ============================================
   MOMENT 2 — The First Room
   ============================================ */
#moment-2 {
    min-height: 110vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    align-items: start;
    padding: clamp(10vh, 15vh, 20vh) 0;
    position: relative;
}

.moment-2-text {
    grid-column: 2;
    max-width: 42ch;
    margin-right: clamp(6vw, 10vw, 16vw);
    margin-left: auto;
    padding: clamp(4vh, 8vh, 12vh) 0;
    position: relative;
    z-index: 2;
}

.moment-2-text p {
    margin-bottom: 1.5rem;
}

.moment-2-image {
    grid-column: 1;
    grid-row: 1;
    width: clamp(25vw, 35vw, 42vw);
    aspect-ratio: 2 / 5;
    margin-left: clamp(4vw, 8vw, 12vw);
    margin-top: clamp(8vh, 14vh, 20vh);
    position: relative;
    z-index: 1;
}

/* ============================================
   MOMENT 3 — The Dark Passage
   ============================================ */
#moment-3 {
    min-height: 120vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(8vh, 12vh, 16vh) 0;
    position: relative;
}

.moment-3-headline {
    font-size: clamp(4rem, 10vw, 9rem);
    color: var(--parchment);
    margin-bottom: clamp(3rem, 5vh, 6rem);
    text-align: center;
    position: relative;
    z-index: 2;
}

.moment-3-image {
    width: 85vw;
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 1;
}

/* ============================================
   MOMENT 4 — The Gallery
   ============================================ */
#moment-4 {
    min-height: 140vh;
    padding: clamp(10vh, 15vh, 20vh) 0;
    position: relative;
}

.gallery-composition {
    position: relative;
    width: 100%;
    min-height: 120vh;
    padding: 0 clamp(4vw, 8vw, 12vw);
}

.gallery-image {
    position: absolute;
}

.gallery-large {
    width: 45vw;
    aspect-ratio: 4 / 5;
    top: 0;
    left: clamp(4vw, 8vw, 14vw);
    z-index: 2;
}

.gallery-medium {
    width: 30vw;
    aspect-ratio: 3 / 4;
    top: 25vh;
    right: clamp(4vw, 10vw, 16vw);
    z-index: 3;
}

.gallery-small {
    width: 18vw;
    aspect-ratio: 1 / 1;
    top: 70vh;
    left: clamp(30vw, 38vw, 45vw);
    z-index: 4;
}

.gallery-text-1 {
    position: absolute;
    top: 55vh;
    right: clamp(6vw, 10vw, 16vw);
    max-width: 36ch;
    z-index: 5;
}

.gallery-text-1 p {
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
}

.gallery-text-2 {
    position: absolute;
    top: 85vh;
    left: clamp(8vw, 14vw, 20vw);
    max-width: 30ch;
    z-index: 5;
}

.gallery-text-2 p {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
}

/* ============================================
   MOMENT 5 — The Quiet Exit
   ============================================ */
#moment-5 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.moment-fade-out {
    background: linear-gradient(to bottom, var(--parchment) 0%, var(--parchment) 80%, var(--white) 100%);
}

.exit-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.exit-domain {
    font-family: var(--font-display);
    font-size: clamp(5rem, 12vw, 10rem);
    color: var(--umber-dark);
    letter-spacing: 0.15em;
    line-height: 0.92;
}

.exit-rule {
    width: 40vw;
    height: 1px;
    background-color: var(--driftwood);
    margin: clamp(1.5rem, 3vh, 3rem) auto;
}

.exit-year {
    font-family: var(--font-caption);
    font-weight: 300;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--driftwood);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    #moment-2 {
        grid-template-columns: 1fr;
        padding: 8vh clamp(4vw, 6vw, 8vw);
    }

    .moment-2-text {
        grid-column: 1;
        margin-right: 0;
        max-width: 100%;
        padding: 4vh 0;
    }

    .moment-2-image {
        grid-column: 1;
        grid-row: 2;
        width: 60vw;
        margin-left: auto;
        margin-right: clamp(4vw, 6vw, 8vw);
        margin-top: 4vh;
        aspect-ratio: 3 / 4;
    }

    .gallery-large {
        width: 70vw;
        left: 5vw;
    }

    .gallery-medium {
        width: 55vw;
        top: 45vh;
        right: 5vw;
    }

    .gallery-small {
        width: 35vw;
        top: 78vh;
        left: 15vw;
    }

    .gallery-text-1 {
        top: 62vh;
        right: 5vw;
        max-width: 28ch;
    }

    .gallery-text-2 {
        top: 92vh;
        left: 5vw;
    }

    .pull-quote {
        display: none;
    }

    .moment-3-headline {
        font-size: clamp(2.5rem, 10vw, 5rem);
        padding: 0 4vw;
    }

    .moment-3-image {
        width: 92vw;
    }

    .moment-1-image {
        margin-left: 8vw;
        width: 84vw;
    }
}