/**
 * Discrete Worlds - Hub/Index Page
 * Overview and navigation for the trilogy
 */


/* ============================================================================
 * INSTALLATION HEADER
 * ============================================================================ */

.installation-header {
  text-align: center;
  padding: var(--spacing-8) 0;
}

.installation-title {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--spacing-3);
}

[data-theme="light"] .installation-title {
  color: var(--color-primary-dark);
}

.installation-subtitle {
  font-family: var(--font-display);
  font-size: var(--font-size-18);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

[data-theme="light"] .installation-subtitle {
  color: var(--color-text-light-secondary);
}

@media (max-width: 768px) {
  .installation-title {
    font-size: 2.25rem;
  }
  
  .installation-subtitle {
    font-size: var(--font-size-16);
  }
}

/* ============================================================================
 * INSTALLATION OVERVIEW
 * ============================================================================ */

.installation-overview {
  max-width: 840px;
  margin: 0 auto var(--spacing-8);
  padding: var(--spacing-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

[data-theme="light"] .installation-overview {
  background: var(--color-bg-light-surface);
  border-color: var(--color-border-light-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.installation-overview p {
  font-size: var(--font-size-16);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
}

[data-theme="light"] .installation-overview p {
  color: var(--color-text-light-secondary);
}

.installation-overview strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================================
 * TRILOGY GRID - Navigation cards
 * ============================================================================ */

.trilogy-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  max-width: 840px;
  margin: 0 auto var(--spacing-8);
}

/* ============================================================================
 * TRILOGY CARDS
 * ============================================================================ */

.trilogy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-6);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
  cursor: pointer;
}

[data-theme="light"] .trilogy-card {
  background: var(--color-bg-light-surface);
  border-color: var(--color-border-light-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.trilogy-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary-glow);
  transform: translateY(-2px);
}

[data-theme="light"] .trilogy-card:hover {
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.2);
}

/* Card Header */
.trilogy-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.trilogy-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-family: var(--font-display);
  font-size: var(--font-size-24);
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.1);
  border: 1px solid rgba(var(--color-primary-rgb), 0.3);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.trilogy-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-20);
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin: 0;
}

[data-theme="light"] .trilogy-card__title {
  color: var(--color-text-light-primary);
}

/* Card Content */
.trilogy-card__thesis {
  font-size: var(--font-size-15);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

[data-theme="light"] .trilogy-card__thesis {
  color: var(--color-text-light-secondary);
}

/* Keywords */
.trilogy-card__keywords {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

.keyword {
  font-size: var(--font-size-12);
  font-weight: 500;
  color: var(--color-primary);
  padding: var(--spacing-1) var(--spacing-3);
  background: rgba(var(--color-primary-rgb), 0.1);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: var(--radius-sm);
}

/* Arrow */
.trilogy-card__arrow {
  position: absolute;
  top: var(--spacing-6);
  right: var(--spacing-6);
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
  opacity: 0.5;
  transition: color var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.trilogy-card:hover .trilogy-card__arrow {
  color: var(--color-primary);
  opacity: 1;
  transform: translateX(4px);
}

/* ============================================================================
 * DESIGN NOTE
 * ============================================================================ */

.design-note {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--spacing-6);
  text-align: center;
  border-top: 1px solid var(--color-border-secondary);
  border-bottom: 1px solid var(--color-border-secondary);
}

.design-note p {
  font-size: var(--font-size-14);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.7;
}

[data-theme="light"] .design-note p {
  color: var(--color-text-light-muted);
}

.design-note p + p {
  margin-top: var(--spacing-3);
}

/* ============================================================================
 * ENTRANCE ANIMATIONS
 * ============================================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trilogy-card {
  opacity: 0;
  animation: fadeInUp var(--duration-slow) var(--ease-out) forwards;
}

.trilogy-card:nth-child(1) { animation-delay: 100ms; }
.trilogy-card:nth-child(2) { animation-delay: 200ms; }
.trilogy-card:nth-child(3) { animation-delay: 300ms; }

/* Footer styles in shared/layout.css */