/* Componentes — Bio Lucas Mota Web. Depende de tokens.css */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-theme), color var(--dur-theme);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-md); }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Coluna */
.bio { width: 100%; max-width: var(--col); margin: 0 auto; padding: var(--space-4) var(--gutter) var(--space-12); display: flex; flex-direction: column; gap: var(--space-3); }

/* Superfície de card (usada por vários componentes) */
.card, .link, .tile {
  position: relative; background: var(--grad-card); box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-theme);
}
.card::before, .link::before, .tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--grad-card-edge); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Fundo: grade quadrada fina sobre preto (linhas verticais e horizontais a cada --grid-col). O passo (--grid-col) divide a coluna de 480 px em 6,
   então as linhas caem exatamente nas bordas do conteúdo. Rola junto com a página. */
body { position: relative; }
.grid-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background-image: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(180deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-col) var(--grid-col); background-position: calc(50% - var(--grid-col) / 2 - .5px) 0; }

/* Hover dos acessos e cards: borda verde (camada extra, some/aparece em fade) + brilho leve */
.link::after, .tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--hover-line); opacity: 0; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .link:hover::after, .tile:hover::after { opacity: 1; }
  .link:hover, .tile:hover { box-shadow: var(--shadow-card), var(--glow-hover); }
}
.link:focus-visible::after, .tile:focus-visible::after { opacity: 1; }

/* Navegação: no topo é uma barra solta, sem fundo, aberta até 1440 px (marca na ponta esquerda, controles na direita).
   Ao rolar contrai para a largura da coluna e vira um card flutuante e aparece, logo abaixo dele,
   a barra de progresso da leitura (a barra de rolagem nativa fica oculta). */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.nav { position: sticky; top: var(--space-3); z-index: 30; width: min(100% - 2 * var(--gutter), var(--wide)); margin: var(--space-3) auto 0; container-type: inline-size; transition: width var(--dur-nav) var(--ease-out); }
.nav.is-scrolled { width: min(100% - 2 * var(--gutter), calc(var(--page) - 2 * var(--gutter))); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 12px 10px 18px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; transition: background-color var(--dur-nav) var(--ease-out), border-color var(--dur-nav) var(--ease-out), box-shadow var(--dur-nav) var(--ease-out); }
.nav.is-scrolled .nav__bar { background: var(--color-surface); border-color: var(--color-edge); box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .5); }
.nav__brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nav__logo { display: none; flex: none; width: 40px; height: 40px; border-radius: var(--radius); overflow: hidden; }
.nav__logo img { width: 100%; height: 100%; object-fit: cover; }
.nav__wordmark { display: none; height: 34px; width: auto; }
.nav__wordmark--dark { display: block; }
:root[data-theme="light"] .nav__wordmark--dark { display: none; }
:root[data-theme="light"] .nav__wordmark--light { display: block; }
/* nav estreita (celular): só a marca; larga: wordmark completo */
@container (max-width: 440px) { .nav__wordmark { display: none !important; } .nav__logo { display: block; } }
.nav__tools { flex: none; display: flex; align-items: center; gap: var(--space-2); }
.nav__progress { position: absolute; left: var(--space-3); right: var(--space-3); top: calc(100% + 6px); height: 3px; border-radius: 2px; background: var(--color-border-soft); opacity: 0; pointer-events: none; transition: opacity var(--dur-nav) var(--ease-out); }
.nav.is-scrolled .nav__progress { opacity: 1; }
.nav__progress span { display: block; height: 100%; border-radius: inherit; background: var(--color-accent-ink); transform-origin: left center; transform: scaleX(var(--progress, 0)); }
.nav .lang { border: 0; gap: 4px; padding: 4px; background: var(--color-border-soft); }
.nav .lang button { height: 40px; gap: 8px; padding: 0 18px 0 14px; }
.nav .icon-btn { width: 48px; height: 48px; border: 0; background: var(--color-border-soft); }
@media (hover: hover) { .nav .icon-btn:hover { background: var(--color-border); } }
.lang { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); border: 1px solid var(--color-edge); background: var(--color-surface); }
.lang button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3) 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .04em; color: var(--color-text-muted); transition: background-color var(--dur-base), color var(--dur-base); }
.lang button[aria-pressed="true"] { background: var(--color-text-strong); color: var(--color-bg); }
@media (hover: hover) { .lang button[aria-pressed="false"]:hover { background: var(--color-border); color: var(--color-text-strong); } }
.flag { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--color-edge); background: var(--color-surface); color: var(--color-text); transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); }
.icon-btn:active { transform: scale(.94); }
@media (hover: hover) { .icon-btn:hover { background: var(--color-border); } }
.icon-btn .i-moon { display: none; }
:root[data-theme="light"] .icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-moon { display: block; }

