/* ==========================================================================
   loves.quest — Vaporwave Requiem for Lost Love
   Palette: #0A0A0A (Void), #C9A84C (Flame), #F5ECD7 (Parchment),
            #4A4A4A (Ash), #8B6914 (Ember)
   Fonts: Cormorant Garamond, EB Garamond, DM Sans
   ========================================================================== */

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

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

body {
    background: #0A0A0A;
    color: #F5ECD7;
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* --- Film Grain Overlay --- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%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: 200px 200px;
}

/* --- Chamber Base --- */
.chamber {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40px;
}

.chamber:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   CHAMBER 0: THE VOID
   ========================================================================== */
.chamber-void {
    background: #0A0A0A;
}

/* --- Candle Assembly --- */
.candle {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.candle-wick {
    width: 2px;
    height: 16px;
    background: #4A4A4A;
    border-radius: 1px;
    position: relative;
    z-index: 1;
}

.flame {
    position: relative;
    width: 24px;
    height: 60px;
    margin-bottom: -6px;
    z-index: 2;
}

.flame-outer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 60px;
    background: radial-gradient(ellipse at 50% 90%, #C9A84C 0%, #8B6914 40%, transparent 70%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 4s ease-in-out infinite, glow 2.7s ease-in-out infinite;
}

.flame-inner {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 36px;
    background: radial-gradient(ellipse at 50% 85%, #F5ECD7 0%, #C9A84C 50%, transparent 80%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    z-index: 3;
    animation: flicker-inner 3.2s ease-in-out infinite;
}

.candle-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
    animation: glow-pulse 2.7s ease-in-out infinite;
    pointer-events: none;
}

@keyframes flicker {
    0%, 100% {
        transform: translateX(-50%) scaleX(1) translateY(0);
    }
    25% {
        transform: translateX(-50%) scaleX(0.95) translateY(-1px);
    }
    50% {
        transform: translateX(-50%) scaleX(1.05) translateY(1px);
    }
    75% {
        transform: translateX(-50%) scaleX(0.97) translateY(-0.5px);
    }
}

@keyframes flicker-inner {
    0%, 100% {
        transform: translateX(-50%) scaleX(1) scaleY(1);
    }
    30% {
        transform: translateX(-50%) scaleX(0.92) scaleY(1.04);
    }
    60% {
        transform: translateX(-50%) scaleX(1.06) scaleY(0.96);
    }
    80% {
        transform: translateX(-50%) scaleX(0.98) scaleY(1.02);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 15px 15px rgba(201, 168, 76, 0.08);
    }
    50% {
        box-shadow: 0 0 25px 25px rgba(201, 168, 76, 0.08);
    }
}

/* --- Site Title --- */
.site-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2rem, 4.5vw, 3.8rem);
    letter-spacing: 0.04em;
    line-height: 1.25;
    color: #C9A84C;
    margin-top: 40px;
    opacity: 0;
    animation: fadeIn 4s ease-in forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ==========================================================================
   CHAMBER 1: THE ENCOUNTER
   ========================================================================== */
.chamber-encounter {
    background-color: #0A0A0A;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='30%25' cy='60%25' r='70%25'%3E%3Cstop offset='0%25' stop-color='%23201810'/%3E%3Cstop offset='40%25' stop-color='%23141008'/%3E%3Cstop offset='100%25' stop-color='%230A0A0A'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='70%25' cy='30%25' r='50%25'%3E%3Cstop offset='0%25' stop-color='%23C9A84C' stop-opacity='0.06'/%3E%3Cstop offset='100%25' stop-color='%230A0A0A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23a)'/%3E%3Crect width='1200' height='800' fill='url(%23b)'/%3E%3Cellipse cx='350' cy='500' rx='200' ry='150' fill='%23C9A84C' opacity='0.03'/%3E%3Cellipse cx='800' cy='300' rx='300' ry='200' fill='%238B6914' opacity='0.02'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    align-items: flex-start;
    justify-content: center;
}

.chamber-encounter .chamber-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(201, 168, 76, 0.12);
    z-index: 1;
}

.encounter-text {
    position: relative;
    z-index: 2;
    max-width: 480px;
    margin-left: 15%;
    margin-top: 60vh;
}

.encounter-text p {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #F5ECD7;
}

/* ==========================================================================
   CHAMBER 2: THE COMMUNION
   ========================================================================== */
.chamber-communion {
    background: #0A0A0A;
    min-height: 100vh;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 100px 0;
    position: relative;
}

/* --- Timeline Line --- */
.timeline-line {
    position: absolute;
    top: 0;
    left: 15%;
    width: 1px;
    height: 100%;
    background: #C9A84C;
}

