/* ==========================================================================
   Base — reset, tipografia, layout e movimento global
   Ordem das camadas evita que seletores de componente e de página se anulem.
   ========================================================================== */

@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%; }
  img, picture, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
  }

  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: var(--lh-body);
    font-optical-sizing: auto;
  }

  main { flex: 1; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--color-heading);
    line-height: var(--lh-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-48); font-weight: 800; letter-spacing: -0.025em; }
  h2 { font-size: var(--fs-36); letter-spacing: -0.02em; }
  h3 { font-size: var(--fs-21); }
  h4 { font-size: var(--fs-18); }

  p, li, dd { max-width: 68ch; text-wrap: pretty; }

  a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur-fast) ease;
  }
  a:hover { color: var(--color-link-hover); }

  strong, b { font-weight: 650; }

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
  }

  ::selection { background: var(--igor-cyan); color: var(--igor-navy); }
}

@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }
  .container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

  .section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
  .section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
  .section--surface { background: var(--color-surface); }

  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-3)); }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    margin-bottom: var(--space-6);
  }
  .section-head__text { display: flex; flex-direction: column; gap: var(--space-2); }
  .section-head__text p { color: var(--color-text-muted); font-size: var(--fs-18); }

  .page-head { padding-block: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
  .page-head p { color: var(--color-text-muted); font-size: var(--fs-18); }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 200;
    padding: var(--space-3) var(--space-4);
    background: var(--igor-navy);
    color: var(--igor-white);
    border-radius: var(--radius-sm);
    font-weight: 700;
  }
  .skip-link:focus { top: var(--space-3); color: var(--igor-white); }
  .muted { color: var(--color-text-muted); }
  .tnum { font-variant-numeric: tabular-nums; }
  .mt-auto { margin-top: auto; }
}

/* --------------------------------------------------------------------------
   Movimento
   1) Revelação ao rolar feita com scroll-driven animations do CSS: sem JS,
      e em navegadores sem suporte o conteúdo simplesmente aparece parado.
   2) Transição entre páginas com View Transitions entre documentos.
   -------------------------------------------------------------------------- */

@keyframes reveal-rise {
  from { opacity: 0; translate: 0 1.5rem; }
  to { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-fade-out 160ms var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-fade-in 320ms var(--ease-out) both; }
::view-transition-group(tour-media) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; translate: 0 8px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}