/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Colors */
  --color-bg: #fefefe;
  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666;
  --color-text-muted: #999;
  --color-border: #e5e5e5;
  --color-accent: #000;
  --color-surface: #f8f9fa;
  --color-surface-raised: #ffffff;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Crimson Text', 'Georgia', serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', monospace;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --container-width: 1200px;
  --border-radius: 0.5rem;
  --border-radius-lg: 1rem;

  /* Animations */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark theme */
[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-text-primary: #f0f0f0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #666;
  --color-border: #2a2a2a;
  --color-accent: #ffffff;
  --color-surface: #111;
  --color-surface-raised: #1a1a1a;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
  position: relative;
  min-height: 100vh;
}

/* Noise texture overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.02;
  z-index: -1;
  background-image:
    radial-gradient(circle at 1px 1px, var(--color-text-primary) 1px, transparent 0);
  background-size: 20px 20px;
  animation: noise 8s infinite linear;
}

@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(-10%, 5%); }
  30% { transform: translate(5%, -10%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-10%, 5%); }
  60% { transform: translate(15%, 0); }
  70% { transform: translate(0, 10%); }
  80% { transform: translate(-15%, 0); }
  90% { transform: translate(10%, 5%); }
}

/* ===== CONTAINER ===== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
}

/* ===== HEADER ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: rgba(254, 254, 254, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

[data-theme="dark"] .header {
  background-color: rgba(10, 10, 10, 0.8);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

[data-theme="dark"] .logo-icon {
  filter: invert(1);
}

.logo:hover {
  color: var(--color-text-secondary);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.theme-toggle,
.lang-toggle {
  border: none;
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition-fast);
  min-width: 3rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover,
.lang-toggle:hover {
  background: var(--color-surface-raised);
  transform: translateY(-1px);
}

.theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.theme-icon svg {
  stroke-width: 2;
}

.lang-text {
  transition: transform var(--transition-fast);
}

.theme-toggle:active .theme-icon,
.lang-toggle:active .lang-text {
  transform: scale(0.95);
}

/* ===== MAIN CONTENT ===== */
.main {
  margin-top: 4rem;
  padding-bottom: var(--space-3xl);
}

/* ===== HERO SECTION ===== */
.hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg) 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top right, rgba(255, 107, 107, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

[data-theme="dark"] .hero::before {
  background: radial-gradient(ellipse at top right, rgba(255, 107, 107, 0.04) 0%, transparent 50%);
}

.hero-content {
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  font-weight: 300;
}

.hero-accent {
  width: 4rem;
  height: 0.25rem;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
  border-radius: var(--border-radius);
  animation: pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { opacity: 0.6; transform: scaleX(1); }
  to { opacity: 1; transform: scaleX(1.1); }
}

/* ===== PROJECTS SECTION ===== */
.projects {
  padding: var(--space-2xl) 0;
}

.section-header {
  margin-bottom: var(--space-2xl);
  position: relative;
}

.section-title {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.section-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border) 0%, transparent 100%);
}

/* ===== PROJECTS GRID ===== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 200px);
  gap: var(--space-lg);
  grid-template-areas:
    "large large large large large medium medium medium tall tall tall tall"
    "large large large large large medium medium medium tall tall tall tall"
    "wide wide wide wide wide wide wide wide tall tall tall tall"
    "square square square square regular regular regular regular . . . ."
    "square square square square regular regular regular regular . . . ."
    ". . . . . . . . . . . .";
}

.project-card {
  background: var(--color-surface-raised);
  border-radius: var(--border-radius-lg);
  padding: var(--space-xl);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--accent-color, #000), transparent);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color, var(--color-border));
}

[data-theme="dark"] .project-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.project-card:hover::before {
  opacity: 0.05;
}

.project-card:active {
  transform: translateY(-2px);
}

/* Grid areas */
.large { grid-area: large; }
.medium { grid-area: medium; }
.tall { grid-area: tall; }
.wide { grid-area: wide; }
.square { grid-area: square; }
.regular { grid-area: regular; }

.project-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-icon {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xs);
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  transition: transform var(--transition-base), color var(--transition-base);
  transform-origin: center center;
}

.project-icon svg {
  stroke-width: 2;
}

.project-card:hover .project-icon {
  color: var(--color-text-primary);
  transform: scale(1.08);
}

.project-title {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
  line-height: 1.3;
}

.project-description {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  flex-grow: 1;
}

.project-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.project-card:hover .project-accent {
  transform: scaleX(1);
}

/* Responsive grid */
@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 180px);
    grid-template-areas:
      "large large large large large large medium medium"
      "large large large large large large medium medium"
      "tall tall tall tall wide wide wide wide"
      "tall tall tall tall wide wide wide wide"
      "square square square square regular regular regular regular"
      "square square square square regular regular regular regular"
      ". . . . . . . ."
      ". . . . . . . .";
  }
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(12, 160px);
    gap: var(--space-md);
    grid-template-areas:
      "large large large large"
      "large large large large"
      "medium medium tall tall"
      "medium medium tall tall"
      "wide wide wide wide"
      "wide wide wide wide"
      "square square square square"
      "square square square square"
      "regular regular regular regular"
      "regular regular regular regular"
      ". . . ."
      ". . . .";
  }

  .project-card {
    padding: var(--space-lg);
  }

  .project-icon svg {
    width: 32px;
    height: 32px;
  }

  .project-icon {
    margin-bottom: var(--space-md);
  }

  .project-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: none;
  }

  .project-card {
    grid-area: auto !important;
    min-height: 200px;
  }
}

/* ===== ABOUT SECTION ===== */
.about {
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.about-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

.about-text {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 600px;
  font-style: italic;
}

/* ===== FOOTER ===== */
.footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
  margin-top: var(--space-3xl);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-text {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.footer-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--color-text-primary);
}

.easter-egg {
  opacity: 0.3;
  transition: opacity var(--transition-base);
}

.easter-egg:hover {
  opacity: 1;
}

/* ===== ANIMATIONS ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== UTILITIES ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== FOCUS STYLES ===== */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}