/* =============================================================
   FASE 04 — Contacto e fecho

   A espinha atravessou a página inteira. Aqui desce pelo Contacto,
   vira à direita e passa a ser o sublinhado do email. Depois não
   continua: o tracejado até ao rodapé desaparece.

   A linha tinha um destino e cumpriu-o. Continuar depois seria
   admitir que não ia a lado nenhum.

   O filete começa 32px antes da primeira letra, na coluna da
   espinha. Esses 32px de avanço são o que faz aquilo parecer uma
   chegada e não a decoração de um link.

   PARA REVERTER: apagar o <link> deste ficheiro e repor a secção
   #contacto a partir de madebyrc-site-v2-fase03c.
   ============================================================= */

/* ---------- Hierarquia ----------
   O email era 52px e a assinatura do rodapé 60px: o único CTA da
   página era mais pequeno do que a despedida. Passa a ser o maior
   elemento do fecho. A pergunta desce para deixar de empatar com o
   nome do case. */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact__question {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
}

.contact__mail {
  /* Os 38px de telemóvel não são palpite: a cadeia hi@madebyrc.com
     ocupa 823px a 100px, e a coluna de 342px suporta até 41px. */
  font-size: clamp(2.4rem, 5vw, 4.25rem);
}

/* ---------- A chegada ----------
   O sublinhado deixa de ser um wipe de hover em tinta e passa a
   estar sempre desenhado, a acento. É a espinha, não um adorno. */

.contact__mail::after {
  left: 0;
  background: var(--accent);
  transform: scaleX(1);
}

@media (min-width: 1100px) {

  /* A espinha desce só até ao email e não continua para o rodapé.
     Substitui as duas camadas da Fase 03C por uma. */
  .section--contact {
    background-image: var(--spine-solid);
    background-size: 1px calc(100% - var(--section-gap));
    background-position: var(--spine-x) 0;
  }

  /* A curva: o filete estende-se meia goteira para a esquerda até
     encontrar a coluna da espinha. */
  .contact__mail::after {
    left: calc(-1 * var(--gutter) / 2);
  }
}

/* ---------- Hover ----------
   Engrossa de 1px para 2px. Não muda de cor, não se move, não
   sublinha outra vez. É um reconhecimento, não um efeito. */

@media (hover: hover) {
  .contact__mail::after { transition: height .25s var(--ease); }
  .contact__mail:hover::after { height: 2px; }
}

.contact__mail:focus-visible::after { height: 2px; }

/* ---------- Movimento ----------
   Uma só animação em toda a secção, e é a última da página: o
   filete a desenhar-se da esquerda. Menos do que as seis do Método,
   de propósito — o site abranda aqui. */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    .contact {
      view-timeline-name: --fecho;
      view-timeline-axis: block;
    }

    .contact__mail::after {
      transform: scaleX(0);
      animation: rc-chegada linear both;
      animation-timeline: --fecho;
      animation-range: entry 25% entry 85%;
    }

    @keyframes rc-chegada { to { transform: scaleX(1); } }
  }
}