/**
 * ─────────────────────────────────────────────────────────────
 * Ficheiro: css/main.css
 * Marco Mendes — folha de estilos principal (monocromática)
 *
 * Dependências:
 *   - Google Fonts "Space Grotesk" (importada em includes/head.php)
 *   - Nenhuma framework CSS (vanilla puro, cascata deliberada)
 *
 * Utilizado por: todas as páginas do site
 *
 * Filosofia:
 *   - Paleta P&B total com 1 único tom de cinzento para hairlines
 *   - Tipografia como protagonista (Space Grotesk)
 *   - Grelha em viewport units (vh/vw) para efeito "fullscreen"
 *   - View Transitions API usadas para o efeito "aproximar"
 *     entre o índice e o detalhe de projecto
 * ─────────────────────────────────────────────────────────────
 */

/* ═════════════════════════ 1. RESET MÍNIMO ═════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body            { margin: 0; padding: 0; }
img, picture, video   { display: block; max-width: 100%; height: auto; }
button                { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a                     { color: inherit; text-decoration: none; }
ol, ul                { margin: 0; padding: 0; list-style: none; }
dl, dd                { margin: 0; }
figure                { margin: 0; }


/* ═════════════════════════ 2. TOKENS DE DESIGN ═════════════════════ */
:root {
    /* Paleta estritamente monocromática */
    --c-bg:          #ffffff;   /* papel  */
    --c-fg:          #0a0a0a;   /* tinta  */
    --c-fg-soft:     #6a6a6a;   /* meta, hairlines suaves */
    --c-hair:        #e5e5e5;   /* linhas finas */
    --c-dark-bg:     #0a0a0a;   /* fundo escuro (overlay nav, hero) */
    --c-dark-fg:     #ffffff;

    /* Tipografia — uma única família, 5 pesos */
    --f-sans:        'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

    /* Escala tipográfica (clamp para responsivo fluido) */
    --fs-micro:      clamp(0.7rem,  0.66rem + 0.2vw, 0.78rem);
    --fs-small:      clamp(0.82rem, 0.78rem + 0.2vw, 0.9rem);
    --fs-body:       clamp(1rem,    0.95rem + 0.2vw, 1.1rem);
    --fs-lede:       clamp(1.25rem, 1.1rem + 0.8vw, 1.8rem);
    --fs-h3:         clamp(1.5rem,  1.2rem + 1.2vw, 2.2rem);
    --fs-h2:         clamp(2.5rem,  2rem + 2.5vw, 4.5rem);
    --fs-h1:         clamp(4rem,    3rem + 6vw,   10rem);

    /* Ritmo vertical/horizontal baseado em 8px */
    --gap-xs:  4px;
    --gap-s:   8px;
    --gap-m:   16px;
    --gap-l:   32px;
    --gap-xl:  64px;
    --gap-xxl: 96px;

    /* Transições */
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:    180ms;
    --dur-med:     360ms;
    --dur-slow:    600ms;

    /* Chrome bar heights */
    --nav-h: 72px;
}

/* ═════════════════════════ 3. BASE ═════════════════════════════════ */
html {
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.45;
    color: var(--c-fg);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
}

/* Corrige overflow quando ficha de projecto está com overlay de scroll horizontal */
body.page-project { overflow-x: hidden; }

::selection { background: var(--c-fg); color: var(--c-bg); }


/* ═════════════════════════ 4. NAV SUPERIOR + OVERLAY ═══════════════ */
.site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gap-l);
    /* Sem fundo — navega sobre o conteúdo; adapta texto via mix-blend */
    mix-blend-mode: difference;
    color: #fff; /* mix-blend-mode difference converte para contraste */
    pointer-events: none; /* permite interacção abaixo; filhos reactivam */
}
.site-nav > * { pointer-events: auto; }

