/* =========================================================================
   Hydra — o mascote em renders 3D.

   Mobile-first, como o resto do projeto: o que esta aqui fora de media query
   vale pro celular. O companheiro de rolagem so liga no desktop (precisa de
   mouse e de espaco sobrando), e o olhar so se move quando o JS avisa que ha
   ponteiro de verdade.
   ========================================================================= */

.hydra {
  position: relative;
  isolation: isolate;   /* prende o brilho de chao (::after, z-index:-1) aqui */
  width: var(--hydra-size, 240px);
  max-width: 100%;
  flex-shrink: 0;
}

.hydra-stack { position: relative; }

.hydra-layer {
  display: block;
  width: 100%;
  height: auto;
}

.hydra--flip .hydra-stack { transform: scaleX(-1); }

/* ------------------------------------------------------------ o olhar -- */
/* Cada pose tem sua propria mascara, curso de olhar e origem de palpebra --
   'front' (T-pose, telas de login/erro/painel) e 'peek' (debruçado, hero) tem
   proporcoes bem diferentes, entao os numeros abaixo (que o script imprime a
   cada build) NAO sao intercambiaveis entre as duas. */
.hydra-layer--eyes {
  position: absolute;
  inset: 0;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hydra-eyes--front {
  -webkit-mask-image: url('../img/hydra/hydra-front-eyes.png');
          mask-image: url('../img/hydra/hydra-front-eyes.png');
}
.hydra-eyes--peek {
  -webkit-mask-image: url('../img/hydra/hydra-peek-eyes.png');
          mask-image: url('../img/hydra/hydra-peek-eyes.png');
}

.hydra-layer--eyes img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

/* Sem transition aqui de proposito: quem suaviza o movimento e o loop de
   interpolacao no mascot.js (lerp quadro a quadro). Duas suavizacoes
   empilhadas -- CSS + JS -- brigam e deixam o olhar com um atraso elastico
   estranho. */
.hydra-iris {
  transition: none;
}
/* curso medido: 1.03%/0.90%. Fica um pouco abaixo pra iris nunca encostar na
   borda do globo, o que cortaria ela de forma dura. */
.hydra-eyes--front .hydra-iris {
  transform: translate(
    calc(var(--hydra-gaze-x, 0) * 0.93%),
    calc(var(--hydra-gaze-y, 0) * 0.80%)
  );
}
/* curso medido de verdade no asset final (composto e conferido visualmente
   antes de subir): 2.49%/1.82% -- ate esse tanto a iris nunca vaza pro pelo */
.hydra-eyes--peek .hydra-iris {
  transform: translate(
    calc(var(--hydra-gaze-x, 0) * 2.49%),
    calc(var(--hydra-gaze-y, 0) * 1.82%)
  );
}

/* A palpebra e uma imagem JA posicionada (o alpha dela tem o formato e o
   lugar certos do olho). Ela nao ESCALA -- isso deformava a imagem e revelava
   pedaços errados (sobrancelha no meio do olho). Em vez disso, ela e REVELADA
   de cima pra baixo com clip-path, como uma cortina/palpebra descendo. Fechada
   = totalmente revelada; aberta = totalmente recortada (some pra cima).
   Ela e IRMA de .hydra-eyes--* (nao filha) -- por isso o seletor ~. */
.hydra-lid {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 0 100% 0);   /* estado aberto: nada visivel */
  /* PISCADA DESATIVADA: o rosto de olho fechado (close) tem proporcao
     diferente da pose debruçada do hero, entao nao encaixa por composicao.
     Pra reativar: gere a pose 'peek' (debruçada) com olhos fechados, troque
     hydra-peek-lid.png por ela, e volte a animacao abaixo.
     animation: hydra-blink 5.5s ease-in-out infinite; */
  display: none;
  will-change: clip-path;
}

/* Piscada natural via clip-path: a palpebra desce cobrindo o olho, segura um
   instante fechada, e sobe. Sem deformacao, sem revelar textura fora do olho.
   Os limites do inset sao a altura da propria palpebra na imagem:
   - front: palpebra ocupa ~13% a ~24% -> quando aberta corta de baixo
   - peek:  palpebra ocupa ~32% a ~48%
   Como o alpha da lid ja isola o olho, um inset simples (revelar tudo /
   esconder tudo) ja da o efeito certo -- a cortina "desce" porque o topo do
   alpha e a linha de cima do olho. */
