/* ============================================================
   BASE — compartilhada pelos três temas.
   Só reset, primitivas de layout e acessibilidade.
   Nenhuma decisão estética mora aqui: quem decide é o theme.css
   e as variáveis da paleta (injetadas em :root pelo Theme.php).
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  /* scroll-behavior fica de fora de propósito: brigar com o dispositivo
     do usuário costuma deixar a rolagem pior, não melhor. */
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(16px * var(--type-scale, 1));
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--sel_bg); color: var(--sel_fg); }

:root {
  --ease: cubic-bezier(.2, .7, .3, 1);
  --gut: clamp(16px, 4vw, 44px);
  --maxw: 1560px;
  --type-scale: 1;
}

/* ---------- acessibilidade ---------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Só remove o anel para quem clica com mouse — quem usa teclado mantém. */
:focus:not(:focus-visible) { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--sel_fg);
  padding: 12px 18px;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Alvo de toque mínimo (WCAG 2.5.5). Vale só onde o ponteiro é grosso —
   no desktop os controles podem ser compactos. */
@media (hover: none) {
  a, button, [role="button"], label, summary {
    min-height: 44px;
  }
  nav a, .tap {
    display: inline-flex;
    align-items: center;
  }
}

/* ---------- layout ---------- */

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}
/* Seções usam padding-block, NUNCA o atalho `padding`: elas também
   carregam .wrap, e o atalho zeraria o recuo lateral em silêncio. */

/* ---------- fotografia ----------
   A foto manda na proporção. O --photo-filter vem da paleta ativa: é
   assim que "Acros" deixa o site inteiro em preto e branco. */
.ph { overflow: hidden; background: var(--bg2); }
.ph img { width: 100%; height: auto; filter: var(--photo-filter, none); transition: filter .6s var(--ease); }
.ph--fill img { height: 100%; object-fit: cover; }

/* ---------- reveal ----------
   Progressive enhancement: o conteúdo é visível por padrão. Só quando o
   JS está rodando (html.js) é que escondemos para revelar. Sem JS, nada
   some — e um erro de script não apaga o portfólio. */
.js .rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js .rv.in { opacity: 1; transform: none; }

/* ---------- grão ---------- */
.grain {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; opacity: .4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
html:not(.grain-on) .grain { display: none; }
/* Em tema escuro o multiply some — inverte para o grão aparecer. */
html.theme-after-hours .grain { mix-blend-mode: screen; opacity: .06; }

/* ---------- movimento ----------
   Três níveis: o do sistema operacional (prefers-reduced-motion) e os
   dois que a Ana escolhe no admin. O do sistema sempre vence. */
html.motion-reduced * { animation-duration: .001s !important; transition-duration: .18s !important; }
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after { animation: none !important; transition: none !important; }
html.motion-off .js .rv { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .rv { opacity: 1 !important; transform: none !important; }
}

/* ---------- estados vazios ----------
   O site tem de ficar de pé antes da Ana subir qualquer foto. */
.empty {
  border: 1px dashed var(--line);
  padding: clamp(24px, 5vw, 56px);
  text-align: center;
  color: var(--text2);
}
.empty h3 { font-family: var(--font-display); margin-bottom: 8px; color: var(--text); }

/* ---------- utilitários ---------- */
.mono { font-family: var(--font-mono); }
.flow > * + * { margin-top: var(--flow, 1em); }