/* CSS terminal mockups of the vmup TUI, shared by the homepage and docs.
   Colors mirror the app's lipgloss styles (internal/tui/styles.go). */

.vmup-terminal {
  margin: 1.25em 0;
  border-radius: 0.6rem;
  overflow: hidden;
  background: #1e1e28;
  box-shadow: var(--md-shadow-z2);
}

.vmup-terminal-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.55rem 0.8rem;
  background: #2a2a38;
}

.vmup-terminal-bar span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #ff5f57;
}

.vmup-terminal-bar span:nth-child(2) { background: #febc2e; }
.vmup-terminal-bar span:nth-child(3) { background: #28c840; }

/* Extra .vmup-terminal qualifier outranks Material's .md-typeset pre rules */
.vmup-terminal .vmup-terminal-body {
  margin: 0;
  padding: 1rem 1.2rem 1.2rem;
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  line-height: 1.65;
  color: #c8c8d8;
  background: transparent;
  overflow-x: auto;
  white-space: pre;
}

/* App title gradient — the actual stops from internal/tui/vmlist.go */
.vmup-terminal-body .t-title {
  font-weight: 700;
  background: linear-gradient(90deg, #4a5cc7, #7b4cb5, #b53694);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vmup-terminal-body .t-tab-active {
  font-weight: 700;
  color: #fff;
  background: #5f5fa7;
  padding: 0 0.4rem;
}

.vmup-terminal-body .t-tab {
  color: #6c6c80;
  background: #2a2a34;
  padding: 0 0.4rem;
}

.vmup-terminal-body .t-header { font-weight: 700; color: #e8e8f2; }
.vmup-terminal-body .t-dim { color: #5a5a6e; }
.vmup-terminal-body .t-selected { background: rgba(111, 111, 214, 0.18); display: inline-block; width: 100%; }
.vmup-terminal-body .t-running { color: #4ade80; font-weight: 700; }
.vmup-terminal-body .t-stopped { color: #f87171; }
.vmup-terminal-body .t-orange { color: #fbbf24; }
.vmup-terminal-body .t-key { color: #9a7fd1; font-weight: 700; }
.vmup-terminal-body .t-info { color: #5cb8e6; }

/* Form elements */
.vmup-terminal-body .t-input { color: #e8e8f2; background: #2a2a38; }
.vmup-terminal-body .t-focus { color: #e8e8f2; background: rgba(111, 111, 214, 0.28); }
.vmup-terminal-body .t-btn { font-weight: 700; color: #fff; background: #3d3d5c; padding: 0 0.3rem; }
.vmup-terminal-body .t-btn-dim { color: #6c6c80; background: #2a2a34; padding: 0 0.3rem; }

.vmup-terminal-body .t-cursor {
  color: #5cb8e6;
  animation: vmup-blink 1.1s step-end infinite;
}

@keyframes vmup-blink {
  50% { opacity: 0; }
}

/* --- Animated frame loop ---
   Sibling .vmup-frame <pre> blocks shown one at a time on a 14s cycle.
   The first frame stays in flow and sets the stage height; the rest
   overlay it. Windows (% of 14s):
     frame-1  0-18, 44-48 (input cleared), 92-100
     frame-2  18-22   typed "d"
     frame-3  22-26   typed "di"
     frame-4  26-44   typed "dis", list filtered
     frame-5  48-70   category Create & Connect
     frame-6  70-92   category Stop & Destroy */

.vmup-anim-stage {
  position: relative;
}

.vmup-anim-stage .vmup-frame {
  opacity: 0;
}

.vmup-anim-stage .vmup-frame:not(:first-child) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.vmup-anim-stage .vmup-frame-1 { animation: vmup-frame-1 14s infinite; }
.vmup-anim-stage .vmup-frame-2 { animation: vmup-frame-2 14s infinite; }
.vmup-anim-stage .vmup-frame-3 { animation: vmup-frame-3 14s infinite; }
.vmup-anim-stage .vmup-frame-4 { animation: vmup-frame-4 14s infinite; }
.vmup-anim-stage .vmup-frame-5 { animation: vmup-frame-5 14s infinite; }
.vmup-anim-stage .vmup-frame-6 { animation: vmup-frame-6 14s infinite; }

@keyframes vmup-frame-1 {
  0%, 17.99% { opacity: 1; }
  18%, 43.99% { opacity: 0; }
  44%, 47.99% { opacity: 1; }
  48%, 91.99% { opacity: 0; }
  92%, 100% { opacity: 1; }
}

@keyframes vmup-frame-2 {
  0%, 17.99% { opacity: 0; }
  18%, 21.99% { opacity: 1; }
  22%, 100% { opacity: 0; }
}

@keyframes vmup-frame-3 {
  0%, 21.99% { opacity: 0; }
  22%, 25.99% { opacity: 1; }
  26%, 100% { opacity: 0; }
}

@keyframes vmup-frame-4 {
  0%, 25.99% { opacity: 0; }
  26%, 43.99% { opacity: 1; }
  44%, 100% { opacity: 0; }
}

@keyframes vmup-frame-5 {
  0%, 47.99% { opacity: 0; }
  48%, 69.99% { opacity: 1; }
  70%, 100% { opacity: 0; }
}

@keyframes vmup-frame-6 {
  0%, 69.99% { opacity: 0; }
  70%, 91.99% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vmup-anim-stage .vmup-frame {
    animation: none;
  }

  .vmup-anim-stage .vmup-frame:first-child {
    opacity: 1;
  }

  .vmup-anim-stage .vmup-frame:not(:first-child) {
    display: none;
  }
}