/* =============================================================
   FASE 03 — Método
   «Do primeiro olhar ao último detalhe.»

   A secção passa a ser uma régua: um filete contínuo com quatro
   divisões iguais. As graduações das duas extremidades são maiores
   que as três interiores — o percurso abre e fecha com atenção, e
   os dois passos do meio são produção.

   Divisões iguais de propósito: a régua mede o intervalo do
   trabalho, não a importância de cada etapa. Larguras desiguais
   seriam um gráfico, não uma medida.

   Terceiro sentido de «Reparar»: no hero é atenção, no trabalho é
   observar decisões, aqui é medir.

   PARA REVERTER: apagar o <link> deste ficheiro e repor a secção
   #metodo a partir de madebyrc-site-v2-fase02.
   style.css e main.js continuam por tocar.
   ============================================================= */

.method-section {
  --tick-minor: 7px;
  --tick-major: 13px;
  --step-gap: clamp(1.5rem, 3vw, 2.75rem);
}

/* A frase enquadra o intervalo; os quatro verbos é que são o
   método. Por isso desce de 28px para ~22px — deixa de disputar
   com os termos. */
.method__intro {
  font-size: clamp(1.0625rem, 1.55vw, 1.375rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.4;
  color: var(--graphite);
  max-width: 34ch;
}

/* ---------- A régua ---------- */

.measure { position: relative; }

.measure__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
}

/* A graduação de fecho: a extremidade direita do intervalo. */
.measure__rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: var(--tick-major);
  background: var(--ink);
}

/* Sem gap: as divisões têm de cair exatamente nos quartos. O ar
   entre colunas vem do padding de cada passo, não da grelha. */
.method {
  gap: 0;
  padding-top: 0;
}

.step {
  position: relative;
  border-top: 0;
  padding-top: calc(var(--tick-major) + .9rem);
  padding-right: var(--step-gap);
}

/* Graduação no início de cada divisão. */
.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: var(--tick-minor);
  background: var(--mute);
}

/* A extremidade esquerda do intervalo. */
.step:first-child::before {
  height: var(--tick-major);
  background: var(--ink);
}

/* Sobe de 28px para ~38px: preenche o degrau que faltava entre as
   etiquetas de 11px e o nome do case de 68px. */
.step__term {
  font-size: clamp(1.5rem, 2.65vw, 2.375rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: .6rem;
}

/* A coluna já limita a medida; 30ch limitaria outra vez, mais curto. */
.step__body { max-width: none; }

@media (min-width: 760px) {
  .method { grid-template-columns: repeat(4, 1fr); }
  .step:last-child { padding-right: 0; }
}

/* =============================================================
   MOBILE — a mesma régua, rodada
   A proporção passa a ser altura e o filete encosta à esquerda.
   Mesma informação, outro eixo.
   ============================================================= */
@media (max-width: 759px) {

  .measure__rule {
    right: auto;
    bottom: 0;
    width: 1px;
    height: auto;
    transform-origin: top;
  }

  .measure__rule::after {
    right: auto;
    top: auto;
    bottom: 0;
    left: 0;
    width: var(--tick-major);
    height: 1px;
  }

  .method { gap: clamp(2rem, 6vw, 2.75rem); }

  .step {
    padding-top: 0;
    padding-right: 0;
    padding-left: calc(var(--tick-major) + 1rem);
  }

  .step::before {
    width: var(--tick-minor);
    height: 1px;
    top: .55em;
  }

  /* height também, senão herda os 13px do eixo horizontal e a
     graduação de abertura fica um quadrado. */
  .step:first-child::before {
    width: var(--tick-major);
    height: 1px;
  }
}

/* =============================================================
   MOVIMENTO — as mesmas duas guardas das fases anteriores.
   Um só gesto: o filete desenha-se de ponta a ponta e as
   graduações aparecem à medida que ele passa por elas. A linha só
   chega ao terceiro passo depois de atravessar o segundo — a
   causalidade é física, não uma timeline desenhada.
   ============================================================= */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    .measure {
      view-timeline-name: --measure;
      view-timeline-axis: block;
    }

    .measure__rule {
      transform: scaleX(0);
      animation: rc-rule-span linear both;
      animation-timeline: --measure;
      animation-range: entry 20% entry 90%;
    }

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

    .measure__rule::after,
    .step::before {
      opacity: 0;
      animation: rc-tick-in linear both;
      animation-timeline: --measure;
    }

    /* Cada graduação acende quando o filete lhe chega: 17% de
       percurso entre divisões, os mesmos 70% totais do desenho. */
    .step::before {
      animation-range:
        entry calc(20% + var(--i, 0) * 17%)
        entry calc(26% + var(--i, 0) * 17%);
    }

    .measure__rule::after {
      animation-range: entry 88% entry 94%;
    }

    @keyframes rc-tick-in { to { opacity: 1; } }

    /* Nome próprio, não o mesmo redefinido: a resolução de dois
       @keyframes homónimos depende da ordem de origem, e aqui o
       eixo do transform é diferente — scaleX(1) apagaria o
       scaleY(0) de partida. */
    @media (max-width: 759px) {
      .measure__rule {
        transform: scaleY(0);
        animation-name: rc-rule-span-v;
      }
    }

    @keyframes rc-rule-span-v { to { transform: scaleY(1); } }
  }
}