/* Logotipo empilhado: "Marco Mendes" em peso/tracking de título
   ( -0.03em, idêntico ao .project-title e .project-title-hero ),
   "Arquitecto" em micro-label por baixo — micro-tipografia com
   letter-spacing wide e uppercase, paralelo ao .nav-foot-label. */
.site-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    line-height: 1;
}
.logo-name {
    font-size: var(--fs-body);
    font-weight: 500;
    letter-spacing: -0.03em;
}
.logo-role {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Botão ÍNDICE/FECHAR */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-m);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
/* Duas linhas finas; em estado fechado formam um "hambúrguer" de 2
   traços paralelos; em estado aberto viajam para o centro e rodam
   45°/-45° para formar um X a sério. */
.nav-toggle-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 14px;
}
.nav-toggle-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle-icon span:nth-child(1) { top: 4px; }
.nav-toggle-icon span:nth-child(2) { top: 10px; }
/* Estado aberto: ambas migram para o centro e rodam 45° — X limpo */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span { top: 50%; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }

/* Overlay fullscreen de navegação */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--nav-h) + var(--gap-xl)) var(--gap-l) var(--gap-l);
    background: var(--c-dark-bg);
    color: var(--c-dark-fg);
    /* Escondido por omissão — animado via clip-path para não afectar layout */
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-med) var(--ease);
    pointer-events: none;
}
.nav-overlay[aria-hidden="false"] {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
}

.nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
}
.nav-list a {
    display: flex;
    align-items: baseline;
    gap: var(--gap-l);
    font-size: var(--fs-h1);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease);
}
.nav-list .nav-num {
    font-size: var(--fs-small);
    font-weight: 400;
    opacity: 0.4;
    letter-spacing: 0.05em;
}
.nav-list a:hover     { transform: translateX(var(--gap-m)); }
.nav-list a:not(:hover) { opacity: 0.65; }
.nav-list li:hover ~ li a { opacity: 0.35; }

.nav-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-l);
    font-size: var(--fs-small);
    padding-top: var(--gap-l);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.nav-foot address { font-style: normal; opacity: 0.8; }
.nav-foot-label {
    display: block;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
    margin-bottom: var(--gap-s);
}
.nav-foot a { border-bottom: 1px solid transparent; transition: border-color var(--dur-fast); }
.nav-foot a:hover { border-color: currentColor; }


/* ═════════════════════════ 5. ÍNDICE (vertical) ═════════════════════ */
.projects-index {
    /* Cada .project-row = 100vh, portanto o <main> é apenas contentor */
    display: block;
}

.project-row {
    position: relative;
    height: 100vh;
    overflow: hidden;
    border-bottom: 1px solid var(--c-hair);
}
.project-row:last-child { border-bottom: 0; }

.project-link {
    display: grid;
    grid-template-columns: 38% 62%;
    height: 100%;
    width: 100%;
    align-items: stretch;
}

/* Coluna de metadados */
.project-meta {
    padding: calc(var(--nav-h) + var(--gap-l)) var(--gap-l) var(--gap-l);
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
    background: var(--c-bg);
}
.project-num {
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.55;
}
/* Bloco que agrupa título+dados+CTA; margin-top:auto empurra-o
   para o fundo da coluna, deixando apenas o N.º no topo */
.meta-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
}
.project-title {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.03em;
    margin: 0;
    /* Alinhamento à esquerda por defeito (text-align: left).
       Era aqui que estava o bug: align-self:flex-end empurrava
       a caixa inteira para o lado direito (cross-axis num flex column). */
}
.project-data {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-m) var(--gap-l);
    padding-top: var(--gap-l);
    border-top: 1px solid var(--c-hair);
}
.project-data dt {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-fg-soft);
    margin-bottom: var(--gap-xs);
}
.project-data dd {
    font-size: var(--fs-body);
    font-weight: 500;
}
.project-cta {
    font-size: var(--fs-small);
    letter-spacing: 0.03em;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.project-row:hover .project-cta { opacity: 1; transform: translateX(0); }

/* Coluna da imagem */
.project-cover {
    position: relative;
    overflow: hidden;
    background: #111;
}
.project-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 800ms var(--ease), filter var(--dur-med) var(--ease);
    filter: grayscale(1) contrast(1.02);
}
.project-row:hover .project-cover img {
    transform: scale(1.03);
    filter: grayscale(0.85) contrast(1.04);
}


