/* ==========================================================================
   Home — uma tela, sem rolagem.

   O cartão de visita de um designer de fintech é um cartão. O nome vira um
   cartão escuro, com as proporções da norma ISO/IEC 7810 ID-1, gravado com
   guilhoché — as rosetas de linhas finas das cédulas e dos cheques. No
   celular, inclinar o aparelho faz a gravação mudar de cor como a faixa
   holográfica de uma cédula. No computador, o mouse faz esse papel.

   Depois do pouso, o cartão vira a moeda BMF: a roseta sai do recorte do
   cartão e aparece inteira, e a liquidação corre pela página nos trilhos
   do fundo. Um toque alterna entre os dois.

   Tipografia: títulos e texto em San Francisco (SF Pro Display e SF Pro
   Text). Nenhuma das duas é distribuída para a web: são fontes de sistema.
   Em iPhone, iPad e Mac renderizam como pedido; em Windows e Android caem
   para Arial e para a fonte do sistema. A página não baixa fonte nenhuma.
   ========================================================================== */

/* Composição: uma coluna no celular (cartão, título, texto, botões);
   duas no desktop e no celular deitado (texto à esquerda, cartão à direita). */
:root {
  color-scheme: light;

  --paper:      #fafafa;
  --ink:        #111113;
  --ink-2:      #55565c;
  --line:       #dcdce0;
  --accent:     #c02f10;
  --accent-ink: #ffffff;
  --alta:       #0a7647;

  --titulo: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --texto:  -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
            system-ui, "Segoe UI", Roboto, sans-serif;
  --mono:   ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --compr:  "SF Compressed", "SF Pro Display Condensed", var(--texto);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper:      #0e0f12;
    --ink:        #f4f4f2;
    --ink-2:      #a3a5ad;
    --line:       #2a2c32;
    --accent:     #ff7a58;
    --accent-ink: #14100e;
    --alta:       #43d796;

  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:      #0e0f12;
  --ink:        #f4f4f2;
  --ink-2:      #a3a5ad;
  --line:       #2a2c32;
  --accent:     #ff7a58;
  --accent-ink: #14100e;
  --alta:       #43d796;

}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

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

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

/* ------------------------------------------------------------------ tela -- */

.tela {
  min-height: 100vh;
  min-height: 100svh;
  width: min(100% - 40px, 760px);
  margin-inline: auto;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: 20px;
}
.perdido { grid-template-rows: auto 1fr auto; }

/* Home: o bloco inteiro fica centrado na tela. */
.tela:not(.perdido) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 520px) { .tela { width: calc(100% - 32px); } }

