/* ============================================================
   Secoes. Layout correto SEM animacao: tudo aqui deve ficar
   legivel e bem posicionado mesmo com o JS desligado.
   ============================================================ */

/* Abertura, cabecalho e hero moram em css/hero.css */

/* ============ 3. HERO + ASSINATURA: ZONA UNICA ==============
   O hero fica sticky ATRAS; a zona da assinatura passa por cima com
   fundo transparente. O traco escuro que a caneta faz aparece sobre
   a foto clara e le como rasgo. Quando a tinta toma a tela (por volta
   de 0.55), o JS troca o fundo da zona para solido — a troca acontece
   escondida sob os tracos, entao nao se ve corte.
   ============================================================ */
.palco-inicial { position: relative; }

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  z-index: 0;
}

.assinatura-zona {
  position: relative;
  z-index: 1;
  /* --zona-vh e ajustavel por ?zona=N */
  height: calc(var(--zona-vh, 260) * 1vh);
  /* Sobe uma tela inteira para ficar em cima do hero desde o inicio.
     O pino engata na primeira rolagem, em vez de esperar o hero
     terminar de passar. O hero continua visivel atras, porque a zona
     comeca transparente. */
  margin-top: -100svh;
  background-color: transparent;   /* o JS troca para var(--tinta) */
  /* A zona cobre o hero inteiro desde a rolagem zero. Sem isto ela
     ganha o hit-test, o 'pointerenter' do hero NUNCA dispara, o laco
     do rastro nunca pinta e as seis setas ficam presas no piso de
     8% de opacidade para sempre.
     O 'pointermove' e em window e chegava normalmente — o que faltava
     era o hero saber que o cursor estava sobre ele.
     Nada aqui dentro precisa de clique: faixas, assinatura e
     declaracao sao todas decorativas. O cabecalho e o botao de menu
     estao fora da zona e seguem clicaveis. */
  pointer-events: none;
}

.assinatura-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;                  /* contem os tracos gordos na tela */
}

/* faixas atras de tudo */
.assinatura__faixas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  align-content: center;
  gap: clamp(.5rem, 2vh, 1.5rem);
  pointer-events: none;
  overflow: hidden;
}

/* A ASSINATURA. O container recebe o transform (escala); o SVG
   dentro nunca muda de viewBox.
   NAO usar .marca aqui: essa classe ja e do logotipo do cabecalho em
   hero.css, e como este arquivo carrega depois, o position/transform
   daqui vazava para o "Lediane / ANDRADE" e o arrastava para o centro. */
.ass-marca {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  will-change: transform;
}
.ass-marca svg {
  height: calc(var(--ass, 1) * clamp(182px, 44.2vh, 494px));
  width: auto;
  max-width: 92vw;
  display: block;
  /* sem isto o viewBox cortaria os tracos quando eles engordam 70x,
     e a tinta nunca tomaria a tela */
  overflow: visible;
}
#lamina path {
  fill: none;
  stroke: var(--tinta);
  stroke-linecap: round;
  stroke-linejoin: round;
}
#ambar { fill: var(--ambar); fill-rule: evenodd; }

.faixa { white-space: nowrap; overflow: hidden; display: flex; }
.faixa span {
  display: inline-block;
  padding-right: 2.5rem;
  will-change: transform;
  flex: none;
}
.faixa--cima span {
  font-size: clamp(20px, 3.3vw, 40px);
  font-weight: 500;
  color: var(--ambar);            /* [ambar 2/3] */
  animation: desliza-esq 26s linear infinite;
}
.faixa--cima { opacity: .62; }
.faixa--baixo span {
  font-size: clamp(28px, 5.4vw, 66px);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.01em;
  color: var(--osso);
  animation: desliza-esq 34s linear infinite reverse;
}
.faixa--baixo { opacity: .16; }
@keyframes desliza-esq {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .faixa span { animation: none; }
}

/* Presa no rodape do pino, na frente de tudo. */
.assinatura__declaracao {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 6vh, 4rem);
  z-index: 2;
  margin: 0 auto;
  padding-inline: var(--margem);
  max-width: 44rem;
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  color: var(--osso);
}
.js .assinatura__declaracao { opacity: 0; }

