/* annual.quest - Twelve-Month Chromatic Chronicle */

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

:root{
    --parchment:#F4EDE4;
    --ink:#2B2520;
    --gold:#C9A96E;
}

html{scroll-behavior:smooth}

body{
    background:var(--parchment);
    color:var(--ink);
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Timeline spine */
.timeline{
    position:fixed;
    left:50%;
    top:0;bottom:0;
    width:1px;
    background:linear-gradient(180deg,var(--gold),var(--gold));
    z-index:10;
    transform:translateX(-0.5px);
}

.timeline-visited{
    position:absolute;
    top:0;left:0;
    width:100%;
    height:0%;
    background:var(--gold);
    transition:height 100ms linear;
}

.timeline::after{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;height:100%;
    background:repeating-linear-gradient(
        180deg,
        transparent,
        transparent 6px,
        var(--gold) 6px,
        var(--gold) 8px
    );
    opacity:0.4;
}

.timeline-marker{
    position:fixed;
    left:50%;
    top:50vh;
    width:32px;height:32px;
    border-radius:50%;
    background:var(--gold);
    transform:translate(-50%,-50%);
    z-index:11;
    animation:markerPulse 2s ease-in-out infinite;
    transition:background 400ms ease;
}

@keyframes markerPulse{
    0%,100%{transform:translate(-50%,-50%) scale(1)}
    50%{transform:translate(-50%,-50%) scale(1.15)}
}

/* Chapter base */
.chapter{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(60px,10vh,120px) clamp(24px,4vw,80px);
    position:relative;
    overflow:hidden;
}

/* Sunburst transition */
.sunburst{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:conic-gradient(
        from var(--sb-rotate),
        transparent 0deg,
        var(--sb-color) 7.5deg,
        transparent 15deg,
        transparent 22.5deg,
        var(--sb-color) 30deg,
        transparent 37.5deg
    );
    opacity:0.04;
}

/* Concentric rings */
.rings{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    width:0;height:0;
    z-index:0;
    pointer-events:none;
}

.rings::before,.rings::after{
    content:'';
    position:absolute;
    border-radius:50%;
    border:1px solid var(--ring-color);
    opacity:0.06;
    left:50%;top:50%;
    transform:translate(-50%,-50%) scale(0.7);
    transition:transform 1.2s ease-out;
}

.rings::before{
    width:400px;height:400px;
}

.rings::after{
    width:700px;height:700px;
}

.chapter.in-view .rings::before,
.chapter.in-view .rings::after{
    transform:translate(-50%,-50%) scale(1);
}

/* Watermark number */
.watermark-num{
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%,-50%);
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(8rem,20vw,16rem);
    color:var(--ink);
    opacity:0.06;
    z-index:0;
    pointer-events:none;
    line-height:1;
}

/* Chapter content */
.chapter-content{
    position:relative;
    z-index:2;
    max-width:40ch;
}

.chapter-center{
    text-align:center;
    max-width:600px;
}

.chapter-left{
    margin-right:auto;
    margin-left:clamp(60px,8vw,160px);
    padding-right:clamp(60px,10vw,200px);
}

.chapter-right{
    margin-left:auto;
    margin-right:clamp(60px,8vw,160px);
    padding-left:clamp(60px,10vw,200px);
}

/* Slide reveal */
.slide-reveal{
    opacity:0;
    transition:opacity 800ms ease-out,transform 800ms ease-out;
}

.chapter-left.slide-reveal{
    transform:translateX(-60px);
}

.chapter-right.slide-reveal{
    transform:translateX(60px);
}

.slide-reveal.revealed{
    opacity:1;
    transform:translateX(0);
}

/* Hero */
.hero-chapter{
    min-height:100vh;
    flex-direction:column;
    gap:2rem;
}

.hero-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3rem,7vw,6rem);
    letter-spacing:0.08em;
    color:var(--ink);
    text-transform:uppercase;
}

.epigraph{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.4rem,2.8vw,2.4rem);
    letter-spacing:0.02em;
    color:var(--ink);
    opacity:0.6;
}

/* Month name */
.month-name{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    line-height:1.1;
    margin-bottom:4px;
}

.chapter-sub{
    font-family:'Source Sans 3',sans-serif;
    font-weight:600;
    font-size:clamp(0.8rem,1vw,0.95rem);
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink);
    opacity:0.4;
    margin-bottom:12px;
}

/* Gilt rule */
.gilt-rule{
    border:none;
    height:0.5px;
    background:var(--gold);
    opacity:0.4;
    margin-bottom:16px;
    transform:scaleX(0);
    transform-origin:center;
    transition:transform 600ms ease-out 200ms;
}

.chapter.in-view .gilt-rule{
    transform:scaleX(1);
}

/* Body text */
.body-text{
    font-family:'Source Sans 3',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.1rem);
    line-height:1.75;
    color:var(--ink);
}

/* Particle canvas */
.particle-canvas{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
}

/* Responsive */
@media(max-width:768px){
    .timeline{
        left:24px;
    }
    .timeline-marker{
        left:24px;
        width:24px;height:24px;
    }
    .chapter-left,.chapter-right{
        margin-left:48px;
        margin-right:20px;
        padding-left:0;
        padding-right:0;
        max-width:none;
    }
    .sunburst{
        opacity:0.02;
    }
    .rings::before{width:200px;height:200px}
    .rings::after{width:350px;height:350px}
}