/* Camada de marca Sauter sobre a réplica estática.
   Tipografia oficial: General Sans (variable). As famílias da referência
   (Manrope, LeclercSans-Regular, coign-87-bold) têm o `src` reapontado para
   General Sans no `<style>` do index.html, de modo que todo o layout herda a
   fonte sem alterar os seletores originais. Aqui ficam só a declaração da
   família própria e os ajustes de paleta. */

@font-face {
  font-family: "General Sans";
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  src: url("https://51489712.fs1.hubspotusercontent-na1.net/hubfs/51489712/ai-space-sauter/assets/fonts/GeneralSans-Variable.woff2") format("woff2-variations"),
       url("https://51489712.fs1.hubspotusercontent-na1.net/hubfs/51489712/ai-space-sauter/assets/fonts/GeneralSans-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "General Sans";
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
  src: url("https://51489712.fs1.hubspotusercontent-na1.net/hubfs/51489712/ai-space-sauter/assets/fonts/GeneralSans-VariableItalic.woff2") format("woff2-variations"),
       url("https://51489712.fs1.hubspotusercontent-na1.net/hubfs/51489712/ai-space-sauter/assets/fonts/GeneralSans-VariableItalic.woff2") format("woff2");
}

:root {
  /* Paleta oficial Sauter */
  --sauter-indigo: #6911df;
  --sauter-purple-blue: #372560;
  --sauter-black-rock: #15032d;
  --sauter-ebony: #27233b;
  --sauter-bright-grey: #ebe9ef;
  --sauter-wild-sand: #f4f4f4;
  --sauter-mint: #baef26;

  --racingRed: var(--sauter-indigo);
  --SteelBlue: var(--sauter-mint);
  --dark: var(--sauter-black-rock);
  --black: var(--sauter-black-rock);
  --black600: var(--sauter-ebony);
  --white: var(--sauter-wild-sand) !important;
  --white300: var(--sauter-bright-grey);
  --white200: var(--sauter-bright-grey);
}

body,
button,
input,
select,
textarea {
  font-family: "General Sans", "DM Sans", sans-serif;
}

/* A referência aplica a display em títulos grandes; mantemos a hierarquia
   do brand book — títulos em Regular, corpo em Light. */
h1, h2, h3, h4, h5, h6,
.circuit-title-row h2,
.track-info h3,
.circuit-bottom strong,
.interlagos-chapter {
  font-family: "General Sans", "DM Sans", sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------
   Escala tipográfica

   As duas famílias display da referência são ultracondensadas: medindo o
   alfabeto A–Z, LeclercSans ocupa 1/3,42 e coign-87-bold 1/2,83 da largura
   de General Sans no mesmo corpo. Manter os corpos originais faria todo
   título quebrar linha e estourar a caixa. Cada classe display é reduzida
   pelo fator da sua família (≈0,31 para LeclercSans, ≈0,37 para coign), de
   modo que a largura renderizada volta a ser a do layout original.
   ------------------------------------------------------------------ */

/* Display — LeclercSans (fator ≈0,31) */
.tp-title {
  font-size: 5.4rem;
  line-height: 0.92;
  font-weight: 500;
}

.text-h2 {
  font-size: 9.4rem;
  line-height: 0.82;
}

.title-circuit-mobile {
  font-size: 10.7vw;
  line-height: 0.82;
}

@media (max-width: 1023px) {
  .text-h2 {
    font-size: 5.3rem;
  }

  .text-h2.text-h3L_m {
    font-size: 4.4rem;
  }

  .text-h1 {
    font-size: 5.5rem;
  }
}

@media (min-width: 650px) and (max-width: 1023px) {
  .text-h2 {
    font-size: 9.4rem;
  }
}

@media (min-width: 768px) {
  .tp-title {
    font-size: 12rem;
    line-height: 0.92;
  }
}

/* No desktop o título do hero ganha duas linhas empilhadas: com General Sans
   "BEYOND SPEED" não cabe em uma linha sem virar corpo pequeno demais. */
@media (min-width: 1024px) {
  .tp-title {
    font-size: clamp(14rem, 15.5vw, 24rem);
    line-height: 0.9;
  }
}

/* Display — coign-87-bold (fator ≈0,55)

   Aqui o fator fica acima do estritamente geométrico (0,37): esses rótulos e
   títulos de coluna têm folga na caixa e, no corpo exato, ficariam menores que
   o texto corrido — a hierarquia inverteria. Onde o texto passa a quebrar em
   duas linhas, a caixa acompanha. */
.text-menu {
  font-size: 10.4rem;
  line-height: 0.9;
}

/* Corpos avulsos que a referência declara direto no utilitário do Tailwind.
   A entrelinha vem de outro utilitário em rem absolutos e precisa encolher
   junto, senão sobra um vão entre as linhas empilhadas. */
.text-\[13\.2rem\] {
  font-size: 7.3rem;
}

.leading-\[10\.5rem\] {
  line-height: 7rem;
}

@media (min-width: 1280px) {
  .xl\:text-\[22rem\] {
    font-size: 12rem;
  }

  .xl\:leading-\[17\.6rem\] {
    line-height: 11.5rem;
  }
}

.text-h3 {
  font-size: 5.5rem;
  line-height: 0.96;
}

.text-h3L {
  font-size: 6.6rem;
  line-height: 0.9;
}

.text-h3S {
  font-size: 4rem;
  line-height: 0.96;
  letter-spacing: 0;
}

.text-h4 {
  font-size: 2.8rem;
  line-height: 0.96;
}

.text-h4s {
  font-size: 2.5rem;
  line-height: 1;
}

.text-quote,
.text-cookie-privacy h2 {
  font-size: 2.9rem;
  line-height: 1;
}

/* A citação em marquee usa um clamp próprio no utilitário do Tailwind. */
.text-\[clamp\(190px\2c _27\.778vw_\2c 500px\)\] {
  font-size: clamp(105px, 15.3vw, 275px);
}

@media (max-width: 1023px) {
  .text-menu {
    font-size: 6rem;
  }
}

/* Interlagos — seção própria, já desenhada em General Sans. */
.circuit-title-row h2 {
  font-size: clamp(54px, 8.6vw, 132px);
  line-height: 0.94;
}

.circuit-bottom strong,
.track-info h3 {
  font-size: clamp(34px, 4.2vw, 48px);
}

.interlagos-chapter {
  font-size: clamp(22px, 3vw, 32px);
}

/* O rótulo "Scroll to explore" sai do hero. O nó permanece no DOM porque a
   timeline de intro faz SplitText nele; `visibility` não é tocada pelo GSAP,
   que anima só opacidade e transform. A linha vertical do indicador fica. */
#section-1 [data-scroll-label] {
  visibility: hidden;
}

.circuit-kicker,
.circuit-badge i {
  color: var(--sauter-mint);
}

#jump-circuit {
  background: var(--sauter-indigo);
  font-family: "General Sans", "DM Sans", sans-serif;
  font-weight: 600;
}