/* A linha do tempo e o formato Acumulo: ver css/linha.css */

/* A secao ONLINE / OFFLINE virou fita em espiral: ver css/onoff.css */

/* ============ 6. PROJETOS ================================== */
/* As emendas entre os cards nao sao demonstracao: sao o que faz o
   simbolo ler como PECAS. Sem elas os 16 fragmentos se encostam e o
   <> vira uma mancha continua.
   E vao, nao linha desenhada: o que aparece na fresta e o --tinta do
   corpo, o mesmo fundo da secao. Sem borda em cada card — borda
   colorida cria um quadriculado que compete com o simbolo.
   --pj-gap e ajustavel por ?pj_gap=N. */
.projetos__grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--pj-gap, 4px);
}
/* SEM overflow: hidden. Era ele que decepava a primeira linha do
   hover — o card tem 182px de altura em 1440 (16:9 numa coluna de
   324px) e o conteudo precisa de 201 a 288px, dependendo do projeto.
   Nem reduzir a fonte nem juntar as skills numa linha por grupo
   resolveu: os 16 continuavam estourando.
   As duas imagens tem inset: 0, entao nao vazam sozinhas; o overflow
   so servia para cortar o painel. */
.card {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tinta);
  isolation: isolate;
  display: block;
  text-align: left;
  width: 100%;
}
/* o painel do card sob o cursor (ou aberto por clique) passa por cima
   dos vizinhos */
.card:hover,
.card:has(:focus-visible),
.card.aberto { z-index: 5; }
/* fragmento do simbolo: e o fundo padrao do card */
.card__fragmento {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .5;
  transition: opacity var(--transicao);
  z-index: 0;
}
.card__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--transicao);
  /* revelacao por mascara em gradiente, conduzida pelo JS */
  -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 var(--rev, 0%), transparent calc(var(--rev, 0%) + 18%));
          mask-image: linear-gradient(105deg, #000 0%, #000 var(--rev, 0%), transparent calc(var(--rev, 0%) + 18%));
}
/* Quem abre e fecha e este botao, cobrindo a face do card. O painel
   fica FORA dele (pode ter link) e por cima (z-index 2) quando abre. */
.card__abrir {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Ancorado na base e livre para crescer para cima, saindo do card.
   Fundo PROPRIO e opaco, porque a parte que sobra fica sobre o
   vizinho: o gradiente que ia a transparente deixava o fragmento de
   baixo aparecer atraves do texto. */
.card__info {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  /* a faixa de baixo fica reservada para o nome, que vive FORA deste
     painel e nao sai do lugar; sem ela o resumo correria por baixo */
  padding: clamp(.75rem, 1.5vw, 1.25rem);
  padding-bottom: 2.1rem;
  background: rgb(12 10 9 / .97);
  border-top: 1px solid var(--borda);
  transform: translateY(12%);
  opacity: 0;
  /* fechado tambem nao recebe clique nem foco: o painel escondido
     cobriria o vizinho, e o link do Hubee seria clicavel sem aparecer */
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transicao), transform var(--transicao),
              visibility 0s linear .32s;
}

/* ---- rotulos sempre visiveis no card fechado ----
   Ficam ACIMA do painel (z-index 3) e nao dentro dele. O painel
   aparece e some por opacidade; o nome fica onde esta o tempo todo,
   so cresce e ganha peso — ele e a ancora do card.
   Em OSSO, nao em ambar: o ambar e do fragmento, e dois ambares no
   mesmo card brigam entre si. */
.card__num {
  position: absolute;
  left: 10px;
  top: 9px;
  z-index: 3;
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--osso);
  opacity: .55;
  transition: opacity var(--transicao);
}
/* A sombra nao e enfeite: o nome cai ora sobre o fragmento ambar, ora
   sobre a tinta do fundo, dependendo do card. */
