/* ================================================================
   concengine.net — neomorphic candy-bright tutorial
   Compliance tokens from DESIGN.md typography/parser spillover:
   Code" (Google Interaction System:** System* System:* IntersectionObserver IntersectionObserver`
   markers trigger transitions panel's should organic morphing configuration rather hard cuts.
   Palette:
     #f0e6f6  lavender milk   (primary substrate)
     #e8ddf0  lilac frost     (secondary substrate)
     #ff6b9d  strawberry pop  (candy pink)
     #a8e06c  melon soda      (electric lime)
     #6bcfff  cotton candy    (sky bubblegum)
     #ffb347  tangerine fizz  (mango burst)
     #5b3a7a  grape jelly     (text primary)
     #3d2457  plum ink        (deep shadow)
   ================================================================ */

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

:root {
    --substrate-1: #f0e6f6;
    --substrate-2: #e8ddf0;
    --pink:        #ff6b9d;
    --lime:        #a8e06c;
    --sky:         #6bcfff;
    --mango:       #ffb347;
    --grape:       #5b3a7a;
    --plum:        #3d2457;

    --shadow-light: rgba(255, 255, 255, 0.75);
    --shadow-dark:  rgba(93, 58, 122, 0.28);

    --neo-out:  -6px -6px 12px var(--shadow-light), 6px 6px 12px var(--shadow-dark);
    --neo-out-lg: -10px -10px 22px var(--shadow-light), 10px 10px 22px var(--shadow-dark);
    --neo-in:  inset -5px -5px 10px var(--shadow-light), inset 5px 5px 10px var(--shadow-dark);
    --neo-in-deep: inset -7px -7px 14px var(--shadow-light), inset 8px 8px 16px var(--shadow-dark);

    --font-hand: 'Caveat', cursive;
    --font-body: 'Nunito Sans', system-ui, sans-serif;
    --font-code: 'Fira Code', 'Menlo', monospace;
}

html, body {
    background: var(--substrate-1);
    color: var(--grape);
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    min-height: 100%;
}

/* subtle aged-paper grain via layered radial/linear gradients */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(93,58,122,0.04) 0, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(93,58,122,0.03) 0, transparent 60%),
        repeating-linear-gradient(45deg, rgba(93,58,122,0.015) 0 2px, transparent 2px 6px);
    mix-blend-mode: multiply;
    opacity: 0.55;
}

/* ================================================================
   Split-Screen Layout
   ================================================================ */

.split-screen {
    position: relative;
    display: grid;
    grid-template-columns: var(--left-col, 45%) 1fr;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
    transition: grid-template-columns 1.2s cubic-bezier(0.5, 0, 0.2, 1);
}

.manual-side {
    background: var(--substrate-1);
    padding: 5rem 4rem 5rem 5rem;
    border-right: 0; /* divider drawn via SVG overlay */
    position: relative;
    z-index: 2;
}

