/* Estúdio: frase grande, depois uma caixa fixa à esquerda cujo título muda à medida que o texto à direita passa; no fim, serviços e contacto. */
.page { position: relative; padding: var(--pad); padding-bottom: calc(var(--pad) * 3 + 14px); min-height: 100svh; }
.lead { margin: var(--s8) 0 0; max-width: 24ch; font-stretch: 100%; font-weight: 800; font-size: clamp(26px, 4.4vw, 76px); line-height: 1.02; letter-spacing: -0.015em; text-transform: uppercase; text-align: left; }

.down { display: inline-block; margin-top: var(--s8); color: var(--ink); }
.down svg { display: block; animation: bob 1.8s var(--curve-fade) infinite; }
.down.gone { opacity: 0; pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); margin-top: clamp(24px, 6vh, 72px); }
.story-l { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-self: start; }
.count { font-family: var(--mono); font-size: 11px; line-height: 1.4; color: var(--mute); margin-bottom: var(--s2); }
.story-l .reel { --ts: clamp(26px, 3.6vw, 60px); --h: calc(var(--ts) * 1.2); }
.story-r { padding-bottom: 20svh; }
.chap { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; max-width: 46ch; opacity: 0.25; filter: blur(2px); transition: opacity var(--fade) var(--curve-fade), filter var(--fade) var(--curve-fade); }
.chap.on { opacity: 1; filter: none; }
.chap p { margin: 0; font-size: clamp(11px, 0.95vw, 14px); line-height: 1.4; font-weight: 700; text-transform: uppercase; }
/* título de cada capítulo: só visível no telemóvel (no ecrã grande aparece na caixa fixa) */
.chap-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); margin-top: clamp(24px, 6vh, 72px); padding-top: var(--s6); border-top: 1px solid var(--ink); }
.fact { display: grid; grid-template-columns: var(--label) 1fr; column-gap: var(--gap); align-items: baseline; }
.fact ul { list-style: none; margin: 0; padding: 0; font-size: 11px; line-height: 1.4; font-weight: 700; text-transform: uppercase; color: var(--mute); }
.fact a { text-decoration: none; }
.fact a:hover { color: var(--ink); }
.foot { margin-top: clamp(48px, 10vh, 120px); font-size: 11px; line-height: 1.4; font-weight: 700; text-transform: uppercase; color: var(--mute); }

@media (max-width: 800px) {
  .lead { margin-top: var(--s8); font-size: clamp(22px, 6.6vw, 36px); line-height: 1.08; }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story-l { display: none; }
  .story-r { padding-bottom: 0; }
  .story-r { padding-bottom: 30svh; }
  .chap { min-height: 0; padding: var(--s8) 0; transform: translateY(14px); transition: opacity var(--fade) var(--curve-fade), filter var(--fade) var(--curve-fade), transform .8s cubic-bezier(.16,1,.3,1); }
  .chap.on { transform: none; }
  .chap-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; margin: 0 0 var(--s2); font-stretch: 112%; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
  .facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--s6); }
  .fact { grid-template-columns: 1fr; row-gap: var(--s1); }
}
@media (prefers-reduced-motion: reduce) { .chap { transition: none; } .down svg { animation: none; } }

/* entrada e saída da página */
.down { animation: s-in 0.4s var(--curve-fade) 0.5s both; }
@keyframes s-in { from { opacity: 0; } }
.lead { transition: font-size var(--dur-l) var(--curve), max-width var(--dur-l) var(--curve), font-weight var(--dur-l) var(--curve), line-height var(--dur-l) var(--curve), letter-spacing var(--dur-l) var(--curve), margin-top var(--dur-l) var(--curve); }
.down, .story, .facts, .foot { transition: opacity 0.25s var(--curve-fade); }
html.leaving .down, html.leaving .story, html.leaving .facts, html.leaving .foot { opacity: 0 !important; animation: none; }
/* ao voltar à Home a frase encolhe até ser o subtítulo */
html.leaving .lead { font-size: clamp(12px, 1.35vw, 22px); max-width: 34ch; font-weight: 700; line-height: 1.12; letter-spacing: 0; margin-top: var(--s4); }
@media (prefers-reduced-motion: reduce) { .down { animation: none; } }


@media (max-width: 800px) { html.leaving .lead { font-size: 12px; max-width: 34ch; font-weight: 700; line-height: 1.12; letter-spacing: 0; margin-top: var(--s3); } }
@media (max-width: 800px) { .page { display: flex; flex-direction: column; } }

/* linha de cota: desenha-se quando o capítulo chega ao centro (como uma medição num desenho de arquitetura) */
.chap::before { content: ""; display: block; align-self: stretch; height: 9px; margin-bottom: var(--s4); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat; transform: scaleX(0); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.chap.on::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .chap::before { transform: none; transition: none; } }