/* ==========================================================================
   Base: reset, Lenis, tipografia, layout primitives, grain, view transitions
   ========================================================================== */
@layer reset, base, layout, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-block-size: 100svh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, svg, canvas { display: block; max-inline-size: 100%; }
  img, video { block-size: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  [hidden] { display: none !important; }
  dialog { padding: 0; border: 0; color: inherit; background: none; max-inline-size: none; max-block-size: none; }
}

@layer base {
  /* Lenis (lenis.css inline para não depender de mais um request) */
  html.lenis, html.lenis body { block-size: auto; }
  .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-smooth iframe { pointer-events: none; }

  html { background: var(--c-ink); scroll-padding-top: var(--nav-h); }
  body {
    background: var(--c-ink);
    color: var(--c-paper);
    font: 400 var(--fs-300) / 1.6 var(--font-ui);
    font-kerning: normal;
    overflow-x: clip;
  }
  ::selection { background: var(--c-brand); color: var(--c-on-accent); }

  h1, h2, h3, h4 { font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
  p { text-wrap: pretty; }
  em { font-style: normal; }

  html.is-scrolling :is(.svc__reel, .svc__item, .work-item, .post, .logo-tile, .vcard, .tilt) { pointer-events: none; }
  :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 4px; }

  /* Cursor custom não substitui o nativo em interativos (skill §8) */
  /* ponteiro padrão do sistema (sem cursor personalizado): mãozinha em tudo que é clicável */
  :is(a, button, [role="button"], summary, select, label[for], input[type="radio"], input[type="checkbox"]) { cursor: pointer; }

  /* Mobile: texto nunca abaixo de 12px (o <small> do navegador encolhe para ~83%);
     toque sem atraso de duplo-toque e com destaque discreto no lugar do cinza padrão do iOS */
  small { font-size: max(.85em, .75rem); }
  html { -webkit-tap-highlight-color: rgb(255 122 46 / .14); }
  :is(a, button, [role="button"], label, summary, input, select, textarea) { touch-action: manipulation; }
  /* textos que só fazem sentido com mouse / com toque */
  @media (hover: none) { .hover-only { display: none; } }
  @media (hover: hover) { .touch-only { display: none; } }
}

@layer layout {
  .container { inline-size: var(--container); margin-inline: auto; }
  .section { padding-block: var(--section-y); position: relative; isolation: isolate; }
  .grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--gutter); }
  @media (min-width: 768px) { .grid { --cols: 8; } }
  @media (min-width: 1024px) { .grid { --cols: 12; } }
  .full-bleed { inline-size: 100vw; margin-inline: calc(50% - 50vw); }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: fixed; inset: var(--sp-4) auto auto var(--sp-4); z-index: var(--z-toast);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-on-accent);
    font-weight: 700; translate: 0 -200%; transition: translate var(--dur-ui) var(--ease-out-expo);
  }
  .skip-link:focus-visible { translate: 0 0; }

  /* Tipografia utilitária */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--sp-3);
    font: 600 var(--fs-100) / 1.2 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted);
  }
  .eyebrow::before { content: "✦"; color: var(--c-accent); font-size: 1.1em; letter-spacing: 0; } /* ✦ antes do rótulo: padrão do design system */
  .display {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    line-height: .92; letter-spacing: -0.01em;
  }
  .accent-serif { font-family: var(--font-accent); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -0.01em; color: var(--c-accent); } /* laranja nos destaques; dourado só nos botões */
  .text-muted { color: var(--c-muted); }
  .tabular { font-variant-numeric: tabular-nums; }

  /* Grain estático (skill §3.5): nunca animado */
  .grain::after {
    content: ""; position: fixed; inset: -50%; z-index: var(--z-grain); pointer-events: none; opacity: .06;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* Máscaras do SplitText: respiro vertical para acentos e descendentes (Ó, Ç, g)
   sem alterar o fluxo (padding compensado por margem negativa) */
.sline-mask { padding-block: .16em .08em; margin-block: -.16em -.08em; }
.schar-mask { padding-block: .12em .04em; margin-block: -.12em -.04em; }

/* --------------------------------------------------------------------------
   Estados iniciais de reveal. Somente com JS ativo e sem reduced motion;
   o failsafe torna tudo visível após 2.5s caso algum script falhe.
   -------------------------------------------------------------------------- */
html.js:not(.reduced) :is([data-reveal], [data-intro]) {
  visibility: hidden;
  animation: reveal-failsafe 0s 2.5s forwards;
}
@keyframes reveal-failsafe { to { visibility: visible; } }

/* --------------------------------------------------------------------------
   Transições de página (MPA) — View Transitions API
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .5s var(--ease-in-out-quart) both vt-out; }
::view-transition-new(root) { animation: .8s var(--ease-out-expo) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4%) scale(.98); } }
@keyframes vt-in { from { opacity: 0; clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; scroll-behavior: auto !important; }
}