/* About page specific styles */

.terminal-container {
  background: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  font-family: 'Consolas', 'Courier New', monospace;
  margin: 2rem 0;
  border: 1px solid #333;
}

.terminal-container .terminal-header {
  background: #2d2d2d;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #1a1a1a;
}

.terminal-container .buttons {
  display: flex;
  gap: 8px;
  z-index: 1;
}

.terminal-container .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-container .red { background: #ff5f56; }
.terminal-container .yellow { background: #ffbd2e; }
.terminal-container .green { background: #27c93f; }

.terminal-container .terminal-title {
  color: #858585;
  font-size: 13px;
  position: absolute;
  width: 100%;
  text-align: center;
  pointer-events: none;
  left: 0;
  font-weight: 500;
}

.terminal-container .terminal-body {
  padding: 20px;
  color: #cccccc;
  line-height: 1.6;
}

.command-line {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #3e3e3e;
}

.prompt { 
  color: #50fa7b; 
  margin-right: 10px;
  font-weight: 500;
}

.command { 
  color: #f8f8f2;
}

.output-log { 
  margin-top: 20px; 
  font-size: 14px;
}

.output-log p {
  margin: 0 0 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
}

.output-log-loop p:nth-child(1) {
  animation: loopLine1 12s steps(1) infinite;
}
.output-log-loop p:nth-child(2) {
  animation: loopLine2 12s steps(1) infinite;
}
.output-log-loop p:nth-child(3) {
  animation: loopLine3 12s steps(1) infinite;
}
.output-log-loop p:nth-child(4) {
  animation: loopLine4 12s steps(1) infinite;
}
.output-log-loop p:nth-child(5) {
  animation: loopLine5 12s steps(1) infinite;
}
.output-log-loop .final-status {
  animation: loopLine6 12s steps(1) infinite;
}

@keyframes loopLine1 {
  0%, 4% { opacity: 0; }
  8%, 75% { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes loopLine2 {
  0%, 12% { opacity: 0; }
  16%, 75% { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes loopLine3 {
  0%, 20% { opacity: 0; }
  24%, 75% { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes loopLine4 {
  0%, 28% { opacity: 0; }
  32%, 75% { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes loopLine5 {
  0%, 36% { opacity: 0; }
  40%, 75% { opacity: 1; }
  79%, 100% { opacity: 0; }
}
@keyframes loopLine6 {
  0%, 48% { opacity: 0; }
  52%, 75% { opacity: 1; }
  79%, 100% { opacity: 0; }
}

.pass { 
  color: #50fa7b; 
  font-weight: bold;
  min-width: 50px;
}

.warn {
  color: #ffbd2e;
  font-weight: bold;
  min-width: 50px;
}

.final-status { 
  color: #007ACC; 
  font-weight: 600; 
  border-top: 1px solid #3e3e3e; 
  padding-top: 15px;
  margin-top: 20px !important;
}

.check-description {
  flex: 1;
}

/* Compact Check Style */
.compact-check,
.compact-check-content {
  font-family: 'Consolas', 'Courier New', monospace;
}

.compact-check {
  background: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  margin: 2rem 0;
  border: 1px solid #333;
  padding: 20px;
  position: relative;
}

.compact-check-content {
  /* No extra styling needed, inherits from terminal-body */
}

.compact-line {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  opacity: 0;
}

.compact-line:nth-child(1) {
  animation: compactLine1 12s steps(1) infinite;
}
.compact-line:nth-child(2) {
  animation: compactLine2 12s steps(1) infinite;
}
.compact-line:nth-child(3) {
  animation: compactLine3 12s steps(1) infinite;
}
.compact-line:nth-child(4) {
  animation: compactLine4 12s steps(1) infinite;
}
.compact-line:nth-child(5) {
  animation: compactLine5 12s steps(1) infinite;
}
.compact-line:nth-child(6) {
  animation: compactLine6 12s steps(1) infinite;
}
.compact-line:nth-child(7) {
  animation: compactLine7 12s steps(1) infinite;
}
.compact-line:nth-child(8) {
  animation: compactLine8 12s steps(1) infinite;
}
.compact-line:nth-child(9) {
  animation: compactLine9 12s steps(1) infinite;
}
.compact-line:nth-child(10) {
  animation: compactLine10 12s steps(1) infinite;
}

@keyframes compactLine1 {
  0%, 2% { opacity: 0; }
  4%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine2 {
  0%, 6% { opacity: 0; }
  8%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine3 {
  0%, 10% { opacity: 0; }
  12%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine4 {
  0%, 14% { opacity: 0; }
  16%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine5 {
  0%, 18% { opacity: 0; }
  20%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine6 {
  0%, 22% { opacity: 0; }
  24%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine7 {
  0%, 26% { opacity: 0; }
  28%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine8 {
  0%, 30% { opacity: 0; }
  32%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine9 {
  0%, 34% { opacity: 0; }
  36%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes compactLine10 {
  0%, 38% { opacity: 0; }
  40%, 80% { opacity: 1; }
  84%, 100% { opacity: 0; }
}

.compact-text {
  color: #cccccc;
  flex: 1;
}

.compact-status {
  margin-left: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
}

.status-ok {
  background: #27c93f;
  color: #000;
}

.status-warning {
  background: #ffbd2e;
  color: #000;
}

.bio-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
}

.bio-section h2 {
  margin-top: 0;
}