/*
 * Tema do wiki — layout inspirado em hubtown.co.in (Awwwards SOTD, 10/06/2026).
 *
 * Linguagem visual reproduzida:
 *   - fundo navy profundo (#020A18) com brilho azul central;
 *   - tinta lavanda clara (#D5E0FF) em vez de branco puro;
 *   - viewport emoldurada por uma linha fina com cantos chanfrados;
 *   - caixas e botões chanfrados ("beveled"), botões de vidro com blur;
 *   - rótulos em mono, caixa alta e tracking largo; títulos grotesk em caixa alta.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                             */
/* ------------------------------------------------------------------ */

:root {
  --hb-inset: 0px;            /* distância da moldura até a borda da janela */
  --hb-cut: 10px;             /* tamanho do chanfro */
  --hb-ease: cubic-bezier(.22, .61, .36, 1);
  --hb-mono: var(--md-code-font-family, "JetBrains Mono"), ui-monospace, monospace;
}

@media screen and (min-width: 76.25em) {
  :root { --hb-inset: 20px; }
}

[data-md-color-scheme="slate"] {
  --hb-bg: #020a18;
  --hb-bg-raise: #07122a;
  --hb-ink: #d5e0ff;
  --hb-ink-2: rgba(213, 224, 255, .68);
  --hb-ink-3: rgba(213, 224, 255, .42);
  --hb-line: rgba(213, 224, 255, .16);
  --hb-line-strong: rgba(213, 224, 255, .34);
  --hb-glass: rgba(213, 224, 255, .05);
  --hb-glow: #1d5bff;
  --hb-glow-soft: rgba(29, 91, 255, .28);
  --hb-link: #8fb3ff;

  --md-hue: 222;
  --md-default-bg-color: var(--hb-bg);
  --md-default-fg-color: var(--hb-ink);
  --md-default-fg-color--light: var(--hb-ink-2);
  --md-default-fg-color--lighter: var(--hb-ink-3);
  --md-default-fg-color--lightest: var(--hb-line);
  --md-primary-fg-color: var(--hb-bg);
  --md-primary-fg-color--light: var(--hb-bg-raise);
  --md-primary-fg-color--dark: var(--hb-bg);
  --md-primary-bg-color: var(--hb-ink);
  --md-primary-bg-color--light: var(--hb-ink-2);
  --md-accent-fg-color: #b9ccff;
  --md-accent-fg-color--transparent: rgba(143, 179, 255, .12);
  --md-typeset-color: var(--hb-ink-2);
  --md-typeset-a-color: var(--hb-link);
  --md-code-bg-color: #050f22;
  --md-code-fg-color: #c9d6fb;
  --md-footer-bg-color: transparent;
  --md-footer-bg-color--dark: transparent;
  --md-footer-fg-color: var(--hb-ink);
  --md-footer-fg-color--light: var(--hb-ink-2);
  --md-footer-fg-color--lighter: var(--hb-ink-3);
  --md-shadow-z1: none;
  --md-shadow-z2: 0 0 0 1px var(--hb-line);
  --md-shadow-z3: 0 0 0 1px var(--hb-line), 0 1rem 3rem rgba(0, 0, 0, .5);
  --md-typeset-table-color: var(--hb-line);
  --md-admonition-bg-color: var(--hb-glass);
}

/* ------------------------------------------------------------------ */
/* Caixa chanfrada reutilizável                                       */
/*   clip-path recorta os cantos; ::before desenha a linha (4 lados + */
/*   4 diagonais) com gradientes, sem SVG.                            */
/* ------------------------------------------------------------------ */

.hb-btn,
.md-search__form,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .highlight,
.md-typeset__scrollwrap,
.md-footer__link {
  --c: var(--hb-cut);
  --bc: var(--hb-line);
}

.hb-btn,
.md-search__form,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .highlight,
.md-typeset__scrollwrap,
.md-footer__link {
  position: relative;
  clip-path: polygon(
    var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)
  );
}

