/* ==========================================
   CSS Custom Properties - Gruvbox Dark Medium
   ========================================== */

:root {
  /* Gruvbox Dark Medium Color Palette */
  --gb-dark-bg: #282828;           /* Dark background */
  --gb-dark-bg-soft: #32302f;      /* Softer dark background */
  --gb-dark-bg-hard: #1d2021;      /* Harder dark background */
  --gb-dark-fg: #ebdbb2;           /* Light foreground text */
  --gb-dark-fg-dim: #a89984;       /* Dimmed foreground */
  
  /* Terminal accent colors */
  --gb-dark-green: #b8bb26;        /* Bright green */
  --gb-dark-yellow: #fabd2f;       /* Bright yellow */
  --gb-dark-red: #fb4934;          /* Bright red */
  --gb-dark-blue: #83a598;         /* Bright blue */
  --gb-dark-purple: #d3869b;       /* Bright purple */
  --gb-dark-aqua: #8ec07c;         /* Bright aqua */
  --gb-dark-orange: #83a598;       /* Gruvbox blue */
  
  /* Gruvbox grays */
  --gb-gray-244: #928374;          /* Gray */
  --gb-gray-245: #928374;          /* Light gray */
  
  /* Terminal-specific colors */
  --terminal-border: var(--gb-gray-244);
  --terminal-shadow: rgba(0, 0, 0, 0.3);
  --cursor-color: var(--gb-dark-green);
  --prompt-color: var(--gb-dark-aqua);
  --command-color: var(--gb-dark-yellow);
  --input-bg: var(--gb-dark-bg-soft);
  --input-border: var(--gb-gray-244);
  --input-focus: var(--gb-dark-blue);
  
  /* Typography */
  --font-mono: 'JetBrains Mono', 'Courier New', Consolas, Monaco, monospace;
  --font-size-base: clamp(0.875rem, 2.5vw, 1rem);
  --font-size-large: clamp(1rem, 3vw, 1.125rem);
  --font-size-xlarge: clamp(1.125rem, 3.5vw, 1.25rem);
  
  /* Spacing */
  --spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
  --spacing-sm: clamp(0.5rem, 2vw, 0.75rem);
  --spacing-md: clamp(0.75rem, 2.5vw, 1rem);
  --spacing-lg: clamp(1rem, 3vw, 1.5rem);
  --spacing-xl: clamp(1.5rem, 4vw, 2rem);
  --spacing-xxl: clamp(2rem, 5vw, 3rem);
}

/* ==========================================
   Reset and Base Styles
   ========================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--gb-dark-fg);
  background-color: var(--gb-dark-bg);
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  margin: 0;
  position: relative;
}

/* Terminal Scanlines Effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 255, 0, 0.04) 2px,
      rgba(0, 255, 0, 0.04) 4px
    );
  animation: scanlines 3s linear infinite;
  pointer-events: none;
}

@keyframes scanlines {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

/* ==========================================
   Terminal Container
   ========================================== */

.terminal-container {
  width: calc(100vw - 20px);
  height: calc(100vh - 20px);
  margin: 10px;
  background-color: transparent;
  overflow: hidden;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border: 3px double var(--gb-dark-orange);
  box-sizing: border-box;
  padding: var(--spacing-sm);
}

/* Terminal header removed - pure terminal experience */

.terminal-body {
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ==========================================
   Terminal Content Layout
   ========================================== */

.terminal-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: flex-start;
  text-align: left;
  height: 100%;
  overflow-y: auto;
}

/* ==========================================
   Terminal Lines
   ========================================== */

.terminal-line {
  margin-bottom: 0;
}

/* ==========================================
   ASCII Logo Section
   ========================================== */

.ascii-logo {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin: 0 0 var(--spacing-lg) 0;
}

.ascii-art {
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.8vw, 1.3rem);
  line-height: 1.1;
  color: var(--gb-dark-orange);
  white-space: pre;
  text-align: left;
  user-select: none;
  overflow: hidden;
  max-width: 100%;
  letter-spacing: -1px;
}

.mobile-logo {
  display: none;
}

/* ==========================================
   Intro Section
   ========================================== */

.intro-section {
  width: 100%;
  max-width: 600px;
  text-align: left;
}

.typing-text {
  margin-bottom: var(--spacing-md);
}

.prompt {
  color: var(--prompt-color);
  font-weight: bold;
}

.command {
  color: var(--command-color);
  font-weight: normal;
}

.output-text {
  color: var(--gb-dark-fg);
  opacity: 1;
}

.output-text p {
  margin-bottom: var(--spacing-sm);
}

/* ==========================================
   Contact Button Section
   ========================================== */

.contact-button-section {
  width: 100%;
  max-width: 600px;
  text-align: left;
  margin: var(--spacing-md) 0;
}

.terminal-prompt-line {
  margin-bottom: 0;
}

.contact-button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  margin-top: 0;
}

.ascii-button-text {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 2vw, 1rem);
  line-height: 1.2;
  color: var(--gb-dark-green);
  margin: 0;
  padding: 0;
  background: transparent;
  transition: all 0.2s ease;
  white-space: pre;
  display: inline-block;
}

