/* ============================================================
   Base — reset, tipografia, utilitários, acessibilidade
   ============================================================ */

@layer reset, base, utils;

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

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  html.lenis, html.lenis body { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-stopped { overflow: clip; }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, svg, video, canvas, picture {
    display: block;
    max-width: 100%;
    height: auto;
  }
  img { background-color: var(--c-bone-deep); }

  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; }
  table { border-collapse: collapse; }

  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; text-wrap: balance; }
  p { text-wrap: pretty; }

  ::selection {
    background: color-mix(in oklab, var(--c-coral) 26%, transparent);
    color: var(--c-ink);
  }

  :focus-visible {
    outline: 2px solid var(--c-coral);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }
  :focus:not(:focus-visible) { outline: none; }
}

@layer base {
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    font-weight: 400;
    overflow-x: clip;
    font-feature-settings: "cv11", "ss01";
  }

  /* Fundo vivo: gradientes delicados fixos, quase imperceptíveis */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(60rem 40rem at 12% -8%, color-mix(in oklab, var(--c-coral) 7%, transparent), transparent 62%),
      radial-gradient(52rem 38rem at 92% 6%, color-mix(in oklab, var(--c-indigo) 8%, transparent), transparent 60%),
      radial-gradient(48rem 42rem at 50% 108%, color-mix(in oklab, var(--c-sage) 7%, transparent), transparent 62%);
  }

  /* Grão finíssimo — tira o aspecto "chapado" de template */
  body::after {
    content: "";
    position: fixed;
    inset: -50%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.028;
    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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .display, h1, h2, h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 350;
    letter-spacing: var(--track-head);
    line-height: var(--lh-head);
    font-variation-settings: "SOFT" 0, "WONK" 0;
  }

  em, .em {
    font-style: italic;
    font-variation-settings: "SOFT" 10, "WONK" 1;
  }

  strong { font-weight: 600; }

  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--c-bone-deep); }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--c-ink) 22%, transparent);
    border-radius: var(--r-pill);
    border: 3px solid var(--c-bone-deep);
  }
  ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklab, var(--c-ink) 38%, transparent); }
}

@layer utils {
  .shell {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .shell--wide { max-width: 96rem; }

  .section { position: relative; padding-block: var(--section-y); }

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

  .skip-link {
    position: fixed;
    top: var(--sp-4);
    left: var(--sp-4);
    z-index: 200;
    padding: 0.7em 1.2em;
    background: var(--c-ink);
    color: var(--c-bone);
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    transform: translateY(-160%);
    transition: transform var(--d-base) var(--e-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  /* Etiqueta de seção — kicker */
  .kicker {
    display: inline-flex;
    justify-self: start;
    align-self: start;
    align-items: center;
    gap: 0.6em;
    font-family: var(--font-ui);
    font-size: var(--t-2xs);
    font-weight: 500;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--fg-mute);
  }
  .kicker::before {
    content: "";
    width: 1.6rem; height: 1px;
    background: currentColor;
    opacity: 0.5;
  }
  .kicker--dot::before {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--c-coral);
    opacity: 1;
  }

  .lede {
    font-size: var(--t-md);
    line-height: 1.58;
    color: var(--fg-soft);
    max-width: 46ch;
  }

  .hairline { height: 1px; background: var(--line); border: 0; }

  .on-dark {
    background: var(--dark-bg);
    color: var(--dark-fg);
    --fg: var(--dark-fg);
    --fg-soft: var(--dark-fg-soft);
    --fg-mute: color-mix(in oklab, #F2EFEA 46%, transparent);
    --line: var(--dark-line);
    --line-soft: color-mix(in oklab, #F2EFEA 8%, transparent);
  }

  .stack > * + * { margin-top: var(--flow, 1rem); }

  /* Reveal base — só ativa quando o JS confirma suporte */
  .js [data-reveal] { opacity: 0; }
  .js [data-reveal="up"]   { transform: translate3d(0, 28px, 0); }
  .js [data-reveal="fade"] { transform: none; }
  .js [data-reveal="left"] { transform: translate3d(-24px, 0, 0); }

  .js [data-split] { visibility: hidden; }
  .js .split-ready [data-split],
  .js [data-split].split-ready { visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js [data-split] { visibility: visible !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}