/* ==========================================================================
   sim-ai.xyz / Simulation AI Gallery
   pop-art + watercolor + circuit, masonry layout, sepia palette
   ========================================================================== */

:root {
    --canvas:      #f2ebe0; /* warm canvas */
    --parchment:   #faf5ed; /* card light */
    --ink:         #3a2e24; /* sepia ink */
    --pop-orange:  #d4723c;
    --teal:        #5a9e8f;
    --rose:        #c87a6e;
    --gold:        #b89850;

    --shadow-card: 6px 6px 0 #3a2e24;
    --shadow-card-hover: 9px 9px 0 #3a2e24;

    --font-display: 'Bangers', 'Archivo Black', system-ui, sans-serif;
    --font-heading: 'Archivo Black', 'Bangers', system-ui, sans-serif;
    --font-body:    'Merriweather', Georgia, serif;
    --font-mono:    'Fira Mono', 'Menlo', monospace;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.75;
    color: var(--ink);
    background: var(--canvas);
    overflow-x: hidden;
}

/* halftone canvas underlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(58,46,36,0.08) 1.2px, transparent 1.5px);
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 0;
}

main, section, footer { position: relative; z-index: 1; }

h1, h2, h3, h4, h5 { margin: 0 0 0.6em 0; line-height: 1.1; color: var(--ink); }
p { margin: 0 0 1em 0; }
em { font-style: italic; color: var(--pop-orange); }
strong { font-weight: 700; color: var(--ink); }

.mono { font-family: var(--font-mono); }
.small { font-size: 0.8em; }

/* ==========================================================================
   HERO  (100vh)
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(280px, 520px) minmax(260px, 1fr);
    grid-template-rows: 1fr auto;
    gap: 2rem 3rem;
    align-items: center;
    padding: 4rem 6vw 6rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(212,114,60,0.08), transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(90,158,143,0.10), transparent 60%),
        var(--canvas);
}

.halftone-bg {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(58,46,36,0.18) 1.5px, transparent 2px);
    background-size: 14px 14px;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0) 100%);
    opacity: 0;
    transition: opacity 1.2s ease 1.8s;
    pointer-events: none;
}
.hero.entered .halftone-bg { opacity: 0.85; }

.comic-burst {
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    max-width: 700px;
    aspect-ratio: 1 / 1;
    transform: translate(-12%, 6%);
    pointer-events: none;
    z-index: 1;
}
.comic-burst svg { width: 100%; height: 100%; }
.burst-rays path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
}
.hero.entered .burst-rays path {
    animation: drawRay 1.0s ease-out forwards;
}
.hero.entered .burst-rays path:nth-child(2)  { animation-delay: 0.05s; }
.hero.entered .burst-rays path:nth-child(3)  { animation-delay: 0.10s; }
.hero.entered .burst-rays path:nth-child(4)  { animation-delay: 0.15s; }
.hero.entered .burst-rays path:nth-child(5)  { animation-delay: 0.20s; }
.hero.entered .burst-rays path:nth-child(6)  { animation-delay: 0.25s; }
.hero.entered .burst-rays path:nth-child(7)  { animation-delay: 0.30s; }
.hero.entered .burst-rays path:nth-child(8)  { animation-delay: 0.35s; }
.hero.entered .burst-rays path:nth-child(9)  { animation-delay: 0.40s; }
.hero.entered .burst-rays path:nth-child(10) { animation-delay: 0.45s; }
.hero.entered .burst-rays path:nth-child(11) { animation-delay: 0.50s; }
.hero.entered .burst-rays path:nth-child(12) { animation-delay: 0.55s; }
.hero.entered .burst-rays path:nth-child(13) { animation-delay: 0.60s; }
.hero.entered .burst-rays path:nth-child(14) { animation-delay: 0.65s; }
.hero.entered .burst-rays path:nth-child(15) { animation-delay: 0.70s; }
.hero.entered .burst-rays path:nth-child(16) { animation-delay: 0.75s; }
@keyframes drawRay { to { stroke-dashoffset: 0; } }

.burst-stars { opacity: 0; }
.hero.entered .burst-stars { animation: twinkle 1.4s ease-out 0.9s forwards; }
@keyframes twinkle {
    0%   { opacity: 0; transform: scale(0.5); transform-origin: center; }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

.hero-monitor {
    position: relative;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    max-width: 520px;
    z-index: 2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 1.4s, transform 0.8s ease 1.4s;
}
.hero.entered .hero-monitor {
    opacity: 1;
    transform: translateY(0);
}
.monitor-svg { width: 100%; height: auto; display: block; }
.monitor-frame, .monitor-stand, .monitor-screen rect:first-of-type {
    /* monitor draws via stroke-dash */
}
.monitor-frame rect,
.monitor-stand path,
.monitor-stand rect {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}
.hero.entered .monitor-frame rect { animation: drawSlow 1.0s ease-out 1.4s forwards; }
.hero.entered .monitor-stand path { animation: drawSlow 0.6s ease-out 1.9s forwards; }
.hero.entered .monitor-stand rect { animation: drawSlow 0.5s ease-out 2.0s forwards; }
@keyframes drawSlow { to { stroke-dashoffset: 0; } }

