/* Página /bio, links da Jéssica Freire.

   Namespace: bio-. Registrado em docs/css-namespaces.md, e é o MESMO da /bio do
   Yan de propósito: as duas páginas são o mesmo componente, com a mesma estrutura
   e os mesmos papéis, mudando só a paleta de cada marca. A regra de prefixo por
   marca existe para nomes com definições diferentes, que foi o caso do blog contra
   a página de venda; aqui a definição é a mesma e os dois arquivos nunca são
   servidos juntos, porque são domínios diferentes.

   Sem framework e sem fonte externa. A pilha do sistema carrega instantâneo por
   já estar no dispositivo, e numa página de link na bio o tempo até a primeira
   pintura é o que decide se a pessoa espera ou volta. */

:root{
  --bio-fundo:       #0a0a0a;
  --bio-superficie:  #171717;
  --bio-borda:       rgba(255,255,255,.10);
  --bio-borda-forte: rgba(255,255,255,.20);
  --bio-texto:       #fafafa;
  --bio-texto-2:     #b3b3b3;
  /* Paleta amostrada do CSS servido em jessicafreire.com, a mesma da página de
     venda. Ver jessica/NOTAS.md, seção 3.2. */
  --bio-magenta:     #fe2a5b;
  --bio-magenta-bt:  #d81b4a;   /* 5,0:1 com texto branco, passa em AA normal */
  --bio-ciano:       #24f5d2;   /* 12,9:1 sobre a superfície, usado como texto */
  --bio-raio:        16px;
  --bio-largura:     620px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bio-fundo);
  color:var(--bio-texto);
  font-family:"Poppins", "Poppins Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* Link de pular para o conteúdo. Escondido por tamanho zero e não por posição
   negativa: `left:-9999px` tira o elemento da viewport, e todo verificador de
   layout passa a acusar conteúdo cortado. Mesma técnica usada no blog. */
.bio-pular{
  position:absolute;
  top:8px; left:8px; z-index:20;
  width:1px; height:1px;
  padding:0; overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  background:var(--bio-superficie); color:var(--bio-texto);
  border-radius:var(--bio-raio);
  text-decoration:none;
}
.bio-pular:focus{
  width:auto; height:auto;
  padding:12px 18px;
  overflow:visible;
  clip-path:none;
}

/* ---------- capa e identidade ---------- */

.bio-capa{
  position:relative;
  min-height:280px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:28px 20px 0;
  text-align:center;
  overflow:hidden;
}
.bio-capa__fundo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
/* o degradê é o que garante contraste do texto sobre a foto, em qualquer foto */
.bio-capa::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(10,10,10,.35) 0%,
    rgba(10,10,10,.72) 55%,
    var(--bio-fundo) 100%);
}
.bio-capa__interno{ position:relative; z-index:2; width:100%; max-width:var(--bio-largura); }

.bio-avatar{
  width:104px; height:104px;
  border-radius:50%;
  border:3px solid var(--bio-borda-forte);
  object-fit:cover;
  display:block; margin:0 auto 14px;
  box-shadow:0 8px 30px rgba(0,0,0,.55);
}

.bio-nome{
  font-size:clamp(25px, 6vw, 33px);
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 4px;
}
.bio-papel{
  color:var(--bio-ciano);
  font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 12px;
}
.bio-linha{
  color:var(--bio-texto-2);
  font-size:15px;
  margin:0 auto 26px;
  max-width:38em;
  text-wrap:pretty;
}

/* ---------- os cartões de link ---------- */

.bio-links{
  max-width:var(--bio-largura);
  margin:0 auto;
  padding:0 20px 40px;
  display:grid;
  gap:13px;
}

/* O cartão inteiro é a foto. O banner entra como <img> em vez de
   background-image de propósito: assim ele aceita srcset, largura e altura
   declaradas (sem salto de layout) e carregamento preguiçoso, três coisas que
   background-image não tem. */