/* ═════════════════════════ 6. DETALHE DE PROJECTO ══════════════════ */
.page-project { background: var(--c-dark-bg); color: var(--c-dark-fg); }
/* Em página de projecto o logo é SEMPRE branco puro —
   override do mix-blend-mode base do .site-nav. */
.page-project .site-nav { mix-blend-mode: normal; color: #ffffff; }

/* Em página de projecto, o botão "Índice" da barra superior é
   substituído pelo botão "Fechar" (abaixo) — evita 2 botões
   fixed top-right a competir pelo clique do utilizador. */
.page-project .nav-toggle { display: none; }

/* Botão de fechar: estilo idêntico ao .nav-toggle em estado aberto
   (texto "Fechar" + duas linhas cruzadas em X), com mix-blend-mode
   para se adaptar a qualquer fundo. Substitui o top-right do
   nav-toggle — por isso .nav-toggle fica hidden em .page-project. */
.project-close {
    position: fixed;
    top: 0;
    right: 0;
    height: var(--nav-h);
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-m);
    padding: 0 var(--gap-l);
    font-size: var(--fs-small);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    mix-blend-mode: difference;
    color: #fff;
}
/* Ícone: X "a sério" — duas linhas sobrepostas no centro,
   cruzadas a 45°. Ambas posicionadas `top: 50%` e centradas
   com translateY(-50%) antes de rotar. */
.project-close-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}
.project-close-icon span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform var(--dur-fast) var(--ease);
}
.project-close-icon span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
.project-close-icon span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }
/* Hover: inverte sentido das diagonais — micro-vivacidade */
.project-close:hover .project-close-icon span:nth-child(1) { transform: translateY(-50%) rotate(-45deg); }
.project-close:hover .project-close-icon span:nth-child(2) { transform: translateY(-50%) rotate(45deg); }

.project-detail {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Hero fullscreen — cover reaproveitado */
.project-hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.project-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.2) brightness(0.85);
}
.project-hero-overlay {
    position: absolute;
    left: var(--gap-l);
    bottom: var(--gap-l);
    right: var(--gap-l);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--gap-s);
}
.project-hero-overlay .project-num { opacity: 0.8; }
.project-title-hero {
    font-size: var(--fs-h1);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-weight: 400;
    margin: 0;
    max-width: 18ch;
}

/* Scroller horizontal com os painéis (info, imagens, próximo) */
.project-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(90vw, 800px), auto);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 0;
    background: var(--c-dark-bg);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.project-scroller::-webkit-scrollbar { height: 6px; }
.project-scroller::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

