/* 1. Theme Variables Mapping */
:root {
  /* Dracula Dark (Default) */
  --term-bg: #282a36;
  --term-fg: #f8f8f2;
  --term-green: #50fa7b;
  --term-blue: #8be9fd;
  --term-purple: #bd93f9;
  --term-yellow: #f1fa8c;
}

/* 2. Global Resets & Body */
body {
  background: #0f172a; /* Outer dark area mirroring macOS desktop dark mode */
  font-family: 'Inter', sans-serif;
  margin: 0;
}
.term-font {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* 3. macOS Window Surface & Shadow */
.mac-window {
  box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
}

/* 4. Text Phosphor Glow (Removed for readability) */

/* 5. Custom Scrollbar constraints */
terminal-output::-webkit-scrollbar { width: 6px; }
terminal-output::-webkit-scrollbar-track { background: transparent; }
terminal-output::-webkit-scrollbar-thumb { background: var(--term-purple); border-radius: 3px; }

/* 6. Animations */
.slide-in { animation: slideIn 0.25s ease-out forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@keyframes neonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
@keyframes wipeReveal {
  0% { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
}
@keyframes cascadeFade {
  0% { opacity: 0; filter: blur(4px); transform: translateY(-5px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes glitchStep {
  0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  20% { clip-path: polygon(0 15%, 100% 15%, 100% 25%, 0 25%); transform: translateX(-2px); }
  40% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translateX(2px); }
  60% { clip-path: polygon(0 30%, 100% 30%, 100% 45%, 0 45%); transform: translateX(-4px); }
  80% { clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); transform: translateX(3px); }
}

.anim-pulse { animation: neonPulse 2.5s infinite alternate ease-in-out; }
.anim-wipe { animation: wipeReveal 1s cubic-bezier(0.1, 0.7, 0.1, 1) forwards, neonPulse 2.5s infinite alternate ease-in-out 1s; }
.anim-fade { animation: cascadeFade 0.8s ease-out forwards, neonPulse 2.5s infinite alternate ease-in-out 0.8s; }
.anim-glitch { animation: glitchStep 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 2 forwards, neonPulse 2.5s infinite alternate ease-in-out 0.8s; }

/* Transitions for themes */
terminal-window, .mac-window, .win-header, quick-actions {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Shared output contract for command sections */
.terminal-section {
  width: 100%;
}

.terminal-section-title,
.terminal-section-meta,
.terminal-section-body,
.terminal-section-hint {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

.control-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.18);
  color: var(--term-fg);
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 10px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 4px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.control-btn:hover {
  border-color: var(--term-green);
  background: rgba(255, 255, 255, 0.08);
}

.control-btn:active {
  transform: translateY(1px);
}

.control-btn:focus-visible {
  outline: 1px solid var(--term-blue);
  outline-offset: 1px;
}