/* =============================================
   PORTFÓLIO ALESSANDRA BRUM — ESTILOS
   Organização:
   1. Variáveis (cores, fontes, transições)
   2. Base e reset
   3. Acessibilidade (foco, skip link, sr-only)
   4. Animações e movimento reduzido
   5. Layout geral
   6. Componentes reutilizáveis (botões, cards, chips, rótulos)
   7. Header e navegação
   8. Hero e card perfil.py
   9. Projetos
   10. Sobre (Especialidade, Formação, Da interface ao código)
   11. Competências
   12. Contato (footer)
   13. Barra de status
   14. Responsividade (inclui o menu hambúrguer do mobile)
   15. Seta de retorno ao topo
   A seta de retorno ao topo fica na seção 15 deste arquivo
============================================= */

/* =============================================
   1. VARIÁVEIS
============================================= */
:root {
  /* --- Paleta base (design system "violeta editorial") --- */
  --violet-deep: #493078;      /* violeta profundo: glows atmosféricos */
  --violet: #8064C8;           /* roxo de destaque: linhas e brilhos */
  --lilac: #B4A3FF;            /* lilás principal */
  --lilac-light: #C9BEFF;      /* lilás claro: destaques de texto */

  /* Fundos */
  --bg: #100E18;
  --bg-2: #141020;
  --surface: #171320;          /* superfície dos cards */
  --surface-2: #1D172B;        /* superfície elevada (barras de janela) */
  --surface-3: #141020;
  --terminal: #0E0C15;
  --hover: #221A33;

  /* Bordas (tingidas de violeta) */
  --border: #2B2340;
  --border-strong: #3D3160;
  --border-hover: #5A4790;
  --border-glow: rgba(180,163,255,.38);

  /* Texto */
  --text: #F1EEF8;
  --text-2: #DAD5E8;
  --text-3: #B9B2CB;
  --muted: #A49DBD;
  --dim: #6F6A8C; /* só para elementos decorativos (numeração de linhas) */

  /* Destaques */
  --accent: var(--lilac);
  --accent-hover: var(--lilac-light);
  --mint: #8FD6C2;             /* syntax highlighting e estado "concluído" */
  --pink: #F4A6E0;             /* cursor piscante do título */

  /* Raios */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Glow: três intensidades (superfície > botão > chip) */
  --glow-filled: 0 0 0 1px rgba(180,163,255,.4), 0 12px 32px -10px rgba(128,100,200,.75);
  --glow-filled-rest: 0 8px 24px -12px rgba(128,100,200,.7);
  --glow-outline: 0 0 0 1px rgba(180,163,255,.18), 0 10px 26px -14px rgba(128,100,200,.6);
  --glow-small: 0 0 0 1px rgba(180,163,255,.3), 0 6px 18px -8px rgba(128,100,200,.6);
  --glow-chip: 0 0 0 1px rgba(180,163,255,.12), 0 4px 14px -6px rgba(128,100,200,.5);
  --glow-surface: 0 0 0 1px rgba(128,100,200,.12), 0 30px 80px -30px rgba(73,48,120,.9), 0 0 70px -20px rgba(128,100,200,.35);

  /* Sombras de card */
  --shadow-rest: inset 0 1px 0 rgba(201,190,255,.07), inset 0 0 24px -12px rgba(128,100,200,.35), 0 0 0 1px rgba(128,100,200,.08), 0 0 28px -8px rgba(128,100,200,.32), 0 18px 40px -30px rgba(0,0,0,.9);
  --shadow-card: inset 0 1px 0 rgba(201,190,255,.09), inset 0 0 28px -12px rgba(128,100,200,.45), 0 0 0 1px rgba(180,163,255,.16), 0 0 36px -6px rgba(128,100,200,.5), 0 18px 40px -24px rgba(0,0,0,.9);
  --border-card: #43366B;      /* borda dos cards: violeta visível sobre o fundo */

  /* Gradientes de superfície */
  --surface-gradient: linear-gradient(180deg, rgba(29,23,43,.75) 0%, var(--surface) 55%);

  /* Tipografia */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;

  /* Transições */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: .3s;
  --t-card: .35s;

  /* Layout */
  --max-width: 1280px;
  --gutter: clamp(16px, 3vw, 48px);
  --section-gap: clamp(56px, 7vw, 96px);
}

/* =============================================
   2. BASE E RESET
============================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Reserva espaço para header e barra de status: o foco nunca fica escondido (WCAG 2.4.11).
     --header-offset é a altura real do header, medida pelo main.js (em tablets ele quebra em duas linhas) */
  scroll-padding-top: calc(var(--header-offset, 52px) + 44px);
  scroll-padding-bottom: 64px;
  /* Brilhos decorativos (aura do card, atmosfera) passam um pouco da borda da tela.
     No <html> o corte também vale no celular, onde só o body não impedia a rolagem lateral */
  overflow-x: clip;
}

body {
  margin: 0;
  overflow-x: clip;
  /* Glow pequeno e sutil no canto superior esquerdo da página (rola junto com ela) */
  background:
    radial-gradient(ellipse 520px 380px at 0 0, rgba(73,48,120,.32), transparent 70%) no-repeat,
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.125rem;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--text); }

img { max-width: 100%; }

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* =============================================
   3. ACESSIBILIDADE
============================================= */
/* Foco visível para teclado em todos os elementos interativos */
:focus-visible {
  outline: 3px dashed var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Texto visível apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Link "Pular para o conteúdo": aparece só ao receber foco */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 60;
  background: var(--accent);
  color: var(--bg);
  padding: 14px 20px;
  border-radius: 6px;
  font: 700 1rem var(--font-mono);
}
.skip-link:focus { top: 16px; color: var(--bg); }

/* =============================================
   4. ANIMAÇÕES E MOVIMENTO REDUZIDO
============================================= */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Cursor piscando no título */
.caret {
  color: var(--pink);
  margin-left: 4px;
  animation: blink 1.1s steps(1) infinite;
}

/* Entrada ao rolar: só ativa quando o JS adiciona .reveal-ready ao <html> */
[data-reveal="1"] { --d: 0s; }
[data-reveal="2"] { --d: .12s; }
[data-reveal="3"] { --d: .24s; }
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease var(--d), transform .6s ease var(--d);
}
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* Palavra por palavra (fade para cima): qualquer título com data-words no HTML.
   O texto fica só no HTML; o main.js monta a camada visual (.words > .word) e a cópia
   para o leitor de tela. Tempos aqui (o JS lê estes valores, não repete números):
   --word-start (espera antes da 1ª palavra), --word-dur (duração de cada palavra) e
   --word-gap (intervalo entre o início de uma palavra e o da próxima).
   O JS define --i em cada palavra; --words-delay atrasa o início (ordem do hero) */
.words { --word-start: .2s; --word-dur: 1s; --word-gap: .35s; }
.word { display: inline-block; }
.reveal-ready .words .word {
  opacity: 0;
  transform: translateY(.3em);
  filter: blur(4px);
  transition:
    opacity var(--word-dur) ease calc(var(--words-delay, 0s) + var(--word-start) + var(--i, 0) * var(--word-gap)),
    transform var(--word-dur) ease calc(var(--words-delay, 0s) + var(--word-start) + var(--i, 0) * var(--word-gap)),
    filter var(--word-dur) ease calc(var(--words-delay, 0s) + var(--word-start) + var(--i, 0) * var(--word-gap));
}
.reveal-ready .words.is-visible .word { opacity: 1; transform: none; filter: none; }
/* Cursor "_": só aparece depois da última palavra (o JS calcula --caret-delay) */
.reveal-ready .words + .caret { transition: visibility 0s linear var(--caret-delay, 0s); }
.reveal-ready .words:not(.is-visible) + .caret { visibility: hidden; transition: none; }