.card__nome {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  z-index: 3;
  margin: 0;
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  color: var(--osso);
  text-shadow: 0 1px 8px rgb(12 10 9 / .95);
  transition: font-size var(--transicao), font-weight var(--transicao);
}
.card__resumo {
  font-size: 13px;
  color: var(--osso);
  opacity: .75;
  line-height: 1.4;
  margin-bottom: .45rem;
}
/* resumo em lista: um <p> por paragrafo, .7em entre eles */
.card__resumo + .card__resumo { margin-top: .7em; }
/* o link no fim do texto, com a .seta-ext dos links externos */
.card__link {
  margin: .7em 0 .45rem;
  font-size: 13px;
  line-height: 1.4;
}
.card__link a {
  color: var(--osso);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(244 241 234 / .35);
  transition: color var(--transicao), text-decoration-color var(--transicao);
}
.card__link a:hover { color: var(--ambar); text-decoration-color: var(--ambar); }
/* uma linha por grupo, empilhadas */
.card__skills { display: flex; flex-direction: column; gap: .25rem; }
.card__skill {
  margin: 0;
  font-family: var(--fonte-mono);
  font-size: 11.5px;
  line-height: 1.45;
  letter-spacing: .02em;
}
.card__skill[data-tipo='hard'] { color: var(--ambar); }
.card__skill[data-tipo='soft'] { color: var(--neutro); }

/* .aberto entra AO LADO do :hover, nao no lugar dele: o desktop
   mantem o hover e ganha clique; o toque usa so o clique. */
.card:hover .card__fragmento,
.card:has(:focus-visible) .card__fragmento,
.card.aberto .card__fragmento { opacity: .08; }
.card:hover .card__foto,
.card:has(:focus-visible) .card__foto,
.card.aberto .card__foto { opacity: 1; }
.card:hover .card__info,
.card:has(:focus-visible) .card__info,
.card.aberto .card__info {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transicao), transform var(--transicao), visibility 0s;
}
/* o numero da lugar ao conteudo; o nome NAO some, cresce */
.card:hover .card__num,
.card:has(:focus-visible) .card__num,
.card.aberto .card__num { opacity: 0; }
.card:hover .card__nome,
.card:has(:focus-visible) .card__nome,
.card.aberto .card__nome { font-size: .95rem; font-weight: 600; }

/* No toque o :hover gruda no ultimo card tocado. Aqui ele e devolvido
   ao estado FECHADO, propriedade por propriedade — deixar uma de fora
   deixaria o card meio aberto.
   E o .aberto vem DEPOIS do :hover, de proposito: com a mesma
   especificidade quem vem por ultimo vence, e o card tocado precisa
   vencer o hover grudado nele mesmo. */
@media (hover: none), (pointer: coarse) {
  .card:hover .card__fragmento { opacity: .5; }
  .card:hover .card__foto { opacity: 0; }
  .card:hover .card__info { opacity: 0; transform: translateY(12%);
                            visibility: hidden; pointer-events: none; }
  .card:hover .card__num { opacity: .55; }
  .card:hover .card__nome { font-size: 13px; font-weight: 500; }
  .card:hover { z-index: auto; }

  .card.aberto .card__fragmento { opacity: .08; }
  .card.aberto .card__foto { opacity: 1; }
  .card.aberto .card__info { opacity: 1; transform: none;
                             visibility: visible; pointer-events: auto; }
  .card.aberto .card__num { opacity: 0; }
  .card.aberto .card__nome { font-size: .95rem; font-weight: 600; }
  .card.aberto { z-index: 5; }
}

/* ============ PROJETOS no desktop: PAINEL DE DUAS COLUNAS =======
   Os resumos chegam a ~800 caracteres. Aberto, o painel ocupa a
   largura de duas colunas: as colunas 1 e 2 se estendem para a
   direita, a 3 e a 4 para a esquerda — nada sai da grade.
   Na PRIMEIRA linha ele abre para baixo, pendurado sob o card, para
   nao cobrir o titulo da secao; o nome fica no card, acima do painel,
   e por isso nao precisa da faixa reservada embaixo. */
