/* ─── Base ─── */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'JetBrains Mono', monospace;
}

/* ─── Custom daisyUI theme ─── */

[data-theme="terminal"] {
  color-scheme: dark;
  --color-base-100: #0D1117;
  --color-base-200: #161B22;
  --color-base-300: #1C2128;
  --color-base-content: #C9D1D9;
  --color-primary: #00D4FF;
  --color-primary-content: #F0F6FC;
  --color-secondary: #58A6FF;
  --color-secondary-content: #F0F6FC;
  --color-accent: #3FB950;
  --color-accent-content: #0D1117;
  --color-neutral: #21262D;
  --color-neutral-content: #C9D1D9;
  --color-info: #58A6FF;
  --color-info-content: #F0F6FC;
  --color-success: #3FB950;
  --color-success-content: #0D1117;
  --color-warning: #D29922;
  --color-warning-content: #0D1117;
  --color-error: #F85149;
  --color-error-content: #F0F6FC;
  --rounded-box: 0.25rem;
  --rounded-btn: 0.25rem;
  --rounded-field: 0.25rem;
  --tab-border: 1px;
  --tab-radius: 0;
  --animation-btn: 0.15s;
  --animation-input: 0.15s;
}

/* ─── Scanline overlay ─── */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ─── Blinking cursor ─── */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor {
  animation: blink 1s step-end infinite;
  color: #00D4FF;
}

/* ─── Scroll reveal ─── */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Box-drawing blocks ─── */

pre.box-drawing {
  line-height: 1.6;
  font-size: 0.8125rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  pre.box-drawing {
    font-size: 0.6875rem;
  }
}

/* ─── Syntax highlighting ─── */

.syntax-keyword { color: #00D4FF; }
.syntax-module { color: #D29922; }
.syntax-atom { color: #58A6FF; }
.syntax-string { color: #3FB950; }
.syntax-comment { color: #484F58; font-style: italic; }
.syntax-number { color: #D29922; }
.syntax-punctuation { color: #6E7681; }

/* ─── Terminal panel header ─── */

.terminal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid #1C2128;
}

.terminal-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  display: inline-block;
}

/* ─── Tab content image ─── */

.tab-content img {
  display: block;
  width: 100%;
  height: auto;
}