.contact-button:hover .ascii-button-text {
  color: var(--gb-dark-aqua);
  transform: scale(1.05);
  text-shadow: 0 0 8px rgba(142, 192, 124, 0.5);
}

.contact-button:focus .ascii-button-text {
  outline: none;
  color: var(--gb-dark-yellow);
}

.contact-button:active .ascii-button-text {
  transform: scale(0.98);
}

/* New Contact Button Design */
.contact-button-new {
  background: var(--gb-dark-bg-soft);
  border: 3px double var(--gb-dark-orange);
  color: var(--gb-dark-orange);
  padding: 12px 24px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: var(--spacing-md);
  outline: none;
}

.contact-button-new:hover { 
  background: var(--gb-dark-orange); 
  color: var(--gb-dark-bg); 
}

.contact-button-new .cursor {
  animation: blink 1s infinite;
  color: inherit;
}

/* New Send Button Design */
.send-button-new {
  background: var(--gb-dark-bg-soft);
  border: 3px double var(--gb-dark-green);
  color: var(--gb-dark-green);
  padding: 12px 24px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  margin-top: 0;
  outline: none;
}

.send-button-new:hover { 
  background: var(--gb-dark-green); 
  color: var(--gb-dark-bg); 
}

.send-button-new .cursor {
  animation: blink 1s infinite;
  color: inherit;
}

/* Simplified Form Fields */
.form-field {
  margin-bottom: var(--spacing-lg);
}

.form-field:last-of-type {
  margin-bottom: 0;
}

/* Send Section Alignment */
.send-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* Success Message */
.success-message {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.success-ascii {
  font-family: var(--font-mono);
  font-size: clamp(0.6rem, 2vw, 0.9rem);
  line-height: 1.2;
  color: var(--gb-dark-green);
  margin: 0 0 var(--spacing-lg) 0;
  white-space: pre;
  display: inline-block;
}

.success-prompt {
  text-align: left;
  margin-top: var(--spacing-lg);
}

.success-prompt .cursor {
  color: var(--gb-dark-green);
  animation: blink 1s infinite;
}

/* ==========================================
   Contact Form
   ========================================== */

.contact-form {
  width: 100%;
  max-width: 600px;
  text-align: left;
}

.form-step {
  margin-bottom: var(--spacing-lg);
}

.form-step:not(.hidden) {
  display: block;
}

.form-step.hidden {
  display: none;
}

.hidden {
  display: none !important;
}

.prompt-label {
  display: block;
  margin-bottom: var(--spacing-sm);
  color: var(--gb-dark-fg);
}

.terminal-input {
  width: 100%;
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 4px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--gb-dark-fg);
  outline: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.terminal-input:hover {
  border-color: rgba(131, 165, 152, 0.6);
  background-color: var(--gb-dark-bg);
}

.terminal-input:focus {
  border-color: var(--input-focus);
  box-shadow: 
    0 0 0 3px rgba(131, 165, 152, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: var(--gb-dark-bg);
  transform: translateY(-1px);
}

.terminal-input:focus::placeholder {
  opacity: 0.6;
}

.terminal-input::placeholder {
  color: var(--gb-dark-fg-dim);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.terminal-input:invalid:not(:placeholder-shown) {
  border-color: var(--gb-dark-red);
  box-shadow: 0 0 0 2px rgba(251, 73, 52, 0.2);
}

.terminal-input:valid:not(:placeholder-shown) {
  border-color: var(--gb-dark-green);
}

.terminal-textarea {
  resize: vertical;
  min-height: 100px;
}

.help-text {
  margin-top: var(--spacing-xs);
  font-size: calc(var(--font-size-base) * 0.875);
  color: var(--gb-dark-fg-dim);
  min-height: 1.2em;
}

/* ==========================================
   Send Button
   ========================================== */

.send-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.terminal-button-submit {
  background-color: var(--gb-dark-bg-soft);
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--command-color);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  position: relative;
  overflow: hidden;
}

.terminal-button-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(131, 165, 152, 0.1), transparent);
  transition: left 0.5s;
}

.terminal-button-submit:hover::before {
  left: 100%;
}

.terminal-button-submit:hover {
  background-color: var(--input-bg);
  border-color: var(--input-focus);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.terminal-button-submit:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(131, 165, 152, 0.3);
  transform: translateY(-1px);
}

.terminal-button-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.terminal-button-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================
   Form Feedback
   ========================================== */