.monitor-text {
    position: absolute;
    top: 30%;
    left: 16.5%;
    width: 67%;
    text-align: center;
    color: var(--canvas);
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 52px);
    letter-spacing: 0.04em;
    line-height: 1;
    opacity: 0;
    transform: scale(1.2);
}
.hero.entered .monitor-text {
    animation: bounceIn 0.7s cubic-bezier(0.18, 1.4, 0.5, 1) 2.1s forwards;
}
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(1.4); }
    60%  { opacity: 1; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}
.title-main { color: var(--canvas); }
.title-dot  { color: var(--pop-orange); }
.title-tld  { color: var(--teal); }

.monitor-meta {
    position: absolute;
    bottom: 22%;
    left: 22%;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--gold);
    opacity: 0;
}
.hero.entered .monitor-meta { animation: fadeIn 0.6s ease 2.6s forwards; }
.blink-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: var(--pop-orange);
    animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

.hero-tagline {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    z-index: 2;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.8s ease 2.2s, transform 0.8s ease 2.2s;
}
.hero.entered .hero-tagline {
    opacity: 1;
    transform: translateY(0);
}
.kicker {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: var(--gold);
    margin-bottom: 0.6rem;
    border-left: 4px solid var(--pop-orange);
    padding-left: 0.6rem;
}
.hero-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 5vw, 60px);
    letter-spacing: 0.01em;
    line-height: 1.04;
    text-shadow: 4px 4px 0 var(--pop-orange);
    margin-bottom: 1rem;
}
.hero-sub {
    font-family: var(--font-body);
    font-size: clamp(16px, 1.4vw, 19px);
    max-width: 38ch;
    color: var(--ink);
    border-bottom: 2px dashed var(--ink);
    padding-bottom: 1rem;
}

.hero-scroll-cue {
    grid-column: 2;
    grid-row: 2;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    opacity: 0;
    transition: opacity 0.6s ease 2.8s;
}
.hero.entered .hero-scroll-cue { opacity: 1; }
.cue-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.72rem;
    color: var(--ink);
}

@media (max-width: 800px) {
    .hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 3rem 5vw 4rem;
    }
    .hero-monitor { grid-column: 1; grid-row: 1; }
    .hero-tagline { grid-column: 1; grid-row: 2; }
    .hero-scroll-cue { grid-column: 1; grid-row: 3; }
    .comic-burst { width: 100%; transform: translate(-10%, -10%); opacity: 0.7; }
}

/* ==========================================================================
   SECTION PLACARDS
   ========================================================================== */
.section-placard {
    max-width: 900px;
    margin: 0 auto 3rem;
    padding: 0 6vw;
    text-align: left;
}
.placard-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.22em;
    color: var(--canvas);
    background: var(--ink);
    padding: 0.35rem 0.7rem;
    margin-bottom: 0.9rem;
    border: 2px solid var(--ink);
    transform: rotate(-1.5deg);
}
.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.05;
    margin-bottom: 0.7rem;
    color: var(--ink);
}
.section-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 6px;
    background: var(--pop-orange);
    margin-top: 0.7rem;
}
.section-blurb {
    font-size: clamp(15px, 1.4vw, 17px);
    max-width: 60ch;
    color: var(--ink);
}

/* ==========================================================================
   MASONRY GALLERY
   ========================================================================== */
.gallery {
    padding: 5rem 0 6rem;
    position: relative;
}
.gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg, transparent 0, transparent calc(100% - 1px), rgba(58,46,36,0.08) calc(100% - 1px));
    pointer-events: none;
}

.masonry {
    column-count: 3;
    column-gap: 1.5rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 6vw;
}
@media (max-width: 1000px) { .masonry { column-count: 2; } }
@media (max-width: 640px)  { .masonry { column-count: 1; } }

