/*
 * BTROK — COMPOSIÇÃO CENTRAL
 * Este arquivo sobrepõe o layout-base em styles.css.
 * Para mover todo o conteúdo, ajuste .content e .headline.
 * Para trocar tamanho do título, ajuste .headline h1 nos blocos desktop/mobile.
 */

/* 1. Cabeçalho e conteúdo centralizados. */
header { justify-content: center; }
header .brand { display: none; }
header p { margin: 0; }

.content {
  justify-content: center;
  padding: 100px 24px 76px;
  text-align: center;
}

.headline {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: -12px;
  max-width: 780px;
}

.headline > p { margin-left: 0; }
.headline h1 { align-items: center; font-size: clamp(92px, 13vw, 212px); }
.headline h1 span { margin-left: 0; }
.headline > div { font-size: 12px; margin-left: 0; margin-top: 12px; max-width: 390px; }

/* 2. Marca sob o título: altere max-width para ampliar ou reduzir o logotipo. */
.center-logo {
  height: auto;
  margin-top: 12px;
  max-width: 190px;
  object-fit: contain;
  width: 100%;
}

/* Elementos de telemetria laterais não usados nesta versão central. */
.sector,
.status { display: none; }

footer { grid-template-columns: 1fr; justify-items: center; }
footer > span { display: none; }

/* 3. Velocímetro: o número em index.html é 0; esta regra centraliza o mostrador. */
.speedometer {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(49vw, 650px);
}

/* Ponteiro parado para representar a espera em 0 km/h. */
.speedometer > i {
  animation: none;
  transform: translateX(-50%) rotate(-57deg);
}

/* Mantém a leitura numérica acima do texto “EM BREVE”. */
.speedometer span { top: 10%; }

/*
 * 4. Fumaça mais densa e lenta.
 * - animation: 8.4s equivale à metade da velocidade anterior.
 * - Opacidade, tamanho e quantidade de camadas podem ser editados aqui.
 */
.tire-smoke { bottom: 4%; height: 57%; left: 29%; width: 52%; }

.tire-smoke::before,
.tire-smoke::after {
  animation: smokeDrift 8.4s ease-out infinite;
  background: radial-gradient(ellipse, rgba(222, 227, 229, .34) 0%, rgba(165, 173, 176, .18) 35%, transparent 70%);
  border-radius: 50%;
  content: "";
  filter: blur(14px);
  height: 55%;
  left: 15%;
  position: absolute;
  top: 14%;
  transform: rotate(-13deg);
  width: 58%;
}

.tire-smoke::after {
  animation-delay: -4.1s;
  left: 27%;
  top: 3%;
  transform: rotate(9deg) scale(.82);
}

.tire-smoke i {
  animation-duration: 8.4s;
  background: radial-gradient(ellipse, rgba(224, 229, 231, .68) 0%, rgba(157, 165, 169, .38) 35%, transparent 72%);
  height: 64%;
  opacity: .92;
  width: 58%;
}

/* Camadas extras de fumaça: remova ou adicione posições com cuidado. */
.tire-smoke i:nth-child(5) { animation-delay: -4.4s; bottom: 30%; left: 33%; transform: rotate(13deg) scale(.78); }
.tire-smoke i:nth-child(6) { animation-delay: -5.6s; bottom: 43%; left: 11%; transform: rotate(-6deg) scale(.62); }
.tire-smoke i:nth-child(7) { animation-delay: -6.9s; bottom: 7%; left: 55%; transform: rotate(18deg) scale(.66); }

/* 5. Ajustes específicos para telas menores. */
@media (max-width: 700px) {
  header { padding-top: 28px; }
  .content { padding-bottom: 72px; padding-top: 94px; }
  .headline { margin-top: -7px; }
  .headline h1 { font-size: clamp(88px, 28vw, 125px); }
  .headline > div { font-size: 11px; margin-top: 9px; }
  .center-logo { margin-top: 10px; max-width: 145px; }
  .waitlist-form { margin-top: 10px; }
  .speedometer { left: 50%; top: 48%; transform: translate(-50%, -50%); width: 430px; }
  .tire-smoke { bottom: 14%; left: 17%; width: 82%; }
  footer { padding-bottom: 24px; }
}