.hb-btn::before,
.md-search__form::before,
.md-typeset .admonition::before,
.md-typeset details::before,
.md-typeset .highlight::before,
.md-typeset__scrollwrap::before,
.md-footer__link::before,
body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--bc) 0 calc(50% + 1px), transparent 0) 0 0 / var(--c) var(--c),
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--bc) 0 calc(50% + 1px), transparent 0) 100% 0 / var(--c) var(--c),
    linear-gradient(to bottom right, transparent calc(50% - 1px), var(--bc) 0 calc(50% + 1px), transparent 0) 100% 100% / var(--c) var(--c),
    linear-gradient(to bottom left, transparent calc(50% - 1px), var(--bc) 0 calc(50% + 1px), transparent 0) 0 100% / var(--c) var(--c),
    linear-gradient(var(--bc), var(--bc)) var(--c) 0 / calc(100% - 2 * var(--c)) 1px,
    linear-gradient(var(--bc), var(--bc)) var(--c) 100% / calc(100% - 2 * var(--c)) 1px,
    linear-gradient(var(--bc), var(--bc)) 0 var(--c) / 1px calc(100% - 2 * var(--c)),
    linear-gradient(var(--bc), var(--bc)) 100% var(--c) / 1px calc(100% - 2 * var(--c));
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ */
/* Cena: fundo, brilho e moldura da viewport                          */
/* ------------------------------------------------------------------ */

body {
  background-color: var(--hb-bg);
  background-image:
    radial-gradient(60rem 32rem at 50% -8rem, var(--hb-glow-soft), transparent 70%),
    radial-gradient(rgba(143, 179, 255, .08) 1px, transparent 1px);
  background-size: auto, 24px 24px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

html {
  scroll-padding-top: calc(3.6rem + var(--hb-inset));
}

/* Moldura fixa: a sombra pinta a calha externa; o ::after (via regra
   compartilhada acima) desenha a linha chanfrada. Só no desktop, onde
   a gaveta de navegação não disputa a borda da tela. */
body::after {
  display: none;
}

@media screen and (min-width: 76.25em) {
  body::after {
    --c: 18px;
    --bc: var(--hb-line);
    display: block;
    position: fixed;
    inset: var(--hb-inset);
    z-index: 6;
    box-shadow: 0 0 0 100vmax var(--hb-bg);
  }

  .md-header,
  .md-container {
    margin-inline: var(--hb-inset);
  }

  .md-header {
    top: var(--hb-inset);
    width: auto;
  }

  .md-container {
    padding-top: var(--hb-inset);
  }

  .md-sidebar {
    top: calc(2.4rem + var(--hb-inset));
  }
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

.md-header {
  background: color-mix(in srgb, var(--hb-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hb-line);
  color: var(--hb-ink);
}

.md-header--shadow {
  box-shadow: none;
}

.md-header__topic:first-child,
.md-header__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
}

.md-header__topic + .md-header__topic {
  font-family: var(--hb-mono);
  font-weight: 400;
  letter-spacing: .16em;
  font-size: .6rem;
  color: var(--hb-ink-2);
}

.md-header__button.md-icon {
  color: var(--hb-ink);
}

/* Busca: vidro chanfrado */
.md-search__form {
  --c: 7px;
  background: var(--hb-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 0;
}

.md-search__form:hover {
  --bc: var(--hb-line-strong);
  background: var(--hb-glass);
}

.md-search__input {
  font-family: var(--hb-mono);
  font-size: .62rem;
  letter-spacing: .08em;
}

.md-search__input::placeholder {
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--hb-ink-3);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--hb-bg-raise);
  border-radius: 0;
}

.md-search__output {
  border-radius: 0;
}

.md-search__scrollwrap,
.md-search-result {
  background: var(--hb-bg-raise);
}

.md-search-result__meta {
  font-family: var(--hb-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .55rem;
  background: transparent;
  color: var(--hb-ink-3);
  border-bottom: 1px solid var(--hb-line);
}

/* ------------------------------------------------------------------ */
/* Navegação lateral — índice vertical de rótulos espaçados           */
/* ------------------------------------------------------------------ */

.md-nav {
  font-size: .62rem;
}

.md-nav__title,
.md-nav__item--section > .md-nav__link {
  font-family: var(--hb-mono);
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .55rem;
  color: var(--hb-ink-3) !important;
}

.md-nav__link {
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hb-ink-2);
  transition: color .25s var(--hb-ease);
}

.md-nav__link:is(:hover, :focus-visible) {
  color: var(--hb-ink);
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--hb-ink);
  font-weight: 400;
}