@keyframes hydra-blink {
  0%, 82%   { clip-path: inset(0 0 100% 0); }  /* aberto (a maior parte do tempo) */
  85.5%     { clip-path: inset(0 0 0 0); }     /* fecha rapido */
  87.5%     { clip-path: inset(0 0 0 0); }     /* segura fechado um instantinho */
  91%       { clip-path: inset(0 0 100% 0); }  /* abre rapido */
  100%      { clip-path: inset(0 0 100% 0); }
}

/* ------------------------------------------------- respiracao / flutuar -- */
/* FLUTUACAO REMOVIDA de todos os mascotes (a pedido): a classe .hydra--float
   nao aplica mais nenhum movimento. O brilho de chao (::after) tambem fica
   estatico -- so a luz, sem pulsar. */
.hydra--float .hydra-stack {
  animation: none;
}
.hydra--flip.hydra--float .hydra-stack {
  animation: none;
}

/* brilho de chao, pra figura nao ficar "colada" no fundo (agora estatico) */
.hydra::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 62%;
  aspect-ratio: 3 / 1;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(201,217,94, 0.38), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

/* ---------------------------------------------------------- balao de fala -- */
.hydra-speech {
  position: relative;
  z-index: 2;
  margin: 0 auto 14px;
  width: max-content;
  max-width: min(240px, 100%);
  background: var(--bg-elevated);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* =========================================================================
   Companheiro de rolagem — se apoia num botao marcado com data-hydra-perch.

   O JS mede o botao e escreve --perch-x / --perch-y / --perch-w. Aqui o
   mascote e cortado na altura dos bracos (38% da imagem, que e onde ficam as
   maos no render) e o corte cai exatamente na borda de cima do botao: da a
   leitura de que ele esta pendurado/apoiado ali, e nao flutuando por cima.
   ========================================================================= */
/* position: absolute (e nao fixed) de proposito. Sendo absoluto no documento,
   ele rola JUNTO com o botao de graca, sem o JS ter que reposicionar a cada
   quadro -- que e o que faria o mascote tremer/atrasar em relacao ao botao e
   estragar a ilusao de que esta apoiado nele. O JS so recalcula quando muda
   de botao ou a janela muda de tamanho. */
.hydra-companion {
  position: absolute;
  display: none;
  z-index: 55;
  left: 0;
  top: 0;
  width: var(--perch-size, 150px);
  pointer-events: none;
  translate: var(--perch-x, 0) var(--perch-y, 0);
}

.hydra-companion-inner {
  /* A linha dos bracos esta a 38% da altura da imagem (medido no render), mas
     cortar exatamente ali fatia as maos justo na borda do botao. Cortando um
     pouco abaixo, o braco inteiro aparece deitado sobre o botao -- que e o que
     da a leitura de "apoiado". */
  height: calc(var(--perch-size, 150px) * (948 / 920) * var(--perch-cut, 0.42));
  overflow: hidden;
  display: flex;
  align-items: flex-start;

  /* O REPOUSO e a posicao final (transform nenhum) -- de proposito.
     Antes a entrada era uma transition saindo de translateY(110%); se ela nao
     rodasse por qualquer motivo, o mascote ficava travado 110% abaixo da
     propria caixa, aparecendo por cima do botao em vez de apoiado nele. Agora
     a posicao correta e o padrao e a subida e so o floreio: mesmo que a
     animacao nao rode, ele nasce no lugar certo. */
  opacity: 0;
  transition: opacity .25s linear;
}

/* a subida so acontece quando o JS confirma que ha um botao na tela */
.hydra-companion.is-perched .hydra-companion-inner {
  opacity: 1;
  animation:
    hydra-perch-in .62s var(--ease-out) both,
    hydra-perch-settle 3.8s ease-in-out .72s infinite;
}

@keyframes hydra-perch-in {
  from { transform: translateY(104%); }
  to   { transform: translateY(0); }
}

.hydra-companion .hydra-stack { width: 100%; }
.hydra-companion .hydra-layer { width: 100%; height: auto; }

/* balancinho discreto depois de subir — o "peso" do bicho apoiado */
@keyframes hydra-perch-settle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(0.8deg); }
}

/* o botao "sente" o peso: some com o brilho e afunda 1px */
[data-hydra-perch].is-perch-active {
  transform: translateY(1px);
}