/* Digitação: print("olá, mundo") e as linhas do card perfil.py.
   O texto não é separado em letras (o Google Tradutor continua traduzindo a frase inteira):
   o JS envolve cada linha em .type > .type__text, e a linha é revelada da esquerda
   para a direita em degraus, um por caractere, com um cursor acompanhando.
   --type vai de 0 (nada visível) a 1 (linha completa) */
@property --type { syntax: "<number>"; inherits: true; initial-value: 1; }
@keyframes type-in { from { --type: 0; } to { --type: 1; } }
@keyframes type-caret {
  0% { opacity: 0; }
  .1%, 99.9% { opacity: 1; }
  100% { opacity: 0; }
}
.type { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.type__text { display: inline-block; }
/* Só durante a sequência de entrada (o JS tira .is-playing ao terminar ou ao pausar as animações) */
html[data-motion="on"] .is-playing .type { --type: 0; }
html[data-motion="on"] .is-playing .type__text { clip-path: inset(-.3em calc((1 - var(--type)) * 100%) -.3em -.3em); }
html[data-motion="on"] .is-playing .type.is-typing {
  animation: type-in var(--type-dur, 1s) steps(var(--type-steps, 20), end) var(--type-delay, 0s) both;
}
/* Linha já digitada (o JS marca ao terminar): inteira, sem recorte nem cursor */
html[data-motion="on"] .is-playing .type.is-typed { --type: 1; animation: none; }
html[data-motion="on"] .is-playing .type.is-typed .type__text { clip-path: none; }
html[data-motion="on"] .is-playing .type.is-typed::after { content: none; }
/* Cursor da digitação: altura de uma linha. Aparece só enquanto a própria linha é digitada.
   Texto que quebrou em várias linhas: o main.js (typeMultiline) mede cada linha e digita
   uma por vez, com o cursor parando no fim do texto de cada linha */
html[data-motion="on"] .is-playing .type.is-typing::after {
  content: "";
  position: absolute;
  top: .1em;
  height: calc(1lh - .2em);
  left: calc(var(--type) * 100% + 1px);
  width: 2px;
  background: var(--pink);
  pointer-events: none;
  animation: type-caret var(--type-dur, 1s) linear var(--type-delay, 0s) both;
}

/* Animações desligadas pelo botão (ou pelo sistema): remove transições, animações e elevação */
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after { transition: none !important; animation: none !important; }
html[data-motion="off"] :is(.btn, .card, .chip, .lang-btn, .motion-btn, .nav__toggle):hover,
html[data-motion="off"] .btn:hover .btn__arrow,
html[data-motion="off"] .text-link--arrow:hover .text-link__arrow { transform: none !important; }

/* Sem JavaScript: respeita a preferência do sistema mesmo assim */
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) { scroll-behavior: auto; }
  html:not([data-motion="on"]) * { transition: none !important; animation: none !important; }
}

/* =============================================
   5. LAYOUT GERAL
============================================= */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main { outline: none; }

/* Seção que recebe o foco ao ser escolhida no menu mobile: não é interativa, então não leva contorno */
.nav-target:focus-visible { outline: none; }

.section { padding-bottom: var(--section-gap); }

.section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

/* Variante com linha fina também acima (Projetos), como na referência */
.section__head--framed { border-top: 1px solid var(--border); padding-top: 24px; }

.section__title {
  font: 800 clamp(2rem, 4vw, 2.75rem) var(--font-mono);
  letter-spacing: -.03em;
}

/* Comentário estilo código (# ...) */
.code-comment {
  font: 400 0.9375rem var(--font-mono);
  color: var(--muted);
}

/* =============================================
   6. COMPONENTES REUTILIZÁVEIS
============================================= */

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Medidas relativas: acompanham a letra do navegador (WCAG 1.4.4). Nas telas estreitas
     o espaço lateral e a letra diminuem um pouco, para os botões caberem lado a lado */
  gap: .625em;
  min-height: 3.25rem; /* 52px: área de toque confortável (WCAG 2.5.8) */
  padding: 0 clamp(.875rem, .5rem + 1.5vw, 1.375rem); /* 14px a 22px */
  border-radius: 6px;
  font: 700 clamp(.9375rem, .85rem + .3vw, 1.0625rem) var(--font-mono); /* 15px a 17px */
  transition:
    background-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn svg { flex-shrink: 0; }

/* Preenchido: glow na cor do fundo */
.btn--filled { background: var(--accent); color: var(--bg); box-shadow: var(--glow-filled-rest); }
.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn--filled:hover {
  background: var(--accent-hover);
  color: var(--bg);
  box-shadow: var(--glow-filled);
  transform: translateY(-2px);
}

/* Contorno: glow suave na cor da borda */
.btn--outline { border: 1px solid var(--accent); color: var(--text); background: var(--bg); }
.btn--outline:hover {
  background: rgba(128,100,200,.16);
  color: var(--text);
  box-shadow: var(--glow-outline);
  transform: translateY(-2px);
}

/* --- Cards --- */
.card {
  height: 100%;
  background: var(--surface-gradient);
  background-color: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
  padding: clamp(24px, 3vw, 36px);
  transition: box-shadow var(--t-card) var(--ease), transform var(--t-card) var(--ease), border-color var(--t-card) var(--ease);
}
.card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.card--mono { font-family: var(--font-mono); }

/* Rótulo de card (ex.: FORMAÇÃO) — maiúsculas só no visual */
.card__label {
  margin-bottom: 20px;
  font: 700 0.875rem var(--font-mono);
  color: var(--accent);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Cabeçalho de card: ícone decorativo em quadrado arredondado + rótulo */
.card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.card__head .card__label { margin: 0; }
.card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(180,163,255,.45);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(128,100,200,.28), rgba(73,48,120,.22));
  color: var(--lilac-light);
  box-shadow: inset 0 0 10px -2px rgba(180,163,255,.35), 0 0 14px -3px rgba(128,100,200,.65);
}
.card__icon svg { filter: drop-shadow(0 0 3px rgba(201,190,255,.55)); }

/* --- Chips (não interativos: só um brilho suave no hover) --- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.9375rem; }
.chip {
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 8px 12px;
  color: var(--text);
  cursor: default;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--border-hover); box-shadow: var(--glow-chip); transform: translateY(-1px); }
.chips--small { font: 500 0.875rem var(--font-mono); }
.chips--small .chip { padding: 6px 10px; }

/* --- Link de texto sublinhado --- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease);
}
.text-link:hover { color: var(--text); text-decoration-thickness: 2px; }
/* Link com seta (ex.: "ver outros cursos →"): só o texto é sublinhado, a seta não.
   O sublinhado fica no .text-link__text, e não no link inteiro: num link inline-flex o
   sublinhado do pai passaria por baixo de todos os filhos, inclusive da seta.
   O texto continua sublinhado, então o link não depende só da cor (WCAG 1.4.1) */
.text-link--arrow { text-decoration: none; }
.text-link__text { text-decoration: underline; text-underline-offset: 4px; }
.text-link--arrow:hover .text-link__text { text-decoration-thickness: 2px; }
.text-link__arrow { transition: transform var(--t-fast) var(--ease); }
.text-link--arrow:hover .text-link__arrow { transform: translateX(3px); }

/* =============================================
   7. HEADER E NAVEGAÇÃO
============================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px var(--gutter) 0;
  font-family: var(--font-mono);
}
/* Barra arredondada com borda violeta discreta.
   Sem backdrop-filter de propósito: ele quebraria o painel fixo do menu mobile */