/* Marcador quadrado no item ativo, como o índice lateral do Hubtown */
.md-nav__link--active {
  position: relative;
}

.md-nav--primary .md-nav__link--active::before,
.md-nav--secondary .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -.6rem;
  top: .55em;
  width: 5px;
  height: 5px;
  background: var(--hb-ink);
  box-shadow: 0 0 10px var(--hb-glow);
}

@media screen and (min-width: 76.25em) {
  .md-sidebar .md-nav__title {
    background: transparent;
    box-shadow: none;
  }
}

/* TOC integrado: linha guia à esquerda */
.md-nav--secondary .md-nav__list,
.md-nav--primary .md-nav__link--active ~ .md-nav .md-nav__list {
  border-left: 1px solid var(--hb-line);
}

/* Gaveta mobile */
@media screen and (max-width: 76.234375em) {
  .md-nav--primary .md-nav__title {
    background: var(--hb-bg-raise);
    color: var(--hb-ink) !important;
  }

  .md-nav--primary .md-nav__title[for="__drawer"] {
    background: var(--hb-bg);
    border-bottom: 1px solid var(--hb-line);
  }

  .md-sidebar--primary {
    background: var(--hb-bg);
  }
}

/* ------------------------------------------------------------------ */
/* Tipografia do conteúdo                                             */
/* ------------------------------------------------------------------ */

.md-typeset {
  font-size: .8rem;
  line-height: 1.75;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--hb-ink);
  font-weight: 700;
  text-transform: uppercase;
}

.md-typeset h1 {
  font-size: 2.1em;
  line-height: 1.08;
  letter-spacing: .04em;
  margin-bottom: 1.2em;
}

.md-typeset h2 {
  font-size: 1.15em;
  letter-spacing: .1em;
  margin-top: 2.6em;
  padding-top: 1.1em;
  /* Linha como background para poder ser "desenhada" na revelação */
  background: linear-gradient(var(--hb-line), var(--hb-line)) 0 0 / 100% 1px no-repeat;
}

.md-typeset h3 {
  font-size: .95em;
  letter-spacing: .1em;
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--hb-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--hb-ink);
}

.md-typeset strong {
  color: var(--hb-ink);
}

.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--hb-line-strong);
  text-underline-offset: .2em;
  transition: color .25s var(--hb-ease), text-decoration-color .25s var(--hb-ease);
}

.md-typeset a:is(:hover, :focus-visible) {
  text-decoration-color: currentColor;
}

.md-typeset .headerlink {
  text-decoration: none;
}

.md-typeset hr {
  border-bottom-color: var(--hb-line);
}

/* Blockquote como linha de status: mono, caixa alta, marcador quadrado */
.md-typeset blockquote {
  border-left: 0 !important;
  padding: .7em 1em .7em 2em !important;
  position: relative;
  font-family: var(--hb-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--hb-ink-2);
  background: var(--hb-glass);
}

.md-typeset blockquote > :first-child {
  margin-top: 0;
}

.md-typeset blockquote > :last-child {
  margin-bottom: 0;
}

.md-typeset blockquote::before {
  content: "";
  position: absolute;
  left: .75em;
  top: 1.45em;
  width: 5px;
  height: 5px;
  background: var(--hb-ink);
  box-shadow: 0 0 10px var(--hb-glow);
}

/* Código inline */
.md-typeset code {
  border-radius: 0;
  font-size: .82em;
}

.md-typeset :not(pre) > code {
  background: var(--hb-glass);
  box-shadow: inset 0 0 0 1px var(--hb-line);
  padding: .1em .4em;
}

/* Blocos de código: caixa chanfrada */
.md-typeset .highlight {
  margin: 1.2em 0;
}

.md-typeset pre > code {
  padding: 1.1em 1.3em;
}

.md-clipboard {
  color: var(--hb-ink-3);
}

