/* ==========================================================
   LORE CREATORS — landing page
   Paleta e fontes do manual de normas. Fundo principal: --cream.
   ========================================================== */

/* ============ VARIÁVEIS ============ */
:root {
  --ink:    #011140;
  --deep:   #023059;
  --brand:  #293379;
  --muted:  #5D768C;
  --cream:  #F2EFE9;
  --black:  #0a0a0a;

  --pad-x: clamp(1.25rem, 5vw, 5rem);   /* margem lateral comum */
  --pad-y: clamp(3.5rem, 8vh, 6.5rem);  /* ar vertical entre secções */
}

/* ============ FONTES ============
   Variable fonts convertidas para WOFF2 a partir dos TTF do projeto. */
@font-face {
  font-family: "Roboto Flex";
  src: url("fonts/roboto-flex.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-display: swap;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;          /* as âncoras não ficam sob o header fixo */
}

/* HIERARQUIA DE TEXTO (aplicada em todo o site):
   títulos grandes → --ink (ou --cream em fundo escuro)
   corpo principal → --ink a 92%
   secundário / legendas / labels → --muted
   créditos técnicos → --muted a 70%
   links e acentos → --brand */
body {
  background: var(--cream);           /* nunca branco puro */
  color: rgba(1, 17, 64, 0.92);       /* --ink a 92% — corpo principal */
  font-family: "Roboto Flex", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

section { position: relative; padding: var(--pad-y) var(--pad-x); }

/* Labels de secção: Space Grotesk pequeno, uppercase */
.label {
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* ============ ACESSIBILIDADE ============ */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  font-family: "Space Grotesk", monospace;
}
.skip-link:focus { left: 0; }

/* ============ GRÃO ============
   SVG noise inline, multiply, quase invisível. Toque analógico. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ HEADER ============
   Barra fixa: acompanha o scroll em todos os ecrãs. Fundo --cream com
   blur, como a tabbar — o símbolo azul lê-se em qualquer secção. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem var(--pad-x);
  background: rgba(242, 239, 233, 0.85);  /* --cream com transparência */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(1, 17, 64, 0.1);
}
.site-header .logo { height: 30px; width: auto; display: block; }

/* Toggle de língua PT | EN — texto, sem bandeiras */
.lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: rgba(93, 118, 140, 0.5);     /* o separador | */
}
.lang button {
  border: 0;
  background: none;
  padding: 0.25rem;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  color: var(--muted);                /* língua inativa */
}
.lang button.ativa { color: var(--brand); }
.lang button:hover, .lang button:focus-visible { color: var(--brand); }

/* ============ MARCA-D'ÁGUA LC ============
   Símbolo em escala grande, semi-transparente, cortado na borda.
   Assinatura visual, não decoração. Parallax leve via JS. */
.lc-mark {
  position: absolute;
  width: clamp(500px, 55vw, 800px);
  height: auto;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  will-change: transform;
}
.lc-mark--sobre {                      /* atrás do bloco "Quem sou", cortada à esquerda */
  bottom: -10%;
  left: -22%;
}

/* ============ HERO ============
   Foto de bastidores em fundo + véu --ink para contraste.
   Tem de caber num iPhone SE (375×667) sem scroll. */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;             /* alinhado à esquerda */
  overflow: hidden;
  padding-top: 5rem;
}
.hero > * { position: relative; z-index: 2; }

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.05);  /* aproxima a foto do registo editorial */
}
/* Véu escuro plano (sem gradientes) por cima da foto */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(1, 17, 64, 0.68);       /* --ink com transparência */
}