.track-info-copy #track-info-detail {
  color: var(--sauter-indigo);
}

/* ==================================================================
   Escala display única

   O tema já reduzia o CORPO das duas famílias ultracondensadas da
   referência, mas as ENTRELINHAS continuavam declaradas em rem fixos
   dentro do utilitário do Tailwind e nunca foram acompanhadas. Medido
   na página: "Life as a driver" saía com 73 px de corpo e 105 px de
   entrelinha (1,44) e a citação em marquee com 147/220 (1,50) — em
   caixa alta display o valor fica entre 0,88 e 0,96, e era isso que
   deixava o bloco gigante e solto.

   Os títulos de seção passam a sair todos do mesmo token, para que
   "LIFE AS A DRIVER" e "INTERLAGOS" tenham o mesmo corpo.
   ================================================================== */
:root {
  --display-section: clamp(4.8rem, 7.8vw, 12rem);
  --display-lh: 0.94;
}

.text-\[13\.2rem\] {
  font-size: var(--display-section);
  line-height: var(--display-lh);
  letter-spacing: -0.015em;
}

.leading-\[10\.5rem\] { line-height: var(--display-lh); }

@media (min-width: 1280px) {
  .xl\:text-\[22rem\] { font-size: var(--display-section); }
  .xl\:leading-\[17\.6rem\] { line-height: var(--display-lh); }
}

.circuit-title-row h2 {
  font-size: var(--display-section);
  line-height: var(--display-lh);
  letter-spacing: -0.015em;
}

/* A citação em marquee tinha o mesmo descompasso corpo/entrelinha. */
.text-\[clamp\(190px\2c _27\.778vw_\2c 500px\)\] { line-height: 0.96; }

/* ==================================================================
   Entrada da seção do circuito

   O espaçador que separava a última seção do rodapé é `lg:hidden`: no
   desktop não existia nenhum respiro e o holograma encostava no bloco
   anterior. O respiro passa a ser do próprio #interlagos — vale nos
   dois breakpoints — e o espaçador antigo é zerado para não somar no
   mobile. A faixa de gradiente evita o corte seco de claro para escuro.
   ================================================================== */
