/**
 * Hero — homepage editorial introduction
 */

.hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-height) - var(--space-7));
  padding-block: var(--space-6);
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container-content);
}

.hero-headline {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 11em;
}

.hero-lead {
  margin: 0;
  max-width: 38rem;
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: var(--transition-color), var(--transition-border), var(--transition-opacity);
}

.hero-cta--primary {
  color: var(--color-text-primary);
  padding-bottom: 3px;
  border-bottom: var(--border-width-strong) solid var(--color-text-primary);
}

.hero-cta--primary:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
}

.hero-cta--secondary {
  color: var(--color-text-tertiary);
  padding-bottom: 3px;
  border-bottom: var(--border-width) solid transparent;
}

.hero-cta--secondary:hover {
  color: var(--color-link);
  border-bottom-color: var(--color-link);
}

/* ——— Entrance animation ——— */

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--hero-enter-distance));
  }

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

.hero-headline,
.hero-lead,
.hero-actions {
  animation: hero-fade-up var(--duration-slow) var(--ease-out) both;
}

.hero-lead {
  animation-delay: 120ms;
}

.hero-actions {
  animation-delay: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline,
  .hero-lead,
  .hero-actions {
    animation: none;
  }
}

/* ——— Responsive ——— */

@media only screen and (max-width: 800px) {
  .hero {
    min-height: auto;
    padding-block: var(--space-5);
  }

  .hero-headline {
    max-width: none;
  }

  .hero-content {
    gap: var(--space-3);
  }
}

@media only screen and (max-width: 600px) {
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}