/* Design System: Neutral Palette with Muted Accents */

:root {
  --primary: #4a90e2;
  --secondary: #6c757d;
  --light-bg: #f8f9fa;
  --text-dark: #212529;
  --text-muted: #6c757d;
  --white: #ffffff;
}

/* Typography */

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  color: var(--text-dark);
}

a {
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary);
}

/* Hero */

.hero {
  min-height: 80vh;
  background: var(--light-bg);
}

/* Project Card */

.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Logo Animations (SVG/CSS) */

.project-logo, .project-logo-header {
  width: 100px;
  height: auto;
  opacity: 0;
  animation: fadeScale 1s ease forwards;
}

@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* For line-draw animation on SVG paths (if SVG has paths) */

.project-logo path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineDraw 2s ease forwards;
}

@keyframes lineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Scroll Reveals */

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

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

/* Logo Strip (Monochrome, subtle) */

.logo-strip img {
  height: 40px;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.logo-strip img:hover {
  filter: grayscale(0%);
}

/* Form Styles */

.form-control {
  border-color: var(--secondary);
}

.btn-primary {
  background: var(--primary);
  border: none;
}

.btn-outline-primary {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-outline-primary:hover {
  background: var(--primary);
  color: var(--white);
}

/* Footer */

footer {
  font-size: 0.9rem;
}

body {
  background-color: white;
}