div:has(+ #section-footer) > hr:last-child { padding-top: 0 !important; }

#interlagos {
  padding-top: clamp(150px, 17vw, 300px);
  padding-bottom: clamp(56px, 5vw, 90px);
}

#interlagos::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(150px, 17vw, 300px);
  z-index: -1;
  background:
    linear-gradient(180deg,
      var(--sauter-wild-sand) 0%,
      var(--sauter-wild-sand) 14%,
      #3B2A66 62%,
      var(--sauter-black-rock) 100%);
}

/* Marca de entrada: uma régua mint curta no ponto onde o claro vira escuro. */
#interlagos::after {
  content: "";
  position: absolute;
  left: 5vw;
  top: clamp(150px, 17vw, 300px);
  width: 54px;
  height: 2px;
  background: var(--sauter-mint);
  transform: translateY(-46px);
  box-shadow: 0 0 18px var(--sauter-mint);
  pointer-events: none;
}

/* ==================================================================
   Holograma — sem controles e sem carros

   Os três botões saíram do DOM. A rotação é automática e o arraste
   assume enquanto o ponteiro está pressionado. O que dá vida à cena
   agora é a projeção: varredura, cintilação e os três pontos pulsando.
   ================================================================== */
/* Halo discreto. Um radial forte com `screen` virava uma mancha roxa sobre o
   centro do canvas e apagava o traçado — o brilho tem de vir da cena, não daqui. */
.circuit-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 80% 64% at 50% 64%, #6911DF12 0%, transparent 74%),
    radial-gradient(ellipse 95% 45% at 50% 104%, #BAEF260D 0%, transparent 70%);
}

.circuit-glow::after {
  content: "";
  position: absolute;
  inset: -40% 0;
  height: 26%;
  background: linear-gradient(180deg, transparent 0%, #BAEF2612 45%, #BAEF261F 50%, #BAEF2612 55%, transparent 100%);
  animation: circuit-sweep 7s linear infinite;
}

@keyframes circuit-sweep {
  from { transform: translateY(0); }
  to   { transform: translateY(560%); }
}

.circuit-stage {
  border: 1px solid #4A3A75;
  border-bottom-color: #6911DF;
}

.circuit-hint { left: 2px; bottom: 12px; }

.track-pin { transition: opacity .35s ease; }
.track-pin.is-active span {
  background: var(--sauter-indigo);
  border-color: var(--sauter-mint);
  box-shadow: 0 0 0 8px #BAEF2626, 0 0 34px #BAEF2666;
}
.track-pin.is-active b { color: var(--sauter-mint); }

/* ------------------------------------------------ painel do ponto -------
   O painel media 498 px numa área de 500 e o botão "Próximo" caía fora do
   palco, que tem overflow:hidden. Agora ele é uma coluna com teto: a imagem
   encolhe, o texto rola se precisar e a navegação nunca some. */
.track-info {
  top: 32px;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 64px);
  overflow: hidden;
}

.track-info.is-stepping { animation: info-enter .32s ease-out; }
.track-info > img { height: clamp(104px, 13vw, 160px); flex: none; }
.track-info-copy { padding: 20px 22px; overflow: auto; }
.track-info h3 { font-size: clamp(26px, 3.2vw, 38px); margin: 8px 0 10px; }
.track-info p { font-size: 13.5px; line-height: 1.62; margin-bottom: 14px; }

.track-info-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--sauter-bright-grey);
  margin-top: 16px;
  padding-top: 14px;
}

#track-info-progress {
  font-size: 11px;
  letter-spacing: .14em;
  color: #6B6480;
}

#next-track-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 0;
  cursor: pointer;
  background: var(--sauter-indigo);
  color: var(--sauter-wild-sand);
  font: 600 12px "General Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  transition: background .2s ease;
}

#next-track-info:hover { background: #7E28F0; }
#next-track-info span { transition: transform .2s ease; }
#next-track-info:hover span { transform: translateX(4px); }

/* O detalhe deixa de ser a última linha do bloco: a navegação assume o rodapé. */
.track-info-copy #track-info-detail { border-top: 0; padding-top: 0; }

@media (max-width: 767px) {
  #interlagos::after { left: 20px; }
  .track-info { top: 24px; max-height: calc(100% - 48px); }
  .track-info > img { height: 104px; }
  #next-track-info { padding: 10px 14px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .circuit-glow::after { animation: none; }
  .track-info.is-stepping { animation: none; }
}