/* Alan Mello · link da bio, versão luz (24/10/2026).
   Referência do Matheus: retrato com luz âmbar de cinema, fundo marrom-preto, botões creme em pílula,
   faixa bronze e cartões com foto. A luz está pintada nas imagens (_luz.py); aqui só há véus sob o texto. */
.bio {
  --cafe: #120b07;
  --cafe-2: #1f150e;
  --bronze: #5e4229;
  --bronze-claro: #a67a4f;
  --ouro: #e3b46f;
  --creme: #f3e5ca;
  --creme-claro: #fff4df;
  --leite: #f7f0e6;
  --areia: #bfae96;
  background: var(--cafe);
  color: var(--leite);
}
.bio ::selection { background: var(--ouro); color: var(--cafe); }
html { scrollbar-color: #5e4229 #120b07; background: #120b07; }
.bio :focus-visible { outline-color: var(--creme); }

/* Botão: pílula creme, um só formato na página */
.pilula {
  display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex;
  -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  background: var(--creme); color: var(--cafe);
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1.1;
  text-decoration: none;
  -webkit-transition: background-color .2s var(--ease), -webkit-transform .25s var(--ease);
  transition: background-color .2s var(--ease), transform .25s var(--ease);
}
.pilula svg { width: 18px; height: 18px; margin-left: 12px; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-transition: -webkit-transform .3s var(--ease); transition: transform .3s var(--ease); }
.pilula:hover { background: var(--creme-claro); }
.pilula:hover svg { -webkit-transform: translateX(4px); transform: translateX(4px); }
.pilula:active { -webkit-transform: scale(.97); transform: scale(.97); }

/* ---------- Abertura: o retrato na luz ---------- */
.luz { position: relative; background: var(--cafe); }
.luz-foto { display: block; position: relative; height: 70vh; height: 70svh; min-height: 420px; max-height: 780px; overflow: hidden; }
.luz-foto img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 47% 18%; object-position: 47% 18%;
  -webkit-transform-origin: 40% 20%; transform-origin: 40% 20%;
  -webkit-animation: deriva 22s ease-in-out infinite alternate; animation: deriva 22s ease-in-out infinite alternate; }
@-webkit-keyframes deriva { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.07); } }
@keyframes deriva { from { transform: scale(1); } to { transform: scale(1.07); } }
/* véu: a foto desce até o café da página, sem corte seco */
.luz-foto:after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to bottom, rgba(18, 11, 7, 0) 0%, rgba(18, 11, 7, .72) 52%, #120b07 100%); } /* taste-skill-ignore: véu neutro sob o texto, sobre a foto */
.luz-texto { position: relative; z-index: 1; margin-top: -150px; padding: 0 var(--m) 52px; }
.luz-nome { font-family: var(--display); font-weight: 700; font-size: 54px; letter-spacing: -0.04em; line-height: .95; color: var(--leite); }
@supports (font-size: clamp(1px, 1vw, 2px)) { .luz-nome { font-size: clamp(48px, 15vw, 72px); } }
.luz-frase { margin-top: 16px; max-width: 31ch; font-size: 21px; line-height: 1.38; color: var(--leite); }
.luz-frase em { font-style: italic; color: var(--ouro); white-space: nowrap; }
.luz-texto .pilula { margin-top: 28px; }

