/* ============================================================================
   COMPONENTES — o sistema reutilizavel. STYLEGUIDE secoes 6, 7, 8, 11.
   ========================================================================= */

/* ============================== BOTOES ==================================
   Sao tres. Nao criar um quarto. */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: transform var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease),
              background-color var(--t-ui) var(--ease),
              border-color var(--t-ui) var(--ease);
}

.btn__arrow { transition: transform var(--t-ui) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Juice: o feedback vive no toque, nao numa animacao ambiente.
   BRIEF secao 17 pede juice; STYLEGUIDE secao 11 proibe coisa pulando. */
.btn:active { transform: translateY(1px) scale(0.985); }

.btn--primary {
  --btn-bg: var(--purple);
  --btn-fg: #fff;
}
.btn--primary:hover {
  --btn-bg: var(--purple-bright);
  box-shadow: var(--glow-strong);
  transform: translateY(-2px);
}

.btn--secondary {
  --btn-bd: var(--border-strong);
  --btn-fg: var(--text);
}
.btn--secondary:hover {
  --btn-bd: var(--purple);
  box-shadow: var(--glow-soft);
  transform: translateY(-2px);
}

.btn--ghost { --btn-fg: var(--purple-bright); padding-inline: 0; }
.btn--ghost:hover { --btn-fg: var(--purple-soft); }

.btn--lg { padding: 0.9rem 1.5rem; font-size: var(--fs-body); }

/* ============================== ICONES ==================================
   Outline, stroke 1.75. Nao misturar 3D, preenchido, emoji e colorido. */

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.5em; height: 1.5em; }

/* ================================ TAGS ================================== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-elevated);
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag--purple {
  border-color: rgba(139, 77, 255, 0.4);
  background: rgba(139, 77, 255, 0.12);
  color: var(--purple-soft);
}

/* ========================= TITULO DE SECAO ==============================
   eyebrow uppercase + linha roxa  /  H2 branco  /  texto auxiliar a direita */

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--purple-bright);
  margin-bottom: var(--space-3);
}
.eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--purple);
}

/* Variante da referencia: titulo com a linha roxa ao lado, sem eyebrow.
   A linha e INLINE, e nao um item de flex: quando o titulo quebra em duas
   linhas ela acompanha o fim da ultima palavra. Como item de flex ela ficava
   presa na borda direita da caixa, longe do texto. */
.section-title { display: block; }
.section-title::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 48px;
  height: 2px;
  margin-left: var(--space-4);
  border-radius: 2px;
  background: var(--purple);
}

.section-aside {
  font-size: var(--fs-caption);
  color: var(--purple-soft);
  white-space: nowrap;
  padding-bottom: 0.35rem;
}

/* ============================ SLOT DE MIDIA =============================
   STYLEGUIDE secao 19: nenhuma imagem e fixa no codigo. Todo visual e um slot
   com id, dimensao esperada, alt e fallback.

   Slot vazio NAO e imagem quebrada — e um alvo desenhado, que mostra onde
   subir o arquivo e qual proporcao ele espera. */

.media-slot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-img);
  background: var(--surface);
  aspect-ratio: var(--slot-ratio, 16 / 9);
}

.media-slot img,
.media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* O site fornece o frame, nao o filtro: zero tratamento de cor. */
  filter: none;
  transition: transform var(--t-media) var(--ease);
}

.media-slot--empty {
  position: absolute;
  inset: 0;
  background: var(--surface);
}

/* Placeholder gerado (src/_data/placeholders.js). Mesmo comportamento de
   uma foto real — object-fit: cover — para o enquadramento que se ve agora
   ser o enquadramento que vai existir. */
.media-slot__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================ PLAYER DE VIDEO ===========================
   Video do YouTube com a interface do site (docs/VIDEO.md). O YouTube so
   aparece como imagem em movimento: capa, botoes e barra sao nossos.

   Camadas, de baixo para cima:
     frame   iframe do YouTube, sem controles
     poster  capa; some quando o video toca, volta quando termina
     shield  vidro transparente: recebe clique e hover no lugar do iframe
     big     botao central (play / replay)
     bar     barra de controle */