.header__inner {
  max-width: calc(var(--max-width) - 2 * var(--gutter));
  padding: 0 8px 0 20px;
  /* Um pouco mais claro que os cards, para o header ganhar destaque (original: rgba(29,23,43) → rgba(20,16,32)) */
  background: linear-gradient(180deg, rgba(43,35,64,.96), rgba(33,27,50,.96));
  /* Mesma linguagem do card perfil.py: borda violeta translúcida e brilho difuso */
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(201,190,255,.09), 0 12px 30px -20px rgba(0,0,0,.9), 0 0 44px -18px rgba(128,100,200,.6);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}

/* Filete de luz na borda superior, como o brilho na base do card perfil.py */
.header__inner::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,190,255,.65), transparent);
  box-shadow: 0 0 10px 0 rgba(180,163,255,.35);
  pointer-events: none;
}

.nav { display: flex; align-items: stretch; flex-wrap: wrap; }

.nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding-right: 18px;
  color: var(--text);
  font-weight: 800;
  font-size: 1rem;
}
.nav__brand:hover { color: var(--text); }
.nav__diamond { color: var(--accent); }
/* Glow atrás do nome: halo que segue o contorno das letras (text-shadow), sem caixa nem
   borda; camadas do mais próximo/forte ao mais amplo/fraco para dissolver no header.
   Em alto contraste do Windows o navegador remove sozinho */
.nav__brand {
  text-shadow:
    0 0 6px rgba(180,163,255,.45),
    0 0 16px rgba(140,95,235,.6),
    0 0 32px rgba(128,100,200,.45),
    0 0 56px rgba(128,100,200,.3);
}

/* Abas no estilo de editor de código */
.nav__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  color: var(--text);
  font-size: 0.9375rem;
  border-left: 1px solid var(--border);
  border-top: 2px solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__tab:first-child { margin-left: 4px; }
.nav__tab:last-child { border-right: 1px solid var(--border); }
.nav__tab:hover { background: var(--hover); color: var(--text); border-top-color: var(--accent); }
.nav__ext { color: var(--mint); }

/* Grupo das abas: em linha no desktop; vira painel lateral no mobile (ver seção 14) */
.nav__panel { display: flex; align-items: stretch; flex-wrap: wrap; }

/* Botão do menu hambúrguer e fundo escurecido: só existem no mobile (seção 14) */
.nav__toggle,
.nav__backdrop { display: none; }

/* Controles: idioma e animações */
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; }

.lang-group {
  display: flex;
  gap: 2px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 2px;
}
.lang-btn {
  min-width: 46px;
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font: 700 0.9375rem var(--font-mono);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lang-btn:hover { box-shadow: var(--glow-small); transform: translateY(-1px); }
/* Idioma ativo: lilás com brilho por cima (reflexo no topo) e glow em volta */
.lang-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--lilac-light), var(--accent));
  color: var(--bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 0 0 1px rgba(201,190,255,.55),
    0 0 14px 0 rgba(180,163,255,.55),
    0 0 30px 2px rgba(128,100,200,.45);
}
/* Alto contraste (Windows): sem sombras, o idioma ativo ganha contorno do sistema */
@media (forced-colors: active) {
  .lang-btn[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

.motion-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font: 500 0.9375rem var(--font-mono);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.motion-btn:hover {
  border-color: var(--accent);
  box-shadow: var(--glow-outline);
  transform: translateY(-1px);
}
.motion-btn__icon { font-size: 0.875rem; color: var(--accent); }

/* =============================================
   8. HERO E CARD PERFIL.PY
============================================= */
.hero {
  position: relative;
  isolation: isolate; /* a atmosfera (z-index -1) fica atrás do conteúdo do hero, sem vazar para o resto da página */
  padding: clamp(48px, 7vw, 96px) 0 calc(var(--section-gap) * 1.25);
  margin-bottom: calc(var(--section-gap) * .25);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 1040px) { .hero { grid-template-columns: minmax(0, 1fr); } }
/* Marcas do divisor: // à esquerda e ponto à direita */
.hero__divider { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
.hero__divider-mark { position: absolute; left: 0; bottom: -9px; font: 400 0.9375rem var(--font-mono); color: var(--muted); line-height: 1; }
.hero__divider-dot {
  position: absolute;
  right: 4px;
  bottom: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lilac);
  box-shadow: 0 0 8px rgba(180,163,255,.7);
}

/* Card perfil.py alinhado à direita, sem esticar demais em telas largas */
.hero > [data-reveal="2"] { justify-self: end; width: 100%; max-width: 600px; }

/* --- Atmosfera: glow violeta + pontilhado, do centro até a borda direita da tela --- */
.hero__atmosphere {
  position: absolute;
  z-index: -1;
  top: -160px;
  bottom: 0;
  left: 38%;
  /* vai até a borda da janela, mesmo fora do container */
  right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--max-width)) / 2));
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 62% 45%, rgba(128,100,200,.12), transparent 70%);
  /* Também se apaga em direção ao título */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%);
  mask-image: linear-gradient(to right, transparent 0%, #000 30%);
}
/* Pontilhado: textura ambiente que se dissolve nas bordas */
.hero__atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Grade única de pontos (um ponto por célula, sem sobreposição) */
  background-image: radial-gradient(circle at 50% 50%, rgba(201,190,255,.55) 0 1.2px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 65% 65% at 62% 45%, #000 25%, transparent 85%);
  mask-image: radial-gradient(ellipse 65% 65% at 62% 45%, #000 25%, transparent 85%);
  opacity: .85;
}
/* --- Aura do card perfil.py: glow concentrado atrás do card, mais forte nas bordas
   superior e inferior, pontilhado e arco fino que nasce acima do card e sai pela direita --- */
.profile-wrap { position: relative; }
.profile-aura {
  position: absolute;
  z-index: -1;
  top: -150px;
  bottom: -130px;
  left: -32%;
  right: -48%;
  pointer-events: none;
  /* Luz em "S" feita só de manchas difusas (sem traço, sem contorno), da camada de cima para a de baixo:
     brilho forte atrás da borda superior do card, extensão para o alto à direita (onde passa o arco),
     reflexo sob a base, halo em volta do card e um resto de luz na lateral esquerda, embaixo.
     Card ocupa ~18% a 73% da largura e ~22% a 70% da altura desta caixa. */
  background:
    radial-gradient(ellipse 26% 7% at 46% 22%, rgba(201,190,255,.5), transparent 75%),
    radial-gradient(ellipse 44% 17% at 48% 21%, rgba(140,95,235,.62), transparent 75%),
    radial-gradient(ellipse 34% 16% at 76% 14%, rgba(128,100,200,.38), transparent 75%),
    radial-gradient(ellipse 32% 7% at 46% 71%, rgba(180,163,255,.28), transparent 75%),
    radial-gradient(ellipse 20% 34% at 80% 46%, rgba(128,100,200,.22), transparent 75%),
    radial-gradient(ellipse 44% 42% at 46% 47%, rgba(85,52,150,.8), transparent 72%),
    radial-gradient(ellipse 18% 24% at 17% 68%, rgba(128,100,200,.24), transparent 75%),
    radial-gradient(ellipse 62% 58% at 50% 48%, rgba(128,100,200,.18), transparent 75%);
  /* A luz se apaga da direita para a esquerda: o fundo escurece em direção ao título */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  mask-image: linear-gradient(to right, transparent 0%, #000 26%);
}
/* Desktop: blend mais amplo em três pontos (ponta esquerda do brilho de cima, alto à direita
   em volta do arco e lateral direita do card). Manchas maiores e com degradê mais longo,
   sem aumentar a intensidade. A máscara do .profile-aura continua apagando a luz rumo ao título */
@media (min-width: 1041px) {
  /* Desktop: as duas manchas da direita (A = alto à direita, em volta do arco;
     B = lateral direita do card) viram névoa: elipses ~1,5x maiores, metade da
     opacidade e degradê em três paradas, sem anel nem centro marcado.
     As outras camadas são as mesmas da regra base. */
  .profile-aura {
    background:
      radial-gradient(ellipse 26% 7% at 46% 22%, rgba(201,190,255,.5), transparent 75%),
      radial-gradient(ellipse 44% 17% at 48% 21%, rgba(140,95,235,.62), transparent 75%),
      /* A: névoa ampla no alto à direita */
      radial-gradient(ellipse 50% 25% at 77% 15%, rgba(128,100,200,.19), rgba(128,100,200,.08) 45%, transparent 100%),
      radial-gradient(ellipse 32% 7% at 46% 71%, rgba(180,163,255,.28), transparent 75%),
      /* B: névoa alongada na lateral direita do card */
      radial-gradient(ellipse 30% 50% at 80% 47%, rgba(128,100,200,.11), rgba(128,100,200,.05) 45%, transparent 100%),
      radial-gradient(ellipse 44% 42% at 46% 47%, rgba(85,52,150,.8), transparent 72%),
      radial-gradient(ellipse 18% 24% at 17% 68%, rgba(128,100,200,.24), transparent 75%),
      radial-gradient(ellipse 62% 58% at 50% 48%, rgba(128,100,200,.18), transparent 75%);
    /* Máscara em três direções: apaga rumo ao título (esquerda), como antes, e também
       rumo à borda direita e ao topo da caixa, para nenhuma mancha terminar em corte reto */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 26%, #000 78%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 16%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, #000 26%, #000 78%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 16%);
    mask-composite: intersect;
  }
  .profile-aura::before {
    content: "";
    position: absolute;
    inset: 0; /* dentro da caixa da aura: a máscara dela corta o que passar da borda */
    pointer-events: none;
    background:
      radial-gradient(ellipse 22% 11% at 27% 21%, rgba(128,100,200,.26), transparent 90%),
      /* Reforço de A e B: mesma névoa, maior e mais fraca */
      radial-gradient(ellipse 54% 27% at 76% 20%, rgba(128,100,200,.12), rgba(128,100,200,.05) 45%, transparent 100%),
      radial-gradient(ellipse 30% 54% at 82% 48%, rgba(110,80,190,.12), rgba(110,80,190,.05) 45%, transparent 100%);
  }
  /* Final do "S": feixe de luz que passa por trás do card e vaza pela lateral esquerda,
     descendo em diagonal rumo ao texto. Uma elipse longa girada; mais forte junto do card
     (lado direito da caixa, que fica escondido atrás dele) e se apagando para a esquerda.
     Fica fora da .profile-aura para não ser cortado pela máscara dela */
  .profile-wrap::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 30%;
    left: -48%;
    width: 78%;
    height: 34%;
    transform: rotate(-30deg);
    transform-origin: 100% 50%;
    background:
      radial-gradient(ellipse 52% 22% at 74% 50%, rgba(190,160,255,.38), transparent 100%),
      radial-gradient(ellipse 70% 50% at 70% 50%, rgba(140,95,235,.42), rgba(128,100,200,.16) 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  }
}
.profile-aura__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(180,163,255,.7)) drop-shadow(0 0 10px rgba(128,100,200,.5));
}