.card {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.4rem 1.7rem;
    border: 2px solid var(--ink);
    background: var(--parchment);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    transform: rotate(var(--card-rotation, 0deg));
}
.card:hover {
    transform: rotate(0deg) translate(-2px, -2px);
    box-shadow: var(--shadow-card-hover);
    z-index: 5;
}
.card-rot-l { --card-rotation: -1.2deg; }
.card-rot-r { --card-rotation:  1.2deg; }
.card-tall  { /* allowed to grow naturally */ }

.card-stamp {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--gold);
    border: 1px solid var(--gold);
    padding: 0.18rem 0.5rem;
    margin-bottom: 0.9rem;
    text-transform: uppercase;
}
.card-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.15;
    margin-bottom: 0.7rem;
}
.card-body {
    font-size: 0.96rem;
    line-height: 1.7;
    color: var(--ink);
}
.card-caption {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--gold);
    letter-spacing: 0.04em;
}
.card-tag {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.2rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--ink);
    background: rgba(184,152,80,0.18);
    border: 1px dashed var(--gold);
}

/* watercolor card variant */
.card-watercolor {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(212,114,60,0.10), transparent 60%),
        radial-gradient(ellipse at 20% 80%, rgba(90,158,143,0.10), transparent 60%),
        var(--parchment);
}
.watercolor-bleed {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    filter: blur(38px);
    opacity: 0.75;
    pointer-events: none;
}
.bleed-orange { background: radial-gradient(circle, rgba(212,114,60,0.45), transparent 70%); right: -80px; top: -60px; }
.bleed-teal   { background: radial-gradient(circle, rgba(90,158,143,0.45), transparent 70%); left: -70px; bottom: -80px; }
.bleed-bottom { right: -50px; bottom: -80px; top: auto; }
.bleed-top    { left: -50px; top: -80px; bottom: auto; }

/* halftone card variant */
.card-halftone {
    background:
        radial-gradient(circle at 0% 0%, rgba(200,122,110,0.08), transparent 50%),
        var(--parchment);
}
.halftone-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(200,122,110,0.45) 1.6px, transparent 2.2px);
    background-size: 9px 9px;
    -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.5), transparent 70%);
            mask-image: linear-gradient(135deg, rgba(0,0,0,0.5), transparent 70%);
    pointer-events: none;
    opacity: 0.8;
}

/* circuit card variant */
.card-circuit {
    background:
        repeating-linear-gradient(0deg, transparent 0 26px, rgba(184,152,80,0.10) 26px 27px),
        repeating-linear-gradient(90deg, transparent 0 26px, rgba(184,152,80,0.10) 26px 27px),
        var(--parchment);
}

/* quote card variant */
.card-quote {
    background:
        radial-gradient(circle at 20% 100%, rgba(212,114,60,0.10), transparent 60%),
        var(--parchment);
}
.comic-quote {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.7rem;
    line-height: 1.12;
    color: var(--ink);
    position: relative;
    padding-left: 1.6rem;
}
.quote-mark {
    position: absolute;
    left: -0.2rem;
    top: -1.2rem;
    font-size: 4rem;
    color: var(--pop-orange);
    line-height: 1;
}
.card-attr {
    margin-top: 1.1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--gold);
}

/* warhol grid (card 006) */
.warhol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 1rem;
    border: 2px solid var(--ink);
}
.warhol-cell {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--canvas);
    position: relative;
}
.warhol-cell.c1 { background: var(--pop-orange); }
.warhol-cell.c2 { background: var(--teal); }
.warhol-cell.c3 { background: var(--rose); }
.warhol-cell.c4 { background: var(--gold); color: var(--ink); }
.warhol-cell.c5 { background: var(--ink); }
.warhol-cell.c6 { background: var(--rose); }
.warhol-cell::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1.5px 1.5px, rgba(58,46,36,0.45) 1.4px, transparent 1.6px);
    background-size: 7px 7px;
    mix-blend-mode: multiply;
    pointer-events: none;
    opacity: 0.6;
}
.warhol-cell span { position: relative; z-index: 1; }

/* dice row (card 012) */
.dice-row {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    font-size: 2.4rem;
    color: var(--ink);
    line-height: 1;
}
.die {
    transition: transform 0.2s ease;
}
.die:hover { transform: rotate(15deg) scale(1.15); color: var(--pop-orange); }

/* ==========================================================================
   COMIC STRIP BREAKS
   ========================================================================== */