.media-slot__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.player {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
  isolation: isolate;
}

.player__frame,
.player__frame iframe,
.player__frame > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--t-ui-slow) var(--ease);
}
.player[data-state="playing"] .player__poster,
.player[data-state="paused"] .player__poster { opacity: 0; pointer-events: none; }

.player__shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 32%);
  transition: opacity var(--t-ui-slow) var(--ease);
}
.player[data-idle] .player__shield { opacity: 0; cursor: none; }

/* Carregando: um anel girando no lugar do botao. */
.player[data-state="loading"] .player__shield::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: player-spin 0.8s linear infinite;
}
@keyframes player-spin { to { transform: rotate(360deg); } }

.player__big {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 3;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(56px, 12cqi, 84px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--purple) 88%, transparent);
  box-shadow: var(--glow-strong);
  color: #fff;
  cursor: pointer;
  transition: scale var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.player__big .icon { width: 42%; height: 42%; fill: currentColor; stroke: none; }
.player__big .player__i-play { translate: 8% 0; }
.player__big .player__i-replay { display: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.player__big:hover { scale: 1.08; background: var(--purple); }
.player[data-state="playing"] .player__big,
.player[data-state="loading"] .player__big { opacity: 0; pointer-events: none; }
.player[data-state="ended"] .player__big .player__i-play { display: none; }
.player[data-state="ended"] .player__big .player__i-replay { display: block; }

.player__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  transition: opacity var(--t-ui-slow) var(--ease), translate var(--t-ui-slow) var(--ease);
}
/* Antes do primeiro play a barra nao aparece: so a capa e o botao. */
.player[data-state="idle"] .player__bar,
.player[data-state="error"] .player__bar,
.player[data-idle] .player__bar { opacity: 0; translate: 0 8px; pointer-events: none; }
.player:focus-within .player__bar { opacity: 1; translate: 0 0; pointer-events: auto; }

.player__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.player__btn:hover { background: rgba(255, 255, 255, 0.14); }
.player__btn .player__i-play,
.player__btn .player__i-pause { fill: currentColor; stroke: none; }
.player__btn .player__i-pause { display: none; fill: none; stroke: currentColor; stroke-width: 3; }
.player[data-state="playing"] .player__btn .player__i-play,
.player[data-state="loading"] .player__btn .player__i-play { display: none; }
.player[data-state="playing"] .player__btn .player__i-pause,
.player[data-state="loading"] .player__btn .player__i-pause { display: block; }
.player__i-muted { display: none; }
.player[data-muted] .player__i-volume { display: none; }
.player[data-muted] .player__i-muted { display: block; }

.player__time {
  flex: none;
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.9);
}

.player__seek {
  --progress: 0%;
  flex: 1;
  min-width: 40px;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.player__seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--purple-bright) var(--progress), rgba(255, 255, 255, 0.3) var(--progress));
}
.player__seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); }
.player__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--purple-bright); }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.player__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.player__seek:focus-visible { outline: 2px solid var(--purple-soft); outline-offset: 2px; border-radius: 4px; }

/* Player estreito (card de 1/3, celular): tempo total sai, barra continua. */
.media-slot:has(> .player) { container-type: inline-size; }
@container (max-width: 360px) {
  .player__time[data-player-duration] { display: none; }
  .player__bar { gap: 0; padding-inline: var(--space-1); }
}

/* Tela cheia: o player ocupa a tela, video centralizado em preto. */
.player:fullscreen { inset: auto; width: 100vw; height: 100vh; }
.player:-webkit-full-screen { width: 100vw; height: 100vh; }

/* O nome do slot fica num selo no canto, e nao no centro: no centro ele
   competia com o assunto da imagem e fazia todo slot parecer quebrado. */