/* entrada da abertura: nome, frase e botão sobem em sequência */
.js .luz-nome, .js .luz-frase, .js .luz-texto .pilula { opacity: 0; -webkit-transform: translateY(26px); transform: translateY(26px); }
.js .pronto .luz-nome, .js .pronto .luz-frase, .js .pronto .luz-texto .pilula { opacity: 1; -webkit-transform: none; transform: none;
  -webkit-transition: opacity .7s var(--ease), -webkit-transform .9s var(--ease); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.js .pronto .luz-frase { -webkit-transition-delay: .09s; transition-delay: .09s; }
.js .pronto .luz-texto .pilula { -webkit-transition-delay: .18s; transition-delay: .18s; }
.js .pronto .luz-texto .pilula:hover, .js .pronto .luz-texto .pilula:active { -webkit-transition-delay: 0s; transition-delay: 0s; }
.js .pronto .luz-texto .pilula:active { -webkit-transform: scale(.97); transform: scale(.97); }

/* ---------- Faixa bronze correndo ---------- */
.faixa { overflow: hidden; background: var(--bronze); color: var(--creme); padding: 15px 0; white-space: nowrap; }
.faixa-trilho { display: inline-block; -webkit-animation: corre 30s linear infinite; animation: corre 30s linear infinite; }
.faixa-trilho span { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.faixa-trilho span:after { content: "\00B7"; display: inline-block; margin: 0 18px; color: var(--ouro); }
@-webkit-keyframes corre { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-50%); } }
@keyframes corre { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Os três caminhos ---------- */
.caminhos { max-width: var(--max); margin: 0 auto; padding: 72px var(--m) 0; }
.caminhos-titulo { font-family: var(--display); font-weight: 700; font-size: var(--s-titulo); letter-spacing: -0.03em; line-height: 1; color: var(--leite); margin-bottom: 28px; }
.cartoes li + li { margin-top: 16px; }
/* 430px no celular: o rosto do Alan no cartão da mentoria termina acima do título */
.cartao { position: relative; display: block; height: 430px; overflow: hidden; background: var(--cafe-2); color: var(--leite); text-decoration: none;
  -webkit-transition: -webkit-transform .4s var(--ease); transition: transform .4s var(--ease); }
.cartao-foto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cartao-foto img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: -webkit-transform .7s var(--ease); transition: transform .7s var(--ease); }
.cartoes li:nth-child(1) .cartao-foto img { -o-object-position: 78% 50%; object-position: 78% 50%; }
.cartoes li:nth-child(2) .cartao-foto img { -o-object-position: 50% 0%; object-position: 50% 0%; }
.cartoes li:nth-child(3) .cartao-foto img { -o-object-position: 50% 42%; object-position: 50% 42%; }
.cartao-foto:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(18, 11, 7, 0) 25%, rgba(18, 11, 7, .6) 55%, rgba(18, 11, 7, .94) 100%); } /* taste-skill-ignore: véu sob o texto do cartão */
.cartao-etiqueta { position: absolute; top: 16px; left: 16px; padding: 7px 13px; border-radius: 999px; background: var(--ouro); color: var(--cafe);
  font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.1; }
.cartao-corpo { position: absolute; left: 20px; right: 20px; bottom: 20px; display: block; }
.cartao-titulo { display: block; font-family: var(--display); font-weight: 700; font-size: 27px; letter-spacing: -0.025em; line-height: 1.04; }
.cartao-linha { display: block; margin-top: 8px; font-size: 17px; line-height: 1.38; color: var(--leite); max-width: 32ch; }
.cartao-acao { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  margin-top: 16px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--creme); color: var(--cafe);
  font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.1;
  -webkit-transition: background-color .2s var(--ease); transition: background-color .2s var(--ease); }
.cartao-acao svg { width: 16px; height: 16px; margin-left: 10px; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-transition: -webkit-transform .3s var(--ease); transition: transform .3s var(--ease); }
.cartao:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); }
.cartao:hover .cartao-foto img { -webkit-transform: scale(1.06); transform: scale(1.06); }
.cartao:hover .cartao-acao { background: var(--creme-claro); }
.cartao:hover .cartao-acao svg { -webkit-transform: translateX(4px); transform: translateX(4px); }
.cartao:active { -webkit-transform: translateY(-2px) scale(.99); transform: translateY(-2px) scale(.99); }
.js .cartoes .entra.visto:nth-child(2) { -webkit-transition-delay: .08s; transition-delay: .08s; }
.js .cartoes .entra.visto:nth-child(3) { -webkit-transition-delay: .16s; transition-delay: .16s; }
/* dentro do cartão: etiqueta, título, linha e botão chegam um depois do outro */
.js.io .cartao-etiqueta, .js.io .cartao-corpo > span { opacity: 0; -webkit-transform: translateY(16px); transform: translateY(16px); }
.js.io .visto .cartao-etiqueta, .js.io .visto .cartao-corpo > span { opacity: 1; -webkit-transform: none; transform: none;
  -webkit-transition: opacity .6s var(--ease), -webkit-transform .7s var(--ease); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.js.io .visto .cartao-etiqueta { -webkit-transition-delay: .2s; transition-delay: .2s; }
.js.io .visto .cartao-titulo { -webkit-transition-delay: .26s; transition-delay: .26s; }
.js.io .visto .cartao-linha { -webkit-transition-delay: .33s; transition-delay: .33s; }
.js.io .visto .cartao-acao { -webkit-transition: opacity .6s var(--ease) .4s, -webkit-transform .7s var(--ease) .4s, background-color .2s var(--ease); transition: opacity .6s var(--ease) .4s, transform .7s var(--ease) .4s, background-color .2s var(--ease); }

/* ---------- Fecho ---------- */
.fim { max-width: var(--max); margin: 0 auto; padding: 96px var(--m) 40px; }
.fim-nome { font-family: var(--display); font-weight: 700; font-size: 64px; letter-spacing: -0.045em; line-height: .9; color: var(--bronze-claro); white-space: nowrap; }
@supports (font-size: clamp(1px, 1vw, 2px)) { .fim-nome { font-size: clamp(56px, 17vw, 248px); } }
.fim-redes { display: -webkit-box; display: -webkit-flex; display: flex; margin-top: 32px; }
.fim-redes li { margin-right: 12px; }
.fim-redes a { display: -webkit-inline-box; display: -webkit-inline-flex; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center;
  min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--cafe-2); color: var(--leite); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  -webkit-transition: background-color .2s var(--ease), color .2s var(--ease); transition: background-color .2s var(--ease), color .2s var(--ease); }
