/* ============================================================
   annual.quest -- Chronicle of Years
   Dark-academia meets vintage cartography
   ============================================================ */

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

:root {
    --inkwell: #1a1209;
    --vellum: #f4e8c1;
    --gold: #c49a3c;
    --oxblood: #6b3a2a;
    --oxblood-bright: #8b4535;
    --umber: #2c1e0f;
    --brass: #8b7355;
    --hide: #d4a373;
    --walnut: #3d2b1a;
}

html { scroll-behavior: smooth; }

body {
    background: var(--inkwell);
    color: var(--vellum);
    font-family: 'Lora', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.75;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* --- Lamplight ambient layer (fixed, parallax-tracked via JS) --- */
.ambient {
    position: fixed;
    inset: -10vh -10vw;
    background:
        radial-gradient(ellipse 70% 60% at 50% var(--lamp-y, 30%),
            #2c1e0f 0%,
            #221708 40%,
            #1a1209 75%,
            #120c06 100%);
    z-index: -3;
    pointer-events: none;
    transition: background 0.4s linear;
}

/* faint paper grain over everything */
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    opacity: 0.18;
    background-image:
        radial-gradient(circle at 13% 27%, rgba(196,154,60,0.06) 0, transparent 1px),
        radial-gradient(circle at 67% 53%, rgba(212,163,115,0.05) 0, transparent 1px),
        radial-gradient(circle at 23% 81%, rgba(139,115,85,0.05) 0, transparent 1px),
        radial-gradient(circle at 84% 19%, rgba(196,154,60,0.04) 0, transparent 1px);
    background-size: 4px 4px, 5px 5px, 6px 6px, 3px 3px;
    mix-blend-mode: screen;
}

.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Chronicle Spine: vertical line that draws as user scrolls --- */
.spine-track {
    position: absolute;
    top: 100vh;          /* spine begins after the hero */
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    /* height set in JS to match chronicle bottom */
    pointer-events: none;
    z-index: 1;
}

.spine-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

#spineLine {
    transition: stroke-dashoffset 80ms linear;
}

.quill {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -10px);
    top: 0;
    will-change: transform, top;
    filter: drop-shadow(0 4px 6px rgba(26,18,9,0.7));
    transition: transform 100ms linear;
}

/* ============================================================
   HERO -- The Cartographer's Desk
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6vh 5vw 8vh;
    overflow: hidden;
}

/* aged parchment glow at hero center + vignette */
.vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 55% at 50% 45%,
            rgba(196,154,60,0.12) 0%,
            rgba(139,115,85,0.06) 35%,
            transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 50%,
            transparent 40%,
            rgba(26,18,9,0.5) 75%,
            rgba(18,12,6,0.85) 100%);
    z-index: 0;
}

/* topographic contour pattern in hero */
.contour-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='none' stroke='%238b7355' stroke-width='0.6' opacity='0.22'><path d='M0,60 Q100,30 200,60 T400,60'/><path d='M0,120 Q120,90 240,125 T400,120'/><path d='M0,180 Q90,150 180,180 T400,180'/><path d='M0,240 Q110,210 220,240 T400,240'/><path d='M0,300 Q130,270 260,300 T400,300'/><path d='M0,360 Q100,330 200,360 T400,360'/></g></svg>");
    background-size: 480px 480px;
    opacity: 0.55;
    z-index: 0;
    mix-blend-mode: screen;
}

.compass-stage {
    position: relative;
    z-index: 2;
    width: min(72vmin, 580px);
    height: min(72vmin, 580px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.compass {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 0 30px rgba(196,154,60,0.18));
}

/* path-draw entry animation */
.compass .draw {
    stroke-dasharray: var(--len, 1000);
    stroke-dashoffset: var(--len, 1000);
    animation: drawStroke var(--dur, 1500ms) ease-out var(--delay, 0ms) forwards;
}

@keyframes drawStroke {
    to { stroke-dashoffset: 0; }
}

.compass .fade {
    opacity: 0;
    animation: fadeIn 600ms ease-out var(--delay, 0ms) forwards;
}

.compass .cardinal {
    opacity: 0;
    transform-origin: 300px 300px;
    transform: scale(0.7);
    animation: cardinalIn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) var(--delay, 0ms) forwards;
}

@keyframes cardinalIn {
    to { opacity: 1; transform: scale(1); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.inner-star { transform-origin: 300px 300px; }

/* Slowly rotating needle */
.needle {
    transform-origin: 300px 300px;
    animation: needleRotate 90s linear infinite;
}

@keyframes needleRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* hero text */
.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
}

.eyebrow {
    font-family: 'Caveat', cursive;
    color: var(--brass);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    opacity: 0;
    animation: fadeIn 1200ms ease-out 2400ms forwards;
}

.brand-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 0.03em;
    color: var(--vellum);
    line-height: 1;
    text-shadow:
        0 0 20px rgba(196,154,60,0.15),
        0 2px 0 rgba(26,18,9,0.5);
    opacity: 0;
    animation: fadeIn 1500ms ease-out 2700ms forwards;
}