/* Perfil: foto à esquerda, nome à direita, bio embaixo */
.profile { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); row-gap: var(--space-4); align-items: center; padding-top: var(--space-2); }
.avatar { width: 88px; height: 88px; border-radius: var(--radius-pill); padding: 3px; background: var(--grad-card-edge), var(--color-surface); box-shadow: var(--shadow-card); }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: var(--color-surface); }
.profile__id { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; }
.profile__name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-name); line-height: var(--lh-tight); color: var(--color-text-strong); letter-spacing: -.01em; overflow-wrap: anywhere; }
.profile__handle { font-size: var(--fs-small); color: var(--color-accent-ink); font-weight: 500; }
.profile__bio { grid-column: 1 / -1; margin: 0; color: var(--color-text-muted); text-wrap: pretty; }
.status { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--color-edge); font-size: var(--fs-eyebrow); color: var(--color-text-muted); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-ink); }

/* Redes: tiles ícone + rótulo */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: var(--space-2); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 76px; padding: var(--space-3) var(--space-1); border-radius: var(--radius-md); font-size: var(--fs-eyebrow); color: var(--color-text-muted); }
.tile .icon { width: 22px; height: 22px; color: var(--color-text-strong); }
.tile__mark { display: grid; place-items: center; height: 22px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1; color: var(--color-text-strong); transition: color var(--dur-base); }
@media (hover: hover) { .tile:hover .tile__mark { color: var(--color-accent-ink); } }
.tile:active { transform: scale(.96); }
@media (hover: hover) { .tile:hover { transform: translateY(-2px); } .tile:hover .icon { color: var(--color-accent-ink); } }

/* Cabeçalho de seção */
.section-head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-4); align-items: baseline; margin-top: var(--space-8); }
.section-head__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-title); font-weight: 600; color: var(--color-text-strong); }
.section-head__index { font-family: var(--font-display); font-size: var(--fs-eyebrow); color: var(--color-text-muted); letter-spacing: .08em; }
.section-head__desc { grid-column: 1 / -1; margin: 0; max-width: 40ch; font-size: var(--fs-small); color: var(--color-text-muted); }

/* Link base */
.link {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--tap); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); color: var(--color-text-strong);
  -webkit-tap-highlight-color: transparent;
}
.link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.link__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link__desc { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-small); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link:active { transform: scale(.98); }
@media (hover: hover) {
  .link:hover { transform: translateY(-2px); }
}

/* Numerado: tile com índice (01, 02, 03) */
.link__index { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-edge); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--color-text-muted); }

/* Botão com preenchimento que sobe: ao passar o mouse (ou focar) uma camada cobre o botão de baixo para cima
   e o texto troca de cor junto. À direita, um quadrado com a seta. Mesma mecânica do botão do site da Kezia. */