.scroll-panel {
    scroll-snap-align: start;
    padding: var(--gap-xl) var(--gap-l);
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.scroll-panel:last-child { border-right: 0; }

/* Painel 1: metadados + descrição, em coluna de leitura */
.panel-info { width: min(90vw, 720px); gap: var(--gap-xl); }
.project-data-full {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-m) var(--gap-l);
    padding-bottom: var(--gap-l);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.project-data-full dt {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
    margin-bottom: var(--gap-xs);
}
.project-data-full dd { font-size: var(--fs-body); }
.project-description p {
    font-size: var(--fs-lede);
    line-height: 1.5;
    font-weight: 300;
    max-width: 40ch;
}
.descr-label {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
    margin: 0 0 var(--gap-m);
    font-weight: 400;
}

/* Painéis 2..N: uma imagem grande + caption */
.panel-image {
    width: auto;
    padding: var(--gap-l);
}
.panel-image img {
    height: calc(90vh - var(--gap-xl));
    width: auto;
    max-width: 80vw;
    object-fit: cover;
    filter: grayscale(0.2);
}
.panel-image figcaption {
    margin-top: var(--gap-m);
    font-size: var(--fs-small);
    opacity: 0.6;
    max-width: 60ch;
}

/* Painel final: próximo projecto */
.panel-next {
    width: min(90vw, 720px);
    gap: var(--gap-m);
    justify-content: center;
    align-items: flex-start;
}
.next-label {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
}
.next-link {
    display: flex;
    align-items: baseline;
    gap: var(--gap-l);
    font-size: var(--fs-h2);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1;
    transition: transform var(--dur-med) var(--ease);
}
.next-link:hover { transform: translateX(var(--gap-m)); }
.next-num  { font-size: var(--fs-small); opacity: 0.5; }
.next-arrow { font-size: var(--fs-h3); transition: transform var(--dur-fast) var(--ease); }
.next-link:hover .next-arrow { transform: translateX(var(--gap-m)); }


/* ═════════════════════════ 7. SOBRE ════════════════════════════════ */
.about-main { padding-top: calc(var(--nav-h) + var(--gap-xl)); padding-bottom: var(--gap-xxl); }
.about-main > section { padding: var(--gap-xxl) var(--gap-l); border-top: 1px solid var(--c-hair); }
.about-main > section:first-child { border-top: 0; }

.section-num {
    display: block;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.55;
    margin-bottom: var(--gap-l);
}

.manifesto-text {
    font-size: var(--fs-h3);
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 24ch;
    margin: 0;
}

.bio-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--gap-xl);
}
.bio-title {
    font-size: var(--fs-h2);
    line-height: 0.95;
    font-weight: 400;
    letter-spacing: -0.03em;
    margin: 0;
}
.bio-body p {
    font-size: var(--fs-body);
    max-width: 60ch;
    margin: 0 0 var(--gap-m);
}

.awards-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
    max-width: 840px;
}
.awards-list li {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: var(--gap-l);
    padding: var(--gap-m) 0;
    border-top: 1px solid var(--c-hair);
}
.awards-list li:last-child { border-bottom: 1px solid var(--c-hair); }
.award-year  { font-weight: 500; opacity: 0.65; }
.award-title { font-weight: 500; }
.award-ctx   { opacity: 0.65; }


/* ═════════════════════════ 8. CONTACTO ═════════════════════════════ */
.contact-main {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--gap-xl);
    padding: calc(var(--nav-h) + var(--gap-xxl)) var(--gap-l) var(--gap-xxl);
    min-height: 100vh;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-l);
    border-right: 1px solid var(--c-hair);
    padding-right: var(--gap-l);
}
.info-block address { font-style: normal; }
.info-label {
    display: block;
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-fg-soft);
    margin-bottom: var(--gap-xs);
}
.info-block a {
    border-bottom: 1px solid var(--c-hair);
    transition: border-color var(--dur-fast);
}
.info-block a:hover { border-color: var(--c-fg); }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-m);
    max-width: 640px;
}
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    border-bottom: 1px solid var(--c-hair);
    padding: var(--gap-s) 0;
}
.form-row label {
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-fg-soft);
}
.form-row input,
.form-row select,
.form-row textarea {
    background: transparent;
    border: 0;
    font: inherit;
    font-size: var(--fs-body);
    color: var(--c-fg);
    padding: var(--gap-xs) 0;
}
.form-row textarea { resize: vertical; min-height: 120px; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus { outline: none; }
.form-row:focus-within  { border-bottom-color: var(--c-fg); }

.form-submit {
    margin-top: var(--gap-m);
    display: inline-flex;
    align-items: center;
    gap: var(--gap-s);
    align-self: flex-start;
    padding: var(--gap-s) var(--gap-l);
    border: 1px solid var(--c-fg);
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.form-submit:hover {
    background: var(--c-fg);
    color: var(--c-bg);
}
.submit-arrow { transition: transform var(--dur-fast) var(--ease); }
.form-submit:hover .submit-arrow { transform: translateX(4px); }


/* ═════════════════════════ 9. 404 ══════════════════════════════════ */
.page-404-main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-m);
    padding: var(--gap-l);
}
.page-404-main h1 {
    font-size: clamp(8rem, 20vw, 20rem);
    margin: 0;
    letter-spacing: -0.05em;
    font-weight: 300;
}
.link-arrow {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}