/* --- Timeline Entries --- */
.timeline-entries {
    position: relative;
    width: 100%;
    padding-left: calc(15% + 40px);
    padding-right: 15%;
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-top: 60px;
    padding-bottom: 60px;
}

.timeline-entry {
    position: relative;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.timeline-entry.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Diamond marker */
.timeline-entry::before {
    content: '';
    position: absolute;
    left: -44px;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #C9A84C;
    transform: rotate(45deg);
}

.timeline-date {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-variant: small-caps;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    letter-spacing: 0.08em;
    color: #C9A84C;
    display: block;
    margin-bottom: 12px;
}

.timeline-text {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #F5ECD7;
    max-width: 520px;
}

/* ==========================================================================
   CHAMBER 3: THE DISSOLUTION
   ========================================================================== */
.chamber-dissolution {
    background: #0A0A0A;
    position: relative;
    align-items: flex-start;
    justify-content: center;
    padding: 0 15%;
}

.timeline-line-fading {
    position: absolute;
    top: 0;
    left: 15%;
    width: 1px;
    height: 100%;
    background: #C9A84C;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    transition: opacity 0.3s;
}

.dissolution-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.dissolution-image {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='50%25' cy='50%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%23281e10'/%3E%3Cstop offset='50%25' stop-color='%23161008'/%3E%3Cstop offset='100%25' stop-color='%230A0A0A'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23C9A84C' stop-opacity='0.05'/%3E%3Cstop offset='50%25' stop-color='%234A4A4A' stop-opacity='0.03'/%3E%3Cstop offset='100%25' stop-color='%230A0A0A' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23a)'/%3E%3Crect width='1200' height='800' fill='url(%23b)'/%3E%3Cellipse cx='600' cy='400' rx='400' ry='250' fill='%234A4A4A' opacity='0.04'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    filter: grayscale(40%) sepia(15%) contrast(1.1) brightness(0.85);
    transition: filter 3s ease;
    opacity: 0.35;
}

.dissolution-image.desaturated {
    filter: grayscale(100%) brightness(0.4);
}

.dissolution-text {
    position: relative;
    z-index: 2;
    max-width: 480px;
}

.dissolution-text p {
    font-family: 'EB Garamond', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.85;
    letter-spacing: 0.01em;
    color: #F5ECD7;
}

/* ==========================================================================
   CHAMBER 4: THE RELIQUARY
   ========================================================================== */
.chamber-reliquary {
    background: #0A0A0A;
    gap: 60px;
}

.reliquary-images {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: center;
    align-items: center;
}

.reliquary-frame {
    width: 120px;
    height: 120px;
    border: 2px solid #C9A84C;
    box-shadow: 0 0 12px rgba(201, 168, 76, 0.15);
    overflow: hidden;
}

.reliquary-photo {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(40%) sepia(15%) contrast(1.1) brightness(0.85);
    clip-path: inset(3px 5px 4px 2px);
}

.reliquary-photo-1 {
    background-color: #1a1510;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%231a1510'/%3E%3Ccircle cx='60' cy='55' r='30' fill='%23C9A84C' opacity='0.08'/%3E%3Ccircle cx='45' cy='50' r='15' fill='%238B6914' opacity='0.06'/%3E%3C/svg%3E");
}

.reliquary-photo-2 {
    background-color: #15130e;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%2315130e'/%3E%3Crect x='25' y='30' width='70' height='60' rx='2' fill='%23C9A84C' opacity='0.06'/%3E%3Cline x1='30' y1='90' x2='90' y2='90' stroke='%238B6914' stroke-opacity='0.1' stroke-width='1'/%3E%3C/svg%3E");
}

.reliquary-photo-3 {
    background-color: #121008;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='%23121008'/%3E%3Cellipse cx='60' cy='60' rx='40' ry='35' fill='%234A4A4A' opacity='0.06'/%3E%3Ccircle cx='70' cy='50' r='20' fill='%23C9A84C' opacity='0.04'/%3E%3C/svg%3E");
}

.reliquary-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: #8B6914;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .encounter-text {
        margin-left: 8%;
        margin-right: 8%;
        margin-top: 50vh;
        max-width: none;
    }

    .timeline-line,
    .timeline-line-fading {
        left: 8%;
    }

    .timeline-entries {
        padding-left: calc(8% + 30px);
        padding-right: 8%;
    }

    .timeline-entry::before {
        left: -34px;
    }

    .dissolution-text {
        padding: 0 8%;
        max-width: none;
    }

    .chamber-dissolution {
        padding: 0;
    }

    .reliquary-images {
        gap: 20px;
    }

    .reliquary-frame {
        width: 90px;
        height: 90px;
    }
}