/* ============================================================
   ABERTURA · HERO  (o cabecalho e o menu estao em cabecalho.css)
   Separados de secoes.css porque formam a primeira tela e mudam
   juntos. Nada aqui afeta as outras secoes.
   ============================================================ */

/* ============ ABERTURA <> ================================== */
.abertura {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--tinta);
  pointer-events: none;
}
.abertura[hidden] { display: none !important; }

/* Enquanto a abertura roda, o cabecalho fica inerte. A abertura tem
   pointer-events:none para nao capturar o mouse, o que deixaria o
   botao de menu clicavel por baixo dela — e fechar o menu destravaria
   o scroll que a abertura tinha travado. */
[data-abertura='rodando'] .cabecalho { pointer-events: none; }

/* os dois sinais. Comecam fora da tela e param a 40px um do outro. */
.abertura__sinal {
  position: absolute;
  top: 50%;
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 120px;          /* altura pedida */
  line-height: 1;
  color: var(--ambar);
  will-change: transform;
  transform: translate(0, -50%);
}
/* 40px de distancia entre eles = 20px de cada lado do centro */
/* a origem fica na borda INTERNA: ao escalar 40x, cada sinal cresce
   para fora e sai pela sua lateral, em vez de inchar no meio */
.abertura__sinal--esq { right: calc(50% + 20px); transform-origin: right center; }
.abertura__sinal--dir { left:  calc(50% + 20px); transform-origin: left center; }

/* ============ HERO ========================================= */
/* Sem trilho de scroll e sem mascara: a foto aparece inteira e de
   imediato. O bloco ocupa uma tela e pronto. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
}

/* O wrapper NAO se move. Com o shader ativo, o fundo tem de ficar
   parado: quem anda e so o que tem alfa, deslocado pela profundidade
   dentro do proprio shader. O translate de 6px fica na <img>, que e
   a reserva de quando nao ha WebGL2. */
.hero__foto-w {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
}
/* canvas do deslocamento por profundidade; entra sobre a <img>,
   que fica de reserva para quando nao ha WebGL2 */
.hero__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  /* reserva sem WebGL: aqui sim os 6px, contra os 20px das setas.
     O scale de 1.03 da folga para o deslocamento nao descobrir a borda. */
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.03);
  will-change: transform;
}

/* Gradiente curto: so emenda o rodape do hero com a secao seguinte.
   Morre aos 35% — o resto da foto fica limpo. */
.hero__foto-w::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;                 /* acima do canvas */
  pointer-events: none;
  background: linear-gradient(
    to top,
    var(--tinta) 0%,
    rgb(12 10 9 / .72) 12%,
    rgb(12 10 9 / .28) 24%,
    transparent 35%
  );
}

/* o hero nao tem mais titulo nem nome: a marca vive na barra fixa */

/* ============ C/D/E. SETAS CURVAS E ROTULOS ================
   Duas camadas sobre a foto: um SVG com as 6 setas e uma camada HTML
   com os 6 rotulos. As duas se deslocam 20px com o mouse, contra os
   6px da foto — sao profundidades diferentes, e e essa diferenca que
   produz o paralaxe entre elas.

   Revelacao: nao e mais proximidade. O hero inteiro recebe o mouse e
   as 6 entram em cascata de 80ms, de cima para baixo, com os tempos
   do original (1500ms entrando, 1000ms saindo, expo.inOut).
   ============================================================ */
:root {
  /* aproximacao em cubic-bezier do expo.inOut */
  --expo: cubic-bezier(.87, 0, .13, 1);
}

.hero__setas,
.hero__chamadas {
  position: absolute;
  inset: 0;
  pointer-events: none;      /* nunca roubam o mouse da pagina */
  transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0);
  will-change: transform;
}
.hero__setas { z-index: 1; overflow: visible; }
.hero__chamadas { z-index: 2; }

/* ---- a seta ---- */
.seta {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  /* opacidade e dashoffset sao escritos QUADRO A QUADRO pelo laco de
     foco em hero.js. Nada de transition aqui: ela brigaria com a
     perseguicao e engoliria o rastro. */
}

