/* ==========================================================================
   victoou.com — base.css
   Reset, @font-face, container e defaults de página. Sem valores literais:
   tudo vem de tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fontes auto-hospedadas em /assets/fonts/. Nenhuma dependência externa.
   Joyride segue em .otf e Geist em .ttf: a conversão para .woff2 exige
   ferramenta de build (fora do escopo desta stack) — ver nota no fim do arquivo.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Joyride 2.0';
  src: url('../fonts/Joyride-2.0-Regular.woff2') format('woff2'),
       url('../fonts/Joyride-2.0-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;   /* evita o piscar em Impact antes de a Joyride carregar */
}
@font-face {
  font-family: 'Joyride';
  src: url('../fonts/Joyride-Regular.woff2') format('woff2'),
       url('../fonts/Joyride-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;   /* evita o piscar em Impact antes de a Joyride carregar */
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Regular.woff2') format('woff2'),
       url('../fonts/HelveticaNowDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Thin.woff2') format('woff2'),
       url('../fonts/HelveticaNowDisplay-Thin.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Light.woff2') format('woff2'),
       url('../fonts/HelveticaNowDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Medium.woff2') format('woff2'),
       url('../fonts/HelveticaNowDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Now Display';
  src: url('../fonts/HelveticaNowDisplay-Bold.woff2') format('woff2'),
       url('../fonts/HelveticaNowDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* a suavidade é feita em main.js (smooth scroll com inércia). O
     scroll-behavior nativo precisa ficar em auto: se o navegador também
     animar, as duas animações se anulam e a rolagem trava. */
  scroll-behavior: auto;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img, svg, video, picture { display: block; max-width: 100%; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button { cursor: pointer; }

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --------------------------------------------------------------------------
   Documento
   -------------------------------------------------------------------------- */
html, body { width: 100%; }

/* Corte horizontal com "clip" em vez de "hidden": hidden transforma o body
   num contêiner de rolagem próprio, o que disputa com o smooth scroll de
   main.js. clip corta sem criar caixa rolável. */
html { overflow-x: clip; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-weight: var(--w-regular);
  font-size: var(--fs-p-24);
  line-height: var(--lh-p);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.page-home { background: var(--bg-home); }
body.page-work,
body.page-about,
body.page-contact,
body.page-project { background: var(--bg); }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: var(--text); }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   Container e seção
   Seções são full-bleed; o conteúdo vive dentro do container.
   As alturas descritas na especificação são respiro, não altura fixa:
   cada página resolve isso com padding vertical.
   -------------------------------------------------------------------------- */
.container {
  width: var(--container);
  margin-inline: auto;
}

.section { width: 100%; position: relative; }

/* --------------------------------------------------------------------------
   Tipografia utilitária global
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-util);
  font-weight: var(--w-regular);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-hero);
  line-height: var(--lh-hero);
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Placeholder de imagem
   Todo elemento de imagem nasce como placeholder com o caminho final já
   correto no atributo data-src, para troca direta pelo export do Figma.
   -------------------------------------------------------------------------- */
.img-ph {
  display: grid;
  place-items: center;
  width: 100%;
  /* qualquer imagem que falte mostra o cartão "PLACE HOLDER" */
  background: var(--surface-2) url('../img/placeholder.webp') center / cover no-repeat;
  border: 1px dashed var(--stroke-card);
  color: var(--text-dimmer);
  font-family: var(--font-util);
  font-size: var(--fs-eyebrow);
  text-align: center;
  padding: 12px;
  overflow: hidden;
}

/* o caminho deixou de ser impresso: a imagem PLACE HOLDER já sinaliza o que falta */
.img-ph::after { content: none; }

/* variação sem legenda: quadrados pequenos (logotipo) onde o nome não cabe */
.img-ph--bare::after { content: none; }

/* variação full-bleed: legenda no canto, para não cruzar o conteúdo em cima */
.img-ph--bg { place-items: end start; padding: 16px; }

/* --------------------------------------------------------------------------
   Guarda horizontal: nada estoura entre 1024px e 2560px
   -------------------------------------------------------------------------- */
/* Abaixo de 1920 a margem lateral encolhe rápido: o container é limitado por
   --content-w (1277), então isso não altera nada em 1920 e devolve largura
   útil em 1280-1600, onde as colunas de duas partes precisam caber. */
@media (max-width: 1920px) {
  :root { --gutter: clamp(24px, 6vw, 322px); }
}

/* --------------------------------------------------------------------------
   Placeholder usado como camada de fundo (full-bleed): o rótulo com o nome do
   arquivo não pode ficar centralizado, senão cai sobre o texto da seção. Aqui
   ele vai para o canto inferior esquerdo, discreto.
   -------------------------------------------------------------------------- */
.img-ph--layer,
.depoiment__bg,
.main-project__poster,
.hero__strip.img-ph,
.about-cta__bg.img-ph {
  place-items: end start;
  padding: 0;
}
.img-ph--layer::after,
.depoiment__bg::after,
.main-project__poster::after {
  margin: 12px 14px;
  padding: 4px 8px;
  background: rgba(8, 8, 8, 0.72);
  border-radius: 4px;
  text-align: left;
}