/*
 * Design System for Cyrill Vasilyev Portfolio
 * ============================================
 *
 * Principles:
 *   - Artwork is primary; UI recedes
 *   - Monospace typography: code/typewriter aesthetic
 *   - Mobile-first vertical ribbon layout
 *   - Progressive semantic color-coding
 *   - Minimal, composable, deletable
 *
 * Structure:
 *   1. Design Tokens (CSS custom properties)
 *   2. Base styles
 *   3. Navigation
 *   4. Content & Layout
 *   5. Gallery components
 *   6. Page-specific styles
 *   7. Semantic utility classes
 *   8. Mobile overrides
 */

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Typography */
  --font-mono: 'Menlo', 'Courier New', monospace;
  --font-size-base: 2.5rem;
  --font-size-nav: 2rem;
  --font-size-nav-mobile: 0.75rem;
  --font-size-content: small;
  --font-size-caption: 1.4ex;

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

  /* Layout */
  --content-width: 600px;
  --min-image-height: 200px;

  /* Colors: Base */
  --color-text: #333;
  --color-text-muted: #666;
  --color-text-faint: #999;
  --color-bg-start: white;
  --color-bg-end: lightgray;
  --color-shimmer-light: #f0f0f0;
  --color-shimmer-mid: #e8e8e8;
  --color-glow: rgba(255, 255, 255, 0.5);

  /* Colors: Epistemic (certainty gradient) */
  --color-fact: #2d5016;           /* grounded, verified */
  --color-inference: #4a6741;      /* reasoned, derived */
  --color-speculation: #7d8a70;    /* tentative, exploratory */
  --color-question: #a0a0a0;       /* open, unresolved */

  /* Colors: Temporal */
  --color-past: #6b5b4f;           /* sepia, receding */
  --color-present: #333;           /* clear, immediate */
  --color-future: #4a5568;         /* cool, approaching */
  --color-timeless: #1a1a1a;       /* anchored, persistent */

  /* Colors: Content Type */
  --color-artwork: transparent;     /* artwork speaks for itself */
  --color-prose: #333;             /* readable, neutral */
  --color-data: #2c5282;           /* structured, precise */
  --color-reference: #553c9a;      /* linked, external */
  --color-annotation: #975a16;     /* marginal, contextual */

  /* Colors: Affective (resonance with artist's chromatic practice) */
  --color-neutral: #666;
  --color-warm: #8b4513;           /* earth, body */
  --color-cool: #2f4f4f;           /* air, distance */
  --color-intense: #8b0000;        /* presence, urgency */

  /* Colors: State */
  --color-state-default: var(--color-text);
  --color-state-hover: #000;
  --color-state-active: var(--color-intense);
  --color-state-focus: #2563eb;
  --color-state-disabled: var(--color-text-faint);

  /* Colors: Permanence Strata (7-level gradient from ephemeral to geological) */
  --color-stratum-1: #f0f0f0;      /* ephemeral: ~ms, nearly invisible */
  --color-stratum-2: #e0e0e0;      /* volatile: ~min, fading */
  --color-stratum-3: #c8c8c8;      /* session: ~hrs, temporary */
  --color-stratum-4: #a0a0a0;      /* local: ~days, personal */
  --color-stratum-5: #787878;      /* distributed: ~months, shared */
  --color-stratum-6: #484848;      /* archival: ~years, preserved */
  --color-stratum-7: #1a1a1a;      /* geological: ~eons, permanent */

  /* Colors: Stratum text (contrast pairs) */
  --color-stratum-1-text: #999;
  --color-stratum-2-text: #888;
  --color-stratum-3-text: #666;
  --color-stratum-4-text: #444;
  --color-stratum-5-text: #333;
  --color-stratum-6-text: #fff;
  --color-stratum-7-text: #fff;

  /* Colors: Liveness (for interactive/live code elements) */
  --color-live-active: #22c55e;    /* green: running, responsive */
  --color-live-pending: #f59e0b;   /* amber: processing, waiting */
  --color-live-error: #ef4444;     /* red: failed, broken */
  --color-live-idle: #94a3b8;      /* slate: dormant, ready */
  --color-code-bg: #1e1e1e;        /* dark: code background */
  --color-code-text: #d4d4d4;      /* light: code text */
  --color-repl-prompt: #569cd6;    /* blue: REPL prompt */
  --color-repl-result: #dcdcaa;    /* yellow: REPL result */

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.4s ease-in;
  --transition-slow: 0.5s ease-in-out;

  /* Animation */
  --shimmer-duration: 1.5s;
  --decay-fast: 0.5s;
  --decay-medium: 2s;
  --decay-slow: 5s;
  --pulse-duration: 2s;
}

