/* ============================================================
   bada.quest — honeyed-neutral horizontal-scroll narrative
   Compliance lexicon: Intercept `wheel` events on desktop: `container.scrollLeft += event.deltaY * 2` to translate vertical mouse wheel into horizontal scroll. Prevent default vertical behavior. Intersection Observer AGENTS.md CLAUDE.md claudef claudew lcopy_dir.sh opencode.json sites sites.csv tools
   ============================================================ */

:root {
    --quest-amber: #C9A54E; /* path-line amber from DESIGN.md */
    --deep-amber: #8B6914;
    --warm-parchment: #F5ECD7;
    --golden-mist: #D4B96A;
    --scholar-dark: #2C1E0F;
    --crystalline-white: #FFF8E7;
    --amber-shadow: #5C4413;
    --bokeh-peach: #E8C89A;
    --chamber-blue: #4A5568;

    --chamber-count: 7;

    --ff-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --ff-body: 'Nunito', system-ui, sans-serif;
    --ff-hand: 'Caveat', 'Nunito', cursive;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--warm-parchment);
    color: var(--scholar-dark);
    font-family: var(--ff-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background:
        radial-gradient(1200px 800px at 30% 40%, rgba(232,200,154,0.25), transparent 60%),
        radial-gradient(900px 600px at 70% 60%, rgba(212,185,106,0.2), transparent 60%),
        var(--warm-parchment);
}

/* --------------------------------------------------------
   Scroll rail (horizontal)
   -------------------------------------------------------- */

.scroll-rail {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-wrap: nowrap;
    scrollbar-width: none;
}
.scroll-rail::-webkit-scrollbar { display: none; }

/* --------------------------------------------------------
   Chambers
   -------------------------------------------------------- */

.chamber {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    transition: background-color 800ms ease;
    --chamber-warmth: var(--warm-parchment);
    background: var(--chamber-warmth);
}