/* Tabelas: ocupam a largura toda para a caixa chanfrada fechar certo */
.md-typeset__scrollwrap {
  margin: 1.4em 0;
}

.md-typeset__table {
  display: block;
  padding: 0;
}

.md-typeset__table table:not([class]) {
  display: table;
  width: 100%;
}

.md-typeset table:not([class]) {
  border: 0;
  border-radius: 0;
  background: var(--hb-glass);
  font-size: .72rem;
  margin: 0;
}

.md-typeset table:not([class]) th {
  font-family: var(--hb-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .58rem;
  color: var(--hb-ink-3);
  background: transparent;
  border-bottom: 1px solid var(--hb-line-strong);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--hb-line);
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color .25s var(--hb-ease);
}

.md-typeset table:not([class]) tbody tr:hover {
  background: var(--hb-glass);
  box-shadow: none;
}

/* Admonitions e details: vidro chanfrado com rótulo mono */
.md-typeset .admonition,
.md-typeset details {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--hb-glass);
  font-size: .76rem;
  padding: 0 1.2em;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--hb-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .6rem;
  color: var(--hb-ink);
  background: transparent !important;
  border-bottom: 1px solid var(--hb-line);
  margin: 0 -1.2em;
  padding: .7em 1.2em .7em 2.6em;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  left: 1.1em;
  top: .78em;
  width: .9rem;
  height: .9rem;
  background-color: var(--hb-link);
}

.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
  margin-bottom: 1.1em;
}

/* Footnotes */
.md-typeset .footnote {
  font-size: .7rem;
  color: var(--hb-ink-3);
}

/* ------------------------------------------------------------------ */
/* Componentes do hero (home.html)                                    */
/* ------------------------------------------------------------------ */

.hb-label {
  font-family: var(--hb-mono);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .55rem;
  color: var(--hb-ink-2);
  margin: 0;
}

.hb-btn {
  --c: 7px;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .85em 1.6em;
  font-family: var(--hb-mono);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--hb-ink);
  background: var(--hb-glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  text-decoration: none;
  transition: background-color .3s var(--hb-ease), color .3s var(--hb-ease);
}

.hb-btn::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  order: -1;
}

.hb-btn:is(:hover, :focus-visible) {
  --bc: var(--hb-line-strong);
  background: color-mix(in srgb, var(--hb-ink) 12%, transparent);
  color: var(--hb-ink);
}

.hb-btn--solid {
  --bc: transparent;
  background: var(--hb-ink);
  color: var(--hb-bg);
}

.hb-btn--solid:is(:hover, :focus-visible) {
  --bc: transparent;
  background: color-mix(in srgb, var(--hb-ink) 85%, var(--hb-glow));
  color: var(--hb-bg);
}

.hb-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
  padding: 2.5rem 1rem 3.5rem;
  min-height: min(78vh, 46rem);
  justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--hb-line);
}

.hb-hero__scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(36rem 20rem at 50% 38%, var(--hb-glow-soft), transparent 70%);
}

/* Cubo luminoso central — a peça focal do Hubtown, em CSS 3D.
   O JS alimenta --rx/--ry/--lift a partir do scroll e do ponteiro. */
.hb-cube {
  --s: clamp(5.5rem, 11vw, 8rem);
  position: absolute;
  left: 50%;
  top: 31%;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  perspective: 900px;
}

/* Halo que não gira junto com o cubo */
.hb-cube::before {
  content: "";
  position: absolute;
  inset: -70%;
  background: radial-gradient(closest-side, rgba(29, 91, 255, .55), rgba(29, 91, 255, .12) 55%, transparent);
  filter: blur(8px);
}

.hb-cube__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform:
    translateY(calc(var(--lift, 0px) * -1))
    rotateX(var(--rx, -18deg))
    rotateY(var(--ry, 38deg));
}

.hb-cube__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .38), transparent 42%),
    linear-gradient(200deg, #6fb6ff 0%, #1d5bff 48%, #0b2a8a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(213, 224, 255, .5),
    inset 0 0 2.4rem rgba(111, 182, 255, .55);
}