.form-feedback {
  margin-top: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: 4px;
  font-size: var(--font-size-base);
  min-height: 1.5em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.form-feedback.success {
  background-color: rgba(184, 187, 38, 0.1);
  border: 1px solid var(--gb-dark-green);
  color: var(--gb-dark-green);
  opacity: 1;
}

.form-feedback.error {
  background-color: rgba(251, 73, 52, 0.1);
  border: 1px solid var(--gb-dark-red);
  color: var(--gb-dark-red);
  opacity: 1;
}

.form-feedback.info {
  background-color: rgba(131, 165, 152, 0.1);
  border: 1px solid var(--gb-dark-blue);
  color: var(--gb-dark-blue);
  opacity: 1;
}

/* ==========================================
   Blinking Cursor
   ========================================== */

.cursor {
  color: var(--cursor-color);
  font-weight: bold;
  animation: blink 1s infinite;
  display: inline;
  margin-left: 2px;
}

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

/* ==========================================
   Animations
   ========================================== */

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ==========================================
   Responsive Design
   ========================================== */

/* Large desktop screens */
@media (min-width: 1440px) {
  .terminal-body {
    max-width: 1200px;
  }
  
  .ascii-art {
    font-size: clamp(0.8rem, 1vw, 1.2rem);
  }
}

/* Desktop screens */
@media (min-width: 1024px) and (max-width: 1439px) {
  .terminal-body {
    max-width: 1000px;
  }
  
  .ascii-art {
    font-size: clamp(0.6rem, 1.2vw, 1rem);
  }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1023px) {
  .terminal-body {
    padding: var(--spacing-xl) var(--spacing-lg);
    max-width: 800px;
  }
  
  .ascii-art {
    font-size: clamp(0.5rem, 1.8vw, 0.8rem);
  }
  
  .terminal-input {
    padding: var(--spacing-md);
    font-size: var(--font-size-large);
    min-height: 48px; /* Touch-friendly height */
  }
  
  .terminal-button-submit {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-large);
    min-height: 48px;
  }
}

/* Tablet portrait */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    padding: var(--spacing-sm);
  }
  
  .terminal-container {
    border-radius: 8px;
    max-width: 600px;
  }
  
  .terminal-header {
    padding: calc(var(--spacing-xs) * 0.6) var(--spacing-lg);
    min-height: 30px;
  }
  
  .terminal-body {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
  
  .terminal-content {
    gap: var(--spacing-xl);
  }
  
  .terminal-title {
    font-size: var(--font-size-base);
  }
  
  .ascii-art {
    font-size: clamp(0.4rem, 2.2vw, 0.7rem);
    line-height: 0.9;
    white-space: pre-wrap;
    word-break: break-all;
  }
  
  .terminal-input {
    padding: var(--spacing-md);
    font-size: var(--font-size-large);
    min-height: 50px;
    border-radius: 6px;
  }
  
  .terminal-textarea {
    min-height: 120px;
  }
  
  .terminal-button-submit {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-large);
    min-height: 50px;
    border-radius: 6px;
  }
  
  .intro-section, .contact-form {
    max-width: 100%;
  }
}

/* Mobile landscape */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
  body {
    padding: var(--spacing-xs);
  }
  
  .terminal-body {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .terminal-content {
    gap: var(--spacing-lg);
  }
  
  .ascii-art {
    font-size: clamp(0.35rem, 2vw, 0.6rem);
  }
}

/* Mobile portrait */
@media (max-width: 480px) {
  .terminal-body {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  
  .terminal-content {
    gap: var(--spacing-md);
  }
  
  .ascii-art {
    font-size: clamp(0.6rem, 6vw, 1rem);
    line-height: 1;
    overflow: hidden;
    max-width: 100%;
    padding: 0 var(--spacing-xs);
  }
  
  .desktop-logo {
    display: none;
  }
  
  .mobile-logo {
    display: block;
    text-align: center;
  }
  
  .intro-section {
    max-width: 100%;
  }
  
  .output-text {
    margin-left: 0;
    font-size: calc(var(--font-size-base) * 0.9);
  }
  
  .contact-form {
    max-width: 100%;
  }
  
  .prompt-label {
    font-size: calc(var(--font-size-base) * 0.9);
    margin-bottom: var(--spacing-sm);
  }
  
  .terminal-input {
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    min-height: 52px; /* Larger touch target */
    border-radius: 6px;
    -webkit-appearance: none;
    appearance: none;
  }
  
  .terminal-textarea {
    min-height: 120px;
    resize: none; /* Prevent resize on mobile */
  }
  
  .terminal-button-submit {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
    min-height: 52px;
    border-radius: 6px;
    width: auto;
    min-width: 120px;
  }
  
  .send-section {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  
  .help-text {
    font-size: calc(var(--font-size-base) * 0.85);
    margin-top: var(--spacing-sm);
  }
  
  .form-feedback {
    font-size: calc(var(--font-size-base) * 0.9);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 6px;
  }
}

/* Extra small mobile screens */
@media (max-width: 360px) {
  .terminal-header {
    padding: calc(var(--spacing-xs) * 0.4) var(--spacing-sm);
    min-height: 28px;
  }
  
  .terminal-body {
    padding: var(--spacing-md) var(--spacing-sm);
  }
  
  .ascii-art {
    font-size: clamp(0.25rem, 3.5vw, 0.5rem);
  }
  
  .terminal-title {
    font-size: calc(var(--font-size-base) * 0.8);
  }
}

/* Accessibility and reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .cursor {
    animation: none;
    opacity: 1;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --gb-dark-bg: #000000;
    --gb-dark-fg: #ffffff;
    --terminal-border: #ffffff;
    --input-border: #ffffff;
    --cursor-color: #ffffff;
  }
}