/* ---- Fonts ---- */
/* Canela = títulos (arquivo real, tem acentuação PT); Urbanist = texto corrido */
@font-face {
  font-family: "Canela";
  src: url("fonts/Canela-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("fonts/urbanist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* alias: onde havia NeueHaas agora usa Urbanist */
@font-face {
  font-family: "NeueHaas";
  src: url("fonts/urbanist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---- Palette (invertida: verde no fundo, resto claro) ---- */
:root {
  --bg: #8a8d4b;          /* Pantone 617C — verde-oliva agora no FUNDO */
  --ink: #f0eee1;         /* creme claro — texto principal */
  --muted: #dedcc9;       /* creme levemente apagado — secundário/hierarquia */
  --brown: #3d2400;       /* Irish Coffee — SÓ nas descrições */
  --logo: #363a12;        /* verde escuro — iniciais CE */
  --on-photo: #f0eee1;    /* texto claro sobre fotos */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* html na cor da pagina (a barra de baixo do Safari iOS amostra esse fundo).
   Transicao entre paginas e coberta pelo #pageCurtain, entao nao precisa creme. */
html { scroll-behavior: auto; background: var(--bg); }        /* verde: home/sobre/contato */
html.proj { background: #dbe3e8; }                            /* azul: pagina de projeto */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Urbanist", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;   /* mata pull-to-refresh no mobile */
}

/* ===== HERO (pin) ===== */
.hero { position: relative; width: 100%; }   /* altura setada via JS */
.hero-sticky {
  position: sticky;
  top: 0;
  height: 86vh;             /* < 100vh: parte dos projetos de baixo aparece na tela inicial */
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}
#gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  touch-action: pan-y;   /* deixa o scroll vertical passar; drag horizontal segue funcionando */
}

/* ---- TOPBAR fixo (logo + botão menu). Sem gradiente. ---- */
/* mix-blend difference: texto legível sobre creme (hero) e escuro (projetos) */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  pointer-events: none;
  color: var(--muted);
}
.topbar a, .topbar button { pointer-events: auto; text-decoration: none; color: var(--muted); }
.brand {
  font-family: "Canela", serif; font-weight: 400; font-size: 32px;
  letter-spacing: .02em; line-height: .8; color: var(--muted);
}
.menu-toggle {
  background: none; border: 0; cursor: pointer;
  font-family: "Urbanist", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- MENU overlay fullscreen ---- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 30;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(24px, 8vw, 140px);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.menu-overlay.open { opacity: 1; visibility: visible; transform: none; }
.menu-close {
  position: absolute; top: 26px; right: 40px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-family: "Urbanist", sans-serif; font-size: 14px; letter-spacing: .18em;
  text-transform: uppercase;
}
.menu-list { list-style: none; display: flex; flex-direction: column; gap: clamp(6px, 1vw, 14px); position: relative; z-index: 1; }
.menu-list a {
  display: flex; align-items: center; gap: 24px; text-decoration: none;
  color: var(--ink); transition: opacity .25s ease;
}
.menu-list .n {
  font-family: "Urbanist", sans-serif; font-size: clamp(11px, 1vw, 14px);
  color: var(--muted); letter-spacing: .1em; min-width: 34px; flex: none;
}
/* thumb inline: colapsada (largura 0) -> expande no hover, à ESQUERDA da palavra */
.menu-list .thumb {
  flex: none; width: 0; height: clamp(64px, 8vw, 108px);
  border-radius: 2px; overflow: hidden;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(.96);
  transition: width .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.menu-list .t {
  font-family: "Canela", serif; line-height: 1.02;
  font-size: clamp(30px, 5vw, 78px); letter-spacing: -.01em;
  color: var(--muted); font-style: italic;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.menu-list a:hover .thumb { width: clamp(96px, 12vw, 168px); opacity: 1; transform: scale(1); }
.menu-list a:hover .t { transform: translateX(20px); }   /* palavra desliza pra direita */
.menu-list:hover a { opacity: .35; }
.menu-list a:hover { opacity: 1; }

.copy-left  { position: absolute; bottom: 24px; left: 40px;  font-size: 11px; letter-spacing: .1em; z-index: 5; }
.copy-right { position: absolute; bottom: 24px; right: 40px; font-size: 11px; letter-spacing: .1em; z-index: 5; }

/* ===== PROJETOS (2 por tela) ===== */
.projects {
  position: relative;
  z-index: 2;
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;              /* topo enxuto: a 1ª fileira já espia na tela inicial */
}
.project {
  position: relative;
  aspect-ratio: 5 / 4;      /* um pouco mais quadrado */
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  background-color: #e9e7da;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.project > * { transition: inherit; }
.project:hover { transform: scale(.992); }
.project::after {  /* escurece topo + base p/ legibilidade sobre qualquer foto */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(92,53,0,.20) 0%, rgba(92,53,0,0) 24%),
    linear-gradient(0deg,   rgba(92,53,0,.34) 0%, rgba(92,53,0,0) 38%);
  z-index: 1;
}
.project-title {
  position: relative; z-index: 2;
  font-family: "Canela", serif; font-weight: 400;
  color: var(--on-photo);
  font-size: clamp(40px, 5.2vw, 96px);
  line-height: .95; letter-spacing: -.01em;
  padding: 40px;
  text-shadow: 0 2px 24px rgba(92,53,0,.4);
}
.project-tag {
  position: absolute; top: 30px; left: 30px; z-index: 2;
  color: var(--on-photo); opacity: .95;
  font-size: 11px; letter-spacing: .2em;
  text-shadow: 0 1px 14px rgba(92,53,0,.45);
}

/* rodapé do site */
.site-foot {
  position: relative; z-index: 2; background: var(--bg);
  display: flex; justify-content: space-between; align-items: center;
  padding: 40px; font-size: 11px; letter-spacing: .1em; color: var(--ink);
  border-top: 1px solid rgba(92,53,0,.14);
}

/* ===== MOBILE ===== */
@media (max-width: 760px) {
  .hud { padding: 18px 20px; }
  .hud-logo { font-size: 26px; }
  .hud-mid { bottom: 150px; gap: 30vw; }
  .hud-mid .ghost { font-size: 26px; }
  .filters { flex-direction: column; gap: 6px; align-items: center; }
  .copy-left, .copy-right { font-size: 10px; }
  .copy-left { left: 20px; } .copy-right { right: 20px; }

  .topbar { padding: 16px 20px; }
  .brand { font-size: 24px; }
  .menu-toggle { font-size: 13px; }
  .menu-close { right: 20px; }

  /* hero: canvas bate a altura do #hero (sem sobra de 86vh -> some o vão grande) */
  .hero { height: 56vh; }
  .hero-sticky { height: 56vh; }

  .projects { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
  .project { aspect-ratio: 5 / 4; }
  .project-title { font-size: clamp(36px, 12vw, 72px); padding: 26px; }
  .site-foot { flex-direction: column; gap: 8px; text-align: center; }
}

/* ===================== PÁGINA DE PROJETO ===================== */
/* fundo azul (Pantone Wind Weaver); letras em verde p/ contraste no azul claro */
/* min-height 100vh: o body colapsaria (tudo é fixed) e deixaria o creme do html aparecer */
body.is-project {
  overflow-x: hidden; color: #4f5320; min-height: 100vh;
  /* degradê suave (Wind Weaver): mais claro no topo, aprofunda embaixo */
  background: linear-gradient(165deg, #dbe3e8 0%, #c5d1d8 42%, #aebecb 100%);
  background-attachment: fixed;
}

.proj-canvas {
  position: fixed; top: 0; right: 0; z-index: 1;
  width: 54vw; height: 100vh; display: block;
  touch-action: pan-y;   /* deixa o scroll vertical nativo passar (troca de projeto) */
}

/* espaçador de rolagem: dá a altura (N projetos x 100vh); área visível é fixa */
/* sem scroll-snap: rolagem livre e suave, sem puxão pro centro */
#projScroll { position: relative; z-index: 0; width: 1px; margin-left: auto; pointer-events: none; }
.proj-page { height: 100vh; }

.proj-left {
  position: fixed; top: 0; left: 0; z-index: 3;
  width: 46vw; height: 100vh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 120px 5vw 40px;
}
.proj-back {
  font-family: "Urbanist", sans-serif; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  align-self: flex-start;
}
.proj-back:hover { color: var(--ink); }

.proj-head {
  margin-top: auto; margin-bottom: auto; max-width: 560px;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.proj-head.is-swap { opacity: 0; transform: translateY(-14px); }   /* sobe junto com a imagem */
.proj-tag {
  display: block; font-family: "Urbanist", sans-serif; font-size: 12px;
  letter-spacing: .2em; color: var(--muted); margin-bottom: 18px;
}
.proj-name {
  font-family: "Canela", serif; font-weight: 400;
  font-size: clamp(44px, 5vw, 88px); line-height: .95; letter-spacing: -.01em;
  color: var(--muted); margin-bottom: 28px;
}
.proj-text {
  font-family: "Urbanist", sans-serif; font-weight: 300;
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: var(--ink);
  max-width: 460px;
}
.proj-more {
  display: none;                 /* só aparece no mobile quando o texto corta */
  align-self: flex-start; margin-top: 10px;
  font-family: "Urbanist", sans-serif; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: #4f5320;
  background: none; border: 0; border-bottom: 1px solid #4f5320;
  padding: 0 0 2px; cursor: pointer;
}

.proj-foot { display: flex; flex-direction: column; gap: 18px; }
.proj-meta {
  display: flex; justify-content: space-between; max-width: 260px;
  font-family: "Urbanist", sans-serif; font-size: 13px; letter-spacing: .1em; color: var(--ink);
}
.proj-nav { display: flex; gap: 40px; }
.proj-nav button {
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-family: "Urbanist", sans-serif; font-size: 14px; letter-spacing: .12em;
  text-transform: uppercase; position: relative; padding: 0 0 3px;
}
.proj-nav button::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--ink); transition: width .3s ease;
}
.proj-nav button:hover::after { width: 100%; }

#projSpacer { width: 1px; pointer-events: none; }

@media (max-width: 860px) {
  .proj-canvas { position: fixed; top: 34vh; left: 0; right: 0; width: 100vw; height: 66vh; z-index: 1; }
  .proj-left {
    position: fixed; top: 0; left: 0; right: 0; width: 100vw; height: auto;
    display: block; padding: 72px 20px 14px; z-index: 3;
    /* scrim AZUL (a página é azul, não verde) */
    background: linear-gradient(180deg, #dbe3e8 80%, rgba(219,227,232,0));
  }
  .proj-back { margin-bottom: 8px; }
  .proj-head { margin: 0; max-width: none; }
  .proj-tag { margin-bottom: 8px; }
  .proj-name { font-size: clamp(28px, 8vw, 42px); margin-bottom: 8px; }
  .proj-text {
    font-size: 13px; max-width: none; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .proj-more:not([hidden]) { display: inline-block; }
  /* expandido: painel azul sólido, texto inteiro; rola dentro se for muito longo */
  .proj-left.is-expanded {
    background: #dbe3e8; max-height: 88vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch; padding-bottom: 18px;
  }
  .proj-left.is-expanded .proj-text {
    -webkit-line-clamp: unset; display: block; overflow: visible;
  }
  .proj-foot {
    position: static; margin-top: 12px; flex-direction: row;
    align-items: center; justify-content: space-between; gap: 12px;
  }
  .proj-meta { max-width: none; width: 100%; flex: 1; }
  .proj-nav { display: none; }              /* Prev/Next escondidos no mobile */
}

/* ===================== PÁGINA SOBRE ===================== */
body.is-about { overflow-x: hidden; background: var(--bg); }

/* primeira dobra: intro (cima-esq) + lead c/ miniatura (baixo-esq) + foto (dir) */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  gap: 40px;
  padding: 110px 40px 40px;
}
.about-left {
  display: flex; flex-direction: column; justify-content: space-between;
  max-width: 560px;
}
.about-intro {
  font-family: "Canela", serif; font-weight: 400;
  font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: 0;
  color: var(--ink); max-width: 460px;
}
.about-lead { display: flex; align-items: flex-end; gap: 20px; max-width: 480px; }
.about-thumb {
  width: 118px; height: 150px; object-fit: cover; flex: none;
  border-radius: 2px; display: block;
}
.about-mission {
  font-family: "Urbanist", sans-serif; font-weight: 300;
  font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: var(--ink);
}

.about-right { display: flex; justify-content: flex-end; }
.about-right img {
  width: 100%; max-width: 560px; height: calc(100vh - 170px);
  object-fit: cover; display: block; border-radius: 2px;
}

/* bloco de texto longo que aparece no scroll */
.about-bio {
  max-width: 720px; padding: 6vh 40px 22vh;
  display: flex; flex-direction: column; gap: 1em;
}
.reveal {
  font-family: "Urbanist", sans-serif; font-weight: 300;
  font-size: clamp(18px, 1.7vw, 26px); line-height: 1.5; color: var(--ink);
}
.reveal .w { opacity: .6; transition: opacity .18s linear; will-change: opacity; }

@media (max-width: 860px) {
  .about-hero { grid-template-columns: 1fr; min-height: auto; padding: 84px 20px 24px; gap: 24px; }
  .about-right { order: -1; justify-content: stretch; }
  .about-right img { max-width: none; height: 56vh; }
  .about-left { max-width: none; gap: 28px; }
  .about-intro { font-size: clamp(19px, 5.4vw, 26px); }
  .about-lead { max-width: none; }
  .about-thumb { width: 92px; height: 118px; }
  .about-bio { padding: 4vh 20px 16vh; }
  .reveal { font-size: clamp(17px, 4.6vw, 22px); }
}

/* ===================== INTRO / PRELOADER (nome sobe e revela) ===================== */
#preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);                     /* creme claro da paleta */
  display: flex; align-items: center; justify-content: center;
  animation: preHide .6s ease 2.0s forwards;
}
#preloader.gone { display: none; }
#preloader.skip { animation: none; }          /* já visto nesta sessão */
.pre-name {
  font-family: "Canela", serif; font-style: italic; font-weight: 400;
  font-size: clamp(30px, 6vw, 76px); letter-spacing: -.01em;
  color: var(--ink); opacity: 0; text-align: center; padding: 0 24px;
  animation: preName 2.4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes preName {
  0%   { opacity: 0; transform: translateY(14px); }
  22%  { opacity: 1; transform: translateY(0); }
  66%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-28px); }   /* sobe e some, resta o "CE" do topo */
}
@keyframes preHide { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  #preloader { animation: preHide .3s ease .1s forwards; }
  .pre-name { animation: none; opacity: 1; }
}

/* ===================== INDICADOR DE SCROLL (sempre visível, discreto) ===================== */
.scroll-hint {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 15; background: none; border: 0; cursor: pointer; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: "Urbanist", sans-serif; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  opacity: .6; transition: opacity .4s ease, transform .4s ease;
}
.scroll-hint:hover { opacity: 1; }
.scroll-hint.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); }
.scroll-hint-chevron {
  width: 11px; height: 11px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); animation: hintBounce 1.8s ease-in-out infinite;
}
.scroll-hint.is-next .scroll-hint-chevron { animation-duration: 1.1s; }
@keyframes hintBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
  50%      { transform: rotate(45deg) translate(2px, 2px); opacity: 1; }
}

/* ===================== SETAS DE FOTO (case: embaixo da foto, horizontais) ===================== */
.photo-nav {
  position: fixed; left: 73vw; transform: translateX(-50%); bottom: 40px; z-index: 6;
  display: flex; align-items: center; gap: 22px;
  transition: opacity .3s ease;
}
.photo-nav.hidden { opacity: 0; pointer-events: none; }
.photo-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(233,231,218,.72); border: 1px solid rgba(92,53,0,.18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.photo-arrow:hover { background: rgba(233,231,218,.98); transform: scale(1.06); }
.photo-arrow::before {
  content: ""; width: 10px; height: 10px;
  border-left: 1.5px solid var(--brown); border-top: 1.5px solid var(--brown);
}
.photo-arrow.left::before  { transform: rotate(-45deg); margin-left: 3px; }   /* aponta pra esquerda */
.photo-arrow.right::before { transform: rotate(135deg); margin-right: 3px; }  /* aponta pra direita */
.photo-arrow.hidden { opacity: .25; pointer-events: none; }
.photo-count {
  font-family: "Urbanist", sans-serif; font-size: 13px; letter-spacing: .12em; color: var(--ink);
  min-width: 58px; text-align: center;
}

@media (max-width: 860px) {
  .photo-nav { left: 50%; bottom: 18px; gap: 16px; }
  .photo-arrow { width: 40px; height: 40px; }
}

/* ===================== PÁGINA CONTATO (provisória) ===================== */
body.is-contact { background: var(--bg); min-height: 100vh; }
.contact {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: 120px 6vw 8vh; max-width: 1100px;
}
.contact-tag {
  font-family: "Urbanist", sans-serif; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 22px;
}
.contact-title {
  font-family: "Canela", serif; font-weight: 400; color: var(--muted);
  font-size: clamp(48px, 9vw, 150px); line-height: .92; letter-spacing: -.01em;
  margin-bottom: 34px;
}
.contact-sub {
  font-family: "Urbanist", sans-serif; font-weight: 300; color: var(--ink);
  font-size: clamp(16px, 1.6vw, 22px); line-height: 1.5; max-width: 520px; margin-bottom: 40px;
}
.contact-email {
  font-family: "Canela", serif; color: var(--ink); text-decoration: none;
  font-size: clamp(24px, 3vw, 46px); letter-spacing: -.01em;
  position: relative; align-self: flex-start; margin-bottom: 48px;
}
.contact-email::after {
  content: ""; position: absolute; left: 0; bottom: 2px; width: 100%; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s ease;
}
.contact-email:hover::after { transform: scaleX(1); }
.contact-links { display: flex; gap: 28px; }
.contact-links a {
  font-family: "Urbanist", sans-serif; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; opacity: .7;
  transition: opacity .25s ease;
}
.contact-links a:hover { opacity: 1; }
@media (max-width: 760px) {
  .contact { padding: 96px 24px 12vh; }
  .contact-sub { font-size: 15px; }
  .contact-links { flex-wrap: wrap; gap: 18px; }
}

/* ===================== CORTINA DE TRANSIÇÃO ENTRE PÁGINAS ===================== */
#pageCurtain {
  position: fixed; inset: 0; z-index: 2000;
  background: #eeebe6;                 /* Sweet Vanilla — emenda verde<->azul */
  opacity: 0; pointer-events: none;
}
#pageCurtain.cover { opacity: 1; pointer-events: auto; }   /* cobre instantâneo (sem piscada) */
#pageCurtain.reveal-anim { transition: opacity .5s ease; } /* revela suave ao entrar */
@media (prefers-reduced-motion: reduce) {
  #pageCurtain.reveal-anim { transition: none; }
}

/* ===================== AJUSTES DE COR (paleta invertida) ===================== */
/* iniciais CE: creme claro (legível no fundo verde); verde escuro na página de projeto (azul claro) */
.topbar .brand { color: var(--ink); }
body.is-project .brand { color: #4f5320; }
/* marrom (Irish Coffee) só na descrição do projeto e no subtítulo do contato;
   textos do Sobre (intro/mission/reveal) ficam creme (--ink) p/ legibilidade */
.proj-text { color: var(--brown); }

/* ---- página de projeto (fundo azul): letras em verde p/ contraste ---- */
body.is-project .proj-name,
body.is-project .proj-tag,
body.is-project .proj-back,
body.is-project .proj-meta,
body.is-project .proj-nav button,
body.is-project .menu-toggle,
body.is-project .photo-count { color: #4f5320; }
body.is-project .proj-nav button::after { background: #4f5320; }