.bio-card{
  position:relative;
  display:block;
  min-height:150px;
  background:var(--bio-superficie);
  border:1px solid var(--bio-borda);
  border-radius:var(--bio-raio);
  overflow:hidden;
  isolation:isolate;
  text-decoration:none;
  color:inherit;
  transition:border-color .18s ease, transform .18s ease;
}
.bio-card:hover,
.bio-card:focus-visible{
  border-color:var(--bio-borda-forte);
  transform:translateY(-2px);
}
.bio-card--destaque{ border-color:rgba(254,42,91,.45); }
.bio-card--destaque:hover,
.bio-card--destaque:focus-visible{ border-color:var(--bio-magenta); }

.bio-card__fundo{
  position:absolute; inset:0; z-index:0;
  display:block;
}
/* `right top` é o que preserva a expert: os banners foram gerados com ele no
   terço direito, e é esse terço que precisa sobreviver ao corte em qualquer
   largura de tela. */
.bio-card__fundo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:right top;
  display:block;
}

/* Véu escuro sobre a foto. Sem ele o texto cairia sobre uma imagem cuja
   luminosidade muda de cartão para cartão, e o contraste deixaria de ser
   previsível. Ele é quase opaco à esquerda, onde o texto mora, e abre à
   direita, onde está o rosto. O do destaque puxa o magenta da marca. */
.bio-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg,
    rgba(10,10,10,.97) 0%,
    rgba(10,10,10,.95) 44%,
    rgba(10,10,10,.76) 68%,
    rgba(10,10,10,.28) 100%);
}
.bio-card--destaque::after{
  background:
    linear-gradient(90deg,
      rgba(28,8,15,.97) 0%,
      rgba(24,8,14,.95) 44%,
      rgba(18,9,13,.76) 68%,
      rgba(10,10,10,.28) 100%),
    linear-gradient(180deg, rgba(254,42,91,.16), transparent 62%);
}

.bio-card__texto{
  position:relative; z-index:2;
  padding:18px 19px;
  max-width:64%;
  min-width:0;
}

.bio-card__chapeu{
  color:var(--bio-ciano);
  font-size:11px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  margin-bottom:3px;
}
.bio-card__titulo{
  font-size:19px; font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 5px;
}
.bio-card__linha{
  color:var(--bio-texto-2);
  font-size:13.5px;
  line-height:1.45;
  margin:0 0 12px;
}
.bio-card__acao{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--bio-magenta-bt);
  color:#fff;
  font-size:12.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  padding:8px 15px;
  border-radius:999px;
}
.bio-card__acao svg{ width:13px; height:13px; fill:currentColor; }
.bio-card:hover .bio-card__acao svg{ transform:translateX(2px); }

/* ---------- rodapé ---------- */

.bio-rodape{
  max-width:var(--bio-largura);
  margin:0 auto;
  padding:0 20px 44px;
  text-align:center;
  color:var(--bio-texto-2);
  font-size:12.5px;
}
.bio-rodape a{ color:var(--bio-texto-2); }

/* No celular o cartão é estreito e o texto precisa de mais largura, então o
   véu tem que fechar mais para o texto não invadir a área clara da foto. */
@media (max-width: 560px){
  .bio-card{ min-height:138px; }
  .bio-card__texto{ padding:15px 16px; max-width:74%; }
  .bio-card__titulo{ font-size:17.5px; }
  .bio-card__linha{ font-size:13px; }
  .bio-card::after{
    background:linear-gradient(90deg,
      rgba(10,10,10,.97) 0%,
      rgba(10,10,10,.96) 52%,
      rgba(10,10,10,.82) 76%,
      rgba(10,10,10,.34) 100%);
  }
  .bio-card--destaque::after{
    background:
      linear-gradient(90deg,
        rgba(28,8,15,.97) 0%,
        rgba(22,8,9,.96) 52%,
        rgba(16,9,10,.82) 76%,
        rgba(10,10,10,.34) 100%),
      linear-gradient(180deg, rgba(254,42,91,.16), transparent 62%);
  }
}

@media (prefers-reduced-motion: reduce){
  .bio-card{ transition:none; }
  .bio-card:hover, .bio-card:focus-visible{ transform:none; }
  .bio-card:hover .bio-card__acao svg{ transform:none; }
}