/* ============================================================================
   LINK NA BIO — estilos específicos da página

   Só entra aqui o que é próprio desta página. Cor, tipo, raio e espaçamento
   vêm de _ds/tokens/tokens.css. Se você precisar de um valor que não existe
   lá, o certo é acrescentar no design system, não improvisar aqui.
   ========================================================================= */

/* Trava de segurança: nada nesta página pode ser mais largo que a tela.
   O corte do 'a' de fundo não depende disto, é feito na .bio__bg. */
html, body { max-width: 100%; }

/* Link na bio é celular. A coluna nunca passa disso, nem no desktop. */
.bio {
  --col: 30rem;

  /* Tipografia display da página. O sistema aperta linha e letra porque foi
     calibrado na Monigue, que é mais estreita; a Anton, em caixa alta e em
     tela de celular, precisa de ar pra ser lida de relance. Vale só aqui:
     quem manda no resto do sistema continua sendo tokens.css. */
  --leading-display: 1.08;
  --tracking-display: 0.03em;

  /* Um tamanho só de manchete pros três cards. O destaque se anuncia pela
     moldura de janela e pela pílula, não por ter a letra maior que a dos
     vizinhos. */
  --size-manchete: 1.75rem;
  position: relative;
  z-index: 1;                    /* acima do 'a' do fundo */
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-7);
  /* env(safe-area) protege o notch e a barra de gestos do iPhone */
  padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------------------------------------------------------------------------
   CABEÇALHO
   ------------------------------------------------------------------------ */
.bio__head {
  position: relative;
  text-align: center;
  padding-block: var(--space-5) var(--space-2);
}

/* ---------------------------------------------------------------------------
   FUNDO DE PADRONAGEM
   O rabisco da marca cobrindo a página inteira, tom sobre tom. Fica parado
   enquanto os cards rolam por cima.

   É uma MÁSCARA alpha, não uma imagem colorida: o fundo é o roxo do tema e
   o rabisco é lilás a 25% por cima. Um arquivo serve qualquer par da paleta,
   e o tom sobre tom sai de duas cores oficiais em vez de um roxo inventado.

   O arquivo não é um tile, as costuras não fecham, então é `cover` e não
   `repeat`. Repetir mostraria a emenda.
   ------------------------------------------------------------------------ */
.bio__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--pattern-ink, var(--boah-lilas));
  opacity: 0.25;
  -webkit-mask-image: url("_ds/assets/patterns/padrao-fundo-mask.png");
          mask-image: url("_ds/assets/patterns/padrao-fundo-mask.png");
  -webkit-mask-size: cover;      mask-size: cover;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* A carinha faz o papel de foto de perfil. Ela já traz o contorno branco
   recortado, então destaca do roxo sem precisar de borda nem sombra. */
.bio__avatar {
  --sticker-size: 6.5rem;
  --sticker-tilt: -5deg;
  margin-inline: auto;
}

/* É um <h1>: numa página de link na bio, o título da página é o nome do
   perfil. Sem ele, o leitor de tela entra na página sem saber onde está. */
.bio__handle {
  margin-top: var(--space-4);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.bio__tagline {
  margin-top: var(--space-3);
  max-width: 26ch;
  margin-inline: auto;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   FILEIRA DE SOCIAIS
   Círculos brancos com o traço preto, no espírito do símbolo da marca.
   44px é o mínimo confortável para o dedo, então nenhum encolhe abaixo disso.
   ------------------------------------------------------------------------ */
.bio__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.bio__social {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: var(--boah-branco);
  color: var(--boah-preto);
  transition: transform var(--motion-fast) var(--ease),
              background var(--motion-fast) var(--ease);
}
.bio__social svg { width: 1.25rem; height: 1.25rem; }
.bio__social:hover { transform: translateY(-2px); background: var(--boah-verde-claro); }
.bio__social:active { transform: translateY(0); }

/* ---------------------------------------------------------------------------
   CARD DE LINK
   O componente central da página. Cor chapada, canto muito arredondado,
   título em Monigue e a seta que anda quando o dedo encosta.
   ------------------------------------------------------------------------ */
.bio-card {
  display: block;
  position: relative;
  background: var(--card-bg, var(--boah-branco));
  color: var(--boah-preto);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  transition: transform var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}
.bio-card:hover  { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.bio-card:active { transform: translateY(-1px); }

.bio-card--rosa        { --card-bg: var(--boah-rosa); }
.bio-card--roxo        { --card-bg: var(--boah-roxo); }
.bio-card--lilas       { --card-bg: var(--boah-lilas); }
.bio-card--verde       { --card-bg: var(--boah-verde); }
.bio-card--verde-claro { --card-bg: var(--boah-verde-claro); }
.bio-card--verde-agua  { --card-bg: var(--boah-verde-agua); }
.bio-card--ciano       { --card-bg: var(--boah-ciano); }

.bio-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.bio-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-size: var(--size-manchete);
  color: var(--boah-preto);
}

.bio-card__desc {
  margin-top: var(--space-2);
  font-size: var(--size-body-sm);
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.72);
  text-wrap: pretty;
}

/* a seta é o único elemento que se move: sinaliza "isso leva pra fora" */
.bio-card__arrow {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.08);
  transition: transform var(--motion-base) var(--ease),
              background var(--motion-base) var(--ease);
}
.bio-card__arrow svg { width: 0.875rem; height: 0.875rem; }
.bio-card:hover .bio-card__arrow {
  transform: translate(3px, -3px);
  background: rgba(0, 0, 0, 0.14);
}