.comic-strip {
    background: var(--parchment);
    border-top: 4px solid var(--ink);
    border-bottom: 4px solid var(--ink);
    padding: 3rem 0;
    margin: 4rem 0;
    position: relative;
    overflow: hidden;
}
.comic-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(58,46,36,0.18) 1.4px, transparent 1.7px);
    background-size: 14px 14px;
    opacity: 0.35;
    pointer-events: none;
}

.strip-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6vw;
    position: relative;
    z-index: 1;
}
@media (max-width: 900px) { .strip-rail { grid-template-columns: 1fr; } }

.strip-panel {
    border: 3px solid var(--ink);
    background: var(--canvas);
    padding: 1.4rem 1.4rem 1.6rem;
    position: relative;
    min-height: 240px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.panel-num {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    font-family: var(--font-display);
    font-size: 2.4rem;
    color: var(--pop-orange);
    line-height: 1;
}
.panel-art {
    width: 100%;
    height: 110px;
    margin-bottom: 1rem;
    border: 2px solid var(--ink);
    background-color: var(--parchment);
    position: relative;
    overflow: hidden;
}
.panel-art-monitor {
    background-image:
        linear-gradient(var(--ink) 0 0),
        linear-gradient(var(--ink) 0 0);
    background-size: 60% 70%, 14% 8%;
    background-position: 50% 35%, 50% 80%;
    background-repeat: no-repeat;
}
.panel-art-circuit {
    background-image:
        linear-gradient(90deg, transparent 8%, var(--gold) 8% 10%, transparent 10% 20%, var(--gold) 20% 22%, transparent 22%),
        linear-gradient(0deg, transparent 30%, var(--ink) 30% 32%, transparent 32% 60%, var(--ink) 60% 62%, transparent 62%);
    background-size: 100% 50%, 100% 100%;
    background-position: 0 50%, 0 0;
    background-repeat: no-repeat;
}
.panel-art-burst {
    background:
        conic-gradient(from 0deg, var(--pop-orange) 0 8%, transparent 8% 15%, var(--pop-orange) 15% 22%, transparent 22% 30%, var(--pop-orange) 30% 37%, transparent 37% 45%, var(--pop-orange) 45% 52%, transparent 52% 60%, var(--pop-orange) 60% 67%, transparent 67% 75%, var(--pop-orange) 75% 82%, transparent 82% 90%, var(--pop-orange) 90% 97%, transparent 97% 100%);
}
.panel-art-grid {
    background-image: linear-gradient(0deg, var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px);
    background-size: 16px 16px;
    background-color: var(--parchment);
}
.panel-art-spiral {
    background:
        radial-gradient(circle at 50% 50%, var(--pop-orange) 0 8%, transparent 8% 14%),
        radial-gradient(circle at 50% 50%, var(--teal) 14% 22%, transparent 22% 28%),
        radial-gradient(circle at 50% 50%, var(--gold) 28% 36%, transparent 36% 42%),
        radial-gradient(circle at 50% 50%, var(--rose) 42% 50%, transparent 50% 58%),
        var(--parchment);
}

/* speech bubbles */
.speech-bubble {
    background: var(--canvas);
    border: 2px solid var(--ink);
    padding: 0.7rem 0.9rem;
    border-radius: 22px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    position: relative;
    margin-top: 0.4rem;
    max-width: 30ch;
}
.speech-bubble p { margin: 0; }
.speech-bubble::before {
    content: "";
    position: absolute;
    width: 18px; height: 18px;
    background: var(--canvas);
    border: 2px solid var(--ink);
    border-top: none;
    border-right: none;
    transform: rotate(-45deg);
}
.bubble-tl::before { left: 18px; top: -10px; transform: rotate(135deg); border-top: none; border-right: none; }
.bubble-tr::before { right: 18px; top: -10px; transform: rotate(135deg); }
.bubble-bl::before { left: 18px; bottom: -10px; }
.bubble-br::before { right: 18px; bottom: -10px; transform: rotate(45deg); }

/* ==========================================================================
   ARCHITECTURE / BIG CIRCUIT
   ========================================================================== */
.architecture {
    padding: 5rem 0 6rem;
}
.big-circuit-frame {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 6vw 0;
    position: relative;
}
.big-circuit {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid var(--ink);
    background: var(--parchment);
    box-shadow: var(--shadow-card);
}

/* path-draw animation: initial state */
.self-draw-paths path,
.self-draw-feedback path {
    stroke-dasharray: var(--draw-len, 1200);
    stroke-dashoffset: var(--draw-len, 1200);
    transition: stroke-dashoffset 2.5s ease-in-out;
}
.self-draw-svg.drawn .self-draw-paths path,
.self-draw-svg.drawn .self-draw-feedback path {
    stroke-dashoffset: 0;
}

.self-draw-nodes circle {
    transform: scale(0);
    transform-origin: center center;
    transform-box: fill-box;
    transition: transform 0.4s cubic-bezier(0.18, 1.2, 0.4, 1);
}
.self-draw-svg.drawn .self-draw-nodes circle {
    transform: scale(1);
}
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(1) { transition-delay: 1.2s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(2) { transition-delay: 1.35s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(3) { transition-delay: 1.5s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(4) { transition-delay: 1.65s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(5) { transition-delay: 1.8s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(6) { transition-delay: 1.95s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(7) { transition-delay: 2.1s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(8) { transition-delay: 2.25s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(9) { transition-delay: 2.4s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(10) { transition-delay: 2.55s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(11) { transition-delay: 2.7s; }
.self-draw-svg.drawn .self-draw-nodes circle:nth-child(12) { transition-delay: 2.85s; }

.circuit-blocks rect {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.self-draw-svg.drawn .circuit-blocks rect { opacity: 1; transition-delay: 1.0s; }
.circuit-labels text {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.self-draw-svg.drawn .circuit-labels text { opacity: 1; transition-delay: 1.4s; }

.bubble-circuit {
    position: absolute;
    right: 8vw;
    bottom: -28px;
    background: var(--canvas);
    transform: rotate(-1.5deg);
    box-shadow: 4px 4px 0 var(--ink);
    max-width: 28ch;
    z-index: 3;
}

/* ==========================================================================
   FIELD NOTES
   ========================================================================== */
.field-notes {
    padding: 5rem 0 6rem;
    background:
        radial-gradient(ellipse at 20% 30%, rgba(184,152,80,0.10), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(90,158,143,0.08), transparent 55%),
        var(--canvas);
}
.notes-wall {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 6vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2.2rem 1.8rem;
}
.note {
    background: var(--parchment);
    border: 2px solid var(--ink);
    padding: 1.4rem 1.2rem 1.4rem;
    box-shadow: var(--shadow-card);
    position: relative;
    transform: rotate(var(--note-rotation, 0deg));
    transition: transform 0.3s ease;
}
.note-rot-l { --note-rotation: -1.5deg; }
.note-rot-r { --note-rotation:  1.5deg; }
.note:hover { transform: rotate(0deg) translateY(-3px); }

.note-pin {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--pop-orange);
    border: 2px solid var(--ink);
    box-shadow: 1px 2px 0 rgba(58,46,36,0.4);
}
.note-title {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
    border-bottom: 1px dashed var(--gold);
    padding-bottom: 0.4rem;
}
.note-body {
    font-size: 0.94rem;
    line-height: 1.6;
    margin: 0;
}
.note-code {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink);
    background: rgba(58,46,36,0.05);
    padding: 0.7rem 0.7rem;
    border-left: 3px solid var(--pop-orange);
    margin: 0;
    overflow-x: auto;
    white-space: pre;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    background: var(--ink);
    color: var(--canvas);
    padding: 4rem 6vw 2rem;
    margin-top: 4rem;
    position: relative;
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 2px 2px, rgba(242,235,224,0.10) 1.4px, transparent 1.7px);
    background-size: 16px 16px;
    pointer-events: none;
}
.footer-rule {
    height: 6px;
    background: var(--pop-orange);
    margin: 0 auto 2.4rem;
    max-width: 1200px;
}
.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.6fr;
    gap: 2.5rem;
    position: relative;
    z-index: 1;
}
@media (max-width: 800px) {
    .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
.footer-logo {
    font-family: var(--font-display);
    font-size: 2rem;
    margin-bottom: 0.6rem;
}
.footer-blurb {
    color: rgba(242,235,224,0.78);
    max-width: 36ch;
    font-size: 0.95rem;
}
.footer-h {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    color: var(--gold);
    margin-bottom: 0.7rem;
}
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgba(242,235,224,0.78);
}
.footer-list li {
    padding: 0.25rem 0;
    border-bottom: 1px dashed rgba(242,235,224,0.16);
    font-size: 0.92rem;
}
.footer-list.mono li { font-family: var(--font-mono); font-size: 0.78rem; }
.footer-stamp {
    max-width: 1200px;
    margin: 2.4rem auto 0;
    text-align: center;
    color: rgba(242,235,224,0.45);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
}

/* ==========================================================================
   IN-VIEW REVEAL UTIL (used by JS)
   ========================================================================== */
.fade-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

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