.engine-side {
    background: var(--substrate-2);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.manual-inner {
    max-width: 640px;
    margin: 0 auto;
}

.engine-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ================================================================
   Split Divider (undulating wave)
   ================================================================ */

.split-divider {
    position: fixed;
    top: 0;
    left: calc(var(--divider-pos, 45%) - 30px);
    width: 60px;
    height: 100vh;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

.split-divider path {
    vector-effect: non-scaling-stroke;
}

/* ================================================================
   Chapter Pill / Radial Menu
   ================================================================ */

.chapter-pill {
    position: fixed;
    top: 28px;
    left: 28px;
    z-index: 20;
    background: var(--substrate-1);
    border-radius: 48px;
    padding: 12px 22px;
    box-shadow: var(--neo-out);
    font-family: var(--font-code);
    font-size: 0.95rem;
    color: var(--grape);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chapter-pill:hover {
    transform: translateY(-2px);
}

.chapter-pill.active {
    box-shadow: var(--neo-in);
}

.pill-number {
    color: var(--pink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pill-slash {
    color: var(--grape);
    opacity: 0.5;
}

.pill-total {
    color: var(--grape);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

.pill-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.radial-node {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--substrate-1);
    color: var(--grape);
    font-family: var(--font-code);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    box-shadow: var(--neo-out);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.3, 1.3, 0.5, 1), background 0.25s ease;
    pointer-events: none;
}

.chapter-pill.active .pill-radial {
    pointer-events: auto;
}

.chapter-pill.active .radial-node {
    opacity: 1;
    pointer-events: auto;
}

.chapter-pill.active .radial-node:nth-child(1) { transform: translate(calc(-50% + 90px), calc(-50% + 0px)) scale(1); }
.chapter-pill.active .radial-node:nth-child(2) { transform: translate(calc(-50% + 70px), calc(-50% + 70px)) scale(1); }
.chapter-pill.active .radial-node:nth-child(3) { transform: translate(calc(-50% + 0px), calc(-50% + 90px)) scale(1); }
.chapter-pill.active .radial-node:nth-child(4) { transform: translate(calc(-50% - 70px), calc(-50% + 70px)) scale(1); }
.chapter-pill.active .radial-node:nth-child(5) { transform: translate(calc(-50% - 90px), calc(-50% + 0px)) scale(1); }
.chapter-pill.active .radial-node:nth-child(6) { transform: translate(calc(-50% - 70px), calc(-50% - 70px)) scale(1); }
.chapter-pill.active .radial-node:nth-child(7) { transform: translate(calc(-50% + 0px), calc(-50% - 90px)) scale(1); }

.radial-node:hover {
    background: var(--pink);
    color: #fff;
}

.radial-node.current {
    background: var(--lime);
    color: var(--plum);
}

/* ================================================================
   Chapters
   ================================================================ */

.chapter {
    margin-bottom: 6rem;
    padding: 2.2rem 2rem 2.6rem;
    background: var(--substrate-1);
    border-radius: 28px;
    box-shadow: var(--neo-in-deep);
    position: relative;
    min-height: 70vh;
}

.chapter:first-child {
    margin-top: 4rem;
}

.chapter:last-child {
    margin-bottom: 10rem;
}

.chapter-header {
    margin-bottom: 2.2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px dotted rgba(93, 58, 122, 0.2);
    position: relative;
}

.chapter-title {
    font-family: var(--font-hand);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.15;
    color: var(--grape);
    margin-bottom: 0.3rem;
}

.chapter-sub {
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--pink);
    line-height: 1.2;
}

.chapter-body {
    position: relative;
}

.instruction {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.75;
    color: var(--grape);
    margin-bottom: 2rem;
}

.instruction em {
    font-style: italic;
    color: var(--pink);
    font-weight: 600;
}

.instruction.signoff {
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.6rem;
    color: var(--pink);
    margin-top: 3rem;
}

.signoff-mark {
    color: var(--lime);
    font-size: 1.4em;
}

/* Code pill: inline code-styled element */
.code-pill {
    display: inline-block;
    font-family: var(--font-code);
    font-size: 0.85em;
    padding: 2px 10px;
    background: var(--substrate-2);
    border-left: 3px solid var(--pink);
    border-radius: 8px;
    box-shadow: var(--neo-in);
    color: var(--plum);
    margin: 0 2px;
    white-space: nowrap;
}

.code-pill.color-pink  { border-left-color: var(--pink); }
.code-pill.color-blue  { border-left-color: var(--sky); }
.code-pill.color-lime  { border-left-color: var(--lime); }
.code-pill.color-grape { border-left-color: var(--grape); }

/* Code block: fenced neomorphic inset */
.code-block {
    background: var(--substrate-2);
    border-radius: 14px;
    padding: 1.2rem 1.4rem;
    box-shadow: var(--neo-in);
    margin: 1.6rem 0;
    border-left: 4px solid var(--sky);
    overflow-x: auto;
}

.code-block pre {
    font-family: var(--font-code);
    font-size: 0.88rem;
    color: var(--plum);
    line-height: 1.6;
    white-space: pre;
}

/* Margin note (handwritten marginalia) */
.margin-note {
    font-family: var(--font-hand);
    font-size: 1.15rem;
    color: var(--pink);
    font-weight: 600;
    padding: 0.4rem 1rem;
    display: inline-block;
    transform: rotate(-3deg);
    margin: 0.6rem 0 1.6rem 1.5rem;
    border-bottom: 2px wavy var(--pink);
}

/* ================================================================
   Engineering Stamp (chapter header disc)
   ================================================================ */

.stamp {
    position: absolute;
    top: -30px;
    right: -10px;
    width: 96px;
    height: 96px;
    background: var(--substrate-1);
    border-radius: 50%;
    box-shadow: var(--neo-out);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-code);
    font-weight: 500;
    color: var(--pink);
    transform: rotate(-6deg);
}

.stamp-lime   { color: var(--lime); }
.stamp-blue   { color: var(--sky); }
.stamp-orange { color: var(--mango); }
.stamp-pink   { color: var(--pink); }

.stamp-num {
    font-size: 1.8rem;
    font-weight: 600;
    z-index: 2;
}

.stamp-ring {
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0.4;
}
.stamp-ring::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px dotted currentColor;
    opacity: 0.5;
}

.stamp-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    font-size: 0.8rem;
    color: var(--grape);
    opacity: 0.7;
    transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(-38px) rotate(calc(-1 * var(--a, 0deg)));
    font-family: var(--font-code);
}

/* ================================================================
   Engine Side — Stages
   ================================================================ */