.btn {
  --b-bg: var(--btn-bg); --b-fg: var(--btn-fg); --b-line: transparent;
  --b-fill: var(--color-text-strong); --b-hover-fg: var(--color-bg);
  --b-orb-bg: #000; --b-orb-fg: #fff; --orb: 42px;
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  width: fit-content; max-width: 100%; min-height: calc(var(--orb) + 14px); padding: 7px 7px 7px 26px;
  border: 0; border-radius: var(--radius);
  background: linear-gradient(var(--b-fill), var(--b-fill)) center bottom / 100% 0% no-repeat, linear-gradient(var(--b-bg), var(--b-bg)) 0 0 / 100% 100%;
  box-shadow: inset 0 0 0 1.5px var(--b-line);
  color: var(--b-fg); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-label); line-height: 1.2; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background-size var(--btn-dur) var(--ease-fill), color var(--btn-dur) var(--ease-fill), transform var(--dur-base) var(--ease-out);
}
.btn--outline { --b-bg: transparent; --b-fg: var(--color-text-strong); --b-line: color-mix(in srgb, var(--color-text-strong) 40%, transparent); --b-orb-bg: var(--color-text-strong); --b-orb-fg: var(--color-bg); }
.btn--block { display: flex; width: 100%; --orb: 48px; min-height: 64px; }
.btn--sm { --orb: 30px; min-height: 38px; padding: 4px 4px 4px 16px; gap: 10px; font-size: var(--fs-small); }
.btn__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.btn__orb { flex: none; display: grid; place-items: center; width: var(--orb); height: var(--orb); border-radius: var(--radius); background: var(--b-orb-bg); color: var(--b-orb-fg); transition: background-color var(--btn-dur) var(--ease-fill), color var(--btn-dur) var(--ease-fill); }
.btn__orb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn--sm .btn__orb svg { width: 14px; height: 14px; }
.btn:active { transform: scale(.98); }
@media (hover: hover) {
  .btn:not([aria-disabled="true"]):hover { background-size: 100% 100%, 100% 100%; color: var(--b-hover-fg); }
  .btn:not([aria-disabled="true"]):hover .btn__orb { background: var(--b-hover-fg); color: var(--b-fill); }
}
.btn:focus-visible { background-size: 100% 100%, 100% 100%; color: var(--b-hover-fg); outline-offset: 4px; }
.btn:focus-visible .btn__orb { background: var(--b-hover-fg); color: var(--b-fill); }
/* Desativado ("Em breve"): sem quadrado de seta nem preenchimento */
.btn[aria-disabled="true"] { background: transparent; color: var(--color-text-muted); box-shadow: inset 0 0 0 1.5px var(--color-border); padding: 4px 16px; pointer-events: none; }
.btn[aria-disabled="true"] .btn__orb { display: none; }

/* Seta dos links em linha: círculo com borda; no hover enche e gira 45° */
.link__go { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-border); color: var(--color-text-muted); transition: background-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base); }
.link__go .icon { width: 14px; height: 14px; stroke-width: 2; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) { .link:hover .link__go { background: var(--color-text-strong); color: var(--color-bg); box-shadow: none; } .link:hover .link__go .icon { transform: rotate(45deg); } }

/* Card de conteúdo (projeto e serviço): imagem 11:5 em cima; título, descrição e botão embaixo */
.project { flex-direction: column; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
/* --img é resolvida a partir deste CSS, por isso o caminho no HTML começa com ../img/ */
.project__media { aspect-ratio: var(--project-ratio); flex: none; background: var(--img, none) center / cover no-repeat, var(--color-surface); overflow: hidden; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 0 -1px 0 var(--color-border-soft); }
.project__media img { width: 100%; height: 100%; object-fit: cover; }
.project__body { display: flex; align-items: center; gap: var(--space-4); min-height: var(--project-body); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); }
.project .link__title { font-size: var(--fs-title); line-height: 1.15; white-space: normal; }
.project h3.link__title { margin: 0; font: inherit; font-size: var(--fs-title); line-height: 1.15; }
.project .link__desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Entrada ao carregar (blur + subida, escalonada via --i) */
@keyframes enter { from { opacity: 0; filter: blur(var(--enter-blur)); transform: translateY(var(--enter-shift)); } to { opacity: 1; filter: none; transform: none; } }
.enter { animation: enter var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); }

/* Ritmo vertical: grupos relacionados juntos (12), transições entre blocos mais abertas */
.profile { margin-bottom: var(--space-2); }
.btn--block { margin-bottom: var(--space-2); }

/* Troca de tema: o círculo é animado por JS; aqui só desligamos a animação padrão e as transições de cor durante a troca */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }

/* Cursor: seta preta com contorno branco fino, igual em toda a página (sem mão nos links), mais o balão "Lucas Web"
   e o glow que segue o mouse. Tudo só com mouse; o JS (js/cursor.js) cria o balão e o glow. */
