/* ============================================================
   murasaki.quest — ethereal field log
   palette: deep violet gradient mesh, bokeh halos, ember accent
   type: slab-serif voice (Roboto Slab / Zilla Slab / Bitter)
   ops: JetBrains Mono for timestamps / hex / breadcrumbs
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

html, body {
    background: #0c0a1f;
    color: #c4a4ff;
    font-family: "Bitter", Georgia, serif;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.62;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
    cursor: crosshair;
}

/* ------------------------------------------------------------
   Gradient mesh field (fixed background)
   linear violet base + three radial bloom centers
   slow 60s drift via background-position
   ------------------------------------------------------------ */
.gradient-mesh {
    position: fixed;
    inset: 0;
    z-index: -3;
    background-color: #0c0a1f;
    background-image:
        radial-gradient(circle at 30% 20%, #5a2ea6 0%, transparent 40%),
        radial-gradient(circle at 78% 65%, #8b5cf6 0%, transparent 35%),
        radial-gradient(circle at 50% 100%, #1a0e3a 0%, transparent 60%),
        linear-gradient(180deg, #0c0a1f 0%, #1a0e3a 100%);
    background-size: 140% 140%, 130% 130%, 160% 160%, 100% 100%;
    background-position: 30% 20%, 78% 65%, 50% 100%, 0 0;
    animation: mesh-drift 60s ease-in-out infinite alternate;
    will-change: background-position;
}

@keyframes mesh-drift {
    0%   { background-position: 30% 20%, 78% 65%, 50% 100%, 0 0; }
    50%  { background-position: 22% 32%, 64% 58%, 58% 88%,  0 0; }
    100% { background-position: 38% 14%, 86% 72%, 44% 110%, 0 0; }
}

/* ------------------------------------------------------------
   Bokeh field (64 violet discs, generated in script.js)
   ------------------------------------------------------------ */
.bokeh-field {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.b {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes bokeh-drift-a {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-30px, 40px); }
    100% { transform: translate(50px, -20px); }
}
@keyframes bokeh-drift-b {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(36px, -28px); }
    100% { transform: translate(-44px, 32px); }
}
@keyframes bokeh-drift-c {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-22px, -36px); }
    100% { transform: translate(28px, 44px); }
}
@keyframes bokeh-drift-d {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(42px, 22px); }
    100% { transform: translate(-38px, -30px); }
}

/* dimming filter applied when scene-04 (the "lamp turned down") is in view */
.bokeh-dimmed .bokeh-field {
    filter: brightness(0.7) saturate(0.92);
    transition: filter 1.2s ease;
}

/* ------------------------------------------------------------
   Visible broken-grid construction rules (1px violet, 22% opacity)
   draughtsman's reference lines, deliberately exposed
   ------------------------------------------------------------ */
.grid-rules {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: 0 4vw;
    mix-blend-mode: screen;
}

.grid-rules .grid-rule {
    border-left: 1px solid rgba(90, 46, 166, 0.22);
    height: 100%;
}

.grid-rules .grid-rule:last-child {
    border-right: 1px solid rgba(90, 46, 166, 0.22);
}

/* ------------------------------------------------------------
   Cursor thread (SVG, follows cursor with lag)
   ------------------------------------------------------------ */
.cursor-thread {
    position: fixed;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
}

.cursor-thread .thread-pt {
    /* opacity decays toward older points (set inline) */
}

/* ------------------------------------------------------------
   Breadcrumb nav (bottom-left, monospaced, ugly on purpose)
   ------------------------------------------------------------ */
.breadcrumbs {
    position: fixed;
    left: 1.6rem;
    bottom: 1.4rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.82rem;
    color: #c4a4ff;
    text-align: left;
    line-height: 1.18;
}

.breadcrumbs .bc {
    position: relative;
    color: #c4a4ff;
    opacity: 0.62;
    text-decoration: none;
    padding: 0.04rem 0;
    letter-spacing: 0.02em;
    transition: opacity 0.18s ease, color 0.18s ease;
}

.breadcrumbs .bc::before {
    content: "[ ]";
    color: #5a2ea6;
    margin-right: 0.42rem;
    transition: color 0.18s ease;
}

.breadcrumbs .bc.bc-active {
    color: #ffd166;
    opacity: 1;
}