.hb-cube__face--front  { transform: translateZ(calc(var(--s) / 2)); }
.hb-cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.hb-cube__face--right  { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.82); }
.hb-cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.82); }
.hb-cube__face--top    { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); filter: brightness(1.25); }
.hb-cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); filter: brightness(.55); }

.hb-cube__face span {
  font-family: var(--hb-mono);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  letter-spacing: .12em;
  color: rgba(2, 10, 24, .7);
  mix-blend-mode: overlay;
}

.hb-hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hb-hero__floor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 48%;
  background:
    linear-gradient(to top, var(--hb-bg) 10%, transparent),
    repeating-linear-gradient(90deg, var(--hb-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, var(--hb-line) 0 1px, transparent 1px 48px);
  transform: perspective(26rem) rotateX(62deg);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(60% 90% at 50% 100%, #000 30%, transparent 75%);
}

.hb-motion .hb-hero__floor {
  animation: hb-floor 2.4s linear infinite;
}

@keyframes hb-floor {
  to { background-position: 0 0, 48px 0, 0 48px; }
}

.hb-hero > :not(.hb-hero__scene) {
  position: relative;
}

.hb-hero__title {
  margin: 0;
  font-size: clamp(1.6rem, 4.2vw, 2.9rem);
  line-height: 1.04;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hb-ink);
  text-wrap: balance;
}

.hb-hero__lead {
  max-width: 30rem;
  margin: 0;
  font-size: .72rem;
  line-height: 1.7;
  color: var(--hb-ink-2);
}

.hb-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: .4rem;
}

/* ------------------------------------------------------------------ */
/* Movimento (javascripts/hubtown.js)                                 */
/*   Só vale com html.hb-motion, que o JS liga quando não há          */
/*   prefers-reduced-motion. Easing e duração medidos no Hubtown:     */
/*   cubic-bezier(.2, 0, 0, 1) em ~1s.                                */
/* ------------------------------------------------------------------ */

:root {
  --hb-ease-out: cubic-bezier(.2, 0, 0, 1);
}

/* Scramble: sizer invisível segura a largura; o texto real fica para leitores de tela */
.hb-scr {
  display: inline-grid;
  white-space: nowrap;
}

.hb-scr > span {
  grid-area: 1 / 1;
}

.hb-scr__size {
  visibility: hidden;
}

.hb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Revelação de blocos do conteúdo */
.hb-motion .hb-reveal {
  opacity: 0;
  translate: 0 14px;
  transition:
    opacity .9s var(--hb-ease-out) var(--hb-delay, 0ms),
    translate .9s var(--hb-ease-out) var(--hb-delay, 0ms);
}

.hb-motion .hb-reveal.is-in {
  opacity: 1;
  translate: none;
}

/* h2: a linha superior se desenha da esquerda para a direita */
.hb-motion .md-typeset h2.hb-reveal {
  background-size: 0 1px;
  transition:
    opacity .9s var(--hb-ease-out) var(--hb-delay, 0ms),
    translate .9s var(--hb-ease-out) var(--hb-delay, 0ms),
    background-size 1.2s var(--hb-ease-out) calc(var(--hb-delay, 0ms) + 100ms);
}

.hb-motion .md-typeset h2.hb-reveal.is-in {
  background-size: 100% 1px;
}

/* Caixas chanfradas: o contorno se traça a partir do canto superior esquerdo */
.hb-motion .hb-reveal:is(.admonition, details, .highlight, .md-typeset__scrollwrap)::before {
  clip-path: inset(0 100% 100% 0);
  transition: clip-path 1.2s var(--hb-ease-out) calc(var(--hb-delay, 0ms) + 150ms);
}

.hb-motion .hb-reveal.is-in:is(.admonition, details, .highlight, .md-typeset__scrollwrap)::before {
  clip-path: inset(0);
}

/* Hero: título sobe linha a linha por trás de uma máscara */
.hb-line {
  display: block;
  overflow: hidden;
  padding-block: .1em;
  margin-block: -.1em;
}

.hb-line > span {
  display: inline-block;
}

.hb-motion .hb-hero .hb-line > span {
  transition: translate 1.1s var(--hb-ease-out);
}