.fim-redes a:hover { background: var(--bronze); color: var(--creme); }
.fim-creditos { margin-top: 28px; max-width: 60ch; font-size: 16px; line-height: 1.45; color: var(--areia); }
.fim-creditos + .fim-creditos { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .js .luz-nome, .js .luz-frase, .js .luz-texto .pilula, .js.io .cartao-etiqueta, .js.io .cartao-corpo > span { opacity: 1; -webkit-transform: none; transform: none; }
  .luz-foto img, .faixa-trilho { -webkit-animation: none; animation: none; }
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) {
  .luz-foto { height: 76vh; height: 76svh; max-height: 980px; }
  .luz-texto { margin-top: -190px; }
  .luz-frase { font-size: 24px; }
  .cartao { height: 430px; }
  .cartao-titulo { font-size: 32px; }
  /* no tablet o cartão é largo: entra a cena larga, o Alan fica à direita e o texto à esquerda */
  .cartoes li:nth-child(2) .cartao-foto img { -o-object-position: 100% 30%; object-position: 100% 30%; }
}
@media (min-width: 900px) {
  .cartoes li:nth-child(2) .cartao-foto img { -o-object-position: 50% 10%; object-position: 50% 10%; }
}

/* ---------- Computador: a cena larga, o Alan à direita e a luz atravessando até o texto ---------- */
@media (min-width: 900px) {
  .luz { min-height: 100vh; min-height: 100svh; /* taste-skill-ignore: 100vh é o reserva do Safari antigo, 100svh vem logo depois */ display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
  .luz-foto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 0; max-height: none; }
  .luz-foto img { -o-object-position: 100% 30%; object-position: 100% 30%; -webkit-transform-origin: 70% 20%; transform-origin: 70% 20%; }
  .luz-foto:before { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 62%;
    background: linear-gradient(to right, rgba(18, 11, 7, .82) 0%, rgba(18, 11, 7, .5) 55%, rgba(18, 11, 7, 0) 100%); } /* taste-skill-ignore: véu sob o texto da abertura */
  .luz-foto:after { height: 26%; z-index: 1; }
  .luz-texto { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--m); }
  .luz-texto > * { max-width: 600px; }
  .luz-nome { font-size: 104px; }
  @supports (font-size: clamp(1px, 1vw, 2px)) { .luz-nome { font-size: clamp(80px, 7.6vw, 128px); } }
  .luz-frase { font-size: 27px; max-width: 24ch; margin-top: 22px; }
  .luz-texto .pilula { margin-top: 36px; }

  .caminhos { padding-top: 140px; }
  .caminhos-titulo { margin-bottom: 40px; }
  .cartoes { display: -webkit-box; display: -webkit-flex; display: flex; margin: 0 -12px; }
  .cartoes li { -webkit-box-flex: 1; -webkit-flex: 1 1 0%; flex: 1 1 0%; min-width: 0; margin: 0 12px; }
  .cartoes li + li { margin-top: 0; }
  .cartao { height: 0; padding-top: 128%; }
  .cartao-etiqueta { top: 22px; left: 22px; }
  .cartao-corpo { left: 26px; right: 26px; bottom: 26px; }
  .cartao-titulo { font-size: 30px; }
  @supports (font-size: clamp(1px, 1vw, 2px)) { .cartao-titulo { font-size: clamp(26px, 2.3vw, 36px); } }

  .fim { padding-top: 160px; }
}