/* ============================================
   CARMOS · v3 · PROJEÇÃO
   Letterbox cinematográfico · single screen ·
   logo color-matched · sequência coreografada de revelação.
   ============================================ */

:root {
  --ink:       #07070A;      /* página · profundo */
  --ink-2:     #0E0E12;      /* zona de écran (entre barras) */
  --bar:       #000000;      /* letterbox bars · pretos puros */

  --paper:     #ECE7DA;      /* texto · branco quente (tom de luz projetada) */
  --paper-soft: rgba(236,231,218,0.72);
  --paper-dim:  rgba(236,231,218,0.42);
  --paper-faint:rgba(236,231,218,0.16);
  --rule:       rgba(236,231,218,0.28);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--paper); color: var(--ink); }

@media (pointer: fine) { * { cursor: none; } }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Manrope', -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--paper);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  letter-spacing: 0.01em;
}

a, button { color: inherit; text-decoration: none; font-family: inherit; background: none; border: none; padding: 0; }

/* ===== meta · cantos (sem letterbox · página única cor) ===== */
.meta {
  position: fixed;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.meta-tl { top: 32px; left: 40px; gap: 6px; }
.meta-tr { top: 32px; right: 40px; }
.meta-bl { bottom: 32px; left: 40px; }
.meta-br { bottom: 32px; right: 40px; }

/* paginação · dois dots clicáveis no topo central · indicador universal de página
   substitui o velho link "1/2" textual · feedback visual claro de onde estás */
.pagination {
  position: fixed;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 6px 4px;
}
.pag-dot {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper-faint);
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.pag-dot:hover { background: var(--paper-soft); }
.pag-dot--active {
  background: var(--paper);
  transform: scale(1.35);
}
.pag-dot--active:hover { background: var(--paper); }
/* aro pulsante subtil no dot activo · sinal silencioso de "estás aqui" */
.pag-dot--active::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid var(--paper-faint);
  border-radius: 50%;
  opacity: 0;
  animation: pag-pulse 3.2s ease-out infinite;
}
@keyframes pag-pulse {
  0%   { opacity: 0; transform: scale(0.85); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}

/* seta elegante lateral · linha fina + chevron · indica página seguinte/anterior
   só visível em desktop · em mobile já existe o swipe-hint + gesto */
.nav-arrow {
  position: fixed;
  top: 50%;
  z-index: 18;
  display: flex;
  align-items: center;
  width: 64px;
  height: 14px;
  color: var(--paper-dim);
  transform: translateY(-50%);
  transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-arrow svg { width: 100%; height: 100%; display: block; }
.nav-arrow--next { right: 36px; }
.nav-arrow--prev { left: 36px; }
.nav-arrow:hover { color: var(--paper); }
.nav-arrow--next:hover { transform: translateY(-50%) translateX(8px); }
.nav-arrow--prev:hover { transform: translateY(-50%) translateX(-8px); }

/* respiração subtil · seta oscila ligeiramente · convite passivo (mais lento que pulse) */
@keyframes nav-breathe-next {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
  50%      { transform: translateY(-50%) translateX(3px); opacity: 0.7; }
}
@keyframes nav-breathe-prev {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
  50%      { transform: translateY(-50%) translateX(-3px); opacity: 0.7; }
}
.nav-arrow--next { animation: nav-breathe-next 3.6s ease-in-out infinite; }
.nav-arrow--prev { animation: nav-breathe-prev 3.6s ease-in-out infinite; }
.nav-arrow:hover { animation-play-state: paused; }

/* swipe hint · só visível em mobile · pulsa subtilmente na direcção do gesto */
.swipe-hint {
  display: none;
  position: fixed;
  z-index: 18;
  font-family: 'Manrope', sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--paper-dim);
  pointer-events: none;
}
.swipe-hint--next {
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  animation: swipe-pulse-right 2.6s ease-in-out infinite;
}
.swipe-hint--prev {
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  animation: swipe-pulse-left 2.6s ease-in-out infinite;
}
@keyframes swipe-pulse-right {
  0%, 100% { opacity: 0.35; transform: translateX(calc(-50% - 4px)); }
  50%      { opacity: 1;    transform: translateX(calc(-50% + 6px)); }
}
@keyframes swipe-pulse-left {
  0%, 100% { opacity: 0.35; transform: translateX(calc(-50% + 4px)); }
  50%      { opacity: 1;    transform: translateX(calc(-50% - 6px)); }
}

/* transição de saída de página · fade-out rápido antes de location.href */
body.leaving {
  opacity: 0;
  transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
/* transição de entrada · fade-in suave ao chegar à nova página */
@keyframes page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body { animation: page-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.meta-strong { color: var(--paper); }
.meta-dim { color: var(--paper-dim); }
.meta-sep { color: var(--paper-faint); }
.meta-faint {
  color: var(--paper-faint);
  font-size: 0.85em;
  letter-spacing: 0.24em;
  margin-top: 4px;
}
.meta a {
  position: relative;
  color: var(--paper);
  transition: opacity 0.3s;
}
.meta a::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--paper);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.meta a:hover::after { transform: scaleX(1); transform-origin: left; }

.meta-bl, .meta-br {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.meta-br { align-items: flex-end; }

.lang {
  font: inherit;
  letter-spacing: 0.30em;
  text-transform: uppercase;
}
.lang b { font-weight: 500; color: var(--paper); }

/* meta-br · primeira linha: email + ícone IG lado a lado */
.meta-br-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ícones sociais · só símbolos discretos, alinhados nos meta-br · sem text */
.ig-link, .wa-link {
  display: inline-flex;
  align-items: center;
  color: var(--paper-dim);
  transition: color 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ig-link svg, .wa-link svg {
  display: block;
  width: 13px;
  height: 13px;
}
.ig-link:hover, .wa-link:hover { color: var(--paper); transform: translateY(-1px); }
/* anula o underline do .meta a nos ícones (não pertence) */
.meta .ig-link::after, .meta .wa-link::after { display: none; }

/* ===== stage · área central · sem letterbox · página única cor ===== */
.stage-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  z-index: 5;
}
.stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  z-index: 2;
}

/* logo color-matched · warm-white para combinar com o resto do texto.
   logo menor (cerca de 32% da largura prévia · 'quieto, não dominante'). */
.logo-wrap {
  width: clamp(240px, 28vw, 440px);
  aspect-ratio: 3.2 / 1;
  overflow: hidden;
  position: relative;
  background: var(--ink);
  isolation: isolate;
}
.logo {
  position: absolute;
  left: 50%; top: 50%;
  width: 138%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: block;
  filter: invert(1) grayscale(1) brightness(1.28) contrast(0.98) sepia(0.18) hue-rotate(-12deg);
  mix-blend-mode: lighten;
}

/* rule · linha curta horizontal sob o logo · desenha-se no load */
.rule {
  display: block;
  width: 0;
  height: 1px;
  background: var(--rule);
  margin-top: -8px;
}

/* phrase · estática · sem crossfade · sem rotação */
.phrase {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: 0.005em;
  line-height: 1.3;
  color: var(--paper);
  text-align: center;
}

/* ===== plano arquitectónico em background · sensorialidade subtil ===== */
.bg-plan {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  color: var(--paper);
  opacity: 0.045;
}

/* ===== CTA · em curso, fixo ao centro-baixo ===== */
.cta {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cta-eye {
  font-family: 'Manrope', sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.cta-name {
  font-family: 'Spectral', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.cta-arrow {
  display: inline-block;
  margin-left: 2px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.cta:hover .cta-arrow { transform: translate(4px, -4px); }

/* ===== link "Os factos" · gesto discreto vertical à direita =====
   acesso ao dossier técnico · pequeno, vertical, fora do letterbox
   (na barra inferior · canto vertical-extra-direita) */
.factos-link {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--paper-dim);
  white-space: nowrap;
  transition: color 0.35s, gap 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.factos-tick {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: var(--paper-faint);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.35s;
}
.factos-link:hover {
  color: var(--paper);
  gap: 16px;
}
.factos-link:hover .factos-tick {
  width: 32px;
  background: var(--paper);
}

/* ===== cursor · dot + ring (elástico · padrão v1) =====
   dot segue o rato instantâneo; ring segue com lerp · sensação de banda elástica.
   em hover: dot desaparece, anel transforma-se em pill com texto. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  display: none;
  width: 0; height: 0;
}
@media (pointer: fine) { .cursor { display: block; } }

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 6px; height: 6px;
  background: var(--paper);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10001;
  transition: opacity 0.18s;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid var(--paper-soft);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10000;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s, background 0.25s, color 0.25s;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: transparent;
  white-space: nowrap;
  padding: 0 14px;
  background: transparent;
}
.cursor.hover .cursor-dot { opacity: 0; }
.cursor.hover .cursor-ring {
  width: auto; min-width: 80px;
  height: 32px;
  border-radius: 32px;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ===== sequência de entrada simples (sem letterbox) ===== */

@keyframes logo-in {
  from { opacity: 0; transform: scale(1.04); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
.logo-wrap { animation: logo-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }

@keyframes rule-draw { from { width: 0; } to { width: 56px; } }
.rule { animation: rule-draw 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.3s both; }

@keyframes phrase-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.phrase { animation: phrase-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) 1.8s both; }

@keyframes meta-in { from { opacity: 0; } to { opacity: 1; } }
.meta-tl, .meta-tr { animation: meta-in 1.0s ease-out 0.0s both; }
.meta-bl, .cta, .meta-br { animation: meta-in 1.0s ease-out 0.2s both; }

/* ===== responsive ===== */
@media (max-width: 780px) {
  /* meta · tudo menor para caber bem · mesmas palavras que desktop */
  .meta {
    font-size: 8px;
    letter-spacing: 0.16em;
    gap: 3px;
  }
  .meta-bl, .meta-br { gap: 3px; }

  /* TL · "Promoção residencial · Premium" inteiro · quebra de linha se preciso */
  .meta-tl {
    top: 14px; left: 14px;
    gap: 0;
    max-width: 48%;
    flex-wrap: wrap;
    line-height: 1.4;
  }

  /* TR · clock + PT/EN compactos · sempre visível */
  .meta-tr {
    top: 14px; right: 14px;
    gap: 6px;
    max-width: 50%;
    justify-content: flex-end;
    flex-wrap: wrap;
    line-height: 1.4;
  }

  /* pagination · centrada abaixo do header, dots ligeiramente maiores em mobile */
  .pagination {
    top: 48px;
    gap: 14px;
  }
  .pag-dot { width: 7px; height: 7px; }

  /* swipe hint · activo em mobile · convida o gesto, fica abaixo dos dots */
  .swipe-hint {
    display: block;
    top: 76px;
    font-size: 8px;
    letter-spacing: 0.28em;
  }

  /* setas laterais escondem-se em mobile · swipe-hint + gesto fazem o trabalho */
  .nav-arrow { display: none; }

  /* logo central */
  .stage-wrap { padding: 0 16px; }
  .stage { gap: 22px; }
  .logo-wrap { width: 76vw; }

  /* footer · BL e BR alinhados à MESMA altura · simetria · CTA debaixo */
  .meta-bl {
    bottom: 72px;
    left: 14px;
  }
  .meta-br {
    bottom: 72px;
    right: 14px;
  }
  /* ícones sociais · ligeiramente menores em mobile para alinhar visualmente com o texto */
  .meta-br-row { gap: 9px; }
  .ig-link svg, .wa-link svg { width: 11px; height: 11px; }
  /* compensa o overshoot vertical do glifo · empurra os ícones 0.5px para baixo */
  .ig-link, .wa-link { transform: translateY(0.5px); }

  .cta { bottom: 22px; }
  .cta-name { font-size: 14px; white-space: nowrap; }
  .cta-eye { font-size: 8px; letter-spacing: 0.24em; white-space: nowrap; }

  /* SVG plan · ligeiramente mais subtil em mobile */
  .bg-plan { opacity: 0.03; }

  /* cursor desligado em mobile */
  * { cursor: auto; }
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}