/* =============================================================
   FASE 01B — Hero e cabeçalho
   «A frase dissolve-se; fica quem a disse.»

   O olhar percorre a frase e larga cada palavra depois de a ler.
   Fica «impressão.» — o argumento inteiro numa palavra — que se
   aproxima, é olhada, e é largada também. O que resta é o nome.

   O movimento é atenção a estreitar-se. Nada viaja a velocidade
   diferente de nada: não há parallax aqui.

   PARA REVERTER: apagar o <link> deste ficheiro no index.html.
   Nada em style.css foi alterado.
   ============================================================= */

:root {
  /* Altura reservada no topo para o timbre. O hero deixa este
     espaço vago desde o início, para que o cabeçalho chegue a um
     lugar que já era dele — sem empurrar nada.

     ─── CORREÇÃO RETROATIVA · Fase 03B ───────────────────────────
     O valor original era um clamp fixo que não tinha relação com a
     altura real do cabeçalho. Media 97px em desktop e 121px em
     telemóvel (onde a navegação quebrava para segunda linha) contra
     86,4px e 76px reservados — 45px de sobreposição sobre o eyebrow
     do hero. Invisível no caminho animado, porque o eyebrow já se
     apagou quando o cabeçalho chega; visível no fallback, onde o
     cabeçalho está lá desde o início.

     A altura passa a derivar do próprio padding, por isso as duas
     medidas não podem voltar a divergir. 2.35rem é a altura do
     bloco da assinatura (11px + 15px com as suas entrelinhas).

     Nada mais da Fase 01B foi tocado: intervalos, dissolução das
     palavras e comportamento do hero ficam exatamente como estavam.
     ──────────────────────────────────────────────────────────── */
  --rc-head-pad: clamp(1.25rem, 2vw, 1.625rem);
  --rc-head: calc(2 * var(--rc-head-pad) + 2.35rem);
}

/* Parte da mesma correção: o padding em style.css era independente
   do valor reservado. Passa a ser a fonte de ambos. */
.masthead { padding-block: var(--rc-head-pad); }

/* =============================================================
   1. COMPOSIÇÃO  — aplica-se sempre, com ou sem movimento.
   ============================================================= */

/* O cabeçalho sai do fluxo: assim o hero começa em y=0 e ocupa
   exatamente um ecrã. Fundo de papel, para o conteúdo passar
   por baixo sem se ver. */
.masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--paper);
}

.masthead::after {
  content: "";
  position: absolute;
  bottom: 0;
  left:  max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter)));
  right: max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter)));
  height: 1px;
  background: var(--rule);
  transform-origin: left;
  /* Desenhado por omissão: sem movimento, o timbre tem o seu filete
     desde o início. É a animação que o começa a zero, não o contrário. */
  transform: scaleX(1);
}

/* O hero passa a ocupar um ecrã exato, com a composição
   distribuída: meta em cima, frase ao centro, apoio no fundo. */
.hero {
  padding-top: 0;
}

.hero > .wrap {
  min-height: 100svh;
  padding-top: var(--rc-head);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Sem gap: o space-between já distribui o espaço livre. Somados,
     empurravam o rodapé do hero para fora do ecrã. */
}

/* O flex trata do espaçamento; as margens de style.css sairiam a dobrar. */
.hero__eyebrow,
.hero__title { margin-bottom: 0; }

/* Muito maior. A 1440 sobe de 108px para 156px, e a frase passa a
   ocupar mais de metade da altura do ecrã em quatro linhas. */
/* O min() com svh é o que impede o transbordo: num ecrã largo mas
   baixo, quatro linhas a 10.8vw não caberiam em 100svh. A altura
   manda sempre que for ela a apertar. */
.hero__title {
  font-size: min(clamp(3.05rem, 10.8vw, 9.75rem), 16svh);
  max-width: 18ch;
  transform-origin: left bottom;
}

/* Mobile tem direção própria, não a versão comprimida do desktop.
   O limite aqui é «impressão.» — a palavra mais longa não pode
   transbordar a coluna. A 16vw ela ocupa ~95% da largura, o que
   empurra a frase para quase uma palavra por linha: lê-se como
   cartaz, e torna a dissolução palavra a palavra muito mais clara. */