.brand-dot {
    color: var(--gold);
    font-style: italic;
    margin: 0 0.05em;
}

.hero-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem);
    color: var(--hide);
    margin-top: 1rem;
    line-height: 1.5;
    opacity: 0;
    animation: fadeIn 1500ms ease-out 3100ms forwards;
}

.hero-meta {
    font-family: 'Caveat', cursive;
    color: var(--brass);
    font-size: 1.05rem;
    margin-top: 1.5rem;
    letter-spacing: 0.03em;
    opacity: 0;
    animation: fadeIn 1500ms ease-out 3500ms forwards;
}

.scroll-hint {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--brass);
    font-family: 'Caveat', cursive;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    opacity: 0;
    animation: fadeIn 1500ms ease-out 3800ms forwards, hintBob 2.4s ease-in-out 4500ms infinite;
    z-index: 2;
}

@keyframes hintBob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 6px); }
}

/* ============================================================
   CHRONICLE -- Folio Panels
   ============================================================ */
.chronicle {
    position: relative;
    padding: 6vh 0 4vh;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

.folio {
    position: relative;
    margin: 6vh 0;
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 0 4vw;
    min-height: 60vh;
    z-index: 2;
}

.folio.left  { flex-direction: row; justify-content: flex-start; }
.folio.right { flex-direction: row-reverse; justify-content: flex-start; }

.folio-paper {
    position: relative;
    flex: 0 1 min(640px, 55%);
    background:
        linear-gradient(135deg, #f4e8c1 0%, #ead8a4 50%, #d9c388 100%);
    color: var(--umber);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
    filter: drop-shadow(4px 6px 14px rgba(26,18,9,0.55));
    transition: transform 800ms cubic-bezier(0.2,0.8,0.2,1), opacity 800ms ease;
    opacity: 0;
    transform: translateY(40px) rotate(-1.2deg);
}

.folio.right .folio-paper {
    transform: translateY(40px) rotate(1.4deg);
}

.folio.in-view .folio-paper {
    opacity: 1;
    transform: translateY(0) rotate(-1deg);
}

.folio.right.in-view .folio-paper {
    opacity: 1;
    transform: translateY(0) rotate(1.1deg);
}

/* Each paper gets a distinct torn-edge clip-path */
#folio-1 .folio-paper {
    clip-path: polygon(
        2% 1%, 9% 0%, 18% 2%, 28% 0%, 39% 3%, 51% 0%, 63% 2%, 75% 1%, 86% 3%, 95% 1%, 99% 4%,
        100% 14%, 98% 27%, 100% 42%, 97% 56%, 100% 71%, 98% 86%, 100% 96%,
        92% 99%, 79% 97%, 65% 100%, 51% 98%, 36% 100%, 22% 97%, 9% 100%, 1% 96%,
        2% 82%, 0% 67%, 3% 51%, 0% 35%, 3% 19%, 0% 8%
    );
}
#folio-2 .folio-paper {
    clip-path: polygon(
        0% 3%, 8% 0%, 19% 2%, 31% 0%, 44% 4%, 57% 1%, 70% 3%, 82% 0%, 93% 2%, 100% 5%,
        98% 18%, 100% 31%, 97% 47%, 100% 60%, 97% 75%, 100% 88%, 97% 99%,
        86% 100%, 73% 97%, 60% 100%, 47% 98%, 34% 100%, 21% 97%, 8% 100%, 0% 96%,
        3% 84%, 0% 70%, 2% 56%, 0% 42%, 3% 28%, 0% 15%
    );
}
#folio-3 .folio-paper {
    clip-path: polygon(
        3% 0%, 14% 3%, 26% 0%, 38% 2%, 50% 0%, 62% 3%, 75% 0%, 87% 2%, 96% 0%, 100% 9%,
        97% 22%, 100% 36%, 98% 50%, 100% 64%, 97% 78%, 100% 92%, 96% 100%,
        83% 97%, 70% 100%, 56% 97%, 43% 100%, 30% 97%, 17% 100%, 4% 98%, 0% 89%,
        3% 75%, 0% 60%, 2% 46%, 0% 31%, 3% 16%, 0% 5%
    );
}
#folio-4 .folio-paper {
    clip-path: polygon(
        1% 4%, 11% 0%, 23% 3%, 36% 1%, 48% 4%, 60% 0%, 72% 3%, 84% 1%, 95% 3%, 100% 11%,
        98% 24%, 100% 38%, 97% 52%, 100% 66%, 98% 80%, 100% 93%, 95% 100%,
        82% 98%, 69% 100%, 55% 97%, 42% 100%, 29% 98%, 16% 100%, 4% 96%, 0% 87%,
        3% 73%, 0% 58%, 3% 44%, 0% 29%, 2% 14%, 0% 5%
    );
}