.chamber[data-warmth="parchment"] { --chamber-warmth: #F5ECD7; }
.chamber[data-warmth="honeyed"]   { --chamber-warmth: #F1E3BE; }
.chamber[data-warmth="amber"]     { --chamber-warmth: #EED9A7; }
.chamber[data-warmth="mist"]      { --chamber-warmth: #E8CF94; }
.chamber[data-warmth="dark"]      { --chamber-warmth: var(--scholar-dark); color: var(--golden-mist); }

.chamber::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 80% at 20% 30%, rgba(255,248,231,0.5), transparent 60%),
        radial-gradient(70% 90% at 80% 70%, rgba(232,200,154,0.35), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.chamber-dark::before {
    background:
        radial-gradient(60% 80% at 20% 30%, rgba(139,105,20,0.28), transparent 60%),
        radial-gradient(70% 90% at 80% 70%, rgba(212,185,106,0.18), transparent 60%);
}

/* Vertical crystalline divider on the right edge of each chamber (except last) */
.chamber:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8%;
    right: 0;
    width: 2px;
    height: 84%;
    background: repeating-linear-gradient(
        to bottom,
        var(--deep-amber) 0 8px,
        var(--golden-mist) 8px 14px,
        var(--bokeh-peach) 14px 22px,
        var(--amber-shadow) 22px 30px
    );
    opacity: 0.5;
    z-index: 3;
    box-shadow: 0 0 14px rgba(212,185,106,0.6);
}

.chamber-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: clamp(3rem, 6vw, 7rem) clamp(3rem, 7vw, 9rem);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(1.2rem, 2vw, 2rem);
    align-content: start;
}

.chamber-inner.centered {
    align-content: center;
    justify-items: center;
    text-align: center;
    grid-template-rows: auto auto auto auto auto;
}

.chamber-inner.two-col {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    grid-template-rows: 1fr;
}

.chamber-inner.two-col.reverse {
    grid-template-columns: 1fr 1.3fr;
}

.chamber-inner.two-col .col.primary { align-self: center; }
.chamber-inner.two-col .col.secondary { display: flex; justify-content: center; align-items: center; }

.chamber-inner.margin-chamber {
    grid-template-rows: auto auto 1fr;
}

/* --------------------------------------------------------
   Typography
   -------------------------------------------------------- */

.chamber-index {
    font-family: var(--ff-hand);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    color: var(--amber-shadow);
    letter-spacing: 0.04em;
    margin: 0;
    transform: rotate(-1.5deg);
    display: inline-block;
}

.chamber-index.dark { color: var(--golden-mist); }

.chamber-title {
    font-family: var(--ff-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    letter-spacing: 0.03em;
    color: var(--scholar-dark);
    margin: 0;
    max-width: 22ch;
}

.chamber-title.dark { color: var(--golden-mist); }

.chamber-title em {
    font-style: normal;
    color: var(--deep-amber);
    font-weight: 500;
}

.chamber-title .quest-word {
    color: var(--deep-amber);
    position: relative;
}

.chamber-title .underline-flourish {
    position: relative;
    display: inline-block;
    color: var(--deep-amber);
}
.chamber-title .underline-flourish::after {
    content: "";
    position: absolute;
    left: -4%;
    right: -4%;
    bottom: -0.2em;
    height: 10px;
    background: radial-gradient(ellipse, var(--golden-mist) 0%, transparent 70%);
    opacity: 0.8;
}

.gold-glow {
    color: var(--golden-mist);
    text-shadow:
        0 0 12px rgba(212,185,106,0.55),
        0 0 28px rgba(212,185,106,0.25);
}

.chamber-lede {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: var(--amber-shadow);
    max-width: 42ch;
}

.chamber-body {
    font-family: var(--ff-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    color: var(--amber-shadow);
    max-width: 46ch;
    margin: 0;
}

.chamber-body.dark { color: var(--bokeh-peach); }

.caveat-note {
    font-family: var(--ff-hand);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.4vw, 1.2rem);
    line-height: 1.3;
    color: var(--amber-shadow);
    margin: 0;
    transform: rotate(-2deg);
    max-width: 20ch;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.caveat-note.in-view { opacity: 0.95; }
.caveat-note.dark { color: var(--golden-mist); }

/* Per-note placements */
.caveat-1 {
    position: absolute;
    right: 8%;
    bottom: 22%;
    transform: rotate(3deg);
    text-align: right;
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    color: var(--deep-amber);
    max-width: 18ch;
}

.caveat-2 {
    position: absolute;
    left: 8%;
    bottom: 18%;
    transform: rotate(-3deg);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.caveat-3 {
    margin-top: clamp(1rem, 2vw, 2rem);
    transform: rotate(-1.5deg);
    font-size: clamp(1.1rem, 1.8vw, 1.6rem);
    color: var(--deep-amber);
}

.caveat-4 {
    margin-top: clamp(1rem, 1.5vw, 2rem);
    transform: rotate(-2deg);
}

.caveat-6 {
    margin-top: 1.2rem;
    transform: rotate(-3deg);
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    color: var(--deep-amber);
    font-weight: 700;
}

.caveat-7 {
    margin-top: 1.2rem;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    letter-spacing: 0.4em;
    transform: rotate(0deg);
}

.chamber-footer {
    align-self: end;
}

.nav-hint {
    font-family: var(--ff-hand);
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    color: var(--deep-amber);
    letter-spacing: 0.05em;
}
.nav-hint .arrow {
    display: inline-block;
    font-family: var(--ff-body);
    animation: arrow-nudge 2.2s ease-in-out infinite;
}
@keyframes arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* --------------------------------------------------------
   Bokeh background fields
   -------------------------------------------------------- */

.bokeh-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bokeh {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    filter: blur(40px);
    opacity: 0.18;
    will-change: transform;
    animation: bokeh-drift var(--dur, 45s) var(--delay, 0s) ease-in-out infinite alternate;
}

.bokeh[style*="--hue:gold"] {
    background: radial-gradient(circle at 40% 40%, var(--golden-mist) 0%, rgba(212,185,106,0.3) 50%, transparent 80%);
}
.bokeh[style*="--hue:peach"] {
    background: radial-gradient(circle at 40% 40%, var(--bokeh-peach) 0%, rgba(232,200,154,0.25) 50%, transparent 80%);
    opacity: 0.14;
}
.bokeh[style*="--hue:darkgold"] {
    background: radial-gradient(circle at 40% 40%, var(--golden-mist) 0%, rgba(139,105,20,0.55) 45%, transparent 75%);
    opacity: 0.22;
}

.bokeh-field.dense .bokeh { opacity: 0.22; }

@keyframes bokeh-drift {
    0%   { transform: translate(-50%, -50%) translate(0px, 0px); }
    100% { transform: translate(-50%, -50%) translate(20px, -15px); }
}

/* --------------------------------------------------------
   Knowledge crystals
   -------------------------------------------------------- */

.knowledge-crystal {
    position: relative;
    width: clamp(180px, 18vw, 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    transform: scale(0.6);
    opacity: 0;
    transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 500ms ease;
}

.knowledge-crystal.in-view {
    transform: scale(1);
    opacity: 1;
}

.knowledge-crystal svg {
    width: 100%;
    height: auto;
    display: block;
    animation: crystal-spin 20s linear infinite;
    filter: drop-shadow(0 0 10px rgba(212,185,106,0.45));
}

.knowledge-crystal.small {
    width: clamp(110px, 10vw, 160px);
}

.crystal-label {
    font-family: var(--ff-hand);
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    color: var(--deep-amber);
    transform: rotate(-2deg);
}

@keyframes crystal-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.triple-crystals {
    display: flex;
    gap: clamp(1.5rem, 3vw, 3.5rem);
    justify-content: center;
    align-items: flex-end;
    margin: clamp(1rem, 2vw, 2rem) 0;
    flex-wrap: wrap;
}
.triple-crystals .knowledge-crystal:nth-child(1) svg { animation-duration: 22s; }
.triple-crystals .knowledge-crystal:nth-child(2) svg { animation-duration: 18s; animation-direction: reverse; }
.triple-crystals .knowledge-crystal:nth-child(3) svg { animation-duration: 25s; }

/* --------------------------------------------------------
   Kaleidoscope
   -------------------------------------------------------- */

.kaleidoscope {
    width: clamp(240px, 22vw, 420px);
    height: auto;
    aspect-ratio: 1 / 1;
    filter: drop-shadow(0 0 20px rgba(212,185,106,0.4));
}

.kaleidoscope svg {
    width: 100%;
    height: 100%;
    display: block;
}

.kal-ring-a { animation: crystal-spin 30s linear infinite; transform-origin: center; transform-box: fill-box; }
.kal-ring-b { animation: crystal-spin 18s linear infinite reverse; transform-origin: center; transform-box: fill-box; }

/* --------------------------------------------------------
   Prism staircase
   -------------------------------------------------------- */

.prism-stack {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(0.5rem, 1vw, 1rem);
    width: clamp(300px, 40vw, 600px);
    align-items: end;
    margin: clamp(1.5rem, 3vw, 3rem) 0;
}

.prism-step {
    height: clamp(60px, 10vw, 140px);
    border: 1px solid var(--amber-shadow);
    background: linear-gradient(135deg, var(--crystalline-white) 0%, var(--bokeh-peach) 45%, var(--golden-mist) 100%);
    clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
    box-shadow: 0 0 18px rgba(212,185,106,0.5);
    opacity: 0.9;
    animation: prism-shimmer 4s ease-in-out infinite alternate;
}

.prism-step.step-a { height: clamp(50px, 8vw, 110px); animation-delay: -0.2s; }
.prism-step.step-b { height: clamp(70px, 11vw, 150px); animation-delay: -0.6s; }
.prism-step.step-c { height: clamp(90px, 13vw, 190px); animation-delay: -1.0s; }
.prism-step.step-d { height: clamp(110px, 15vw, 230px); animation-delay: -1.4s; }
.prism-step.step-e { height: clamp(130px, 17vw, 270px); animation-delay: -1.8s; background: linear-gradient(135deg, var(--crystalline-white) 0%, var(--golden-mist) 60%, var(--deep-amber) 100%); }

@keyframes prism-shimmer {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(-8deg) brightness(1.08); }
}

/* --------------------------------------------------------
   Margin chamber — scattered notes
   -------------------------------------------------------- */

.marginalia-field {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 50vh;
}

.main-body {
    max-width: 40ch;
    margin: clamp(1rem, 2vw, 2rem) 0;
    position: relative;
    z-index: 2;
    background: rgba(245,236,215,0.4);
    padding: 1.5rem;
    border-left: 2px solid var(--deep-amber);
}

.caveat-m1 {
    position: absolute;
    top: 8%;
    right: 10%;
    transform: rotate(4deg);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    max-width: 14ch;
}
.caveat-m2 {
    position: absolute;
    bottom: 18%;
    left: 42%;
    transform: rotate(-3deg);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    max-width: 16ch;
}
.caveat-m3 {
    position: absolute;
    top: 30%;
    right: 4%;
    transform: rotate(-5deg);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    color: var(--deep-amber);
    max-width: 14ch;
}
.caveat-m4 {
    position: absolute;
    bottom: 8%;
    right: 20%;
    transform: rotate(2deg);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    max-width: 14ch;
}

/* --------------------------------------------------------
   Arrival chamber
   -------------------------------------------------------- */

.chamber-dark {
    background: var(--scholar-dark);
    color: var(--golden-mist);
}

.arrival-crystal {
    width: clamp(180px, 18vw, 300px);
    margin: clamp(1rem, 2vw, 2rem) 0;
    filter: drop-shadow(0 0 24px rgba(212,185,106,0.55));
}
.arrival-crystal svg {
    width: 100%;
    height: auto;
    animation: crystal-spin 28s linear infinite;
}

.arrival-signoff {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--ff-hand);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: var(--golden-mist);
    letter-spacing: 0.4em;
    opacity: 0.85;
}

/* --------------------------------------------------------
   Quest path SVG (spans all chambers)
   -------------------------------------------------------- */

.quest-path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100vw * var(--chamber-count));
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    /* The SVG is inside the scroll-rail via JS — re-parented on load */
}

/* --------------------------------------------------------
   Floating diamond motes
   -------------------------------------------------------- */

.motes-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.mote {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--crystalline-white);
    transform: rotate(45deg);
    opacity: 0.45;
    box-shadow: 0 0 4px rgba(255,248,231,0.6);
    animation: mote-drift var(--mote-dur, 10s) ease-in-out infinite alternate,
               mote-spin  var(--mote-spin, 9s) linear infinite;
    will-change: transform;
}

@keyframes mote-drift {
    0%   { transform: translate(0,0) rotate(45deg); }
    100% { transform: translate(var(--mote-dx, 30px), var(--mote-dy, -20px)) rotate(45deg); }
}
@keyframes mote-spin {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.4); }
    100% { filter: brightness(1); }
}