/* ---- o rotulo ---- */
.chamada {
  position: absolute;
  top: var(--y);
  width: 230px;      /* largura fixa: a seta parte sempre da borda interna */
  font-family: var(--fonte-mono);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .03em;
  line-height: 1.32;
  color: var(--tinta);
  opacity: 0;
  transform-origin: var(--origem, left center);
}
/* quebrando em duas linhas, o texto encosta na seta dos dois lados.
   folga minima de 80px das bordas laterais */
.chamada--esq { left:  var(--x); text-align: right; --origem: right center; }
.chamada--dir { right: var(--x); text-align: left;  --origem: left center;  }

/* ============ INDICADOR DE ROLAGEM ========================
   Canto inferior ESQUERDO, equilibrando o botao de menu no superior
   direito. Fica sobre o degrade escuro do rodape do hero, por isso
   osso funciona. Opacidade e deslocamento ao rolar vem de
   js/rolagem.js; a flutuacao da seta e so CSS.
   Mesma posicao e tamanho no celular: la nao ha barra de rolagem
   visivel dizendo que a pagina continua. */
.rolagem {
  position: absolute;
  left: clamp(20px, 4vw, 54px);
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  pointer-events: none;
  will-change: opacity, transform;
}
.rolagem-tx {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--osso);
  opacity: 1;
  text-transform: uppercase;
  /* Sombra local, como na pilula do ONLINE/OFFLINE: escurece so atras
     das letras, sem caixa, e o degrade do hero fica como esta. CURTA
     de proposito: blur grande se dilui num traco de 11px. */
  text-shadow: 0 1px 3px rgba(12, 10, 9, .95),
               0 1px 6px rgba(12, 10, 9, .8);
}
.rolagem-seta {
  width: 11px;
  height: 26px;
  animation: rolagem-flutua 2s ease-in-out infinite;
  /* reforco em fundo claro; quem segura o contraste e o minimo de
     .85 da flutuacao, nao a sombra — num traco de 1.6px ela rende pouco */
  filter: drop-shadow(0 1px 8px rgba(12, 10, 9, .85));
}
/* Em OSSO, nao em ambar: as 6 setas de anotacao do hero ja sao ambar
   e acendem juntas, o que estoura os tres ambares por tela. O texto
   ja diz o que fazer; a cor aqui nao e essencial. */