/* paper grain overlay inside each folio */
.folio-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.65' numOctaves='1' seed='2'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.18  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
    background-size: 320px 320px;
    opacity: 0.35;
    mix-blend-mode: multiply;
    z-index: 1;
}

.folio-paper > * { position: relative; z-index: 2; }

.folio-eyebrow {
    font-family: 'Caveat', cursive;
    color: var(--oxblood);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.9rem;
    opacity: 0.85;
}

.folio-year {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 5rem);
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--walnut);
    margin-bottom: 0.3rem;
    text-shadow: 0 1px 0 rgba(196,154,60,0.4);
}

.folio-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    color: var(--oxblood);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(107,58,42,0.3);
    padding-bottom: 0.8rem;
}

.folio-body p {
    font-family: 'Lora', serif;
    color: #3d2b1a;
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 1rem;
}

.folio-body p:last-child { margin-bottom: 0; }

.folio-body em {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--oxblood);
    font-weight: 500;
}

/* small wax-seal stamp inside each folio */
.seal-mini {
    position: absolute;
    bottom: clamp(1.4rem, 3vw, 2.4rem);
    right: clamp(1.4rem, 3vw, 2.4rem);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, #a8553f 0%, #6b3a2a 60%, #4a2618 100%),
        conic-gradient(from 0deg, var(--oxblood), var(--oxblood-bright), var(--oxblood));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 2px 2px 6px rgba(255,200,150,0.25),
        inset -2px -2px 6px rgba(0,0,0,0.5),
        2px 3px 6px rgba(26,18,9,0.5);
    z-index: 3;
    transform: rotate(-8deg);
}

.seal-mini::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, rgba(0,0,0,0.15) 12%, transparent 24%, rgba(0,0,0,0.15) 36%, transparent 48%, rgba(0,0,0,0.15) 60%, transparent 72%, rgba(0,0,0,0.15) 84%, transparent 96%);
    pointer-events: none;
}

.seal-mini span {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.55rem;
    color: var(--vellum);
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    z-index: 1;
}

.seal-mini.active {
    animation: sealPulse 4s ease-in-out infinite;
}

@keyframes sealPulse {
    0%, 100% { box-shadow: inset 2px 2px 6px rgba(255,200,150,0.25), inset -2px -2px 6px rgba(0,0,0,0.5), 2px 3px 6px rgba(26,18,9,0.5), 0 0 0 0 rgba(196,154,60,0.4); }
    50%      { box-shadow: inset 2px 2px 6px rgba(255,200,150,0.25), inset -2px -2px 6px rgba(0,0,0,0.5), 2px 3px 6px rgba(26,18,9,0.5), 0 0 0 8px rgba(196,154,60,0); }
}

/* --- Marginalia column --- */
.marginalia {
    flex: 0 1 18%;
    min-width: 160px;
    max-width: 240px;
    color: var(--brass);
    padding-top: 1.5rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 2000ms ease-out, transform 2000ms ease-out;
}

.folio.margin-on .marginalia {
    opacity: 1;
    transform: translateY(0);
}

.margin-note {
    margin-bottom: 1.4rem;
}

.margin-note .hand {
    font-family: 'Caveat', cursive;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--brass);
    border-left: 1px solid rgba(139,115,85,0.4);
    padding-left: 0.8rem;
}

.margin-note .hand em {
    font-family: 'Caveat', cursive;
    font-style: italic;
    color: var(--hide);
}

.constellation {
    display: block;
    width: 80%;
    margin: 0.5rem 0;
    opacity: 0.7;
}

/* divider compass between folios */
.divider {
    display: flex;
    justify-content: center;
    margin: 4vh 0;
    padding: 1rem 0;
    position: relative;
    z-index: 2;
    opacity: 0.7;
}

/* ============================================================
   COLOPHON / FOOTER
   ============================================================ */
.colophon {
    position: relative;
    margin-top: 8vh;
    padding: 0;
    text-align: center;
    background:
        linear-gradient(180deg, transparent 0%, rgba(44,30,15,0.4) 50%, var(--inkwell) 100%);
    z-index: 2;
}

.border-pattern {
    width: 100%;
    height: 30px;
    display: block;
    opacity: 0.7;
}