.media-slot__hint {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  max-width: calc(100% - var(--space-6));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  background: rgba(5, 9, 17, 0.72);
  backdrop-filter: blur(6px);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.media-slot__flag {
  flex: none;
  color: var(--purple-soft);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.625rem;
}
.media-slot__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-slot__ratio {
  flex: none;
  color: var(--text-muted);
}

/* Slot em miniatura nao mostra a dica de upload: em 48px de largura o texto
   vira ruido. O alvo de upload continua sendo o slot grande.
   Fica aqui, e nao em listing.css, porque a faixa de thumbnails aparece na
   pagina de projeto, que nao carrega aquele arquivo. */
.list-card__thumbs .media-slot__hint,
.thumb-strip .media-slot__hint { display: none; }

/* Em card com titulo logo abaixo, o selo mostra so "Placeholder": repetir o
   nome em cima da imagem e em baixo dela seria ler a mesma coisa duas vezes. */
.project-card .media-slot__name, .project-card .media-slot__ratio,
.mini-card .media-slot__name, .mini-card .media-slot__ratio,
.list-card .media-slot__name, .list-card .media-slot__ratio,
.art-card .media-slot__name, .art-card .media-slot__ratio,
.media-rail__item .media-slot__name, .media-rail__item .media-slot__ratio { display: none; }

/* =========================== CARD DE PROJETO ============================
   Deve parecer project entry, nao card de loja. */

.project-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t-ui-slow) var(--ease),
              border-color var(--t-ui-slow) var(--ease),
              box-shadow var(--t-ui-slow) var(--ease);
}

.project-card:hover {
  transform: translateY(-3px);
  border-color: var(--purple);
  box-shadow: var(--glow-soft), var(--shadow-card);
}
.project-card:hover .media-slot img { transform: scale(1.02); }
.project-card:hover .project-card__title { color: var(--purple-bright); }
.project-card:hover .project-card__go { opacity: 1; transform: none; }

.project-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  flex: 1;
}

.project-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.project-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--text);
  transition: color var(--t-ui) var(--ease);
}

.project-card__go {
  color: var(--purple-bright);
  opacity: 0;
  transform: translate(-3px, 3px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}

.project-card__desc {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-top: auto;
}

/* Metadata compacta: 3 pessoas / 1 mes / Unity */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.meta-row__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.meta-row__item .icon { color: var(--text-muted); }

/* ============================== SHELF ===================================
   Faixa horizontal com setas. STYLEGUIDE 14: Selected nao tem setas,
   Additional tem. A diferenca de controle e a propria hierarquia.

   Regra de grid (docs/FEEDBACK-01.md secao 3): as setas ocupam COLUNAS
   PROPRIAS dentro do container. Antes elas ficavam em left/right negativos
   e saiam 22px para fora da borda da pagina. */

.shelf {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: var(--space-4);
}

/* Largura FIXA de coluna: 5 cards visiveis, como na referencia. Com
   minmax(190px, 1fr), um shelf de 1 projeto esticava o card para a largura
   inteira da pagina. */
.shelf__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(190px, calc((100% - 4 * var(--col-gap)) / 5));
  gap: var(--col-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: var(--space-1);
}
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__track > * { scroll-snap-align: start; }

.shelf__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-elevated);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease),
              color var(--t-ui) var(--ease),
              box-shadow var(--t-ui) var(--ease),
              opacity var(--t-ui) var(--ease);
}
.shelf__arrow:hover {
  border-color: var(--purple);
  color: var(--purple-bright);
  box-shadow: var(--glow-soft);
}
.shelf__arrow[disabled] { opacity: 0.25; cursor: default; }


.shelf__count {
  margin-top: var(--space-4);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Link de fechamento de secao ("See all", "Open the gallery"): sempre a mesma
   distancia do conteudo que ele encerra. */
.section-cta { margin-top: var(--space-8); }

/* Card menor do shelf */
.mini-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--t-ui-slow) var(--ease),
              border-color var(--t-ui-slow) var(--ease),
              box-shadow var(--t-ui-slow) var(--ease);
}
.mini-card:hover {
  transform: translateY(-3px);
  border-color: var(--purple);
  box-shadow: var(--glow-soft);
}
.mini-card:hover .media-slot img { transform: scale(1.02); }
.mini-card:hover .mini-card__title { color: var(--purple-bright); }