/* ═════════════════════════ 9.5 SCROLL INDICATORS ═══════════════════
   Sem fundos — apenas traços e texto com mix-blend-mode: difference.
   Contrato aceite: em tons cinzentos médios (50%) a legibilidade
   cai; em troca preservamos a estética limpa, sem pílulas.
   Texto reage sempre ao fundo (branco sobre escuro, escuro sobre claro).
   ─────────────────────────────────────────────────────────────── */

/* ─── 9.5a · Indicador vertical do índice (dashes à direita) ──── */
.scroll-indicator-v {
    position: fixed;
    right: var(--gap-l);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    mix-blend-mode: difference;
    color: #fff;
    pointer-events: none;
}
.scroll-indicator-v ol {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-end;
}
.scroll-indicator-v li { pointer-events: auto; }
.scroll-indicator-v a {
    position: relative;
    display: flex;
    align-items: center;
    height: 12px;            /* hit area confortável */
}
/* Traço fino — largura reage ao estado */
.scroll-indicator-v a::after {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    transition: width var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}
.scroll-indicator-v a.is-active::after,
.scroll-indicator-v a:hover::after {
    width: 44px;
    opacity: 1;
}
/* Label só aparece no activo (revelado à esquerda do traço) */
.scroll-indicator-v a span {
    position: absolute;
    right: 52px;
    font-size: 10px;
    letter-spacing: 0.14em;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
    white-space: nowrap;
    text-transform: uppercase;
    font-weight: 500;
}
.scroll-indicator-v a.is-active span {
    opacity: 1;
    transform: translateX(0);
}

/* ─── 9.5b · Barra de progresso horizontal (detalhe projecto) ───
   Apenas a barra branca, sem track — cresce da esquerda para
   a direita. mix-blend-mode garante contraste sobre qualquer fundo. */
.scroll-progress {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    z-index: 40;
    pointer-events: none;
    mix-blend-mode: difference;
}
.scroll-progress-bar {
    height: 100%;
    width: 0;
    background: #fff;
    transition: width 80ms linear;
}

/* ─── 9.5c · Contador de painel (detalhe projecto) ─────────────
   Micro-tipografia, sem fundo, mix-blend-mode para contraste. */