@media (hover: hover) and (pointer: fine) {
  :root { --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.8L9.8 20z' fill='%23000' stroke='%23fff' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  html, a, button, [role="button"], .link, .tile, .btn, .lang button { cursor: var(--cursor-arrow) 4 2, auto; }
}
.cursor-tag, .cursor-glow { display: none; }
.has-cursor .cursor-tag, .has-cursor .cursor-glow { display: block; position: fixed; left: 0; top: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.cursor-tag { z-index: 1000; padding: 6px 12px; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .22); background: #000; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .6); will-change: transform; }
.cursor-glow { z-index: -1; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: radial-gradient(circle, var(--glow-cursor) 0%, transparent 65%); will-change: transform; }
.cursor-away .cursor-tag, .cursor-away .cursor-glow { opacity: 0; }
/* a grade acende em volta do mouse (coordenadas da página, então rola junto) */
.grid-bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--grid-glow-line) 1px, transparent 1px), linear-gradient(180deg, var(--grid-glow-line) 1px, transparent 1px); background-size: var(--grid-col) var(--grid-col); background-position: calc(50% - var(--grid-col) / 2 - .5px) 0; -webkit-mask: radial-gradient(170px circle at var(--mx, -999px) var(--my, -999px), #000, transparent); mask: radial-gradient(170px circle at var(--mx, -999px) var(--my, -999px), #000, transparent); }

/* Linhas do fundo mais finas em telas de alta densidade (meio pixel CSS = 1 pixel do aparelho) */
@media (min-resolution: 2dppx) {
  .grid-bg { background-image: linear-gradient(90deg, var(--grid-line) .5px, transparent .5px), linear-gradient(180deg, var(--grid-line) .5px, transparent .5px); }
  .grid-bg::after { background-image: linear-gradient(90deg, var(--grid-glow-line) .5px, transparent .5px), linear-gradient(180deg, var(--grid-glow-line) .5px, transparent .5px); }
}

/* nav estreita: padding um pouco menor para caber em 375 px */
@container (max-width: 440px) { .nav__bar { padding: 8px 8px 8px 12px; gap: var(--space-2); } .nav .lang button { padding: 0 11px 0 9px; gap: 6px; } .nav .icon-btn { width: 44px; height: 44px; } }

/* Página real: no celular uma coluna de 480 px; no desktop (>= 1000 px) conteúdo de 960 px em duas colunas. */
.bio--page { max-width: var(--page); }
.actions { display: grid; gap: var(--space-3); align-content: start; }
.actions .btn--block { margin-bottom: 0; }
.project-grid { display: grid; gap: var(--space-3); }
@media (min-width: 1000px) {
  .bio--page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-content: start; }
  .bio--page > .profile { align-self: center; }
  .bio--page > .actions, .bio--page > .profile { grid-column: auto; }
  .bio--page > section, .bio--page > .legal { grid-column: 1 / -1; }
  .bio--page .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  /* número ímpar de cards: o último fica do mesmo tamanho dos outros, centralizado na linha */
  .project-grid > .project:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-4)) / 2); }
}

/* Fundo: luz passando em linha (feixes que descem pelas colunas do fundo) + ruído bem suave. Tudo atrás do conteúdo. */
.bg-beams { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bg-beams i { position: absolute; top: 0; left: calc(50% + var(--k) * var(--grid-col) - .5px); width: 1px; height: 170px; background: linear-gradient(to bottom, transparent, var(--beam-color)); opacity: 0; transform: translateY(-200px); animation: beam var(--d, 10s) linear var(--t, 0s) infinite; will-change: transform, opacity; }
@keyframes beam { 0% { transform: translateY(-200px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
@media (min-resolution: 2dppx) { .bg-beams i { width: .5px; } }
@media (prefers-reduced-motion: reduce) { .bg-beams { display: none; } }
.bg-noise { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .bg-noise { filter: invert(1); }

/* Rodapé simples: só a linha de direitos autorais */
.legal { margin-top: var(--space-8); text-align: center; font-size: var(--fs-small); color: var(--color-text-muted); }
.legal p { margin: 0; text-wrap: balance; }

/* Celular e tablet (< 1000 px): tiles de contato em 2 colunas, ícone e rótulo lado a lado, alinhados à esquerda (5 itens = 3 linhas) */
@media (max-width: 999px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .tile { flex-direction: row; justify-content: flex-start; min-height: 60px; padding: var(--space-3) var(--space-4); gap: var(--space-3); font-size: var(--fs-small); }
  .tile__mark { width: 22px; }
}