.hb-motion .hb-hero .hb-line + .hb-line > span {
  transition-delay: .1s;
}

.hb-motion .hb-hero:not(.is-in) .hb-line > span {
  translate: 0 110%;
}

.hb-motion .hb-hero :is(.hb-label, .hb-hero__lead, .hb-hero__actions, .hb-hero__floor) {
  transition:
    opacity 1s var(--hb-ease-out) var(--d, 0s),
    translate 1s var(--hb-ease-out) var(--d, 0s);
}

.hb-motion .hb-hero .hb-hero__lead { --d: .3s; }
.hb-motion .hb-hero .hb-hero__actions { --d: .45s; }
.hb-motion .hb-hero .hb-hero__floor { --d: .2s; }

.hb-motion .hb-hero:not(.is-in) :is(.hb-label, .hb-hero__lead, .hb-hero__actions, .hb-hero__floor) {
  opacity: 0;
}

.hb-motion .hb-hero:not(.is-in) :is(.hb-hero__lead, .hb-hero__actions) {
  translate: 0 12px;
}

/* Cubo nasce de um ponto, como o triângulo do logo do Hubtown */
.hb-motion .hb-cube {
  transition: scale 1.4s var(--hb-ease-out) .1s, opacity .6s var(--hb-ease-out) .1s;
}

.hb-motion .hb-hero:not(.is-in) .hb-cube {
  scale: 0;
  opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Loader — barra de "pixels", percentual mono e wordmark             */
/* ------------------------------------------------------------------ */

.hb-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--hb-bg);
  color: var(--hb-ink);
  font-family: var(--hb-mono);
  transition: opacity .8s var(--hb-ease-out), visibility .8s;
}

html:not(.hb-loading) .hb-loader:not(.is-out) {
  display: none;
}

.hb-loader.is-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hb-loading body {
  overflow: hidden;
}

.md-header,
.md-container {
  transition: opacity .8s var(--hb-ease-out);
}

.hb-loading :is(.md-header, .md-container) {
  opacity: 0;
}

.hb-loader__bar,
.hb-loader__done {
  grid-area: 1 / 1;
  transition: opacity .5s var(--hb-ease-out), translate .8s var(--hb-ease-out);
}

.hb-loader__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: .7rem;
}

.hb-loader__cells {
  grid-column: 1 / -1;
  display: flex;
  gap: 14px;
}

.hb-loader__cell {
  width: 7px;
  height: 7px;
  background: var(--hb-ink);
  opacity: .22;
  scale: 0;
  transition:
    scale .7s var(--hb-ease-out) calc(var(--d) * 35ms),
    opacity .25s linear,
    box-shadow .25s linear;
}

/* Antes de contar: só o pixel central, como um ponto */
.hb-loader__cell:nth-child(7) {
  scale: 1;
  opacity: 1;
}

.is-counting .hb-loader__cell {
  scale: 1;
}

.hb-loader__cell.is-on {
  opacity: 1;
  box-shadow: 0 0 10px var(--hb-glow);
}

.hb-loader__pct,
.hb-loader__label,
.hb-loader__status {
  font-size: .5rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--hb-ink-2);
}

.hb-loader__pct {
  grid-column: 2;
  grid-row: 1;
}

.hb-loader__label {
  grid-column: 1;
  grid-row: 3;
}

.hb-loader__pct,
.hb-loader__label {
  opacity: 0;
  transition: opacity .6s var(--hb-ease-out) .4s;
}

.is-counting :is(.hb-loader__pct, .hb-loader__label) {
  opacity: 1;
}

.hb-loader__done {
  display: grid;
  gap: .6rem;
  opacity: 0;
  translate: 0 8px;
}