@media (min-width: 861px) {
  .projetos__grade > .card .card__info { width: calc(200% + var(--pj-gap, 4px)); }
  .projetos__grade > .card:nth-child(4n+1) .card__info,
  .projetos__grade > .card:nth-child(4n+2) .card__info { left: 0; right: auto; }
  .projetos__grade > .card:nth-child(4n+3) .card__info,
  .projetos__grade > .card:nth-child(4n) .card__info { left: auto; right: 0; }

  .projetos__grade > .card:nth-child(-n+4) .card__info {
    top: 100%;
    bottom: auto;
    padding-bottom: clamp(.75rem, 1.5vw, 1.25rem);
    transform: translateY(-6%);
  }
  .projetos__grade > .card:nth-child(-n+4):is(:hover, .aberto, :has(:focus-visible)) .card__info {
    transform: none;
  }

  /* aberto nas colunas 1 e 2, o nome pode usar a largura do painel:
     nome longo continua numa linha e nao desce sobre o texto */
  .projetos__grade > .card:is(:nth-child(4n+1), :nth-child(4n+2)):is(:hover, .aberto, :has(:focus-visible)) .card__nome {
    right: calc(-100% - var(--pj-gap, 4px) + 10px);
  }
}

/* ============ PROJETOS no estreito: ABRIR EMPURRANDO ==========
   Espremer o texto em 170px cortava o resumo. Em vez disso o card
   cresce para as duas colunas e empurra o resto para baixo — o texto
   ganha a largura inteira, que e o que resolve o corte.
   Os fragmentos sao os MESMOS 16 arquivos do desktop, na mesma ordem;
   so a posicao muda, porque a grade tem 2 colunas. O simbolo nao se
   remonta aqui, e esta combinado. */