/* --- Linha de transição para a próxima seção, com brilho concentrado --- */
.hero::after,
.hero::before {
  content: "";
  position: absolute;
  pointer-events: none;
}
.hero::after {
  left: 36px;
  right: 22px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(128,100,200,.35) 12%, rgba(180,163,255,.55) 50%, rgba(201,190,255,.95) 64%, rgba(128,100,200,.35) 85%, transparent);
}
.hero::before {
  left: 52%;
  width: 26%;
  bottom: -12px;
  height: 25px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(180,163,255,.35), transparent 70%);
}

.hero__intro { display: grid; grid-template-columns: auto 1fr; gap: 0 24px; }
/* A coluna do texto vira "container": assim o título pode medir o próprio espaço (unidade cqi) */
.hero__intro > div:not(.line-numbers) { min-width: 0; container-type: inline-size; }

/* Numeração de linhas: decorativa */
.line-numbers {
  font: 400 0.9375rem/2 var(--font-mono);
  color: var(--dim);
  text-align: right;
  user-select: none;
  padding: 6px 14px 0 0;
  border-right: 1px solid var(--border);
}

.hero__print { margin-bottom: 16px; font: 400 0.9375rem var(--font-mono); }
.syntax-fn { color: var(--accent); }
.syntax-str { color: var(--mint); }

.hero__highlight { color: var(--lilac-light); }
.hero__title {
  --hero-title-size: clamp(2.375rem, 1.25rem + 3.6vw, 4.25rem); /* 38px a 68px (com 16px de base) */
  margin-bottom: 28px;
  font: 800 var(--hero-title-size)/1.04 var(--font-mono);
  letter-spacing: -.04em;
  text-wrap: balance;
}
/* Alemão: o tradutor junta palavras em compostos longos (ex.: "Benutzererlebnisorientiertes",
   28 letras) que não cabiam na tela. Só em alemão (em PT e EN nada muda):
   - font-size: relativo à largura da coluna, nunca maior que 10% dela (10cqi);
   - hyphens: manual: a palavra só quebra nos pontos certos que o main.js marca
     (lista DE_HYPHENS, seção 4), nunca no meio de uma sílaba. */
html[lang="de"] .hero__title {
  font-size: min(var(--hero-title-size), 10cqi);
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: wrap; /* sem "balance": ele quebraria no hífen só para igualar as linhas */
}
/* Fora do celular (acima de 480px) a palavra longa fica inteira, sem quebrar:
   o título diminui o suficiente para caber uma palavra de 28 letras (6.3cqi).
   max(..., 1.75rem): o título nunca fica menor que 28px, e cresce se a pessoa aumentar
   o tamanho do texto no navegador; aí a palavra quebra nos pontos certos, como no celular.
   Com zoom (Ctrl +), a tela "encolhe" e, abaixo de 480px, vale a regra do celular. */
@media (min-width: 481px) {
  html[lang="de"] .hero__title { font-size: max(min(var(--hero-title-size), 6.3cqi), 1.75rem); }
}

.hero__text {
  margin-bottom: 36px;
  font-size: clamp(1.1875rem, 1.6vw, 1.3125rem);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 44ch;
  text-wrap: pretty;
}

/* Botões do hero: lado a lado sempre que cabem. Quando o espaço do próprio grupo não
   comporta os dois (celular estreito ou letra aumentada), empilham com a mesma largura,
   em vez de quebrar desalinhados (container query: mede o grupo, não a tela) */
.hero__actions { container-type: inline-size; display: flex; gap: .75rem; flex-wrap: wrap; }
@container (max-width: 24rem) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* Card perfil.py */
.profile {
  position: relative;
  padding: 0;
  height: auto;
  font-family: var(--font-mono);
  background: linear-gradient(180deg, rgba(29,23,43,.94), rgba(20,16,32,.97));
  border-color: var(--border-glow);
  box-shadow: var(--glow-surface);
}
.profile:hover { border-color: rgba(201,190,255,.5); box-shadow: var(--glow-surface), 0 0 0 1px rgba(180,163,255,.15); }
/* Ponto de brilho na borda inferior */
.profile::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,190,255,.7), transparent);
  box-shadow: 0 0 8px 0 rgba(180,163,255,.35);
  pointer-events: none;
}
.profile__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: rgba(29,23,43,.9);
  font-size: 0.875rem;
}
.profile__dots { display: flex; gap: 7px; }
.profile__dots span { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--dim); }
/* Último indicador aceso em violeta (estado parado: animações pausadas) */
.profile__dots span:last-child { background: var(--lilac); border-color: var(--lilac); box-shadow: 0 0 8px 1px rgba(180,163,255,.7); }
/* Bolinhas piscando uma de cada vez (o JS adiciona .is-blinking ao carregar a página):
   fraca, média e forte, todas com glow proporcional à intensidade */