.rolagem-seta path {
  stroke: var(--osso);
  opacity: .8;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* o minimo e .85: o movimento continua visivel, mas a seta nao chega
   mais a quase sumir no quadro mais fraco */
@keyframes rolagem-flutua {
  0%, 100% { transform: translateY(0);   opacity: .85; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* Tela baixa (celular deitado): o degrade nao alcanca o indicador e o
   fundo atras do "ROLE" e cinza claro — nenhuma sombra resolve.
   Esconder nao: em paisagem o hero e baixo e e o indicador que avisa
   que a pagina continua. Entao uma mancha atras dele.
   closest-side de proposito: o gradiente chega a transparente no meio
   de cada lado, e os cantos ficam fora da elipse — nao sobra aresta.
   Com o padrao (farthest-corner) o tom so zeraria nos cantos e o
   corte da caixa apareceria como linha reta (ver .onoff-tx). */
@media (max-height: 560px) {
  .rolagem::before {
    content: '';
    position: absolute;
    left: -18px;
    top: -14px;
    width: calc(100% + 54px);
    height: calc(100% + 40px);
    background: radial-gradient(closest-side,
                rgba(12, 10, 9, .72) 0%,
                rgba(12, 10, 9, .34) 58%,
                transparent 100%);
    z-index: -1;
    pointer-events: none;
  }
}

/* ============ SELO DA TECNOLOGIZANDO =======================
   Acima do indicador de rolagem, no mesmo alinhamento a esquerda.
   So no desktop: no celular a base do hero ja tem o indicador e as
   chamadas acendendo, e a Tecnologizando entra pelo menu. */
.selo-tecno {
  position: absolute;
  left: clamp(20px, 4vw, 54px);
  bottom: calc(118px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  text-decoration: none;
  color: inherit;
}
.selo-ol {
  display: block;
  font-family: var(--fonte-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--osso);
  opacity: .6;
  text-transform: uppercase;
  margin-bottom: 7px;
  text-shadow: 0 1px 4px rgba(12, 10, 9, .9);
}
.selo-nm {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--osso);
  text-shadow: 0 1px 5px rgba(12, 10, 9, .92),
               0 1px 10px rgba(12, 10, 9, .7);
  position: relative;
  padding-bottom: 5px;
}
/* A seta e a .seta-ext (tokens.css), na cor do nome: OSSO, nao ambar.
   Com as 6 setas de anotacao acesas o hero ja tem ambar demais; quem
   fica ambar e o sublinhado, que carrega o movimento. */

/* o sublinhado que varre */
.selo-nm::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1.5px;
  width: 100%;
  background: linear-gradient(90deg, transparent 0%,
              var(--ambar) 45%, var(--ambar) 55%, transparent 100%);
  background-size: 55% 100%;
  background-repeat: no-repeat;
  animation: selo-varre 3.2s cubic-bezier(.5, 0, .5, 1) infinite;
}
@keyframes selo-varre {
  0%   { background-position: -60% 0; opacity: 0; }
  14%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { background-position: 118% 0; opacity: 0; }
}

@media (max-width: 900px) { .selo-tecno { display: none; } }

/* ============ Mobile ======================================= */
@media (max-width: 900px) {
  /* Sem ponteiro as setas nao fazem sentido: saem de cena e os
     rotulos viram uma lista no rodape do hero, sobre o gradiente. */
  .hero__setas { display: none; }
  .hero { align-items: end; }
  .hero__chamadas {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1.25rem;
    padding: var(--margem);
    padding-bottom: clamp(2rem, 8vh, 4rem);
    transform: none;
  }
  .chamada {
    position: static;
    width: auto;
    text-align: left !important;
    color: var(--osso);
    font-size: 13px;
    transform: none !important;
  }
}

/* ---------------- toque COM largura ----------------
   Sem cursor as setas acendem por ROLAGEM (ver hero.js). Elas voltam
   a existir com a aparencia e a ordem do desktop — mas SO a partir de
   901px.

   Por que a largura entra aqui, se o gatilho e o ponteiro: no desktop
   os rotulos moram nas MARGENS CLARAS ao lado da figura. Num celular
   de 390px nao existe margem: a figura ocupa a tela toda, e os
   rotulos caem sobre o cabelo escuro, ilegiveis mesmo estreitados e
   com halo. Nao e questao de ajuste, e uma premissa de layout que
   nao vale nessa largura.
   Abaixo de 901px vale o bloco acima: rotulos em lista no rodape do
   hero — que agora acendem em sequencia pela rolagem, e nao mais
   todos de uma vez. */
@media (hover: none) and (min-width: 901px) {
  .hero__setas { display: block; }
  .hero { align-items: stretch; }
  .hero__chamadas {
    position: absolute;
    inset: 0;
    display: block;
    flex-wrap: initial;
    gap: 0;
    padding: 0;
  }
  /* 230px sao 59% de uma tela de 390: os rotulos se cruzavam em cima
     do rosto e ficavam ilegiveis. Mais estreitos, menores e com um
     halo claro para sobreviverem ao cabelo escuro. */
  .chamada {
    position: absolute;
    width: min(150px, 42vw);
    font-size: 11.5px;
    line-height: 1.25;
    text-align: initial;
    color: var(--tinta);
    text-shadow: 0 0 6px var(--osso), 0 0 12px var(--osso);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seta, .chamada { opacity: 1 !important; transform: none !important;
                    stroke-dashoffset: 0 !important; }
  .hero__foto, .hero__setas, .hero__chamadas { transform: none !important; }
  /* estatico; o sumir ao rolar continua, e vem do JS */
  .rolagem-seta { animation: none; }
  /* sem o sublinhado varrendo; o link continua ali, so nao anima */
  .selo-nm::after { content: none; }
}