@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/exo2.woff2") format("woff2");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plex-mono-600.woff2") format("woff2");
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: #FFFFFF; color: #1F2430; }
:focus-visible { outline: 2px solid #3FA110; outline-offset: 2px; }

#site-nav { --nav-p: 1; --nav-t: 1; --nav-fg: #1F2430; color: var(--nav-fg); border-bottom: 1px solid rgba(226, 230, 224, var(--nav-p)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
#site-nav .nav-camada-vidro { background-color: rgba(18, 22, 28, 0.35); opacity: calc(1 - var(--nav-p)); }
#site-nav .nav-camada-solida { background-color: rgba(255, 255, 255, 0.82); opacity: var(--nav-p); }
#site-nav .marca-simbolo-claro { opacity: calc(1 - var(--nav-t)); }
#site-nav .marca-simbolo-escuro { opacity: var(--nav-t); }
#nav-menu[hidden] { display: none; }

.grade-noite {
  background-color: #12161C;
  background-image: linear-gradient(#1E252E 1px, transparent 1px), linear-gradient(90deg, #1E252E 1px, transparent 1px);
  background-size: 32px 32px;
}

.grade-clara {
  background-color: #FFFFFF;
  background-image: linear-gradient(#EEF1EC 1px, transparent 1px), linear-gradient(90deg, #EEF1EC 1px, transparent 1px);
  background-size: 16px 16px;
}

.faixa {
  flex: 1;
  max-width: 168px;
  height: 4px;
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, #3FA110 0 28px, transparent 28px 56px);
}

.ponto::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ponto, currentColor); }

.ficha-etapas li::before { content: ""; height: 6px; border-radius: 2px; background: #2A313B; }
.ficha-etapas li.feita, .ficha-etapas li.atual { color: #E8EBE6; }
.ficha-etapas li.feita::before { background: #6ECB3B; }
.ficha-etapas li.atual::before { background: #6BA8E0; }

.corte-cota::before, .corte-cota::after { content: ""; flex: 1; width: 1px; background: #87908A; }

.viagem { left: var(--inicio); width: var(--duracao); }

input[type="range"] { accent-color: #2A6E0B; }

.mov body > section:first-of-type { overflow: hidden; }
.mov .revela { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--atraso, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--atraso, 0ms); }
.mov .revela.visivel { opacity: 1; transform: none; }
.mov .faixa { transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--atraso, 0ms) + 150ms); }
.mov .visivel .faixa { transform: none; }
.mov .revela .line-through { text-decoration-color: transparent; transition: text-decoration-color 0.5s ease calc(var(--atraso, 0ms) + 500ms); }
.mov .revela.visivel .line-through { text-decoration-color: currentColor; }
.mov .ficha-etapas li, .mov .ficha-etapas li::before { transition: color 0.4s ease, background-color 0.4s ease; }
.mov [data-ficha-ramo].troca [data-ficha] { animation: troca 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mov #como figure .flex-1 > div { will-change: translate; }

@keyframes troca {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}