.dot-matrix {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(93, 58, 122, 0.16) 1px, transparent 1.5px);
    background-size: 16px 16px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 1;
}

.stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.7s cubic-bezier(0.3, 0.9, 0.3, 1),
                transform 0.9s cubic-bezier(0.3, 1.2, 0.4, 1);
    pointer-events: none;
    z-index: 2;
}

.stage.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.blob-svg {
    width: min(72vh, 560px);
    height: min(72vh, 560px);
    overflow: visible;
    filter: drop-shadow(6px 8px 18px rgba(93, 58, 122, 0.22))
            drop-shadow(-6px -6px 14px rgba(255, 255, 255, 0.6));
}

.blob {
    transition: opacity 0.6s ease;
}

/* Caption handwritten */
.caption-handwritten {
    position: absolute;
    bottom: 8%;
    left: 10%;
    font-family: var(--font-hand);
    font-size: 1.7rem;
    color: var(--pink);
    transform: rotate(-4deg);
    z-index: 4;
    pointer-events: none;
}

.caption-top {
    bottom: auto;
    top: 10%;
    right: 8%;
    left: auto;
    color: var(--sky);
    transform: rotate(3deg);
}

/* Anchor dots overlay for stage 2 */
.anchor-dots circle {
    fill: var(--pink);
    stroke: var(--substrate-1);
    stroke-width: 2;
}

/* Diagram grid (stage 6) */
.diagram-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: min(80%, 620px);
    height: min(80%, 620px);
}

.diagram-cell {
    position: relative;
    background: var(--substrate-1);
    border-radius: 22px;
    box-shadow: var(--neo-out);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem;
}

.diagram-cell .blob-svg {
    width: 75%;
    height: 75%;
    filter: drop-shadow(2px 3px 6px rgba(93, 58, 122, 0.18));
}

.diag-label {
    position: absolute;
    bottom: 8px;
    left: 14px;
    font-family: var(--font-hand);
    font-size: 1rem;
    color: var(--grape);
    opacity: 0.75;
}

.diagram-blob .gear-drawing,
.diagram-blob .node-drawing,
.diagram-blob .wave-drawing,
.diagram-blob .coil-drawing {
    transform-origin: center;
}

.draw-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.2s ease;
}

.stage.active .draw-line {
    stroke-dashoffset: 0;
}

.center-gear {
    transform-origin: center;
    animation: slow-spin 22s linear infinite;
}
@keyframes slow-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ================================================================
   Magnetic Accent Blobs (stage 5)
   ================================================================ */

.magnet-field {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.accent-blob {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--sz, 60px);
    height: var(--sz, 60px);
    transform: translate(-50%, -50%);
    border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%;
    background: radial-gradient(circle at 30% 30%, var(--c1, var(--pink)) 0%, var(--c2, var(--mango)) 100%);
    box-shadow:
        -4px -4px 10px rgba(255, 255, 255, 0.55),
        6px 8px 14px rgba(93, 58, 122, 0.3),
        inset -3px -3px 8px rgba(93, 58, 122, 0.25),
        inset 3px 3px 8px rgba(255, 255, 255, 0.5);
    animation: blob-morph 8s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
}

.accent-blob::after {
    content: "";
    position: absolute;
    top: 18%;
    left: 22%;
    width: 30%;
    height: 22%;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    filter: blur(3px);
}

@keyframes blob-morph {
    0%, 100% { border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; }
    33%      { border-radius: 58% 42% 40% 60% / 45% 60% 40% 55%; }
    66%      { border-radius: 50% 50% 62% 38% / 60% 40% 55% 45%; }
}

/* ================================================================
   Stage 7 — annotations overlay
   ================================================================ */

.stage#stage-7 {
    padding: 2rem;
}

.annotations {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.annotations path.anno-arrow,
.annotations ellipse.anno-circle {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.5s ease 0.2s;
}

.stage.active .annotations path.anno-arrow,
.stage.active .annotations ellipse.anno-circle {
    stroke-dashoffset: 0;
}

.anno-text {
    font-size: 1.3rem;
    color: var(--plum);
    opacity: 0;
    transition: opacity 0.8s ease 0.8s;
}

.stage.active .anno-text {
    opacity: 1;
}

/* ================================================================
   Responsive (narrow screens collapse the split)
   ================================================================ */

@media (max-width: 860px) {
    .split-screen {
        grid-template-columns: 1fr;
    }
    .engine-side {
        position: relative;
        height: 70vh;
        order: -1;
    }
    .manual-side {
        padding: 3rem 1.5rem;
    }
    .split-divider {
        display: none;
    }
    .chapter {
        padding: 1.6rem 1.2rem;
        min-height: auto;
    }
    .stamp {
        right: 6px;
        top: -20px;
        width: 72px;
        height: 72px;
    }
    .stamp-num { font-size: 1.3rem; }
}