@keyframes dot-pulse {
  0%, 40%, 100% { background-color: transparent; border-color: var(--dim); box-shadow: none; }
  13%, 24% {
    background-color: rgba(180,163,255,var(--dot-a));
    border-color: rgba(180,163,255,var(--dot-a));
    box-shadow: 0 0 var(--dot-glow) 1px rgba(180,163,255,var(--dot-a));
  }
}
.profile__dots.is-blinking span {
  animation: dot-pulse 2.7s ease-in-out infinite both;
}
.profile__dots.is-blinking span:nth-child(1) { --dot-a: .3; --dot-glow: 4px; }
.profile__dots.is-blinking span:nth-child(2) { --dot-a: .6; --dot-glow: 7px; animation-delay: .9s; }
.profile__dots.is-blinking span:nth-child(3) { --dot-a: 1; --dot-glow: 11px; animation-delay: 1.8s; }
.profile__head { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 20px 16px; }
.profile__photo {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--border-strong);
}
.profile__head .code-comment { align-self: center; }
.profile__code { padding: 0 20px 24px; font-size: 1rem; line-height: 1.5; }
.profile__list { margin: 6px 0; display: flex; flex-direction: column; gap: 8px; }
.profile__row { display: flex; flex-wrap: wrap; gap: 0 .625rem; padding-left: 4ch; }
.profile__row dt { color: var(--accent); }
/* Valor: fica ao lado da chave e quebra em várias linhas, alinhado depois dela, como num
   editor de código. Só desce para baixo da chave quando sobram menos de 14 caracteres ao lado */
.profile__row dd { flex: 1 1 14ch; min-width: 0; color: var(--mint); }

/* =============================================
   9. PROJETOS
   Um card embaixo do outro, em todas as larguras (o Brumphomet em cima).
   Em cada card: miniatura em cima, informações embaixo e os botões no fim
============================================= */
.projects-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 20px);
  height: 100%; /* lado a lado, os dois cards ficam com a mesma altura */
  padding: 12px 12px clamp(18px, 2vw, 22px);
}
.project-card:hover { border-color: var(--border-glow); box-shadow: var(--shadow-card), 0 0 0 1px rgba(180,163,255,.12); }

/* Miniatura real, sem filtros: só moldura e cantos arredondados */
.project-card__thumb {
  display: block;
  width: 100%;
  height: auto; /* a altura vem só da proporção abaixo: as miniaturas ficam sempre do mesmo tamanho */
  flex: none;   /* não estica nem encolhe para acompanhar a altura do card */
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: #111;
  border-radius: var(--radius);
  border: 1px solid rgba(180,163,255,.35);
  /* Halo violeta em volta da miniatura (a imagem em si não recebe filtro) */
  box-shadow: 0 0 0 1px rgba(128,100,200,.12), 0 0 22px -4px rgba(128,100,200,.55), 0 10px 26px -14px rgba(73,48,120,.9);
  transition: box-shadow var(--t-card) var(--ease), border-color var(--t-card) var(--ease);
}
.project-card:hover .project-card__thumb {
  border-color: rgba(201,190,255,.55);
  box-shadow: 0 0 0 1px rgba(180,163,255,.2), 0 0 30px -4px rgba(128,100,200,.75), 0 10px 26px -14px rgba(73,48,120,.9);
}
/* Espaço reservado (projeto ainda sem miniatura): superfície + pontilhado sutil */
.project-card__thumb--placeholder {
  background:
    radial-gradient(ellipse 60% 70% at 50% 40%, rgba(73,48,120,.45), transparent 75%),
    radial-gradient(rgba(180,163,255,.18) 1px, transparent 1.5px) 0 0 / 16px 16px,
    var(--bg-2);
}

.project-card__body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 0 clamp(4px, 1vw, 10px); }
/* Tags do projeto: mesmos chips das competências, com um respiro antes do link */
.project-card__chips { margin-bottom: 4px; }
.project-card__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font: 0.875rem var(--font-mono); }
.project-card__id { color: var(--muted); }
.project-card__title { font: 700 clamp(1.25rem, 1.8vw, 1.5rem)/1.25 var(--font-mono); letter-spacing: -.02em; color: var(--text); }
.project-card__tags { font: 500 0.875rem var(--font-mono); color: var(--accent); letter-spacing: .02em; }
.project-card__desc { font-size: 1rem; line-height: 1.6; color: var(--text-2); }
/* Quando o link é o próprio título (projeto 02), herda o estilo do título */
.project-card__link--title { padding: 0; font: inherit; color: inherit; text-decoration: none; }
.project-card__link--title:hover { color: var(--lilac-light); }
/* Botões do fim do card: usam os botões da seção 6 (.btn--outline e .btn--filled).
   Aqui só a posição: embaixo e centralizados. Os dois botões de um card têm sempre
   a mesma largura (a do texto mais longo): colunas "1fr" numa grade que encolhe até o conteúdo.
   Acima de 1040px ficam lado a lado; abaixo, um embaixo do outro.
   No celular, cada botão ocupa a largura toda (como no topo do site). */
.project-card__actions {
  margin-top: auto;
  display: grid;
  grid-auto-columns: 1fr;
  gap: .75rem;
  align-self: center;
  max-width: 100%;
}
@media (min-width: 1041px) {
  .project-card__actions { grid-auto-flow: column; }
}
@media (max-width: 719px) {
  .project-card__actions { align-self: stretch; }
}
/* Cada link é clicável só sobre o próprio texto. (Antes havia um ::after cobrindo o card inteiro;
   com dois links, a camada do segundo ficava por cima e o "resumido" abria o "completo".) */

/* Seta em pequena moldura (decorativa: o link é o card inteiro). Usada no projeto 02, no fim do card à direita */
.project-card__arrow {
  align-self: flex-end;
  margin-right: clamp(4px, 1vw, 10px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font: 1.125rem var(--font-mono);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.project-card:hover .project-card__arrow { border-color: var(--accent); background: rgba(128,100,200,.16); color: var(--lilac-light); }

/* Indicador de estado: ponto + texto (a cor nunca é a única informação) */
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}
.status--done { color: var(--mint); }
.status--progress { color: var(--lilac); }


/* =============================================
   10. SOBRE
============================================= */
.about {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
/* Desktop largo: três colunas, com "Da interface ao código" um pouco mais larga (tem duas colunas internas) */
@media (min-width: 1200px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr); }
}
.specialty, .ifc-card { container-type: inline-size; }

/* Especialidade / Acessibilidade */
.specialty__label { margin-bottom: 12px; }
/* Título com contorno tracejado e a etiqueta :focus-visible encostada embaixo, à esquerda */
.specialty__head { display: flex; flex-direction: column; align-items: flex-start; margin: 12px 0 16px 8px; }
.specialty__title {
  font: 800 clamp(1.875rem, 3.4vw, 2.5rem) var(--font-mono);
  letter-spacing: -.03em;
  /* Contorno ilustrativo (referência ao foco visível) */
  outline: 2px dashed var(--accent);
  outline-offset: 8px;
  border-radius: 2px;
}
/* Em alemão o título é uma palavra só e longa ("Barrierefreiheit"), que saía do card:
   o tamanho acompanha a largura do card (cqi = 1% da largura do .specialty__head) */