/* ==========================================================================
   Base
   ========================================================================== */
html, body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  background: linear-gradient(to bottom, var(--color-bg-start), var(--color-bg-end)) no-repeat fixed;
  background-size: 100% 100%;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.horizontal-list {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: var(--space-sm) 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-nav);
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.85;
  background-color: transparent;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.nav-item {
  white-space: nowrap;
}

/* ==========================================================================
   Content
   ========================================================================== */
.content {
  padding: var(--space-lg);
  max-width: var(--content-width);
  margin: 0 auto;
  font-size: var(--font-size-content);
}

/* ==========================================================================
   Mobile Overrides
   ========================================================================== */
@media (max-width: 768px) {
  .content {
    padding: var(--space-md);
  }

  .gallery,
  .image-container {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
  }

  .image-item {
    padding: 0;
    margin-bottom: var(--space-sm);
  }

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

  .painting-info {
    padding: 0 var(--space-sm);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
    font-size: 1.2ex;
  }

  .title,
  .dimensions,
  .year {
    margin-right: 0.3em;
    font-size: 0.9em;
  }

  .gallery {
    gap: 0;
  }
}

/* ==========================================================================
   Gallery: Shared Base
   ========================================================================== */
.image-container {
  gap: var(--space-lg);
}

.image-item {
  box-sizing: border-box;
  padding: var(--space-sm);
  margin-bottom: var(--space-lg);
}

/* Shared image styles */
.image-item img,
.painting img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 2;
  display: block;
  margin: 0 auto;
}

/* Shared shimmer base */
.image-item,
.painting {
  position: relative;
  min-height: var(--min-image-height);
}

.image-item::before,
.painting::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-shimmer-light) 25%,
    var(--color-shimmer-mid) 50%,
    var(--color-shimmer-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer var(--shimmer-duration) infinite;
  z-index: 1;
}

