/* =========================================================================
   Ourem & Co. — base compartilhada das páginas v4
   (home_v4, work, project, contato, 404). Aqui ficam só: helpers do Lenis,
   @font-face, tokens (:root), reset/base, os utilitários que a v4 usa
   (section[id], .detail-list) e a transição de página. O sistema visual de
   cada página vive em css/home-v4.css.

   Limpeza (auditoria): a camada de componentes v1–v3 (hero/work-grid/process/
   studio/intro/brandmark/form-page/site-header…) e o template base.html foram
   removidos — eram código morto, sem uso nas páginas v4.
   ========================================================================= */

/* ---- Lenis (smooth scroll) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- Fontes (self-host, woff2) ---- */
@font-face {
  font-family: "Coinage Caps";
  src: url("../fonts/CoinageCapsHumphreyPaget.woff2") format("woff2"),
       url("../fonts/CoinageCapsHumphreyPaget.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Coinage Caps Eric Gill";
  src: url("../fonts/CoinageCapsEricGill.woff2") format("woff2"),
       url("../fonts/CoinageCapsEricGill.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Tobias (Dinamo) — serifa de leitura/display da v4. Arquivo variável (wght 100–900).
   ATENÇÃO: versão TRIAL — risco de licença assumido pelo cliente (manter). */
@font-face {
  font-family: "Tobias";
  src: url("../fonts/Tobias-VF.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("../fonts/Tobias-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Ourem & Co. — paleta oficial (Pantone), tonal e quente-neutra. */
  --bg:      #f5f4f2;   /* Cultured Pearl — off-white base */
  --fg:      #030303;   /* Armor Wash — o preto do logo */
  --muted:   color-mix(in srgb, var(--fg) 66%, var(--bg));
  --faint:   color-mix(in srgb, var(--fg) 58%, var(--bg));
  --line:    #dcd7d4;   /* Catacomb Walls — fios/bordas */
  --accent:  #c3b79d;   /* Creme White — toque quente */
  --accent-deep: color-mix(in srgb, var(--accent) 60%, var(--fg));

  --bg-d:    #2c2929;   /* Meteorite — superfície escura (cortina de transição) */
  --fg-d:    #f5f4f2;   /* Pearl — texto no escuro */
  --muted-d: color-mix(in srgb, var(--fg-d) 62%, var(--bg-d));
  --line-d:  color-mix(in srgb, var(--fg-d) 16%, var(--bg-d));

  --font:    "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Coinage Caps Eric Gill", "Coinage Caps", Georgia, serif;

  --wrap: 1920px;
  --gutter: max(20px, 2vw);
  --section-y: clamp(60px, 8vw, 132px);
  --radius: 4px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--fg); }

/* foco visível p/ navegação por teclado — acessibilidade (tan-escuro p/ contraste) */
:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; border-radius: 3px; }

/* âncoras (#about) não somem sob o cabeçalho fixo */
section[id] { scroll-margin-top: 88px; }
/* no mobile o cabeçalho é uma barra fina sticky — offset menor */
@media (max-width: 880px) { section[id] { scroll-margin-top: 64px; } }

/* destaques estratégicos: linhas iniciadas com "–" na descrição (filtro desc_rich) */
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { padding: 13px 0 13px 28px; border-top: 1px solid var(--line); position: relative; }
.detail-list li:last-child { border-bottom: 1px solid var(--line); }
.detail-list li::before { content: "–"; position: absolute; left: 2px; color: var(--accent); font-weight: 600; }

/* =========================================================================
   Transição de página (wipe) — a cortina sobe cobrindo a saída e continua
   subindo na entrada, costurando as duas páginas.
   ========================================================================= */
.page-transition {
  position: fixed; inset: 0; background: var(--bg-d); z-index: 9999;
  transform: translateY(101%); visibility: hidden; pointer-events: none;
}
/* Tempos: a cortina é vista DUAS vezes por navegação (sai + entra) e ainda soma
   a rede no meio, então cada décimo aqui vale o dobro na percepção. 0.28 + 0.30
   mantém o gesto legível sem virar espera. Trocar => trocar o 280 do main.js. */
.page-transition.pt-cover { visibility: visible; animation: ptCover 0.28s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes ptCover { from { transform: translateY(101%); } to { transform: translateY(0); } }

body.pt-leaving main { animation: ptSink 0.28s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes ptSink { to { opacity: 0.35; transform: translateY(-18px); } }

html.pt-entering .page-transition { visibility: visible; animation: ptReveal 0.3s cubic-bezier(0.76, 0, 0.24, 1) both; }
@keyframes ptReveal { from { transform: translateY(0); } to { transform: translateY(-101%); visibility: hidden; } }
html.pt-entering main { animation: ptRise 0.45s var(--ease-io) 0.04s both; }
@keyframes ptRise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .page-transition { display: none; }
}