/* O tamanho acompanha a largura do card (cqi = 1% da largura do card) para palavras longas caberem */
.specialty__title { font-size: clamp(1.5rem, 11.5cqi, 2.5rem); }
:lang(de) .specialty__title { font-size: clamp(1.25rem, 10cqi, 2.5rem); }
.specialty__badge {
  position: relative;
  margin: 4px 0 0 18px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 14px -4px rgba(180,163,255,.55);
  background: var(--accent);
  color: var(--bg);
  font: 400 0.875rem var(--font-mono);
}
.specialty__text { margin: 24px 0; font-size: 1.125rem; line-height: 1.65; color: var(--text-2); max-width: 52ch; }

/* Formação */
.education { display: flex; flex-direction: column; }
.education__list { display: flex; flex-direction: column; gap: 14px; }
.education__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  line-height: 1.5;
}
.education__status { color: var(--mint); font-size: 0.875rem; }
.education__more { margin-top: auto; padding-top: 16px; align-self: flex-start; font-size: 0.9375rem; font-weight: 700; }

/* Da interface ao código: empilhado por padrão; duas colunas quando o card passa de 440px */
/* Texto em cima e processo (rótulo + etapas, sempre juntos) embaixo. Duas colunas só quando o
   card passa de 40rem: em rem, com a letra do navegador maior o card empilha antes,
   em vez de espremer as etapas (WCAG 1.4.4 e 1.4.10) */
.ifc { display: grid; gap: 1.5rem; }
@container (min-width: 40rem) {
  .ifc { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 2.5rem; }
}
.ifc__text { margin-bottom: 0; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); }
.ifc__label { margin-bottom: 1.25rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.9375rem; }
.ifc__from { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 10px; background: var(--bg-2); }
.ifc__arrow { display: inline-block; color: var(--accent); }
/* Estado final (e o que aparece sem JS ou com animações desligadas): "código" aceso */
.ifc__to {
  background: linear-gradient(180deg, var(--lilac-light), var(--accent));
  color: var(--bg);
  border-radius: 4px;
  padding: 4px 10px;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(201,190,255,.5), 0 0 16px 0 rgba(180,163,255,.5), 0 0 30px 2px rgba(128,100,200,.4);
}
.flow {
  position: relative;
  margin-left: 5px;
  padding: 4px 0;
  border-left: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.flow__step {
  position: relative;
  padding-left: 22px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 1rem;
  line-height: 1.4;
}
/* Losango decorativo sobre o trilho */
.flow__step::before {
  content: "";
  position: absolute;
  left: -5px;
  top: .45em;
  width: 9px;
  height: 9px;
  background: var(--surface);
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 6px rgba(180,163,255,.45);
  transform: rotate(45deg);
}
.flow__num { font-size: 0.875rem; color: var(--muted); }
.flow__label { display: inline-block; }

/* --- Fluxo aceso: estado final das etapas (losango preenchido, número lilás) e trilho
   iluminado do 01 ao 06, por cima do tracejado. Sem JS ou com animações desligadas,
   a seção já aparece assim --- */
.flow__step::before { background: var(--accent); }
.flow__num { color: var(--accent); }
.flow::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 4px;
  bottom: 15px; /* termina no centro do último losango */
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(180,163,255,.35), var(--accent));
  box-shadow: 0 0 6px rgba(180,163,255,.6);
}

/* --- Animação do fluxo (main.js, seção 5): .is-pending enquanto a sequência roda.
   1. "interface" acende (.is-start) e a seta avança
   2. o trilho cresce até cada etapa (--rail), com um ponto de luz na ponta;
      a etapa atual brilha mais (.is-current) e as já percorridas ficam acesas (.is-lit)
   3. ao final, .is-pending sai e tudo volta ao estado final acima ("código" aceso) --- */
.ifc.is-pending .ifc__to { background: var(--accent); box-shadow: none; }
.ifc.is-pending .flow__step:not(.is-lit) { color: var(--muted); }
.ifc.is-pending .flow__step:not(.is-lit)::before { background: var(--surface); }
.ifc.is-pending .flow__step:not(.is-lit) .flow__num { color: var(--muted); }
.ifc.is-pending .flow::before { bottom: auto; height: var(--rail, 0px); }
.ifc.is-pending .flow::after {
  content: "";
  position: absolute;
  left: -4px;
  top: calc(4px + var(--rail, 0px) - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--lilac-light);
  box-shadow: 0 0 8px 2px rgba(201,190,255,.8), 0 0 18px 4px rgba(128,100,200,.6);
  opacity: var(--comet, 0);
}
.ifc.is-start .ifc__from { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(180,163,255,.25), 0 0 16px -2px rgba(180,163,255,.55); }
.ifc.is-start .ifc__arrow { transform: translateX(4px); }
.flow__step.is-current::before {
  background: var(--lilac-light);
  transform: rotate(45deg) scale(1.25);
  box-shadow: 0 0 10px 2px rgba(201,190,255,.7), 0 0 22px 4px rgba(128,100,200,.5);
}
.flow__step.is-current .flow__label { transform: translateX(4px); }
/* Transições: só com animações ligadas (html[data-motion="off"] já zera tudo) */
/* (pseudo-elementos não valem dentro de :is(), por isso o ::before vem à parte) */
html[data-motion="on"] :is(.ifc__from, .ifc__arrow, .ifc__to, .flow__step, .flow__num, .flow__label),
html[data-motion="on"] .flow__step::before {
  transition: color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease), transform .4s var(--ease);
}
html[data-motion="on"] .ifc.is-pending .flow::before { transition: height .7s cubic-bezier(.4,0,.2,1); }
html[data-motion="on"] .ifc.is-pending .flow::after { transition: top .7s cubic-bezier(.4,0,.2,1), opacity .3s; }
/* Alto contraste (Windows): sem sombras; a etapa atual ganha contorno do sistema */
@media (forced-colors: active) {
  .flow__step.is-current::before { border-color: Highlight; }
}

/* =============================================
   11. COMPETÊNCIAS
============================================= */
.skills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.skills .card { padding: clamp(24px, 3vw, 32px); }
/* Subtítulo dentro de um card (ex.: "Idiomas" no card Corporativo): menor e neutro,
   para a hierarquia ficar clara abaixo do rótulo lilás do card */
.card__sublabel {
  margin-bottom: .75rem;
  font: 500 0.8125rem var(--font-mono);
  letter-spacing: .04em;
  color: var(--text-3);
}
.card__sublabel:not(:first-of-type) { margin-top: 1.5rem; }
/* Tag com complemento (ex.: idioma + nível): nome em destaque, complemento em tom secundário */
.chip--meta { display: inline-flex; align-items: baseline; gap: .5em; }
.chip__meta { font-size: .875em; color: var(--muted); }
/* Lista de idiomas: nome à esquerda, nível à direita, linha fina separando cada idioma */
.lang-levels { list-style: none; margin: 0; padding: 0; }
.lang-levels li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-strong);
}
.lang-levels li:first-child { padding-top: 4px; }
.lang-levels__name { font-size: 1.0625rem; color: var(--text); }
.lang-levels__level { font-size: 0.9375rem; color: var(--muted); }

/* =============================================
   12. CONTATO (FOOTER)
============================================= */
.footer { padding-bottom: 48px; }
/* Terminal de contato: brilho localizado no canto, só para dar hierarquia ao CTA */
.contact {
  padding: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  background:
    radial-gradient(ellipse 45% 70% at 85% 0%, rgba(73,48,120,.45), transparent 70%),
    var(--terminal);
  border-color: var(--border-strong);
}
.contact__bar { padding: 12px 18px; border-bottom: 1px solid var(--border-strong); background: rgba(29,23,43,.9); font-size: 0.875rem; color: var(--text-3); }
.contact__body { padding: clamp(28px, 4vw, 48px); }
.contact__title {
  position: relative;
  margin-bottom: 8px;
  font: 800 clamp(1.625rem, 1rem + 2vw, 2.5rem)/1.15 var(--font-mono); /* 26px a 40px */
  letter-spacing: -.03em;
  text-wrap: balance;
}
.contact__prompt { color: var(--mint); }
.contact__text { margin-bottom: 28px; font-size: 1rem; color: var(--text-3); }
.contact__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.contact__email { padding: 0 20px; word-break: break-all; }

