/* xanadu.quest - Pastel Quest Magazine */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --lavender: #D8D0F0;
    --mint: #C8F0D8;
    --peach: #F0D8C8;
    --sky: #C8D8F0;
    --bg-white: #FAFAF8;
    --text-dark: #2A2040;
    --text-body: #3A3050;
    --accent-pink: #E86080;
    --geo-stroke: rgba(42, 32, 64, 0.15);
    --retro-pattern: rgba(42, 32, 64, 0.08);
}

body {
    background: var(--bg-white);
    color: var(--text-dark);
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
    overflow-x: hidden;
}

/* Spreads */
.spread {
    display: flex;
    min-height: 100vh;
    position: relative;
}
.spread-left { flex-direction: row; }
.spread-right { flex-direction: row-reverse; }
.spread-hero { flex-direction: row; }

.spread-color {
    width: 60%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spread-text {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.5rem;
    max-width: 480px;
    position: relative;
    opacity: 0;
    transition: opacity 0.4s ease 0.3s;
}
.spread.visible .spread-text { opacity: 1; }
.spread.visible .spread-color { animation: fieldSlide 0.5s ease forwards; }

@keyframes fieldSlide {
    from { transform: translateX(-80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.spread-right.visible .spread-color {
    animation: fieldSlideRight 0.5s ease forwards;
}
@keyframes fieldSlideRight {
    from { transform: translateX(80px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Color Fields */
.field-lavender { background: var(--lavender); }
.field-mint { background: var(--mint); }
.field-peach { background: var(--peach); }
.field-sky { background: var(--sky); }

/* Retro Patterns */
.pattern-checker {
    background-image: repeating-conic-gradient(var(--retro-pattern) 0% 25%, transparent 0% 50%);
    background-size: 20px 20px;
}
.pattern-dots {
    background-image: radial-gradient(circle, var(--retro-pattern) 1.5px, transparent 1.5px);
    background-size: 10px 10px;
}
.pattern-stripes {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 8px, var(--retro-pattern) 8px, var(--retro-pattern) 10px);
}

/* Geometric Shapes */
.geo {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.spread.visible .geo { opacity: 1; transform: scale(1); }
.spread.visible .geo:nth-child(2) { transition-delay: 0.15s; }
.spread.visible .geo:nth-child(3) { transition-delay: 0.3s; }

.geo-circle {
    border-radius: 50%;
    border: 2px solid var(--geo-stroke);
}
.geo-square {
    border: 2px solid var(--geo-stroke);
    transform: rotate(15deg);
}
.geo-triangle {
    width: 0; height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid var(--geo-stroke);
    background: none;
    border-top: none;
}

.geo-1 { width: 200px; height: 200px; top: 15%; left: 10%; background: rgba(216, 208, 240, 0.4); }
.geo-2 { width: 150px; height: 150px; bottom: 20%; right: 15%; background: rgba(200, 216, 240, 0.3); }
.geo-3 { width: 100px; height: 100px; top: 50%; left: 50%; background: rgba(240, 216, 200, 0.3); }
.geo-4 { top: 25%; right: 20%; }
.geo-5 { width: 120px; height: 120px; bottom: 25%; left: 20%; background: rgba(200, 240, 216, 0.3); }
.geo-6 { width: 180px; height: 180px; top: 10%; right: 10%; background: rgba(240, 216, 200, 0.4); }
.geo-7 { bottom: 15%; left: 25%; }
.geo-8 { width: 80px; height: 80px; top: 60%; left: 10%; background: rgba(232, 96, 128, 0.15); }
.geo-9 { width: 140px; height: 140px; top: 20%; left: 25%; background: rgba(200, 216, 240, 0.4); }
.geo-10 { width: 100px; height: 100px; bottom: 30%; right: 20%; background: rgba(216, 208, 240, 0.3); }
.geo-11 { top: 30%; right: 15%; }
.geo-12 { width: 160px; height: 160px; bottom: 15%; left: 10%; background: rgba(216, 208, 240, 0.3); }

/* Chapter Numbers */
.chapter-num {
    font-family: 'Jost', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 800;
    color: var(--text-dark);
    opacity: 0.2;
    line-height: 1;
    position: absolute;
    top: 1rem;
    left: -1rem;
    pointer-events: none;
}

/* Typography */
.quest-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}
.slide-in {
    opacity: 0;
    transform: translateX(-40px);
    animation: slideIn 0.5s ease forwards 0.5s;
}
@keyframes slideIn {
    to { opacity: 1; transform: translateX(0); }
}
.quest-sub {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.125rem;
    color: var(--text-body);
}
.spread-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}
.spread-body {
    font-family: 'Quicksand', sans-serif;
    font-size: 1rem;
    color: var(--text-body);
    line-height: 1.75;
}

/* Zigzag Divider */
.zigzag-divider {
    height: 40px;
    background: repeating-linear-gradient(90deg, var(--retro-pattern) 0, var(--retro-pattern) 20px, transparent 20px, transparent 40px);
    position: relative;
    z-index: 2;
}

/* Quest Path SVG */
.quest-path {
    position: fixed;
    left: 50%;
    top: 0;
    width: 40px;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 3;
    opacity: 0.4;
}
.quest-line {
    stroke-dasharray: 8, 6;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 1.2s ease;
}
.quest-line.drawing {
    stroke-dashoffset: 0;
}

/* Footer */
.site-footer {
    text-align: center;
    padding: 3rem 2rem;
    position: relative;
    z-index: 2;
}
.footer-text {
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    color: var(--text-body);
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    .spread { flex-direction: column !important; min-height: auto; }
    .spread-color { width: 100%; min-height: 40vh; }
    .spread-text { width: 100%; max-width: 100%; padding: 2rem 1.5rem; }
    .quest-path { display: none; }
    .chapter-num { font-size: 4rem; }
}