.nome {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.miolo {
  align-self: center;
  padding-block: clamp(40px, 10vh, 96px);
}
.miolo--cartao { padding-block: clamp(16px, 4vh, 48px); }

.assina {
  margin: 0 0 clamp(14px, 2.4vw, 22px);
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}

.titulo {
  margin: 0;
  font-family: var(--titulo);
  font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
  max-width: 12ch;
}
.titulo em { font-style: normal; color: var(--accent); }

.sub {
  margin: clamp(20px, 3vw, 28px) 0 0;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34em;
}

.sub--ia { margin-top: 12px; }
.sub strong { color: var(--ink); font-weight: 600; white-space: nowrap; }

.acoes {
  margin-top: clamp(28px, 5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { border-color: var(--ink); }
.btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.pe {
  margin: 22px 0 0;
  font-family: var(--compr);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ----------------------------------------------------------------- fundo -- */

/* Trilhos de liquidação com microimpressão (assets/trilhos.js): fica atrás
   de tudo, quase invisível. */
.fundo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ------------------------------------------------------------------ fita -- */

/* Fita de cotações no topo: os pontos da jornada financeira em que atuei,
   na ordem em que uma empresa passa por eles, com o resultado de cada um.
   Verde é impacto bom, mesmo quando o número cai (tempo, chamados). Toque
   ou mouse em cima pausa. */
.fita {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 36px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  background: var(--paper);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.fita__vivo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px 0 16px;
  border-right: 1px solid var(--line);
  background: var(--paper);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  z-index: 1;
}
.fita__vivo i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa { 50% { opacity: .25; } }
.fita__janela {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent);
}
.fita__trilho {
  display: inline-flex;
  height: 100%;
  animation: corre 60s linear infinite;
}
.fita:hover .fita__trilho,
.fita.is-pausada .fita__trilho { animation-play-state: paused; }
@keyframes corre { to { transform: translateX(-50%); } }
/* a fita entra na conta da tela única */
.fita + .tela { min-height: calc(100vh - 36px); min-height: calc(100svh - 36px); }

/* Atalho na tela de início: o iOS borra a faixa do relógio e ela chega até a
   fita. Desce a fita para fora do blur e tira a folga da conta da altura. */
@media (display-mode: standalone) {
  .fita { margin-top: 30px; }
  .fita + .tela { min-height: calc(100vh - 66px); min-height: calc(100svh - 66px); }
}
.fita ul {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fita li { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 14px; color: var(--ink-2); }
.fita li + li:not(.fita__etapa) { border-left: 1px solid var(--line); }
.fita b { font-weight: 600; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; }
.fita .alta { font-weight: 600; color: var(--alta); }
.fita .neutro { font-weight: 600; color: var(--ink); }
.fita__etapa {
  margin-left: 6px;
  padding: 4px 9px !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fita__etapa + li { border-left: 0 !important; }

/* ---------------------------------------------------------------- cartão -- */

/* O tamanho acompanha a altura útil da tela: no Safari do iPhone, com as
   barras visíveis, o cartão encolhe antes de empurrar o texto para fora. */
.cena {
  width: min(100%, 340px, 44vh);
  width: min(100%, 340px, 44svh);
  margin: 0 0 clamp(26px, 4.8vh, 44px);
  perspective: 1100px;
}

.voo {
  --m: 0;   /* 0 = cartão, 1 = moeda (assets/cartao.js) */
  position: relative;
  aspect-ratio: 85.6 / 53.98;
  transform-style: preserve-3d;
  animation: pousa 1.1s cubic-bezier(.18, .9, .22, 1) both;
}
@keyframes pousa {
  from { transform: translate3d(0, 28px, -80px) rotateX(36deg) rotateZ(-5deg); }
  to   { transform: none; }
}

/* brilho colorido que vaza por baixo do cartão, na cor que está na frente */
.halo {
  position: absolute;
  left: calc(12% + var(--m) * 14%);
  right: calc(12% + var(--m) * 14%);
  bottom: -6%;
  height: 32%;
  border-radius: 50%;
  background: linear-gradient(90deg, #4fd1c5, #6aa6ff, #a77bff, #ff6fae, #ff7a58, #4fd1c5);
  background-size: 300% 100%;
  background-position: calc(var(--fase, .3) * 100%) 0;
  filter: blur(26px);
  opacity: .45;
  pointer-events: none;
  /* bem atrás do cartão: sem isso, quando ele gira, o plano do brilho
     atravessa o do cartão e corta a gravação ao meio */
  transform: translateZ(-120px);
}

/* O cartão tem um visual só, escuro nos dois temas, como os da Carteira:
   é um objeto, não um pedaço da página. */
.cartao {
  --mx: .64;
  --my: .34;
  --inclina: 1;

  position: relative;
  /* a moeda tem o diâmetro da altura do cartão: 53,98 / 85,6 = 63,06% da
     largura, centrada; o canto vira círculo */
  width: calc(100% - var(--m) * 36.94%);
  height: 100%;
  margin-left: calc(var(--m) * 18.47%);
  border-radius: calc(5.2% + var(--m) * 44.8%) / calc(8.2% + var(--m) * 41.8%);
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background:
    radial-gradient(120% 90% at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(160deg, #26262a, #131315 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    calc((.5 - var(--mx)) * 30px) calc(18px + (.5 - var(--my)) * 16px) 38px -14px rgba(0, 0, 0, .5);
  transform:
    rotateY(calc((var(--mx) - .5) * 24deg * var(--inclina)))
    rotateX(calc((.5 - var(--my)) * 18deg * var(--inclina)));
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Giroscópio: quem inclina é o próprio celular, então o cartão quase não
   gira na tela — o que muda é a luz, como num cartão de verdade na mão. */
.cartao.is-giro { --inclina: .3; }

.cartao__arte {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  /* o script fixa o tamanho do cartão: a gravação não encolhe com a moeda,
     só fica recortada pelo círculo */
  transform: translate(-50%, -50%);
}

.cartao__nome {
  position: absolute;
  left: 7%;
  top: 11%;
  z-index: 2;
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  font-size: 4.6cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #f5f5f7;
  opacity: calc(1 - var(--m) * 2.5);
}

/* ---------------------------------------------------------------- moeda -- */

.cartao[data-moeda] { cursor: pointer; }
.cartao__marca {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  margin: 0;
  padding-left: .2em;   /* compensa o espaço depois da última letra */
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 11cqw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .2em;
  color: #f5f5f7;
  opacity: calc(var(--m) * 2.5 - 1.5);
  pointer-events: none;
}


/* -------------------------------------------------------------- gravura -- */

/* O nome e o BMF em talho-doce, desenhados por assets/cartao.js (onde o
   cartão tem data-gravura). O texto continua aqui para leitor de tela, busca
   e seleção; na tela, o desenho o substitui. A fonte só é baixada onde a
   gravura está ligada. */
@font-face {
  font-family: "Unbounded";
  src: url("fonts/unbounded-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
.cartao.is-gravado .cartao__nome,
.cartao.is-gravado .cartao__marca { color: transparent; }

/* ------------------------------------------- desktop e celular deitado -- */

@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) and (max-height: 600px) {
  .tela { width: min(100% - 64px, 1120px); }
  .miolo--cartao {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "texto cena";
    align-items: center;
    column-gap: clamp(32px, 6vw, 96px);
  }
  .miolo--cartao .cena {
    grid-area: cena;
    justify-self: end;
    width: min(100%, 460px);
    margin: 0;
  }
  .miolo--cartao .texto { grid-area: texto; min-width: 0; }
}

/* ------------------------------------------------------ telas baixas -- */

/* iPhone SE e celular deitado: a primeira dobra continua sendo a página toda. */
@media (max-height: 780px) {
  .tela { padding-block: 14px; }
  .fita + .tela { padding-block: 8px; }
  .miolo { padding-block: 20px; }
  .miolo--cartao { padding-block: 8px; }
  .titulo { font-size: clamp(2rem, min(9vh, 10vw), 3.4rem); max-width: 22ch; }
  .sub { margin-top: 12px; font-size: .95rem; line-height: 1.5; }
  .sub--ia { margin-top: 8px; }
  .assina { margin-bottom: 8px; font-size: .75rem; }
  .pe { margin-top: 16px; font-size: .68rem; }
  .acoes { margin-top: 18px; }
  .btn { min-height: 44px; }
}

/* --------------------------------------------------- movimento reduzido -- */

/* Sem voo e sem inclinação: a gravação aparece pronta e só a cor
   acompanha a posição do aparelho ou do mouse. */
@media (prefers-reduced-motion: reduce) {
  .voo { animation: none; }
  .fita__vivo i { animation: none; }
  .fita__trilho { animation-duration: 110s; }
  .cartao { transform: none; }
}

/* ---------------------------------------------------------- página 404 -- */

.perdido .titulo { max-width: 14ch; }