.colophon-inner {
    padding: 4rem 2rem 5rem;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

/* WAX SEAL */
.wax-seal {
    width: 140px;
    height: 140px;
    margin: 0 auto 2.5rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, #b75948 0%, #8b4535 35%, #6b3a2a 65%, #4a2618 100%),
        conic-gradient(from 0deg, var(--oxblood), var(--oxblood-bright) 25%, var(--oxblood) 50%, var(--oxblood-bright) 75%, var(--oxblood) 100%);
    box-shadow:
        inset 3px 3px 12px rgba(255,200,150,0.3),
        inset -4px -4px 14px rgba(0,0,0,0.6),
        0 8px 30px rgba(26,18,9,0.7),
        0 2px 0 rgba(196,154,60,0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-6deg);
    animation: sealAppear 1500ms ease-out;
}

@keyframes sealAppear {
    from { transform: rotate(-22deg) scale(0.7); opacity: 0; }
    to   { transform: rotate(-6deg) scale(1); opacity: 1; }
}

.wax-seal::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg, rgba(0,0,0,0.18) 8deg,
            transparent 16deg, rgba(0,0,0,0.18) 24deg,
            transparent 32deg, rgba(0,0,0,0.18) 40deg,
            transparent 48deg, rgba(0,0,0,0.18) 56deg,
            transparent 64deg, rgba(0,0,0,0.18) 72deg,
            transparent 80deg, rgba(0,0,0,0.18) 88deg,
            transparent 96deg, rgba(0,0,0,0.18) 104deg,
            transparent 112deg, rgba(0,0,0,0.18) 120deg,
            transparent 128deg, rgba(0,0,0,0.18) 136deg,
            transparent 144deg, rgba(0,0,0,0.18) 152deg,
            transparent 160deg, rgba(0,0,0,0.18) 168deg,
            transparent 176deg, rgba(0,0,0,0.18) 184deg,
            transparent 192deg, rgba(0,0,0,0.18) 200deg,
            transparent 208deg, rgba(0,0,0,0.18) 216deg,
            transparent 224deg, rgba(0,0,0,0.18) 232deg,
            transparent 240deg, rgba(0,0,0,0.18) 248deg,
            transparent 256deg, rgba(0,0,0,0.18) 264deg,
            transparent 272deg, rgba(0,0,0,0.18) 280deg,
            transparent 288deg, rgba(0,0,0,0.18) 296deg,
            transparent 304deg, rgba(0,0,0,0.18) 312deg,
            transparent 320deg, rgba(0,0,0,0.18) 328deg,
            transparent 336deg, rgba(0,0,0,0.18) 344deg,
            transparent 352deg);
    pointer-events: none;
}

.wax-seal::after {
    content: '';
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    border: 1px solid rgba(196,154,60,0.35);
    box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
    pointer-events: none;
}

.wax-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.wax-letter {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 3.2rem;
    color: var(--vellum);
    line-height: 1;
    text-shadow:
        0 2px 2px rgba(0,0,0,0.5),
        0 -1px 0 rgba(255,220,180,0.25);
}

.wax-sub {
    font-family: 'Caveat', cursive;
    color: rgba(244,232,193,0.7);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-top: 0.2rem;
}

.colophon-line {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    color: var(--gold);
    margin-bottom: 1.2rem;
    letter-spacing: 0.04em;
}

.colophon-text {
    font-family: 'Lora', serif;
    color: var(--brass);
    font-size: 0.95rem;
    line-height: 1.85;
    max-width: 580px;
    margin: 0 auto;
}

.colophon-meta {
    font-family: 'Caveat', cursive;
    color: var(--hide);
    font-size: 1rem;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-top: 0.8rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .folio {
        flex-direction: column !important;
        gap: 1.2rem;
        padding: 0 6vw;
    }
    .folio-paper { flex: 1 1 100%; max-width: 100%; }
    .marginalia {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 0;
        padding-top: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
    }
    .marginalia .margin-note { flex: 1 1 45%; margin-bottom: 0; }
    .marginalia .constellation { flex: 0 0 80px; width: 80px; }

    .compass-stage {
        width: min(80vmin, 420px);
        height: min(80vmin, 420px);
    }
    .spine-track { left: 50%; }
}

@media (max-width: 560px) {
    .folio { padding: 0 4vw; }
    .folio-paper { padding: 1.6rem 1.4rem; }
    .seal-mini { width: 48px; height: 48px; bottom: 1rem; right: 1rem; }
    .seal-mini span { font-size: 1.2rem; }
    .wax-seal { width: 110px; height: 110px; }
    .wax-letter { font-size: 2.4rem; }
}