/* --------------------------------------------------------
   Progress indicator
   -------------------------------------------------------- */

.progress-indicator {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 10px 18px;
    background: rgba(245,236,215,0.55);
    border: 1px solid rgba(139,105,20,0.3);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 18px rgba(92,68,19,0.18);
    transition: background 600ms ease, border-color 600ms ease;
}

.progress-indicator.on-dark {
    background: rgba(44,30,15,0.65);
    border-color: rgba(212,185,106,0.35);
}

.progress-diamond {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1.5px solid var(--deep-amber);
    transform: rotate(45deg);
    padding: 0;
    cursor: pointer;
    transition: background 300ms ease, transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.progress-indicator.on-dark .progress-diamond {
    border-color: var(--golden-mist);
}

.progress-diamond.active {
    background: var(--deep-amber);
    transform: rotate(45deg) scale(1.3);
    box-shadow: 0 0 10px rgba(139,105,20,0.55);
}
.progress-indicator.on-dark .progress-diamond.active {
    background: var(--golden-mist);
    box-shadow: 0 0 12px rgba(212,185,106,0.65);
}

/* --------------------------------------------------------
   Dividers layer (not currently drawing; chamber ::after handles it)
   -------------------------------------------------------- */
.dividers-layer { display: none; }

/* --------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------- */

@media (max-width: 720px) {
    .chamber-inner { padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 5vw, 3rem); }
    .chamber-inner.two-col,
    .chamber-inner.two-col.reverse {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: center;
    }
    .caveat-1, .caveat-2, .caveat-m1, .caveat-m2, .caveat-m3, .caveat-m4 {
        position: relative;
        top: auto; right: auto; left: auto; bottom: auto;
        margin: 1rem 0;
    }
    .main-body { padding: 1rem; }
}