.mini-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.mini-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  transition: color var(--t-ui) var(--ease);
}
.mini-card__kind {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* =============================== NAV =================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(5, 9, 17, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) var(--ease),
              background-color var(--t-ui) var(--ease);
}
.nav[data-scrolled="true"] {
  border-bottom-color: var(--border);
  background: rgba(5, 9, 17, 0.94);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: auto;
}
.brand__mark {
  width: 34px;
  height: 34px;
  color: var(--purple-bright);
}
.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-body-lg);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand__role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__utils { display: flex; align-items: center; gap: var(--space-2); }

/* Tema e idioma: discretos de proposito. O ingles e o escuro sao o padrao, e
   nenhum dos dois e uma escolha que o visitante precisa fazer para entrar. */
.nav__icon-btn {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding-inline: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.nav__icon-btn:hover { border-color: var(--purple); color: var(--purple-soft); }
.nav__link {
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link[aria-current="page"] {
  color: var(--text);
  background: var(--surface-elevated);
  box-shadow: inset 0 0 0 1px var(--border);
}

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* ============================== FOOTER =================================
   FIXO na base da tela (pedido dele): a barra acompanha a rolagem. Por isso
   ela e compacta, e o body reserva a altura dela embaixo (--footer-h, medida
   pelo JS) para o fim da pagina nunca ficar escondido atras da barra. */

body { padding-bottom: var(--footer-h); }

.footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-secondary) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: var(--space-2);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.footer .brand { flex: none; min-width: 0; }
.footer .brand__mark { width: 32px; height: 32px; }
.footer__quote {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.footer__quote cite {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-style: normal;
  color: var(--text-muted);
  margin-left: var(--space-2);
}
.footer .social { flex: none; }

/* A frase sai antes de apertar marca e icones; depois sai o cargo. */
@media (max-width: 1000px) {
  .footer__quote { display: none; }
}
@media (max-width: 520px) {
  .footer .brand__role { display: none; }
  .footer .social { gap: 0; }
}
@media (max-width: 360px) {
  .footer .brand__name { display: none; }
}
/* Tela baixa: a barra fixa rouba altura da primeira tela. Fica numa linha so. */
@media (max-height: 820px) {
  .footer { padding-block: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .footer .brand__role { display: none; }
  .footer .brand__mark { width: 28px; height: 28px; }
}

.social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.social__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-btn);
  color: var(--text-secondary);
  transition: color var(--t-ui) var(--ease),
              background-color var(--t-ui) var(--ease),
              transform var(--t-ui) var(--ease);
}
.social__link:hover {
  color: var(--purple-bright);
  background: var(--surface);
  transform: translateY(-2px);
}

/* ============================ DECORACAO ================================
   Ilustracao line art, 15-40% de opacidade. Nunca compete com o conteudo. */

.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.deco--lines { opacity: var(--illustration-opacity); color: var(--purple); }

/* Texto de cena em neon — elemento de identidade da referencia. */
.neon-stack {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--purple-soft);
  text-shadow: 0 0 12px rgba(139, 77, 255, 0.55), 0 0 32px rgba(139, 77, 255, 0.28);
}

/* ============================ RESPONSIVO ==============================
   Sobrescrita de COMPONENTE mora no arquivo do componente, nao no da pagina.
   `.section-aside` e `nowrap` de proposito em tela larga; em tela estreita
   isso estourava qualquer pagina que use cabecalho de secao — inclusive as
   do admin, que nao carregam home.css. */

@media (max-width: 680px) {
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-aside { white-space: normal; padding-bottom: 0; }
  .shelf { grid-template-columns: minmax(0, 1fr); }
  .shelf__arrow { display: none; }
}

/* Rolagem interna de tabela: a tabela pode ser mais larga que a tela, a
   pagina nao. Vale no site publico e no admin. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Texto manuscrito rotacionado gira em torno da borda em que esta alinhado:
   girando pelo centro, a ponta passava alguns pixels para fora do container. */
.cv-hero__quote,
.case-hero__script,
.case-quote__script { transform-origin: right center; }
.cv-hero__quote { transform-origin: left center; }

/* Titulo de secao com a linha roxa: em tela estreita um nome longo nao cabia
   numa linha com a linha ao lado e estourava 38px. Aqui ele quebra, e a
   linha decorativa sai. */
