/* Blobs anchored */
.blob { position: absolute; }
.blob-1 { top: -120px; left: 18%; background: #C4704B; opacity: 0.28; }
.blob-2 { top: 60px;   right: 8%;  background: #7A8F7E; opacity: 0.35; }
.blob-3 { top: 220px;  left: 42%; background: #B8943F; opacity: 0.22; }

/* About section */
.toc-link {
    display: block;
    color: #2C2825;
    opacity: 0.55;
    transition: opacity 180ms ease, color 180ms ease;
}
.toc-link:hover { opacity: 0.95; }
.toc-link.active {
    opacity: 1;
    color: #C4704B;
}
/* Active-section indicator: coral bar that slides over the rail's left border.
    Note: do NOT add `position` here on `#about-toc` itself — its ID specificity
    would override Tailwind's `.sticky` class and silently break the sticky behaviour. */
#about-toc ul { position: relative; }
#about-toc ul::before {
    content: "";
    position: absolute;
    left: -1px;
    top: var(--toc-marker-top, 0px);
    height: var(--toc-marker-height, 0px);
    width: 2px;
    background: #C4704B;
    border-radius: 2px;
    transition: top 220ms ease, height 220ms ease, opacity 220ms ease;
    opacity: 0;
}
#about-toc.has-active ul::before { opacity: 1; }

/* Contact section */
.cta-blob {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    background: #C4704B;
    filter: blur(110px);
    opacity: 0.18;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
@media (min-width: 768px) {
    .cta-blob { width: 640px; height: 640px; filter: blur(140px); }
}

/* EEG canvas — shorter on mobile so it doesn't dominate the viewport */
.eeg-canvas-h { height: 220px; }
@media (min-width: 768px) { .eeg-canvas-h { height: 360px; } }