/* =========================================== desktop: liga o companheiro -- */
/* Abaixo disso a tela e estreita demais: o mascote apoiado cobriria texto,
   que foi exatamente o problema do botao flutuante no projeto anterior
   (secao 2.4 do guia). No celular ele simplesmente nao aparece. */
@media (min-width: 1000px) {
  .hydra-companion.is-enabled { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .hydra--float .hydra-stack,
  .hydra::after,
  .hydra-lid,
  .hydra-companion.is-perched .hydra-companion-inner {
    animation: none;
  }
  .hydra-layer--eyes img { transition: none; }
}

/* =========================================================================
   Companheiros dedicados — "Falar com a gente" e "Chamar no WhatsApp"
   Diferente do .hydra-companion (que rola a pagina e escolhe o botao mais
   proximo com UMA pose so), aqui sao 2 poses ESPECIFICAS, uma pra cada botao
   marcado, sempre fixas -- por isso um elemento dedicado por botao, mais
   simples que encaixar no sistema generico.
   ========================================================================= */
.perch-wrap { position: relative; }

.perch-mascot {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(210px, 82%);
  height: auto;
  z-index: 2;
  pointer-events: none;
  margin-bottom: -10px;
  filter: drop-shadow(0 18px 30px rgba(201,217,94, 0.4));
  /* flutuacao removida (a pedido) -- os mascotes dos botoes ficam parados */
}

@media (prefers-reduced-motion: reduce) {
  .perch-mascot { animation: none; }
}

/* =========================================================================
   Editor Hero — alças de arrastar/redimensionar (só existem quando a
   página é carregada dentro do iframe do admin, em modo editor)
   ========================================================================= */
.he-handle {
  position: fixed;
  border: 2px dashed rgba(201,217,94, 0.85);
  background: rgba(201,217,94, 0.08);
  border-radius: 10px;
  cursor: grab;
  z-index: 99999;
  touch-action: none;
  box-sizing: border-box;
  /* a caixa inteira aceita clique de novo (clicar em qualquer lugar dela
     move o elemento) -- restringir so pra etiqueta deixou o arrasto normal,
     sem sobreposicao nenhuma, precisando de mira cirurgica, o que so trocou
     um problema por outro. O caso de sobreposicao (mascote grande em cima da
     janela de codigo) e resolvido de outro jeito: veja .he-handle.is-focused
     mais abaixo, e o "clique traz pra frente" no JS. */
  pointer-events: auto;
  /* nunca deixa o clique/arrasto na alca virar selecao de texto por baixo
     (isso era o que deixava o arrasto "bugado" -- o navegador tentava
     selecionar o codigo por baixo ao mesmo tempo que a gente tentava
     mover a caixa por cima). */
  -webkit-user-select: none;
  user-select: none;
}
.he-handle:hover { background: rgba(201,217,94, 0.16); }
.he-handle.is-dragging { cursor: grabbing; background: rgba(201,217,94, 0.22); }
.he-handle.is-focused {
  border-color: var(--purple-400);
  box-shadow: 0 0 0 3px rgba(201,217,94, 0.5);
  /* o elemento que voce clicou na lista lateral SEMPRE fica por cima de
     qualquer outro que esteja se sobrepondo a ele, nao importa o tamanho de
     nenhum dos dois -- sem isso, dois elementos que se sobrepoem (o mascote
     em cima da janela de codigo, por exemplo) podiam brigar pelo clique e
     o errado ganhar, travando o arrasto do outro. !important de proposito:
     e o unico jeito confiavel de vencer o z-index calculado que o JS poe
     inline em cada alca. */
  z-index: 2147483647 !important;
}
.he-handle-label {
  position: absolute;
  top: -26px;
  left: -2px;
  background: #c9d95e;
  color: #0a0a08;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  /* essa etiqueta e agora o alvo PRINCIPAL de arrastar (ver comentario em
     .he-handle) -- por isso pointer-events:auto, ao contrario do resto do
     retangulo. */
  pointer-events: auto;
  cursor: grab;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.he-corner {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #c9d95e;
  border: 3px solid #fff;
  cursor: nwse-resize;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  pointer-events: auto; /* pointer-events nao herda "auto" por padrao do pai */
}
.he-delete {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e0457b;
  color: #fff;
  border: 3px solid #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
}
.he-delete:hover { transform: scale(1.1); }
.he-handle.is-hidden {
  border-style: dashed;
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
}
.he-handle.is-hidden .he-delete { background: #4a4560; }
.he-handle.is-hidden .he-handle-label { background: #4a4560; }