.breadcrumbs .bc.bc-active::before {
    content: "[*]";
    color: #ffd166;
}

.breadcrumbs .bc:hover {
    color: #f3e8ff;
    opacity: 1;
}

/* underline morphs from straight bar to wave when cursor is near */
.breadcrumbs .bc::after {
    content: "";
    position: absolute;
    left: 1.6rem;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: linear-gradient(90deg, #8b5cf6, #c4a4ff);
    opacity: 0;
    transform: scaleX(0.6);
    transform-origin: left center;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.breadcrumbs .bc.bc-near::after,
.breadcrumbs .bc.bc-active::after {
    opacity: 0.82;
    transform: scaleX(1);
}

.breadcrumbs .bc.bc-near::after {
    background-image: linear-gradient(90deg, #8b5cf6, #c4a4ff, #ffd166);
    -webkit-mask-image: radial-gradient(circle at 10% 50%, #000 30%, transparent 100%), linear-gradient(#000, #000);
    animation: wave-bar 1.4s ease-in-out infinite;
}

@keyframes wave-bar {
    0%, 100% { transform: scaleX(1) translateY(0); }
    50%      { transform: scaleX(1) translateY(-2px); }
}

/* ------------------------------------------------------------
   Version stamp top-right (mono, dim)
   ------------------------------------------------------------ */
.version-stamp {
    position: fixed;
    top: 1.4rem;
    right: 1.6rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.18rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.74rem;
    color: #c4a4ff;
    text-align: right;
    pointer-events: none;
}

.version-stamp .vs-line {
    opacity: 0.78;
    letter-spacing: 0.02em;
}

.version-stamp .vs-dim {
    opacity: 0.48;
}

/* ============================================================
   FIELD LOG container — six scenes
   ============================================================ */
.field-log {
    position: relative;
    z-index: 1;
    padding: 0 4vw;
}

.scene {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
    column-gap: 1.2rem;
    row-gap: 1.4rem;
    padding: 8rem 0 6rem 0;
    align-content: start;
}

.scene-tag {
    grid-column: 1 / -1;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78rem;
    color: #c4a4ff;
    opacity: 0.72;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

.scene-tag .op {
    color: #ffd166;
    opacity: 0.92;
}

.scene-tag .op-dim {
    color: #c4a4ff;
    opacity: 0.62;
    margin-left: 0.6rem;
}

.scene-foot {
    grid-column: 1 / -1;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    color: #c4a4ff;
    opacity: 0.58;
    letter-spacing: 0.04em;
    margin-top: 3rem;
    padding-bottom: 1rem;
}

.scene-foot .op {
    color: #ffd166;
    opacity: 0.86;
    margin: 0 0.5rem;
}

.scene-foot .op-dim {
    opacity: 0.54;
}

.mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* Corner brackets (morphing) */
.scene-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 2;
    pointer-events: none;
}

.scene-corner-tl { top: 1.4rem; left: -1rem; }
.scene-corner-tr { top: 1.4rem; right: -1rem; }

.bracket-path {
    transition: d 0.6s ease;
}

/* horizon-divider — bottom of each scene */
.horizon-divider {
    grid-column: 1 / -1;
    height: 80px;
    width: 100%;
    margin-top: 2.4rem;
    opacity: 0.7;
}

/* ============================================================
   TYPOGRAPHY — slab voices
   ============================================================ */

/* Display headlines — Roboto Slab 800, tight tracking */
.slab-head {
    font-family: "Roboto Slab", "Bitter", serif;
    font-weight: 800;
    font-size: clamp(3.2rem, 7.4vw, 7.8rem);
    line-height: 0.92;
    letter-spacing: -0.022em;
    color: #f3e8ff;
    margin-left: -3.5rem;  /* slab bleeds past the column rule */
    text-wrap: balance;
}

.slab-head .hd-line {
    display: block;
}

.slab-head .hd-dim {
    color: #c4a4ff;
    opacity: 0.66;
    font-style: italic;
    font-weight: 600;
}

/* Sub-heads / quotes — Zilla Slab */
.zilla-sub {
    font-family: "Zilla Slab", "Bitter", serif;
    font-weight: 600;
    font-size: clamp(1.4rem, 2.1vw, 2.1rem);
    color: #f3e8ff;
    letter-spacing: -0.005em;
    line-height: 1.18;
    margin-bottom: 1.2rem;
}

.zilla-italic {
    font-family: "Zilla Slab", "Bitter", serif;
    font-style: italic;
    font-weight: 500;
    color: #f3e8ff;
}

/* Body — Bitter */
.slab-body {
    font-family: "Bitter", Georgia, serif;
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.62;
    color: #c4a4ff;
}

.slab-body s {
    color: #8b5cf6;
    opacity: 0.55;
    text-decoration-color: #8b5cf6;
    text-decoration-thickness: 1.4px;
}

.body-stamp {
    color: #ffd166;
    opacity: 0.86;
    font-size: 0.82rem;
    margin-right: 0.4rem;
    letter-spacing: 0.04em;
}

/* ============================================================
   SCENE 01 — signal
   slab head cols 1-5 (left), sigil cols 9-12 (right)
   tier widths in rem: [7, 11, 4, 9]
   ============================================================ */
.scene-01 .head-01 {
    grid-column: 1 / span 5;
    grid-row: 2;
    align-self: start;
    margin-top: 1rem;
}

.scene-01 .body-01 {
    grid-column: 1 / span 6;
    grid-row: 3;
    max-width: 38rem;
    margin-top: 2rem;
    transform: rotate(0.6deg);
    transform-origin: top left;
}

.scene-01 .sigil-cradle {
    grid-column: 9 / span 4;
    grid-row: 2 / span 2;
    align-self: center;
    justify-self: center;
    text-align: center;
}

/* ============================================================
   SCENE 02 — logs
   log column cols 1-4, pulled quote cols 7-12
   tier widths: [3, 8, 13, 6] = visibly different from scene 01
   ============================================================ */
.scene-02 {
    align-content: start;
}

.scene-02 .log-column {
    grid-column: 1 / span 5;
    grid-row: 2;
    transform: rotate(-0.4deg);
    transform-origin: top left;
}

.scene-02 .log-head {
    margin-left: -2rem;
}

.scene-02 .log-list {
    list-style: none;
    counter-reset: log;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.86rem;
    line-height: 1.7;
    color: #c4a4ff;
    border-left: 1px solid rgba(196, 164, 255, 0.22);
    padding-left: 1rem;
}

.scene-02 .log-list li {
    counter-increment: log;
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 0.18rem;
    word-break: break-word;
}

.scene-02 .log-list li::before {
    content: counter(log, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: #5a2ea6;
    opacity: 0.78;
}

.scene-02 .log-ts {
    color: #ffd166;
    opacity: 0.82;
    margin-right: 0.6rem;
}

.scene-02 .log-hex {
    color: #8b5cf6;
    opacity: 0.78;
    margin-right: 0.6rem;
}

.scene-02 .log-list li s {
    color: #5a2ea6;
    opacity: 0.62;
}

.scene-02 .pulled-quote {
    grid-column: 7 / span 5;
    grid-row: 2;
    align-self: center;
    transform: rotate(0.9deg);
    transform-origin: bottom right;
    padding: 2.4rem 0;
    position: relative;
}

.scene-02 .pulled-quote .quote-tick {
    width: 60px;
    height: 60px;
    display: block;
    opacity: 0.86;
    margin-bottom: 0.6rem;
}

.scene-02 .pulled-quote blockquote {
    font-size: clamp(1.8rem, 3.2vw, 3rem);
    line-height: 1.16;
    color: #f3e8ff;
    letter-spacing: -0.008em;
}

.scene-02 .pulled-quote .cite {
    display: block;
    margin-top: 1.4rem;
    color: #c4a4ff;
    opacity: 0.58;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

/* ============================================================
   SCENE 03 — quest, four broken-grid panels
   each rotated +0.6 / -0.4 / +0.9 / -0.7
   ============================================================ */
.scene-03 .head-03 {
    grid-column: 1 / span 7;
    grid-row: 2;
    margin-bottom: 2.2rem;
}

.scene-03 .quest-panel {
    /* council violet #2d1b69 mid-stop, deep amethyst #1a0e3a base */
    background:
        linear-gradient(180deg, rgba(45, 27, 105, 0.36) 0%, rgba(26, 14, 58, 0.18) 100%);
    border: 1px solid rgba(196, 164, 255, 0.14);
    border-top: 1px solid #2d1b69;
    padding: 1.6rem 1.8rem 1.8rem 1.8rem;
    position: relative;
    backdrop-filter: blur(2px);
}

.scene-03 .quest-panel .qp-marker {
    color: #ffd166;
    opacity: 0.86;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.7rem;
}

.scene-03 .qp-1 {
    grid-column: 1 / span 5;
    grid-row: 3;
    transform: rotate(0.6deg);
    transform-origin: top left;
}

.scene-03 .qp-2 {
    grid-column: 7 / span 5;
    grid-row: 3;
    transform: rotate(-0.4deg);
    transform-origin: top right;
}

.scene-03 .qp-3 {
    grid-column: 2 / span 5;
    grid-row: 4;
    transform: rotate(0.9deg);
    transform-origin: bottom left;
}

.scene-03 .qp-4 {
    grid-column: 8 / span 5;
    grid-row: 4;
    transform: rotate(-0.7deg);
    transform-origin: bottom right;
}

/* ============================================================
   SCENE 04 — raw, 800px-wide single block hard-left-pinned
   tier widths: [6, 12, 4, 8]
   ============================================================ */
.scene-04 .raw-block {
    grid-column: 1 / span 7;
    grid-row: 2;
    max-width: 800px;
    transform: rotate(-0.4deg);
    transform-origin: top left;
}

.scene-04 .raw-head {
    margin-left: -2.4rem;
    margin-bottom: 1.6rem;
}

.scene-04 .raw-prose {
    margin-bottom: 1.4rem;
}

.scene-04 .raw-last {
    font-style: italic;
    font-size: 1.16rem;
    margin-top: 1.6rem;
    color: #f3e8ff;
}

.scene-04 .raw-closer {
    color: #ffd166;
    font-style: normal;
    font-weight: 500;
}

.scene-04 .raw-aside {
    grid-column: 10 / span 3;
    grid-row: 2;
    align-self: end;
    color: #c4a4ff;
    opacity: 0.46;
    font-size: 0.72rem;
    line-height: 1.6;
}

/* ============================================================
   SCENE 05 — signal-return
   sigil large (24rem-ish), slab head beside it
   ============================================================ */
.scene-05 .sigil-cradle.sigil-large {
    grid-column: 1 / span 5;
    grid-row: 2 / span 2;
    align-self: center;
    justify-self: center;
}

.scene-05 .quest-sigil-large {
    width: clamp(16rem, 28vw, 24rem);
    height: clamp(16rem, 28vw, 24rem);
}

.scene-05 .head-05 {
    grid-column: 7 / span 6;
    grid-row: 2;
    align-self: center;
    transform: rotate(0.6deg);
    transform-origin: bottom left;
}

.scene-05 .ticker {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 3rem;
    color: #c4a4ff;
    opacity: 0.74;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    border-top: 1px solid rgba(90, 46, 166, 0.32);
    padding-top: 0.7rem;
}

.scene-05 .ticker-line {
    display: inline-block;
    padding-left: 100%;
    animation: ticker-roll 38s linear infinite;
}

@keyframes ticker-roll {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* ============================================================
   SCENE 06 — sign-off
   single signed line, lower-left, mono
   ============================================================ */
.scene-06 {
    min-height: 60vh;
    padding-bottom: 8rem;
}

.scene-06 .signoff-line {
    grid-column: 1 / span 12;
    align-self: end;
    color: #c4a4ff;
    font-size: 0.86rem;
    letter-spacing: 0.04em;
    line-height: 1.8;
    margin-top: 14rem;
    flex-wrap: wrap;
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
}

.scene-06 .signoff-key {
    color: #c4a4ff;
    opacity: 0.62;
}

.scene-06 .signoff-val {
    color: #f3e8ff;
}

.scene-06 .signoff-sep {
    color: #5a2ea6;
    opacity: 0.78;
}

.scene-06 .signoff-open {
    color: #ffd166;
}

.scene-06 .caret {
    color: #ffd166;
    margin-left: 0.32rem;
    font-size: 1rem;
    animation: caret-blink 1s steps(2, end) infinite;
    font-weight: 700;
}

@keyframes caret-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ============================================================
   QUEST SIGIL (morphing SVG)
   ============================================================ */
.quest-sigil {
    width: clamp(10rem, 18vw, 14rem);
    height: clamp(10rem, 18vw, 14rem);
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 24px rgba(139, 92, 246, 0.42))
            drop-shadow(0 0 8px rgba(255, 209, 102, 0.18));
}

.sigil-path {
    transition: d 0.6s cubic-bezier(.42, 0, .58, 1);
}

.sigil-label {
    color: #c4a4ff;
    opacity: 0.7;
    font-size: 0.74rem;
    margin-top: 1rem;
    letter-spacing: 0.06em;
}

.sigil-label .sigil-sub {
    color: #ffd166;
    opacity: 0.78;
    font-size: 0.68rem;
}

/* ============================================================
   Fade-in for slab headlines / body blocks
   1.4s opacity 0 -> 1 plus 24px upward translate, no bounce
   ============================================================ */
.slab-head,
.zilla-sub,
.slab-body,
.quest-panel,
.pulled-quote,
.raw-block,
.signoff-line,
.ticker {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.slab-head.is-visible,
.zilla-sub.is-visible,
.slab-body.is-visible,
.quest-panel.is-visible,
.pulled-quote.is-visible,
.raw-block.is-visible,
.signoff-line.is-visible,
.ticker.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* preserve rotations after settle */
.scene-01 .body-01.is-visible          { transform: rotate(0.6deg); }
.scene-02 .log-column.is-visible       { transform: rotate(-0.4deg); }
.scene-02 .pulled-quote.is-visible     { transform: rotate(0.9deg); }
.scene-03 .qp-1.is-visible             { transform: rotate(0.6deg); }
.scene-03 .qp-2.is-visible             { transform: rotate(-0.4deg); }
.scene-03 .qp-3.is-visible             { transform: rotate(0.9deg); }
.scene-03 .qp-4.is-visible             { transform: rotate(-0.7deg); }
.scene-04 .raw-block.is-visible        { transform: rotate(-0.4deg); }
.scene-05 .head-05.is-visible          { transform: rotate(0.6deg); }

/* ============================================================
   RESPONSIVE
   below 900px: vertical column, grid breaks gracefully
   ============================================================ */
@media (max-width: 1024px) {
    .scene {
        grid-template-columns: repeat(6, 1fr);
        padding: 6rem 0 4rem 0;
    }
    .scene-01 .head-01,
    .scene-01 .body-01,
    .scene-01 .sigil-cradle,
    .scene-02 .log-column,
    .scene-02 .pulled-quote,
    .scene-03 .head-03,
    .scene-03 .qp-1,
    .scene-03 .qp-2,
    .scene-03 .qp-3,
    .scene-03 .qp-4,
    .scene-04 .raw-block,
    .scene-04 .raw-aside,
    .scene-05 .sigil-cradle.sigil-large,
    .scene-05 .head-05,
    .scene-05 .ticker,
    .scene-06 .signoff-line {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .slab-head {
        margin-left: -1rem;
        font-size: clamp(2.6rem, 8vw, 4.4rem);
    }
}

@media (max-width: 640px) {
    body {
        cursor: default;
    }
    .field-log {
        padding: 0 6vw;
    }
    .breadcrumbs {
        left: 1rem;
        bottom: 1rem;
        font-size: 0.74rem;
    }
    .version-stamp {
        right: 1rem;
        top: 1rem;
        font-size: 0.68rem;
    }
    .scene {
        padding: 5rem 0 3rem 0;
        min-height: 92vh;
    }
    .slab-head {
        margin-left: 0;
        font-size: clamp(2.2rem, 9vw, 3.4rem);
    }
    .scene-02 .pulled-quote blockquote {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }
    .scene-05 .quest-sigil-large {
        width: clamp(12rem, 60vw, 18rem);
        height: clamp(12rem, 60vw, 18rem);
    }
    .grid-rules {
        display: none; /* construction rules off on tight screens */
    }
}

/* reduced motion: still drift, but slower */
@media (prefers-reduced-motion: reduce) {
    .gradient-mesh { animation-duration: 240s; }
    .ticker-line   { animation-duration: 120s; }
    .b             { animation-duration: 90s !important; }
}