/*
 * The Cortex — scrollytelling explainer of the bot's decision pipeline.
 * Static/illustrative content (no live API calls), always rendered in its
 * own fixed warm-paper theme regardless of OS light/dark preference, same
 * as the live terminal page.
 */

.cortex-page {
  background: #EFE9DA;
  color: #211D16;
  font-family: 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.cortex-page * { box-sizing: border-box; }

@keyframes cxFloat  { 0%, 100% { transform: translateY(0); }    50% { transform: translateY(-12px); } }
@keyframes cxScroll  { 0% { transform: translateY(0); opacity: .9; } 60% { opacity: .2; } 100% { transform: translateY(10px); opacity: .9; } }
@keyframes cxFlow    { to { stroke-dashoffset: -220; } }
@keyframes cxRing    { 0% { transform: scale(.5); opacity: .55; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cxPulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
@keyframes cxNode    { 0%, 100% { opacity: .9; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.25); } }
@keyframes cxLane    { 0% { left: -6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes cxSpin    { to { transform: rotate(360deg); } }
@keyframes cxDrift   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes cxUp      { 0%, 30% { opacity: 1; } 36%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cxChop    { 0%, 30% { opacity: 0; } 36%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes cxDown    { 0%, 62% { opacity: 0; } 68%, 96% { opacity: 1; } 100% { opacity: 0; } }

.cortex-page ::-webkit-scrollbar { width: 10px; }
.cortex-page ::-webkit-scrollbar-thumb { background: #D6CDB8; border-radius: 8px; }
.cortex-page ::-webkit-scrollbar-track { background: #EFE9DA; }

/* reveal-on-scroll defaults; JS flips these once a section intersects */
.cortex-page [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.75,.25,1), transform .9s cubic-bezier(.2,.75,.25,1); }
.cortex-page [data-reveal].cx-in { opacity: 1; transform: none; }
.cortex-page [data-reveal][data-w] { width: 0; }
.cortex-page [data-reveal][data-draw] { stroke-dasharray: 1500; stroke-dashoffset: 1500; transition: stroke-dashoffset 2.4s ease; }

/* top-right way back to the live terminal */
.cx-back {
  position: fixed; top: 18px; right: 20px; z-index: 50;
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 11px/1 'Archivo'; letter-spacing: .06em; text-decoration: none;
  padding: 9px 16px; border-radius: 20px;
  background: rgba(252, 250, 243, .82); border: 1px solid #E4DBC7; color: #3B3427;
  backdrop-filter: blur(6px);
}
.cx-back:hover { border-color: #B07C2B; color: #B07C2B; }

/* progress rail */
.cx-rail { position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cx-rail-row { display: flex; align-items: center; gap: 10px; }
.cx-rail-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #C9BFA8; background: transparent; transition: all .4s ease; display: inline-block; }
.cx-rail-n { font-family: 'Spline Sans Mono'; font-size: 9px; color: #B3A78D; }
.cx-rail-label { font: 600 8.5px/1.3 'Archivo'; letter-spacing: .14em; text-transform: uppercase; color: #9C8F76; max-width: 96px; margin-top: 6px; padding-left: 1px; }

@media (max-width: 860px) {
  .cx-rail { display: none; }
}