/* ============================================
   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; }

/* link discreto para a página manifesto · italic centrado no topo */
.manifesto-link {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-family: 'Spectral', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--paper-dim);
  transition: color 0.35s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.manifesto-link:hover {
  color: var(--paper);
  transform: translateX(-50%) translateY(1px);
}
.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;
}

/* Instagram · ícone só (sem texto), discreto, alinhado nos meta-br */
.ig-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 {
  display: block;
  width: 13px;
  height: 13px;
}
.ig-link:hover { color: var(--paper); transform: translateY(-1px); }
/* anula o underline do .meta a no ícone (não pertence) */
.meta .ig-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;
  }

  /* manifesto link · centrado abaixo do header */
  .manifesto-link {
    top: 52px;
    font-size: 11px;
  }

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

  /* footer · BL stacked acima de BR · CTA centrada · todas as palavras visíveis */
  .meta-bl {
    bottom: 118px;
    left: 14px;
  }
  .meta-br {
    bottom: 72px;
    right: 14px;
  }

  .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; }
}