.social { display: flex; gap: 4px 12px; flex-wrap: wrap; font-size: 1rem; }
.social .text-link { padding: 10px 8px; }

.copyright { margin-top: 24px; font: 400 0.875rem var(--font-mono); color: var(--text-3); }

/* =============================================
   13. BARRA DE STATUS
============================================= */
.statusbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: rgba(20,16,32,.97);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -10px 30px -24px rgba(128,100,200,.6);
  color: var(--text-2);
  font: 500 0.875rem var(--font-mono);
}
.statusbar__inner { min-height: 40px; display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; }
.statusbar__end { margin-left: auto; color: var(--text-3); }
.statusbar__sep { color: var(--dim); }

/* Três indicadores decorativos: cheio lilás, cheio violeta escuro, só contorno */
.statusbar__dots { display: inline-flex; align-items: center; gap: 7px; margin-right: clamp(4px, 1.5vw, 12px); flex-shrink: 0; }
.statusbar__dots span { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid transparent; }
.statusbar__dots span:nth-child(1) { background: var(--lilac); }
.statusbar__dots span:nth-child(2) { background: var(--border-hover); }
.statusbar__dots span:nth-child(3) { border-color: var(--dim); }

@media (max-width: 480px) {
  .statusbar__inner { gap: 6px 12px; }
  .statusbar__dots { gap: 5px; }
}

/* =============================================
   14. RESPONSIVIDADE
   Telas pequenas ou zoom alto: header e barra de status deixam de ser
   fixos para não cobrir o conteúdo (WCAG 1.4.10)
============================================= */
@media (max-width: 720px), (max-height: 520px) {
  .header, .statusbar { position: static; }
  html { scroll-padding-top: 0; scroll-padding-bottom: 0; }
}

/* ---------------------------------------------
   Hero em uma coluna (até 1040px: abaixo disso as duas colunas de
   440px + o espaço entre elas não cabem e o grid empilha)
   Sem arco (ele cruzaria o título), glow atrás do card empilhado,
   card ocupando a largura toda
--------------------------------------------- */
@media (max-width: 1040px) {
  .profile-aura__arc { display: none; }
  .hero__atmosphere { left: -20%; top: 40%; }
  /* Card empilhado: luz menor e mais suave; sem o apagamento lateral (o título fica acima, não ao lado) */
  .profile-aura { left: -10%; right: -10%; top: -80px; bottom: -80px; opacity: .75; -webkit-mask-image: none; mask-image: none; }
  .hero > [data-reveal="2"] { justify-self: stretch; max-width: none; }
}

/* ---------------------------------------------
   Menu hambúrguer (até 720px)
   Só entra em ação com JavaScript ativo (classe .js no <html>);
   sem JS as abas continuam em linha, como antes.
--------------------------------------------- */
@media (max-width: 720px) {
  /* Header em uma única linha: logotipo à esquerda, idiomas à direita, hambúrguer na extremidade.
     Em telas estreitas os espaçamentos encolhem antes dos textos */
  .header { padding-top: 8px; }
  .js .header__inner { flex-wrap: nowrap; align-items: center; gap: clamp(6px, 2vw, 12px); padding: 4px 6px 4px 14px; }
  .js .nav { flex: 1 1 auto; min-width: 0; }
  .js .nav__brand {
    padding-right: 0;
    gap: clamp(4px, 1.5vw, 8px);
    font-size: clamp(0.8125rem, 4vw, 1rem);
    white-space: nowrap;
  }
  .js .controls { flex: none; padding: 0; }
  /* Até o main.js mover o botão para o painel, ele não ocupa espaço no header */
  .js .controls .motion-btn { display: none; }
  .js .lang-btn { min-width: clamp(28px, 9vw, 46px); }

  .js .nav__toggle {
    position: relative;
    z-index: 60; /* fica acima do painel: o mesmo botão vira "Fechar menu" */
    display: grid;
    place-items: center;
    align-self: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  }
  .js .nav__toggle:hover {
    border-color: var(--accent);
    box-shadow: var(--glow-small);
    transform: translateY(-1px);
  }
  .js .nav__toggle:active { transform: none; }
  .js .nav__toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

  /* Ícone: três traços que viram um X */
  .nav__toggle-icon,
  .nav__toggle-icon::before,
  .nav__toggle-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .25s var(--ease), background-color .25s var(--ease);
  }
  .nav__toggle-icon { position: relative; }
  .nav__toggle-icon::before,
  .nav__toggle-icon::after { content: ""; position: absolute; left: 0; }
  .nav__toggle-icon::before { top: -6px; }
  .nav__toggle-icon::after { top: 6px; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon { background-color: transparent; }
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] .nav__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

  /* Painel: preso à lateral direita, entra da direita para a esquerda.
     Fechado, fica fora da tela e com visibility: hidden (fora do Tab e do leitor de tela).
     A transição só existe ao abrir/fechar (.is-open / .is-closing), nunca ao redimensionar. */
  .js .nav__panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: min(320px, 86vw);
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 76px 0 calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -18px 0 40px -24px rgba(0,0,0,.9);
    transform: translateX(100%);
    visibility: hidden;
  }
  .js .nav__panel.is-open {
    transform: none;
    visibility: visible;
    transition: transform .28s var(--ease), visibility 0s;
  }
  .js .nav__panel.is-closing { transition: transform .28s var(--ease), visibility 0s linear .28s; }

  /* Abas dentro do painel: uma por linha, com a marca de destaque na lateral */
  .js .nav__tab {
    min-height: 56px;
    padding: 0 24px;
    font-size: 1.0625rem;
    border: 0;
    border-left: 2px solid transparent;
    border-bottom: 1px solid var(--border);
  }
  .js .nav__tab:first-child { border-top: 1px solid var(--border); }
  .js .nav__tab:last-child { border-right: 0; }
  .js .nav__tab:hover { border-left-color: var(--accent); border-top-color: var(--border); }
  /* Contorno de foco para dentro: não é cortado pela borda da tela */
  .js .nav__tab:focus-visible { outline-offset: -4px; }

  /* "Pausar animações" dentro do painel (o main.js move o próprio botão para cá no mobile) */
  .js .nav__panel .motion-btn { align-self: flex-start; margin: 24px 24px 0; }

  /* Fundo escurecido atrás do painel (clique nele fecha o menu) */
  .js .nav__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(11,10,18,.66);
    opacity: 0;
    visibility: hidden;
  }
  .js .nav__backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s; }
  .js .nav__backdrop.is-closing { transition: opacity .28s var(--ease), visibility 0s linear .28s; }

  /* Página não rola por trás do painel aberto */
  html.nav-open { overflow: hidden; }
}

/* ---------------------------------------------
   Header sticky no mobile (até 720px de largura)
   Com uma linha só, o header pode acompanhar a rolagem. Em telas muito
   baixas (até 520px de altura: celular deitado, zoom alto) continua
   estático, como antes, para não cobrir o conteúdo (WCAG 1.4.10).
   z-index 45: acima da seta de topo (40); o painel e o fundo escurecido
   ficam dentro do header, então também passam por cima dela.
--------------------------------------------- */
@media (max-width: 720px) and (min-height: 521px) {
  .js .header { position: sticky; z-index: 45; }
  /* Âncoras e foco não ficam escondidos atrás do header */
  html.js { scroll-padding-top: calc(var(--header-offset, 52px) + 16px); }
}

