/* ==========================================================================
   Contact Section
   ========================================================================== */

.contact {
  padding-block: var(--space-3xl);
  text-align: center;
  background-color: var(--color-surface);
  position: relative;
}

.contact .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.contact__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  margin-top: var(--space-sm);
  margin-bottom: 50px;
}

/* Dramatic entrance — rises from further down, slower */
.js .contact__title.reveal {
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out-expo),
              transform 1s var(--ease-out-expo);
}

.contact__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 45ch;
  line-height: 1.6;
}

.contact__email {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 600;
  color: var(--color-accent);
  transition: color var(--duration-fast),
              transform var(--duration-fast);
}

.contact__email svg {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.contact__email:hover {
  color: var(--color-accent-hover);
  transform: translateY(-1px);
}

.contact__email:hover svg {
  transform: rotate(-6deg) scale(1.1);
}