@media (max-width: 759px) {
  .hero__title { font-size: min(clamp(3.25rem, 16vw, 4.5rem), 13svh); }
}

/* Telemóvel pequeno e baixo (iPhone SE e afins): sete linhas de
   cartaz mais o apoio não cabem em 640px. A frase cede primeiro —
   o CTA e o parágrafo não podem ficar cortados no fundo. */
@media (max-width: 759px) and (max-height: 700px) {
  .hero__title { font-size: min(clamp(2.6rem, 13vw, 4.5rem), 11svh); }
}

/* =============================================================
   2. MOVIMENTO — só com suporte a scroll-driven animations e sem
   pedido de movimento reduzido. Caso contrário fica a composição
   acima, estática, legível e com o cabeçalho visível.
   ============================================================= */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ---- O palco: 190svh de altura para 90svh de fixação ---- */
    .hero { min-height: 190svh; }

    .hero > .wrap {
      position: sticky;
      top: 0;
      height: 100svh;
      min-height: 0;
    }

    /* ---- O cabeçalho chega, e depois fica ---- */
    .masthead {
      visibility: hidden;
      opacity: 0;
      animation: rc-head-in linear both;
      animation-timeline: scroll(root block);
      animation-range: 56svh 74svh;
    }

    @keyframes rc-head-in {
      from { visibility: hidden; opacity: 0; }
      to   { visibility: visible; opacity: 1; }
    }

    /* O filete desenha-se da esquerda. É o mesmo gesto que fecha o
       hero e abre o Trabalho Selecionado. */
    .masthead::after {
      animation: rc-rule-draw linear both;
      animation-timeline: scroll(root block);
      animation-range: 66svh 86svh;
    }

    @keyframes rc-rule-draw {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* ---- O apoio sai primeiro ---- */
    .hero__eyebrow,
    .hero__foot {
      animation: rc-fade-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 12svh;
    }

    @keyframes rc-fade-out {
      from { opacity: 1; }
      to   { opacity: 0; }
    }

    /* ---- As palavras largam-se por ordem de leitura ----
       Cada palavra herda o seu lugar da variável --i que já existia
       no HTML para a animação de entrada. O intervalo de cada uma
       começa 6svh depois do da anterior: vê-se a frase a ser
       consumida da esquerda para a direita, não a esbater-se toda. */
    .hero__title .w {
      animation: rc-fade-out linear both;
      animation-timeline: scroll(root block);
      animation-range:
        calc(2svh + var(--i) * 6svh)
        calc(16svh + var(--i) * 6svh);
    }

    /* «impressão.» é a exceção: aguenta sozinha durante 16svh antes
       de ser largada. É o momento em que a frase inteira se reduz
       ao seu argumento. */
    .hero__title .w:last-child {
      animation-range: 70svh 84svh;
    }

    /* Enquanto ela está sozinha, aproxima-se. Não viaja — cresce no
       lugar, ancorada à sua própria linha de base. As palavras já
       apagadas crescem com ela, mas ninguém as vê. */
    .hero__title {
      animation: rc-title-focus linear both;
      animation-timeline: scroll(root block);
      animation-range: 38svh 70svh;
    }

    @keyframes rc-title-focus {
      from { transform: scale(1); }
      to   { transform: scale(1.1); }
    }

    /* ---- Mobile: direção própria ----
       O gesto de scroll é mais longo e mais rápido, e o ecrã é mais
       estreito. Tudo acontece mais cedo, a palavra final aproxima-se
       menos, e o palco encurta para não haver ecrã vazio a meio. */
    @media (max-width: 759px) {
      .hero { min-height: 170svh; }

      .masthead        { animation-range: 46svh 62svh; }
      .masthead::after { animation-range: 54svh 72svh; }

      .hero__eyebrow,
      .hero__foot { animation-range: 0 10svh; }

      .hero__title .w {
        animation-range:
          calc(2svh + var(--i) * 5svh)
          calc(14svh + var(--i) * 5svh);
      }

      .hero__title .w:last-child { animation-range: 58svh 72svh; }

      .hero__title { animation-range: 32svh 58svh; }

      @keyframes rc-title-focus-mobile {
        from { transform: scale(1); }
        to   { transform: scale(1.06); }
      }
      .hero__title { animation-name: rc-title-focus-mobile; }
    }
  }
}