/* ==========================================================================
   BASE — reset, tipografia, utilidades
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* clip, e não hidden: não cria contexto de rolagem, então o Lenis
     continua dono da rolagem vertical */
  overflow-x: clip;
}

/* Lenis cuida da rolagem; sem ele, o nativo assume. */
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

body {
  background: var(--black);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-variation-settings: "wdth" var(--w-text), "wght" 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--flame); color: #fff; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--dark-2); }
::-webkit-scrollbar-thumb:hover { background: var(--flame); }

/* --------------------------------------------------------------------------
   Tipografia — uma família, três larguras
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { font-weight: 900; }

.d-mega, .d-xl, .d-lg, .d-md {
  font-variation-settings: "wdth" var(--w-display), "wght" 900;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.d-mega { font-size: var(--fs-mega); line-height: .82; letter-spacing: -.05em; }
.d-xl   { font-size: var(--fs-xl);   line-height: .98; letter-spacing: -.04em; }
.d-lg   { font-size: var(--fs-lg);   line-height: 1.02; }
.d-md   { font-size: var(--fs-md);   line-height: 1.12; font-variation-settings: "wdth" 112, "wght" 800; }

/* Dado: a largura condensada faz o papel que a caixa-alta ou a mono fariam */
.data {
  font-variation-settings: "wdth" var(--w-cond), "wght" 700;
  font-size: var(--fs-data);
  letter-spacing: .04em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 46ch;
}

.body { color: var(--fg-2); max-width: 62ch; }
.body + .body { margin-top: 1.1em; }
.body strong { color: var(--fg); font-weight: 700; }

.on-white { color: var(--fg-on-white); }
.on-white .lead, .on-white .body { color: var(--fg-on-white-2); }
.on-white .data { color: rgba(16, 10, 8, .45); }

.flame { color: var(--flame); }
.gold  { color: var(--gold); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { position: relative; padding-block: var(--band); }
.band--short { padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.band--top0 { padding-top: 0; }
.band--white { background: var(--white); color: var(--fg-on-white); }

.rule { height: 1px; background: var(--line); border: 0; }
.band--white .rule { background: var(--line-dark); }

.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;
}

.skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 999;
  padding: .8rem 1.2rem;
  background: var(--flame);
  color: #150500;
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   Revelação — máscara de linha, não o fade-and-slide de sempre
   -------------------------------------------------------------------------- */

.reveal-line { display: block; overflow: hidden; padding-bottom: .06em; }
/* sem will-change fixo: as revelações acontecem uma vez só, e a camada
   ficava na memória de GPU para sempre (~100 na home). O js/motion.js liga o
   will-change no começo de cada animação e desliga no fim. */
.reveal-line > span { display: block; }

@media (prefers-reduced-motion: reduce) {
  html:not(.lenis) { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal-line > span,
  [data-fade] { opacity: 1 !important; transform: none !important; }
}