/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  /* Colors */
  --color-bg: #f5e6d0;
  --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: #0d0b08;
  --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 0.8s ease, color 0.5s ease;
  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(245, 230, 208, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: all 0.8s ease;
}

[data-theme="dark"] .header {
  background-color: rgba(13, 11, 8, 0.85);
}

.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);
  position: relative;
  z-index: 2;
}

/* ===== HERO SECTION ===== */
.hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: transparent;
  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;
  opacity: 0;
  transform: translateY(16px);
  animation: cardReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.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 {
  display: inline-block;
  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-count {
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-secondary, var(--color-text-primary));
  opacity: 0.5;
  vertical-align: baseline;
  letter-spacing: 0;
  font-feature-settings: "tnum";
}

.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(11, 110px);
  gap: var(--space-md);
  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 gepa gepa gepa gepa research research research research"
    "square square square square gepa gepa gepa gepa research research research research"
    "graph graph graph graph graph conductor conductor conductor conductor regular regular regular"
    "graph graph graph graph graph conductor conductor conductor conductor regular regular regular"
    "ukiyo ukiyo ukiyo ukiyo ukiyo icongepa icongepa icongepa icongepa compact compact compact"
    "ukiyo ukiyo ukiyo ukiyo ukiyo icongepa icongepa icongepa icongepa compact compact compact"
    "health health health health models models models models studios studios backlog backlog"
    "health health health health models models models models studios studios backlog backlog";
}

.project-card {
  background: rgba(255, 255, 255, 0.45);
  border-radius: var(--border-radius-lg);
  padding: var(--space-md);
  cursor: pointer;
  transition: all 0.6s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  /* Entrance animation */
  opacity: 0;
  transform: translateY(24px);
  animation: cardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered delays per card */
.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4) { animation-delay: 0.38s; }
.project-card:nth-child(5) { animation-delay: 0.46s; }
.project-card:nth-child(6) { animation-delay: 0.54s; }
.project-card:nth-child(7) { animation-delay: 0.62s; }
.project-card:nth-child(8) { animation-delay: 0.70s; }
.project-card:nth-child(9) { animation-delay: 0.78s; }
.project-card:nth-child(10) { animation-delay: 0.86s; }
.project-card:nth-child(11) { animation-delay: 0.94s; }
.project-card:nth-child(12) { animation-delay: 1.02s; }
.project-card:nth-child(13) { animation-delay: 1.10s; }
.project-card:nth-child(14) { animation-delay: 1.18s; }
.project-card:nth-child(15) { animation-delay: 1.26s; }
.project-card:nth-child(16) { animation-delay: 1.34s; }
.project-card:nth-child(17) { animation-delay: 1.42s; }

@keyframes cardReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme="dark"] .project-card {
  background: rgba(26, 26, 26, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

.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; }
.icongepa { grid-area: icongepa; }
.gepa { grid-area: gepa; }
.compact { grid-area: compact; }
.conductor { grid-area: conductor; }
.ukiyo { grid-area: ukiyo; }
.studios { grid-area: studios; }
.project-card.models { grid-area: models; }
.project-card.health { grid-area: health; }
.project-card.graph { grid-area: graph; }
.project-card.backlog { grid-area: backlog; }
.project-card.research { grid-area: research; }

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

.project-icon {
  margin-bottom: var(--space-sm);
  padding-left: var(--space-xs);
  display: flex;
  align-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform var(--transition-base), color var(--transition-base);
  transform-origin: left center;
}

.project-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2;
}

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

.project-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xs);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-description {
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  line-height: 1.4;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.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(15, 100px);
    grid-template-areas:
      "large large large large large medium medium medium"
      "large large large large large medium medium medium"
      "tall tall tall tall wide wide wide wide"
      "tall tall tall tall wide wide wide wide"
      "square square square square gepa gepa gepa gepa"
      "square square square square gepa gepa gepa gepa"
      "research research research research regular regular regular regular"
      "research research research research regular regular regular regular"
      "icongepa icongepa icongepa icongepa compact compact compact compact"
      "icongepa icongepa icongepa icongepa compact compact compact compact"
      "ukiyo ukiyo ukiyo ukiyo conductor conductor conductor conductor"
      "ukiyo ukiyo ukiyo ukiyo conductor conductor conductor conductor"
      "studios studios studios studios models models models models"
      "health health health health models models models models"
      "graph graph graph graph backlog backlog backlog backlog";
  }
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(19, 95px);
    gap: var(--space-sm);
    grid-template-areas:
      "large large large large"
      "large large large large"
      "medium medium tall tall"
      "medium medium tall tall"
      "wide wide wide wide"
      "square square regular regular"
      "square square regular regular"
      "gepa gepa research research"
      "gepa gepa research research"
      "icongepa icongepa compact compact"
      "icongepa icongepa compact compact"
      "conductor conductor graph graph"
      "conductor conductor graph graph"
      "ukiyo ukiyo studios studios"
      "ukiyo ukiyo studios studios"
      "health health models models"
      "health health models models"
      "backlog backlog backlog backlog"
      "backlog backlog backlog backlog";
  }

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

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

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

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

@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: 140px;
  }
}

/* ===== 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: 1rem;
  line-height: 1.7;
  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);
  position: relative;
  z-index: 2;
}

.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-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer-link svg {
  display: block;
  opacity: 0.35;
  transition: opacity var(--transition-fast);
}

.footer-link:has(span) {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.footer-link:has(span) svg {
  display: inline-block;
  opacity: 1;
}

.footer-link:hover svg {
  opacity: 1;
}

.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.5;
  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;
}