/* ══════════════════════════════════════════════
   yzze — base.css
   Reset, tipografia e utilitários. Os tokens ficam em tokens.css,
   que precisa ser carregado antes deste arquivo.
   ══════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
em { font-style: normal; }
::selection { background: var(--violet); color: var(--white); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2c2c3a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--violet-deep); }

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

/* ── utilitários ── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(5.5rem, 11vw, 10rem); position: relative; }

.section--light {
  --fg: var(--ink);
  --bg: var(--paper);
  --line: var(--paper-line);
  --muted: rgba(11, 11, 16, 0.62);
  background: var(--bg);
  color: var(--fg);
}

.section__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section__num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--violet);
  border: 1px solid color-mix(in srgb, var(--violet) 45%, transparent);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
}
.section__tag {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.section__tag::after {
  content: "";
  width: clamp(2rem, 6vw, 5rem);
  height: 1px;
  background: var(--line);
}

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot--violet { background: var(--violet); }
.dot--orange { background: var(--orange); }
.dot--green { background: var(--green); }

/* ── grain ── */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -4%); }
  60% { transform: translate(-2%, -3%); }
  80% { transform: translate(4%, 2%); }
}

/* ── reveals (estado inicial; JS anima) ── */
[data-reveal] { opacity: 0; }
.no-js [data-reveal], .reduced-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* títulos com reveal de linha (SplitType injeta .line) */
.line-mask { display: block; overflow: hidden; }
.line-mask .line { display: block; will-change: transform; }

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