.section-title { min-width: 0; overflow-wrap: break-word; }

/* Rotacao de texto manuscrito de varias linhas ainda empurra o canto
   oposto alguns pixels para fora: um respiro de 8px mantem a ponta dentro. */
.cv-hero__quote { padding-inline: var(--space-2); }

/* ============================ VISUALIZADOR =============================
   Area de midia da home e do projeto (pedido dele): imagem grande que troca
   sozinha + lista ao lado com 3 miniaturas visiveis, que rola para cima e
   para baixo com todas as outras.

   A grande define a altura (16:10). A lista NAO tem altura propria: fica
   absoluta dentro da coluna e cada miniatura tem 1/3 dessa altura — as
   bordas de cima e de baixo das duas colunas sempre alinham. */

.viewer { container-type: inline-size; }
.viewer__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--col-gap);
}
.viewer--single .viewer__grid { grid-template-columns: minmax(0, 1fr); }

.viewer__stage { position: relative; min-width: 0; }
.viewer__frame .media-slot { --slot-ratio: 16 / 10; border-radius: var(--radius-img); }
.viewer__frame .media-slot__hint { display: none; }

/* Legenda por cima so da imagem: no video ela ficaria sobre os controles. */
.viewer__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: linear-gradient(to top, rgba(5, 9, 17, 0.92), transparent);
  border-bottom-left-radius: var(--radius-img);
  border-bottom-right-radius: var(--radius-img);
  pointer-events: none;
  transition: opacity var(--t-ui) var(--ease);
}
.viewer__stage:has([data-player]:not([data-state="idle"])) .viewer__caption { opacity: 0; }
.viewer__title { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; }
.viewer__sub { font-size: var(--fs-caption); color: var(--text-secondary); }

.viewer__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  overflow: hidden;
  border-bottom-left-radius: var(--radius-img);
  border-bottom-right-radius: var(--radius-img);
  pointer-events: none;
}
.viewer__progress span {
  display: block;
  height: 100%;
  background: var(--gradient-purple);
  transform: scaleX(0);
  transform-origin: left;
}

.viewer__rail { position: relative; min-height: 0; min-width: 0; }

.viewer__list {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: calc((100% - 2 * var(--col-gap)) / 3);
  gap: var(--col-gap);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  border-radius: var(--radius-img);
}
.viewer__list::-webkit-scrollbar { display: none; }

.viewer__thumb {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-img);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease);
}
.viewer__thumb .media-slot { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
.viewer__thumb .media-slot__hint { display: none; }
.viewer__thumb[aria-pressed="false"] { opacity: 0.62; }
.viewer__thumb:hover { opacity: 1; border-color: var(--border-strong); }
.viewer__thumb[aria-pressed="true"] { opacity: 1; border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }

.viewer__play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(5, 9, 17, 0.72);
  color: #fff;
}
.viewer__play .icon { fill: currentColor; stroke: none; translate: 1px 0; }

/* Setas: aparecem por cima da lista, so com mouse em cima ou foco. */
.viewer__arrow {
  position: absolute;
  left: 50%;
  z-index: 2;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 36px; height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--text);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease);
}
.viewer__arrow--up { top: var(--space-2); }
.viewer__arrow--down { bottom: var(--space-2); }
.viewer__arrow--up .icon { rotate: 90deg; }
.viewer__arrow--down .icon { rotate: 90deg; }
.viewer__rail:hover .viewer__arrow,
.viewer__arrow:focus-visible { opacity: 1; }

/* Estreito: grande em cima, lista embaixo rolando para o lado, 3 por vez. */
@container (max-width: 720px) {
  .viewer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .viewer__list {
    position: static;
    grid-auto-flow: column;
    grid-auto-rows: auto;
    grid-auto-columns: calc((100% - 2 * var(--space-3)) / 3);
    gap: var(--space-3);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }
  .viewer__thumb { aspect-ratio: 16 / 10; }
  .viewer__arrow { display: none; }
  .viewer__caption { padding: var(--space-6) var(--space-4) var(--space-4); }
}