.hb-loader__mark {
  font-family: var(--md-text-font-family, "Space Grotesk"), sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

.hb-loader__status {
  display: grid;
  line-height: 1.7;
}

.is-loaded .hb-loader__bar {
  opacity: 0;
  translate: 0 -8px;
}

.is-loaded .hb-loader__done {
  opacity: 1;
  translate: none;
}

.is-out .hb-loader__done {
  translate: 0 -12px;
}

/* ------------------------------------------------------------------ */
/* Footer — cartões anterior/próximo + barra inferior fina, como      */
/* "SOUND OFF · SCROLL TO EXPLORE · CHAT WITH US" do Hubtown          */
/* ------------------------------------------------------------------ */

.md-footer {
  border-top: 1px solid var(--hb-line);
}

/* No desktop o rodapé termina acima da moldura fixa, não por baixo dela */
@media screen and (min-width: 76.25em) {
  .md-footer {
    margin-bottom: var(--hb-inset);
  }
}

.md-footer__inner:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  padding: 1.6rem .8rem;
}

.md-footer .md-footer__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: auto;
  margin: 0;
  padding: 1rem 1.2rem;
  background: var(--hb-glass);
  transition: background-color .3s var(--hb-ease);
}

.md-footer__link:is(:hover, :focus) {
  --bc: var(--hb-line-strong);
  opacity: 1;
  background: color-mix(in srgb, var(--hb-ink) 8%, transparent);
}

.md-footer__link--next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}

.md-footer__button {
  margin: 0;
  padding: 0;
  transition: translate .4s var(--hb-ease);
}

.md-footer__link--prev:is(:hover, :focus) .md-footer__button { translate: -4px 0; }
.md-footer__link--next:is(:hover, :focus) .md-footer__button { translate: 4px 0; }

.md-footer__title {
  flex-grow: 0;
  padding: 0;
  margin: 0;
  font-size: .72rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.md-footer__link--prev .md-footer__title {
  display: block;
}

.md-footer__direction {
  position: static;
  display: block;
  margin-bottom: .35rem;
  font-family: var(--hb-mono);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .5rem;
  opacity: 1;
  color: var(--hb-ink-3);
}

.md-footer__title .md-ellipsis {
  white-space: normal;
}

/* Barra inferior */
.md-footer-meta {
  background: transparent;
  border-top: 1px solid var(--hb-line);
}

.md-footer-meta__inner {
  display: block;
  padding: 0 .8rem;
}

.md-copyright {
  width: 100%;
  margin: 0;
  padding: .9rem 0;
  font-family: var(--hb-mono);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .5rem;
  color: var(--hb-ink-3);
}

.hb-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

.hb-foot__item {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  white-space: nowrap;
}

.hb-foot__credit {
  justify-self: end;
}

.md-typeset .hb-foot a,
.hb-foot a {
  color: var(--hb-ink-2);
  text-decoration: none;
  transition: color .25s var(--hb-ease);
}

.hb-foot a:is(:hover, :focus-visible) {
  color: var(--hb-ink);
}

/* Marcador quadrado pulsando, como o indicador de som do Hubtown */
.hb-foot__dot {
  width: 5px;
  height: 5px;
  background: var(--hb-ink);
  box-shadow: 0 0 8px var(--hb-glow);
}

.hb-motion .hb-foot__dot {
  animation: hb-pulse 2.4s var(--hb-ease-out) infinite;
}

@keyframes hb-pulse {
  50% { opacity: .25; }
}

.hb-foot__arrow {
  width: 0;
  height: 0;
  border-bottom: 4px solid currentColor;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  transition: translate .4s var(--hb-ease);
}

.hb-foot__top:is(:hover, :focus-visible) .hb-foot__arrow {
  translate: 0 -2px;
}

@media screen and (max-width: 44.984375em) {
  .md-footer__inner:not([hidden]) {
    grid-template-columns: 1fr;
  }

  .md-footer__link--next {
    grid-column: 1;
  }

  .hb-foot {
    grid-template-columns: 1fr auto;
  }

  .hb-foot__credit {
    display: none;
  }
}

.md-top {
  font-family: var(--hb-mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .55rem;
  border-radius: 0;
  background: var(--hb-ink);
  color: var(--hb-bg);
  box-shadow: none;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

.md-top:hover {
  background: var(--hb-ink);
  color: var(--hb-bg);
}

/* Seleção e foco */
::selection {
  background: var(--hb-glow);
  color: #fff;
}

:focus-visible {
  outline-color: var(--hb-link);
}