/* ============================================================
   MK1 GARAGE — base.css
   Reset, design tokens, tipografia, utilitários, reduced-motion
   ============================================================ */

/* ---------- Fontes (self-hosted) ---------- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/Archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}
/* Fallback com métrica ajustada — evita layout shift no swap */
@font-face {
  font-family: 'Clash Fallback';
  src: local('Arial');
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 22%;
}

/* ---------- Tokens ---------- */
:root {
  --ink: #0B0C0E;
  --ink-2: #121417;
  --ink-3: #1C1F24;
  --paper: #F2F1EE;
  --paper-dim: #A9ABB0;
  --line: rgba(242, 241, 238, .12);
  --line-dark: rgba(11, 12, 14, .14);
  --whatsapp: #25D366;

  --chrome-1: #F5F5F7;
  --chrome-2: #C9CBD1;
  --chrome-3: #7E8188;
  /* Acentos sutis vindos do logo — usar com muita parcimônia */
  --mk-red: #D93A3A;
  --mk-blue: #2B4C9B;
  --grad-chrome: linear-gradient(135deg, var(--chrome-1) 0%, var(--chrome-3) 45%, var(--chrome-1) 60%, var(--chrome-2) 100%);

  --font-display: 'Clash Display', 'Clash Fallback', sans-serif;
  --font-body: 'Archivo', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(3.2rem, 14vw, 12rem);
  --fs-h2: clamp(1.75rem, 6vw, 4.75rem);
  --fs-h3: clamp(1.4rem, 3vw, 2rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-label: 0.75rem;
  --fs-marquee: clamp(2.5rem, 8vw, 7rem);

  --pad-section: clamp(5rem, 12vw, 10rem);
  --pad-inline: clamp(1.25rem, 4vw, 4rem);
  --max-w: 1440px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--chrome-2); color: var(--ink); }

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

/* ---------- Utilitários ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--paper-dim);
}

.section {
  padding: var(--pad-section) var(--pad-inline);
  max-width: var(--max-w);
  margin-inline: auto;
}

.section__head { margin-bottom: clamp(2.5rem, 6vw, 5rem); }

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: .01em;
  word-spacing: .22em;
  text-transform: uppercase;
  margin-top: .75rem;
}

/* Texto com gradiente chrome.
   IMPORTANTE: background-clip:text não atravessa filhos com transform
   (os .char do split criam camadas próprias e o texto some). Por isso o
   gradiente é aplicado também em cada .char individualmente. */
.hero__word--chrome,
.text-chrome,
.hero__word--chrome .char {
  background: var(--grad-chrome);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: chrome-shine 8s ease-in-out infinite;
}

@keyframes chrome-shine {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Com JS ativo o texto é dividido em .char (que carregam o gradiente);
   o pai larga o próprio background para não pintar um "fantasma" por cima */
.js .hero__word--chrome {
  background: none;
  animation: none;
}

/* Texto outline */
.hero__word--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--paper);
}

/* Clip para animação de chars/linhas */
.hero__line {
  display: block;
  overflow: hidden;
}

/* Chars gerados pelo splitText — estado inicial escondido só com JS ativo */
.char-word { display: inline-block; white-space: nowrap; }
.char { display: inline-block; will-change: transform; }
.js [data-split] .char { transform: translateY(115%); }
.js .split-done[data-split] .char { transform: none; }

/* Reveal: estado inicial gated pela classe .js (sem JS, tudo visível) */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].revealed { opacity: 1; }

/* Palavras do statement (about) */
.js [data-reveal="words"] { opacity: 1; }
.js [data-reveal="words"] .word { opacity: .15; display: inline-block; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; }
  .js [data-split] .char { transform: none; }
  .js [data-reveal="words"] .word { opacity: 1; }
}