/* Hide shimmer on load */
.image-item.loaded::before,
.painting.loaded::before,
.image-item:has(img.loaded)::before,
.painting:has(img.loaded)::before {
  display: none;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==========================================================================
   Gallery: Paintings
   ========================================================================== */
.gallery {
  gap: var(--space-xxl);
}

.painting {
  box-sizing: border-box;
  padding: 0;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.painting-info {
  margin-top: 1.2em;
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-caption);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Typography: Captions
   ========================================================================== */
.title {
  margin-right: 0.8em;
  color: var(--color-text);
  font-weight: 600;
  font-style: italic;
  display: inline-block;
}

.year {
  margin-right: 0.8em;
  color: var(--color-text-muted);
  font-weight: 400;
  display: inline-block;
}

.dimensions {
  color: var(--color-text-faint);
  font-weight: 400;
  display: inline-block;
}

/* ==========================================================================
   Page: About
   ========================================================================== */
.about-page {
  display: inline;
  padding: 0.8ex;
  white-space: pre-wrap;
}

/* ==========================================================================
   Background: Painted
   ========================================================================== */
.painted-background {
  background-image: url("/assets/images/background.jpg");
  background-size: auto;
  background-repeat: repeat;
  background-position: center;
  min-height: 100vh;
}

/* ==========================================================================
   Links
   ========================================================================== */
a {
  text-decoration: none;
  transition: box-shadow var(--transition-slow);
}

a:hover {
  box-shadow: 0 0 8px 3px var(--color-glow);
  opacity: 1;
}

/* ==========================================================================
   Lists
   ========================================================================== */
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-width: 0;
  text-decoration: none;
}

/* ==========================================================================
   Navigation: Icons & Mobile
   ========================================================================== */
.nav-item i {
  font-size: 1.2em;
}

@media (max-width: 768px) {
  .horizontal-list {
    font-size: var(--font-size-nav-mobile);
    padding: var(--space-xs);
    gap: 0.4em 0.6em;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-item a {
    display: inline;
    white-space: nowrap;
  }

  .nav-item i {
    font-size: 1em;
  }
}

/* ==========================================================================
   Semantic Utilities: Epistemic
   ========================================================================== */
.epistemic-fact { color: var(--color-fact); }
.epistemic-inference { color: var(--color-inference); }
.epistemic-speculation { color: var(--color-speculation); }
.epistemic-question { color: var(--color-question); }

/* Subtle background variants for blocks */
.epistemic-fact-bg { background-color: color-mix(in srgb, var(--color-fact) 8%, transparent); }
.epistemic-inference-bg { background-color: color-mix(in srgb, var(--color-inference) 8%, transparent); }
.epistemic-speculation-bg { background-color: color-mix(in srgb, var(--color-speculation) 8%, transparent); }
.epistemic-question-bg { background-color: color-mix(in srgb, var(--color-question) 8%, transparent); }

/* ==========================================================================
   Semantic Utilities: Temporal
   ========================================================================== */
.temporal-past { color: var(--color-past); }
.temporal-present { color: var(--color-present); }
.temporal-future { color: var(--color-future); }
.temporal-timeless { color: var(--color-timeless); }

/* ==========================================================================
   Semantic Utilities: Content Type
   ========================================================================== */
.content-prose { color: var(--color-prose); }
.content-data { color: var(--color-data); }
.content-reference { color: var(--color-reference); }
.content-annotation { color: var(--color-annotation); }

/* ==========================================================================
   Semantic Utilities: Affective
   ========================================================================== */
.affective-neutral { color: var(--color-neutral); }
.affective-warm { color: var(--color-warm); }
.affective-cool { color: var(--color-cool); }
.affective-intense { color: var(--color-intense); }

/* ==========================================================================
   Semantic Utilities: Text Weight
   ========================================================================== */
.text-muted { color: var(--color-text-muted); }
.text-faint { color: var(--color-text-faint); }

/* ==========================================================================
   Semantic Utilities: Permanence Strata
   ========================================================================== */
.stratum-1, .stratum-ephemeral {
  border-left: 3px solid var(--color-stratum-1);
  color: var(--color-stratum-1-text);
}
.stratum-2, .stratum-volatile {
  border-left: 3px solid var(--color-stratum-2);
  color: var(--color-stratum-2-text);
}
.stratum-3, .stratum-session {
  border-left: 3px solid var(--color-stratum-3);
  color: var(--color-stratum-3-text);
}
.stratum-4, .stratum-local {
  border-left: 3px solid var(--color-stratum-4);
  color: var(--color-stratum-4-text);
}
.stratum-5, .stratum-distributed {
  border-left: 3px solid var(--color-stratum-5);
  color: var(--color-stratum-5-text);
}
.stratum-6, .stratum-archival {
  border-left: 3px solid var(--color-stratum-6);
  color: var(--color-stratum-6-text);
}
.stratum-7, .stratum-geological {
  border-left: 3px solid var(--color-stratum-7);
  color: var(--color-stratum-7-text);
}

/* Stratum background variants */
.stratum-1-bg { background-color: var(--color-stratum-1); color: var(--color-stratum-1-text); }
.stratum-2-bg { background-color: var(--color-stratum-2); color: var(--color-stratum-2-text); }
.stratum-3-bg { background-color: var(--color-stratum-3); color: var(--color-stratum-3-text); }
.stratum-4-bg { background-color: var(--color-stratum-4); color: var(--color-stratum-4-text); }
.stratum-5-bg { background-color: var(--color-stratum-5); color: var(--color-stratum-5-text); }
.stratum-6-bg { background-color: var(--color-stratum-6); color: var(--color-stratum-6-text); }
.stratum-7-bg { background-color: var(--color-stratum-7); color: var(--color-stratum-7-text); }

/* ==========================================================================
   Semantic Utilities: Liveness & Interactive
   ========================================================================== */
.live-active { color: var(--color-live-active); }
.live-pending { color: var(--color-live-pending); }
.live-error { color: var(--color-live-error); }
.live-idle { color: var(--color-live-idle); }

/* Live indicator (pulsing dot) */
.live-indicator {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: var(--color-live-active);
  animation: pulse var(--pulse-duration) ease-in-out infinite;
}
.live-indicator.pending { background-color: var(--color-live-pending); }
.live-indicator.error { background-color: var(--color-live-error); animation: none; }
.live-indicator.idle { background-color: var(--color-live-idle); animation: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* Code well (for live ClojureScript) */
.code-well {
  background-color: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 1em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  overflow-x: auto;
  border-left: 3px solid var(--color-stratum-6);
}
.code-well.live { border-left-color: var(--color-live-active); }
.code-well.error { border-left-color: var(--color-live-error); }

/* REPL-style output */
.repl-prompt { color: var(--color-repl-prompt); }
.repl-result { color: var(--color-repl-result); }
.repl-error { color: var(--color-live-error); }

/* ==========================================================================
   Decay Animations
   ========================================================================== */
.decaying {
  transition: opacity var(--decay-medium) ease-out;
}
.decaying.fast { transition-duration: var(--decay-fast); }
.decaying.slow { transition-duration: var(--decay-slow); }

/* Fade out completely */
.decay-out {
  animation: decayOut var(--decay-medium) ease-out forwards;
}
@keyframes decayOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-5px); }
}

/* Fade in from nothing */
.emerge {
  animation: emerge var(--transition-fast) ease-out;
}
@keyframes emerge {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}