@media (max-width: 860px) {
  .projetos__grade {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    align-items: start;
  }

  /* fechado: quadrado, com o fragmento em cima e o rotulo embaixo */
  .card {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .card__fragmento {
    position: relative;
    inset: auto;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: auto;
    opacity: .5;
    transition: opacity .2s ease;
  }
  .card__foto { display: none; }

  /* O numero e o nome ficam SEMPRE visiveis neste formato: o que
     abre e fecha e o .card__corpo, por altura. Por isso os dois
     seletores abaixo desfazem o que o bloco (hover: none) faz com a
     opacidade do painel — la ela era o sinal de aberto/fechado, aqui
     nao e mais. Este bloco vem depois, entao vence no empate. */
  .card__info,
  .card:hover .card__info,
  .card.aberto .card__info {
    /* relative e z-index 2: o botao absoluto cobre o card inteiro, e o
       texto aberto (com o link) precisa ficar por cima dele */
    position: relative;
    z-index: 2;
    flex: none;
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    background: none;
    border-top: 0;
    padding: 0 8px 8px;
  }
  /* Aqui os rotulos voltam ao fluxo da coluna: no desktop eles flutuam
     sobre o fragmento, neste formato ficam embaixo dele, e nao ha o que
     sombrear. Os tres seletores desfazem tambem o estado de :hover
     grudado, como o resto deste arquivo faz. */
  .card__num,
  .card:hover .card__num,
  .card.aberto .card__num,
  .card__nome,
  .card:hover .card__nome,
  .card.aberto .card__nome {
    position: static;
    text-shadow: none;
  }
  .card__num,
  .card:hover .card__num,
  .card.aberto .card__num {
    margin: 6px 8px 2px;
    font-size: 10px;
    letter-spacing: .12em;
    opacity: .55;
  }
  .card__nome,
  .card:hover .card__nome {
    margin: 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
  }
  /* aberto: o nome cresce, e o unico que muda */
  .card.aberto .card__nome {
    margin: 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  /* o corpo: altura animada, medida pelo JS no .interno */
  .card__corpo {
    height: 0;
    overflow: hidden;
    transition: height .34s cubic-bezier(.22, 1, .36, 1);
  }
  .card__corpo .interno { padding-top: 8px; }
  .card__resumo { font-size: 13px; margin-bottom: .5rem; }
  .card__skill { font-size: 11px; }

  /* aberto: ocupa as DUAS colunas e a capa vira 16/7 */
  .card.aberto {
    grid-column: 1 / -1;
    aspect-ratio: auto;
  }
  .card.aberto .card__fragmento {
    flex: none;
    aspect-ratio: 16 / 7;
    opacity: .28;
  }
}

/* ============ 7. EMPRESAS ================================== */
.empresas { border-block: 1px solid var(--borda); padding-block: clamp(2.5rem, 6vh, 4rem); }
.esteira {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.esteira__fita {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-right: clamp(2.5rem, 6vw, 5rem);
  flex: none;
  animation: desliza-esq 38s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .esteira { overflow-x: auto; }
  .esteira__fita { animation: none; }
}
.empresa {
  flex: none;
  color: var(--neutro);
  transition: color var(--transicao);
  display: grid;
  place-items: center;
}
.empresa:hover { color: var(--osso); }
/* altura optica normalizada: os SVG ja saem com a tinta na mesma altura */
.empresa svg { height: clamp(1.5rem, 2.6vw, 2.25rem); width: auto; }
/* Innova so existe em PNG: vira mascara pintada com currentColor */
.empresa--mascara {
  height: clamp(1.5rem, 2.6vw, 2.25rem);
  width: clamp(10rem, 18vw, 16rem);
  background: currentColor;
  -webkit-mask: url('../assets/svg/logo-innova-mascara.png') center / contain no-repeat;
          mask: url('../assets/svg/logo-innova-mascara.png') center / contain no-repeat;
}
/* logos ausentes: logotipo tipografico no lugar, ate chegar o arquivo */
.empresa--texto {
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* ============ 8. REDES ===================================== */
/* As REDES viraram faixa pinada com foco: ver css/redes.css */

/* ============ 9. RODAPE ==================================== */
/* O rodape e o "fecha a tag": ver css/rodape.css e js/rodape.js */

/* ============================================================
   Mobile: layout funcional, movimento simplificado.
   ============================================================ */
@media (max-width: 900px) {
  .onoff { grid-template-columns: 1fr; }
  .painel--online, .painel--offline {
    clip-path: none;
    margin: 0;
  }
  .painel--online { border-bottom: 1px solid var(--borda); }
  /* NAO devolver aqui um `.card__info { opacity: 1 }`. Era isso que
     abria os 16 de uma vez: sem toque nenhum nem :hover nem .aberto
     casam, sobram a regra base (0-1-0, fechado) e essa (0-1-0,
     aberto), e a que vem depois vence. O clique funcionava o tempo
     todo, so nao tinha efeito visivel. Agora quem manda e o .aberto. */
}
@media (max-width: 560px) {
  .assinatura-zona { height: calc(var(--zona-vh, 180) * 1vh); }
}

/* ============ 5b. FECHAMENTO DO ON/OFF (segundo tempo) ===== */
.fechamento {
  padding-block: clamp(6rem, 18vh, 14rem);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
}
.fechamento__interno {
  display: grid;
  justify-items: center;
  gap: clamp(1.5rem, 5vh, 3rem);
  text-align: center;
}
.fechamento__marca { width: clamp(5rem, 12vw, 9rem); opacity: .18; }
.fechamento__frase { max-width: 18ch; }

/* ---- zona da assinatura: mobile e sem movimento ---- */
@media (max-width: 900px) {
  .assinatura-zona { height: calc(var(--zona-vh, 200) * 1vh); }
}
@media (prefers-reduced-motion: reduce) {
  /* sem corte e sem escala: a assinatura aparece no tamanho final */
  .hero-sticky { position: static; height: auto; }
  .assinatura-zona { height: auto; margin-top: 0; background-color: var(--tinta) !important; }
  .assinatura-pin {
    position: static;
    height: 100svh;
    display: grid;
    place-items: center;
  }
  /* .ass-marca, e nao .marca: esta regra ficou com o nome antigo
     quando o container da assinatura foi renomeado, e pegava o logo do
     cabecalho. A assinatura ficava com left: 50% sem o translate,
     sobrava 164px a direita no celular e o cabecalho fixo ia junto. */
  .ass-marca {
    position: relative;
    left: auto;
    top: auto;
    transform: none !important;
  }
}