/* ---------------------------------------------------------------------------
   CARD GRANDE
   Mesma família dos outros, com mais ar e um botão no lugar da setinha.
   A diferença de tratamento é o que diz "esse aqui é o principal" sem
   precisar de cor berrante.
   ------------------------------------------------------------------------ */
.bio-card--grande {
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
}

.bio-card__title--grande {
  display: block;
  margin-top: var(--space-3);
}

.bio-card--grande .bio-card__desc {
  margin-top: var(--space-3);
  font-size: var(--size-body);
  line-height: 1.55;
}

.bio-card--grande .boah-btn { margin-top: var(--space-5); }

/* o botão é decorativo: quem carrega o link é o card inteiro.
   Então ele responde ao hover do card, não ao próprio. */
.bio-card--grande:hover .boah-btn { background: var(--boah-lilas); }

/* ---------------------------------------------------------------------------
   DESTAQUE
   A moldura de janela, que é o motivo mais reconhecível da marca depois do
   adesivo. É o lugar mais forte da página e só uma coisa ocupa ele por vez.
   Hoje está reservado pro curso.
   ------------------------------------------------------------------------ */
/* O campo de cor em volta da moldura é o que dá a hierarquia. Sem ele, a
   janela branca vira só mais um card branco e briga com as leituras. */
.bio-destaque {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--boah-preto);
  background: var(--boah-verde-claro);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--motion-base) var(--ease),
              box-shadow var(--motion-base) var(--ease);
}
.bio-destaque:hover  { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.bio-destaque:active { transform: translateY(-1px); }

/* borda visível: é ela que faz a moldura parecer uma janela de verdade */
.bio-destaque .boah-window {
  box-shadow: inset 0 0 0 var(--border-thin) var(--line);
  border-radius: var(--radius-md);
}
.bio-destaque:hover .boah-btn { background: var(--boah-lilas); }

/* O adesivo cavalga o canto superior direito, meio dentro meio fora do campo
   de cor. É o gesto de marca da página e aparece uma vez só. */
.bio-destaque__sticker {
  --sticker-size: 4.75rem;
  --sticker-tilt: 10deg;
  position: absolute;
  right: -0.75rem;
  top: -1.75rem;
  z-index: 3;
}

/* A foto entra emoldurada dentro da janela, com o mesmo respiro dos lados,
   igual ao mockup de referência. */
.bio-destaque__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-sm);
  margin-top: var(--space-4);
}

.bio-destaque__body {
  background: var(--boah-branco);
  padding: var(--space-5);
}

.bio-destaque__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-size: var(--size-manchete);
  margin-top: var(--space-3);
}

.bio-destaque__desc {
  margin-top: var(--space-3);
  font-size: var(--size-body-sm);
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
  text-wrap: pretty;
}

.bio-destaque .boah-btn { margin-top: var(--space-5); }

/* ---------------------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------------------ */
.bio__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  text-align: center;
}

/* Sem faixa de padronagem aqui: a página inteira já é a padronagem, e repetir
   o motivo no rodapé só competiria com o fundo. Sobra o selo. */
.bio__seal {
  --seal-size: 4.5rem;
  margin-inline: auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.18));
}

.bio__sig {
  margin-top: var(--space-3);
  font-size: var(--size-caption);
  color: rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
   ENTRADA
   Um único momento coreografado no carregamento, escalonado de cima para
   baixo. Cada bloco recebe --i pelo script e atrasa por isso.
   ------------------------------------------------------------------------ */
@keyframes bio-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.bio-anim {
  opacity: 0;
  animation: bio-in 620ms var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
  .bio-anim { opacity: 1; animation: none; }
  .bio-card:hover, .bio__social:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   TELAS MAIORES
   A coluna não cresce. O que muda é o respiro em volta e o tamanho do 'a'.
   ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
   TELAS ESTREITAS (iPhone SE e afins, 320px)
   Nada quebra nesse tamanho, mas a manchete vai pra quatro linhas e o botão
   parte no meio. Um grau a menos resolve os dois.
   ------------------------------------------------------------------------ */
@media (max-width: 22.5rem) {
  .bio { --size-manchete: 1.5rem; }
  .bio .boah-btn { padding-inline: var(--space-4); font-size: var(--size-body-sm); }
}

@media (min-width: 48rem) {
  .bio { padding-block: var(--space-8) var(--space-8); gap: var(--space-6); }
  .bio-card { padding: var(--space-6); }
  .bio { --size-manchete: 2rem; }
}