/* Mock demo: ~22s loop, pure CSS, no JS. */

.demo {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 380px;
  background: var(--base);
}

.demo-sidebar {
  background: var(--mantle);
  border-right: 1px solid var(--border);
  padding: 10px 0;
  overflow: hidden;
}
.demo-sidebar .row {
  padding: 5px 14px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--text);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-sidebar .folder { color: var(--peach); font-weight: 500; }
.demo-sidebar .folder.collapsed { color: var(--muted); }
.demo-sidebar .child { padding-left: 28px; color: var(--text); }

/* Connected dot on selected row */
.demo-sidebar .child[data-row="1"]::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  transform: translateY(-50%) scale(0);
  animation: dot-show 22s linear infinite;
}

/* Main area */
.demo-main {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.pane {
  background: var(--base);
  border-left: 1px solid var(--border);
  padding: 14px;
  overflow: hidden;
  opacity: 0;
}
.pane-a {
  grid-column: 1 / span 2;
  animation: pane-a 22s linear infinite;
}
.pane-b {
  border-left: 1px solid var(--border);
  animation: pane-b 22s linear infinite;
}
.term .line {
  font-family: var(--font-mono);
  font-size: 0.85em;
  white-space: pre;
  color: var(--text);
}
.term .prompt { color: var(--green); }
.cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--text);
  vertical-align: text-bottom;
  margin-left: 4px;
  animation: blink 1s steps(2, start) infinite;
}

/* Sidebar row highlight (selection) */
.demo-sidebar .child[data-row="1"] {
  animation: row-select 22s linear infinite;
}

/* Palette overlay */
.palette {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(420px, 80%);
  background: var(--mantle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  opacity: 0;
  animation: palette-show 22s linear infinite;
  box-shadow: 0 0 0 1px var(--border);
}
.palette-input {
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  margin-bottom: 6px;
  color: var(--muted);
}
.palette-input .typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  animation: type-prod 22s steps(4) infinite;
  color: var(--text);
}
.palette-row {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 6px 8px;
  color: var(--text);
  border-radius: 3px;
}
.palette-row.hit { background: var(--surface0); color: var(--blue); }

/* Keyframes — single 22s timeline. */

/* Scene timing (% of 22s):
   0–22%   idle
   22–45%  connect (pane A in, row selected)
   45–63%  split (pane B in)
   63–90%  palette + typing
   90–100% fade back to idle */

@keyframes pane-a {
  0%, 22%   { opacity: 0; grid-column: 1 / span 2; }
  25%, 45%  { opacity: 1; grid-column: 1 / span 2; }
  48%, 90%  { opacity: 1; grid-column: 1; }
  95%, 100% { opacity: 0; grid-column: 1; }
}
@keyframes pane-b {
  0%, 45%   { opacity: 0; transform: translateX(-10px); }
  50%, 90%  { opacity: 1; transform: translateX(0); }
  95%, 100% { opacity: 0; transform: translateX(-10px); }
}
@keyframes row-select {
  0%, 22%   { background: transparent; color: var(--text); }
  25%, 90%  { background: var(--surface0); color: var(--blue); }
  95%, 100% { background: transparent; color: var(--text); }
}
@keyframes dot-show {
  0%, 22%   { transform: translateY(-50%) scale(0); }
  25%, 90%  { transform: translateY(-50%) scale(1); }
  95%, 100% { transform: translateY(-50%) scale(0); }
}
@keyframes palette-show {
  0%, 63%   { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  66%, 88%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  92%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes type-prod {
  0%, 66%   { width: 0; }
  72%, 88%  { width: 4ch; }
  92%, 100% { width: 0; }
}
@keyframes blink {
  to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .pane-a, .pane-b, .palette, .palette-input .typed,
  .demo-sidebar .child[data-row="1"], .demo-sidebar .child[data-row="1"]::before,
  .cursor {
    animation: none;
  }
  .pane-a { opacity: 1; grid-column: 1; }
  .pane-b { opacity: 1; transform: none; }
  .palette { opacity: 0; }
  .demo-sidebar .child[data-row="1"] { background: var(--surface0); color: var(--blue); }
  .demo-sidebar .child[data-row="1"]::before { transform: translateY(-50%) scale(1); }
  .palette-input .typed { width: 4ch; }
}