/* ---------------------------------------------
   Ajustes de leitura (até 560px)
   Linha do projeto em andamento: título ganha a largura toda,
   status vai para baixo dele (antes o título ficava espremido)
--------------------------------------------- */
@media (max-width: 560px) {
  /* Espaço no fim da página para a seta de retorno ao topo não cobrir o copyright */
  .footer { padding-bottom: 112px; }
}

/* ---------------------------------------------
   Smartphones pequenos (até 480px)
   Palavras longas (ex.: "experiência", "Barrierefreiheit") não cabem
   no tamanho mínimo original e saíam do card ou da tela
--------------------------------------------- */
@media (max-width: 480px) {
  .hero__intro { gap: 0 16px; }
  .hero__title { --hero-title-size: clamp(1.75rem, .5rem + 7.5vw, 2.375rem); } /* 28px a 38px */
  .specialty__title { font-size: clamp(1.5rem, 8vw, 1.875rem); }
  .contact__title { font-size: clamp(1.25rem, .5rem + 4.5vw, 1.625rem); } /* 20px a 26px */
}

/* ---------------------------------------------
   Glow do hero no celular (até 720px)
   Faixa de luz difusa em "S" pela lateral direita: nasce atrás do canto do
   header (hambúrguer), desce atrás de "experiência", recua para a borda na
   altura do texto e dos botões (ali a leitura pede fundo escuro) e volta a
   se concentrar no canto inferior direito do card perfil.py (.profile-aura).
   Só manchas radial-gradient: sem blur, sem animação, sem elemento novo
   (as duas camadas já existem no HTML com aria-hidden="true").
   Posições em px a partir do topo, para o desenho não esticar quando o
   título quebra em mais linhas. Desktop e tablet não mudam.
--------------------------------------------- */
@media (max-width: 720px) {
  /* Atmosfera cobre o hero inteiro, de borda a borda da tela, e sobe até atrás do header.
     Topo da caixa = 96px acima do hero: o header fica em ~36–96px e o título começa em ~180px */
  .hero__atmosphere {
    top: -96px;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    bottom: 0;
    background:
      /* 1. Núcleo claro no canto superior direito, atrás do hambúrguer */
      radial-gradient(ellipse 150px 120px at 100% 84px, rgba(201,190,255,.42), transparent 75%),
      /* 2. Halo amplo em volta do núcleo, que escorre para dentro da tela */
      radial-gradient(ellipse 320px 270px at 96% 130px, rgba(150,95,240,.5), transparent 72%),
      /* 3. Descida pela lateral direita, atrás de "experiência" */
      radial-gradient(ellipse 210px 230px at 94% 300px, rgba(140,95,235,.38), transparent 72%),
      /* 4. Recuo: luz rente à borda na altura do texto e dos botões */
      radial-gradient(ellipse 90px 260px at 103% 500px, rgba(140,95,235,.32), transparent 75%);
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Pontilhado só no alto à direita, junto do núcleo (não passa atrás do texto) */
  .hero__atmosphere::before {
    -webkit-mask-image: radial-gradient(ellipse 50% 260px at 100% 110px, #000 10%, transparent 80%);
    mask-image: radial-gradient(ellipse 50% 260px at 100% 110px, #000 10%, transparent 80%);
    opacity: .6;
  }
  /* Arco de luz no canto superior direito da tela: borda brilhante de um círculo grande
     (centro fora da área visível, à esquerda e abaixo) que nasce sob o header e encosta na
     borda direita, com névoa por dentro. A máscara deixa só o trecho do alto à direita,
     para o resto do círculo não cruzar o texto nem os botões */
  .hero__atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Centro a 305px da borda direita: o anel (raio ~310px) encosta na borda em qualquer largura */
    background: radial-gradient(circle 330px at calc(100% - 305px) 410px,
      transparent 62%,
      rgba(140,95,235,.2) 84%,
      rgba(200,160,255,.6) 94%,
      rgba(150,100,240,.22) 97.5%,
      transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 65% 430px at 100% 60px, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 65% 430px at 100% 60px, #000 40%, transparent 100%);
  }
  /* Card: a luz que recuou na borda volta e se concentra embaixo, à direita.
     Caixa da aura no celular: 80px acima e abaixo do card, 10% para cada lado */
  .profile-aura::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      /* 5. Ligação: a faixa da borda reencontra o card no alto, à direita */
      radial-gradient(ellipse 16% 12% at 96% 8%, rgba(128,100,200,.32), transparent 75%),
      /* 6. Brilho no canto inferior direito do card */
      radial-gradient(ellipse 30% 16% at 88% 86%, rgba(140,95,235,.55), transparent 75%),
      /* 7. Halo que sai pela borda da tela, abaixo do card */
      radial-gradient(ellipse 34% 20% at 100% 92%, rgba(180,163,255,.22), transparent 75%);
  }
}
/* Alto contraste: a luz decorativa some (Windows) ou fica bem mais fraca */
@media (max-width: 720px) and (forced-colors: active) {
  .hero__atmosphere, .profile-aura { display: none; }
}
@media (max-width: 720px) and (prefers-contrast: more) {
  .hero__atmosphere, .profile-aura { opacity: .35; }
}

/* =============================================
   GOOGLE TRADUTOR (EN/DE, como no Brumphomet Lives)
   Esconde a barra, o balão e o destaque que o Google insere na página;
   a troca de idioma fica só nos botões PT / EN / DE do header.
============================================= */
.skiptranslate iframe,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
#google_translate_element { display: none; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* =============================================
   15. SETA DE RETORNO AO TOPO
   Usa as variáveis do início deste arquivo, com valores de reserva.
   Comportamento (quando aparece, rolagem, foco): main.js (seção 9)
============================================= */
.back-to-top {
  /* Distância da borda inferior. --back-to-top-lift é calculado pelo JS
     para a seta subir acima de barras no rodapé (ex.: barra de status) */
  --back-to-top-gap: 24px;

  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--back-to-top-gap) + var(--back-to-top-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  /* Centralizado na viewport, independente do layout das seções */
  margin: 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--accent, #C8C0FF);
  /* Superfície translúcida + borda delicada: destaca a seta sobre qualquer fundo */
  background: rgba(21,19,31,.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border-hover, #4A4578);
  border-radius: 6px;
  cursor: pointer;

  /* Estado oculto: invisível, fora do Tab e do leitor de tela */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s linear .3s,
    border-color .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}
.back-to-top[hidden] { display: none; }
.back-to-top svg { display: block; }

/* Estado visível: fade-in suave */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s,
    border-color .3s ease,
    box-shadow .3s ease,
    background-color .3s ease;
}

.back-to-top.is-visible:hover {
  border-color: var(--accent, #C8C0FF);
  background: var(--surface-2, #1A1826);
  box-shadow: 0 0 0 1px rgba(200,192,255,.3), 0 6px 18px -8px rgba(200,192,255,.5);
  transform: translateY(-2px);
}
.back-to-top.is-visible:active {
  background: var(--hover, #1E1B2E);
  transform: none;
}
.back-to-top:focus-visible {
  outline: 3px dashed var(--accent, #C8C0FF);
  outline-offset: 4px;
}

/* Destino do foco depois de voltar ao topo (o <body>): não é interativo, sem contorno */
.back-to-top-target:focus,
.back-to-top-target:focus-visible { outline: none; }

/* Movimento reduzido: aparece e some sem transição nem deslocamento */
html[data-motion="off"] .back-to-top,
html[data-motion="off"] .back-to-top.is-visible:hover { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .back-to-top,
  html:not([data-motion="on"]) .back-to-top.is-visible:hover { transition: none; transform: none; }
}