.scroll-counter {
    position: fixed;
    left: var(--gap-l);
    bottom: var(--gap-m);
    z-index: 40;
    mix-blend-mode: difference;
    color: #fff;
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.scroll-counter .sc-sep { opacity: 0.45; margin: 0 4px; }


/* ═════════════════════════ 9.6 HINTS DE NAVEGAÇÃO ══════════════════
   Indicações subtis só em páginas de projecto:
   (a) no hero, uma linha vertical que pulsa → descer
   (b) setas laterais fixas para navegar a galeria
   Ambas com mix-blend-mode: difference, sem fundo, sem caixa.
   ─────────────────────────────────────────────────────────────── */

/* ─── 9.6a · Hint "descer" no hero ─────────────────────────────
   Seta "↓" na mesma linguagem das setas da galeria: --fs-h3,
   weight 300, mix-blend-mode: difference. Bounce subtil em loop.
   Fade-in controlado por transição (opacidade), bounce pela
   animação (só transform) — os dois não colidem. */
.hero-hint {
    position: absolute;
    left: 50%;
    bottom: var(--gap-l);
    z-index: 5;
    color: #fff;
    mix-blend-mode: difference;
    font-size: var(--fs-h3);
    font-weight: 300;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms var(--ease);
    animation: hero-arrow-bounce 2s ease-in-out infinite;
}
.hero-hint.is-ready  { opacity: 0.65; }
.hero-hint.is-hidden { opacity: 0 !important; }

@keyframes hero-arrow-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* ─── 9.6b · Setas laterais de navegação da galeria ────────────── */
.gallery-arrows {
    position: fixed;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    pointer-events: none;    /* filhos reactivam */
    opacity: 0;
    transition: opacity 400ms var(--ease);
    mix-blend-mode: difference;
    color: #fff;
}
.gallery-arrows.is-visible { opacity: 1; }

.gallery-arrow {
    position: absolute;
    top: 0;
    pointer-events: auto;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 14px 20px;
    font-size: var(--fs-h3);   /* mesmo tamanho da seta do "próximo projecto" */
    font-weight: 300;
    line-height: 1;
    opacity: 0.65;
    transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gallery-arrow:hover { opacity: 1; }
.gallery-arrow-prev        { left: var(--gap-m); }
.gallery-arrow-prev:hover  { transform: translateX(-3px); }
.gallery-arrow-next        { right: var(--gap-m); }
.gallery-arrow-next:hover  { transform: translateX(3px); }
.gallery-arrow[disabled]   { opacity: 0.15; cursor: default; transform: none; }


/* ═════════════════════════ 10. VIEW TRANSITIONS ════════════════════ */
/* Quando o browser suporta, a navegação entre index↔project usa
   um "morph" da imagem cover e do título. Names estão inline (PHP). */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--dur-slow);
    animation-timing-function: var(--ease);
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}


/* ═════════════════════════ 11. RESPONSIVE ══════════════════════════ */
@media (max-width: 900px) {
    :root { --nav-h: 56px; }

    /* Indicadores compactam em mobile */
    .scroll-indicator-v { right: var(--gap-s); }
    .scroll-indicator-v a::after { width: 16px; }
    .scroll-indicator-v a.is-active::after,
    .scroll-indicator-v a:hover::after { width: 28px; }
    .scroll-indicator-v a span { display: none; }
    .scroll-counter { left: var(--gap-m); font-size: 9px; }

    /* Setas da galeria em mobile: encostadas, tamanho herdado do clamp */
    .gallery-arrow       { padding: 10px 14px; }
    .gallery-arrow-prev  { left: var(--gap-s); }
    .gallery-arrow-next  { right: var(--gap-s); }
    .hero-hint           { bottom: var(--gap-m); }

    /* Índice: imagem passa a ficar por baixo dos metadados */
    .project-link {
        grid-template-columns: 1fr;
        grid-template-rows: auto 60vh;
    }
    .project-meta { padding: calc(var(--nav-h) + var(--gap-m)) var(--gap-m) var(--gap-m); gap: var(--gap-m); }
    .project-title { font-size: clamp(2.2rem, 9vw, 4rem); }
    .project-row { height: auto; min-height: 90vh; }

    /* Nav overlay — rodapé em coluna */
    .nav-foot { grid-template-columns: 1fr; gap: var(--gap-m); }
    .nav-list a { font-size: clamp(3rem, 14vw, 6rem); }

    /* Contacto: uma coluna */
    .contact-main { grid-template-columns: 1fr; gap: var(--gap-l); padding: calc(var(--nav-h) + var(--gap-xl)) var(--gap-m) var(--gap-xl); }
    .contact-info { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--c-hair); padding-bottom: var(--gap-l); }

    /* Sobre: biografia em coluna única */
    .bio-grid { grid-template-columns: 1fr; gap: var(--gap-m); }
    .about-main > section { padding: var(--gap-xl) var(--gap-m); }

    /* Hero do projecto: título menor */
    .project-title-hero { font-size: clamp(2.5rem, 14vw, 5rem); }

    /* Prémios: stack */
    .awards-list li { grid-template-columns: 1fr; gap: var(--gap-xs); }
}