.hero-title {
  font-size: clamp(3rem, 11vw, 9rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-variation-settings: 'wght' 800, 'wdth' 125;
  animation: respirar 8s ease-in-out infinite alternate;
  max-width: 12ch;
}

/* O peso "respira" entre 700 e 900 — variable font a trabalhar */
@keyframes respirar {
  from { font-variation-settings: 'wght' 700, 'wdth' 125; }
  to   { font-variation-settings: 'wght' 900, 'wdth' 125; }
}

.hero-sub {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  color: rgba(242, 239, 233, 0.8);          /* --cream esbatido */
  max-width: 34ch;
}

/* Botão único — Space Grotesk, retangular, sem pill, sem ícone */
.btn {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 0.9rem 2.25rem;
  background: var(--brand);
  color: var(--cream);
  text-decoration: none;
  font-family: "Space Grotesk", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn:hover, .btn:focus-visible { background: var(--deep); }

/* ============ TRABALHO ============ */
.trabalho { background: var(--cream); }

.case {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* Vídeo YouTube com facade: até ao clique só existe o poster local.
   O iframe (youtube-nocookie) é injetado pelo script.js. */
.video {
  aspect-ratio: 16 / 9;
  background: var(--black);
}
.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* Facade tipográfico: bloco --ink com o título do filme e o botão.
   Sem poster de imagem — o hero já mostra os bastidores desta rodagem. */
.video-play {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
}
.video-play-titulo {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  color: var(--cream);
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
/* Triângulo de reprodução sobre um quadrado --brand — sem ícones genéricos */
.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: var(--brand);
}
.video-play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-left: 20px solid var(--cream);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}
.video-play:hover .video-play-icon,
.video-play:focus-visible .video-play-icon { background: var(--ink); }
.case-caption {
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 32ch;
}
/* Nome do cliente destacado da descrição: --ink pesado vs --muted */
.case-client {
  color: var(--ink);
  font-variation-settings: 'wght' 800;
  margin-bottom: 0.25rem;
}
.case-credit {
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 0.75rem;
  opacity: 0.7;                        /* crédito técnico: --muted a 70% */
}
/* Nota RGPD discreta sobre o carregamento do YouTube */
.case-nota {
  font-size: 0.75rem;
  margin-top: 1.5rem;
  opacity: 0.7;
}

/* Desktop: vídeo 85% da largura, legenda ao lado */
@media (min-width: 900px) {
  .case {
    grid-template-columns: 85% 1fr;
    align-items: end;
    gap: 2rem;
  }
}

/* ============ FOTOGRAFIA ============
   Introdução tipográfica + carrossel. Separa visualmente o portfólio
   fotográfico do case de vídeo. */
.foto-titulo {
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variation-settings: 'wght' 750, 'wdth' 115;
  white-space: pre-line;               /* respeita a quebra de linha do texto */
  margin-bottom: 1rem;
}
/* Legenda única do evento — substitui as legendas repetidas por foto */
.foto-evento {
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.75rem;
}

/* Carrossel horizontal: scroll-snap nativo, sem JS. Altura fixa; a
   largura de cada foto segue o seu formato. A .destaque é ~25% maior
   e as restantes alinham por baixo — hierarquia e ritmo. */
.carrossel {
  display: flex;
  align-items: flex-end;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* deixa as fotos sangrar até à borda do ecrã */
  margin-inline: calc(-1 * var(--pad-x));
  padding-inline: var(--pad-x);
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
.carrossel figure {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.carrossel img {
  height: clamp(240px, 38vh, 380px);
  width: auto;
  display: block;
  /* Escala dinâmica (script.js): a foto ao centro do ecrã fica a 1,
     as das bordas descem até 0.82. Cresce a partir da base. */
  transform-origin: bottom center;
  will-change: transform;
}

/* Seta discreta; some ao primeiro scroll (classe .escondida via JS) */
.carrossel-dica {
  font-size: 1.25rem;
  color: var(--muted);
  margin-top: 0.5rem;
  transition: opacity 0.4s ease;
  animation: acenar 1.4s ease-in-out infinite alternate;
}
.carrossel-dica.escondida { opacity: 0; }
@keyframes acenar {
  from { transform: translateX(0); }
  to   { transform: translateX(8px); }
}

/* ============ O QUE FAÇO ============
   Bloco deslocado à direita. Três linhas grandes, sem cards. */
.faco .label { margin-left: 0; }
.faco-linhas {
  margin-left: auto;
  max-width: 22ch;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.faco-linhas p {
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  line-height: 1.25;
  font-variation-settings: 'wght' 550, 'wdth' 110;
}
@media (min-width: 900px) {
  .faco-linhas { max-width: 55%; }
}

/* Linha divisória de acento — único uso de --brand fora dos CTAs */
.faco { border-top: 2px solid var(--brand); margin: 0 var(--pad-x); padding-left: 0; padding-right: 0; }

/* Transição visual entre "O que faço" e "Quem sou" — quebra o vazio */
.divisoria {
  border: 0;
  border-top: 1px solid rgba(93, 118, 140, 0.3);  /* --muted a 30% */
  width: 40%;
  margin: 0 0 0 var(--pad-x);
}

/* CTA no fim da secção, alinhado à direita como o bloco de texto */
.faco-cta {
  display: table;                      /* encolhe à medida do conteúdo */
  margin-left: auto;
}

/* O intervalo entre "O que faço" e "Quem sou" é fixo e curto —
   ali o vazio pesava mais do que respirava */
.faco { padding-bottom: 1.5rem; }
.sobre { padding-top: 1.5rem; }

/* ============ SOBRE ============ */
.sobre { overflow: hidden; }
.sobre > * { position: relative; z-index: 1; }
.sobre > .lc-mark { z-index: 0; }

.sobre-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.sobre-texto p {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  max-width: 46ch;
}
.sobre-texto p + p { margin-top: 1.25rem; }

/* Retrato a cores, sem filtro */
.retrato {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;                         /* mobile: largura toda menos padding */
  order: -1;                           /* mobile: foto por cima */
}
@media (min-width: 900px) {
  /* Foto a ~42% da largura (coluna 1fr de 1.4fr+1fr), sem cap */
  .sobre-grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .retrato { order: 0; justify-self: end; }  /* desktop: foto à direita */
}

/* ============ CONTACTO ============
   Troca de fundo para --ink. Contraste editorial forte. */
.contacto {
  background: var(--ink);
  color: var(--cream);
  text-align: left;
}
.contacto h2 {
  font-size: clamp(2.75rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: 'wght' 800, 'wdth' 120;
}
.contacto-sub {
  margin-top: 1.5rem;
  color: var(--muted);
  max-width: 38ch;
}

/* Email como ação clara: label pequeno + endereço grande + seta que
   se desloca no hover. Não é frase decorativa, é um link. */
.email {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 2rem;
  text-decoration: none;
  color: var(--cream);
}
.email-label {
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.email-endereco {
  font-size: clamp(1.25rem, 4.5vw, 3rem);
  font-variation-settings: 'wght' 600, 'wdth' 105;
  border-bottom: 3px solid transparent;
  word-break: break-all;               /* não rebenta no iPhone SE */
}
.email-seta {
  font-size: clamp(1.25rem, 3vw, 2rem);
  transition: transform 0.25s ease;
}
.email:hover .email-endereco,
.email:focus-visible .email-endereco { border-bottom-color: var(--brand); }
.email:hover .email-seta,
.email:focus-visible .email-seta { transform: translateX(8px); }

.redes {
  margin-top: 2.5rem;
  font-family: "Space Grotesk", monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.redes p + p { margin-top: 0.5rem; }
.redes a { color: var(--cream); text-decoration: none; }
.redes a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Seta pequena em cada rede — mesmo padrão visual do email */
.redes .seta {
  display: inline-block;
  margin-left: 0.4rem;
  transition: transform 0.25s ease;
}
.redes a:hover .seta { transform: translateX(4px); }

/* ============ FOOTER ============
   Três blocos: logo · mininav · copyright. Mobile: coluna centrada. */
.site-footer {
  background: var(--ink);
  color: var(--muted);
  padding: 3rem var(--pad-x) 7rem;     /* espaço extra em baixo para a tabbar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
.site-footer .logo { height: 28px; width: auto; }

.footer-nav {
  display: flex;
  gap: 1.75rem;
}
.footer-nav a {
  color: rgba(242, 239, 233, 0.85);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.footer-nav a:hover, .footer-nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (min-width: 900px) {
  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 3rem;              /* sem tabbar em desktop */
  }
}

/* ============ TABBAR MOBILE ============ */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  background: rgba(242, 239, 233, 0.85);  /* --cream com transparência */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(1, 17, 64, 0.1);
}
.tabbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom));
  color: var(--muted);
  text-decoration: none;
  font-family: "Space Grotesk", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tabbar a.ativa { color: var(--brand); }
.tabbar svg { width: 22px; height: 22px; }

@media (min-width: 900px) {
  .tabbar { display: none; }
}

/* ============ FADE-IN AO SCROLL ============ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visivel {
  opacity: 1;
  transform: none;
}

/* ============ MOVIMENTO REDUZIDO ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .carrossel-dica { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lc-mark { transform: none !important; }
  .email-seta, .redes .seta { transition: none; }
}