/* ============================================================
   Componente: parede de mockups (.hero-mockups)

   A peça do .hero__figura da Início — seis celulares em três colunas
   desencontradas, cada um mostrando uma seção do RARE em interface
   simplificada: card de recomendação com o número em braille, o par
   Faça / Não faça e as duas navegações do site (a fila de abas do desktop e
   a gaveta do celular). O markup mora em app/Views/partials/hero-mockups.php.

   Referência de composição: "16x9_Homepage_Hero_050825.mp4", o hero do
   m3.material.io. O arquivo é um still — dele vem o arranjo (mosaico que
   sangra pelas bordas), não o movimento.

   Como isto escala
   ----------------
   Mesma mecânica dos banners Bauhaus: a prancha é desenhada em pixels
   (532 × 560) e cada medida vira um múltiplo de --u, calculado por container
   query para COBRIR o espaço recebido. Assim a peça atravessa as duas
   proporções do lugar (4/3 no celular, coluna alta no desktop) sem nenhum
   valor em pixel no markup.

   NÃO usar font-size como unidade de escala, nem texto de verdade dentro das
   telas: o tamanho mínimo de fonte imposto pelo navegador ou pelo sistema
   (recurso de baixa visão, e portanto comum entre quem este site atende)
   esmagaria a composição. Tudo o que num mockup seria texto aqui é barra.

   Acessibilidade
   --------------
   - Decorativa: o contêiner (.hero__figura) já é aria-hidden.
   - Sem flashes: nenhuma animação altera opacidade ou cor; só forma e posição.
   - Movimento reduzido (preferência do sistema OU "Pausar animações" no
     painel) é atendido pelas regras globais de main.css, que encurtam a
     animação a 0,01ms e a rodam uma vez. Por isso o estado BASE de cada peça
     reproduz o quadro 0% da sua animação — parada, a parede mostra o número
     em braille já formado, a primeira aba selecionada e o primeiro item da
     gaveta em destaque, que é o desenho.
   - "Ocultar imagens" já apaga .hero__figura em main.css; a parede some junto.
   ============================================================ */

/* ---------- Paleta ----------
   Duas famílias de token, como nos banners Bauhaus: --hm-campo pinta o fundo
   da parede e --hm-tela para dentro pinta os aparelhos. A regra que decide o
   campo é a mesma de §12 e §13 — ele é SEMPRE o oposto da superfície da
   página, senão a peça some dentro dela.

   --hm-borda é transparente aqui e vira tinta nos modos monocromáticos: é ela
   que preserva a silhueta dos painéis quando a paleta cai para dois tons e o
   fundo de um cartão passa a ser igual ao da tela. */
.hero-mockups {
  --hm-campo: var(--rare-azul-escuro);
  --hm-moldura: var(--rare-azul-claro);
  --hm-tela: var(--rare-fundo-ultra-claro);
  --hm-tinta: var(--rare-azul-escuro); /* 14,6:1 sobre a tela */
  --hm-tinta-fraca: color-mix(in srgb, var(--rare-azul-escuro) 38%, var(--rare-fundo-ultra-claro));
  --hm-painel: color-mix(in srgb, var(--rare-azul-claro) 60%, var(--rare-fundo-ultra-claro));
  --hm-acento: var(--rare-azul-medio);
  --hm-sobre-acento: var(--rare-branco);
  --hm-realce: var(--rare-azul-claro); /* item selecionado, como nas navegações reais */
  --hm-borda: transparent;
}

/* Tema escuro (automático do sistema ou escolhido no painel). O campo é
   aprofundado (55% preto), como nos banners Bauhaus, porque em Azul Escuro
   puro ele seria a MESMA cor da superfície da página. E aqui as telas
   escurecem junto: um mockup do RARE no tema escuro é o próprio site no tema
   escuro — a paleta de dentro repete a inversão de tokens.css.

   A moldura muda de papel aqui. No tema claro ela quase encosta na cor da
   tela, e quem separa o aparelho do campo é a própria tela, que é clara. No
   escuro tela e campo são dois azuis escuros vizinhos, e a moldura passa a ser
   a ÚNICA coisa que recorta o aparelho — por isso ela é Azul Claro, e não Azul
   Médio, que sobre o campo aprofundado renderia 2,9:1. Mesma razão pela qual
   tokens.css não reaproveita o Azul Médio no escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .hero-mockups {
    --hm-campo: color-mix(in srgb, var(--rare-azul-escuro) 55%, black);
    --hm-moldura: var(--rare-azul-claro);
    --hm-tela: var(--rare-azul-escuro);
    --hm-tinta: var(--rare-fundo-claro);
    --hm-tinta-fraca: color-mix(in srgb, var(--rare-fundo-claro) 38%, var(--rare-azul-escuro));
    --hm-painel: color-mix(in srgb, var(--rare-azul-claro) 22%, var(--rare-azul-escuro));
    --hm-acento: var(--rare-azul-claro);
    --hm-sobre-acento: var(--rare-azul-escuro);
    --hm-realce: color-mix(in srgb, var(--rare-azul-claro) 30%, var(--rare-azul-escuro));
  }
}

:root[data-tema="escuro"] .hero-mockups {
  --hm-campo: color-mix(in srgb, var(--rare-azul-escuro) 55%, black);
  --hm-moldura: var(--rare-azul-claro);
  --hm-tela: var(--rare-azul-escuro);
  --hm-tinta: var(--rare-fundo-claro);
  --hm-tinta-fraca: color-mix(in srgb, var(--rare-fundo-claro) 38%, var(--rare-azul-escuro));
  --hm-painel: color-mix(in srgb, var(--rare-azul-claro) 22%, var(--rare-azul-escuro));
  --hm-acento: var(--rare-azul-claro);
  --hm-sobre-acento: var(--rare-azul-escuro);
  --hm-realce: color-mix(in srgb, var(--rare-azul-claro) 30%, var(--rare-azul-escuro));
}

/* Modos de cor do painel de preferências. Como nos banners Bauhaus, a paleta
   cai para DOIS tons — não há meio-tom, porque cinza sobre preto é o par que
   quem tem baixa visão perde primeiro. A tela passa a ter a cor do campo, e o
   que separa um aparelho do outro é a moldura, que vira um contorno de tinta;
   o mesmo vale para os painéis de dentro, via --hm-borda.

   Consequência aceita: as linhas apertadas do cartão "não fazer" sobem ao
   contraste pleno e param de se ler como contraexemplo (CLAUDE.md §9.12). É o
   comportamento certo — um modo de cor para baixa visão não deve preservar
   baixo contraste —, e o que ensina ali continua sendo a forma: linhas
   apertadas contra linhas espaçadas, cruz vazada contra tique preenchido. */

/* Superfície branca → campo preto, tinta branca. */
:root[data-modo-cor="alto-contraste"] .hero-mockups {
  --hm-campo: #000000;
  --hm-moldura: #ffffff;
  --hm-tela: #000000;
  --hm-tinta: #ffffff;
  --hm-tinta-fraca: #ffffff;
  --hm-painel: #000000;
  --hm-acento: #ffffff;
  --hm-sobre-acento: #000000;
  --hm-realce: #000000;
  --hm-borda: #ffffff;
}

/* Superfície preta → campo amarelo, tinta preta. */
:root[data-modo-cor="amarelo-preto"] .hero-mockups {
  --hm-campo: #ffe94e;
  --hm-moldura: #000000;
  --hm-tela: #ffe94e;
  --hm-tinta: #000000;
  --hm-tinta-fraca: #000000;
  --hm-painel: #ffe94e;
  --hm-acento: #000000;
  --hm-sobre-acento: #ffe94e;
  --hm-realce: #ffe94e;
  --hm-borda: #000000;
}

/* Superfície amarela → campo preto, tinta amarela. */
:root[data-modo-cor="preto-amarelo"] .hero-mockups {
  --hm-campo: #000000;
  --hm-moldura: #ffe94e;
  --hm-tela: #000000;
  --hm-tinta: #ffe94e;
  --hm-tinta-fraca: #ffe94e;
  --hm-painel: #000000;
  --hm-acento: #ffe94e;
  --hm-sobre-acento: #000000;
  --hm-realce: #000000;
  --hm-borda: #ffe94e;
}

/* ---------- Prancha ----------
   A parede é absoluta para que a altura venha sempre do contêiner (que já tem
   proporção ou altura mínima) e não do conteúdo — condição do container query. */
.hero__figura:has(> .hero-mockups) {
  position: relative;
}

.hero-mockups {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--hm-campo);
}

.hero-mockups__parede {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: flex-start;

  /* Sem container queries a prancha fica no tamanho de desenho e é
     recortada/centralizada pelo overflow da parede. */
  --u: 1px;
  gap: calc(14 * var(--u));
}

@supports (container-type: size) {
  .hero-mockups {
    container-type: size;
  }

  /* max() dos dois eixos = cobrir. A altura de referência (700) é menor que a
     parede real (~746 unidades com os deslocamentos), então ela transborda em
     cima e embaixo por desenho: é o que faz o mosaico parecer continuar fora
     do quadro, como na referência. A folga é pequena de propósito — com 560,
     como estava, o eixo vertical mandava em quase toda tela e as colunas das
     pontas saíam pelas laterais. */
  .hero-mockups__parede {
    --u: max(calc(100cqw / 532), calc(100cqh / 700));
  }

}

/* Cada coluna traz o próprio desencontro, em unidades de prancha. */
.hm-coluna {
  inline-size: calc(168 * var(--u));
  flex: none;
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  margin-block-start: calc(var(--desloca) * var(--u));
}

/* ---------- Aparelho ----------
   A moldura é o recuo do corpo em volta da tela: nos modos monocromáticos ela
   é a única coisa que separa um aparelho do campo, porque tela e campo passam
   a ter a mesma cor. */
.hm-fone {
  block-size: calc(var(--h) * var(--u));
  flex: none;
  padding: calc(6 * var(--u));
  border-radius: calc(26 * var(--u));
  background: var(--hm-moldura);
}

.hm-tela {
  block-size: 100%;
  padding: calc(8 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--hm-tela);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Barra de estado e indicador inferior: não dizem nada: existem para que o
   retângulo se leia como celular. */
.hm-barra {
  block-size: calc(16 * var(--u));
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(6 * var(--u));
}

.hm-barra__hora,
.hm-barra__sinal {
  block-size: calc(5 * var(--u));
  border-radius: calc(2.5 * var(--u));
  background: var(--hm-tinta);
}

.hm-barra__hora { inline-size: calc(18 * var(--u)); }
.hm-barra__sinal { inline-size: calc(16 * var(--u)); }

/* Recorte da câmera. Tom intermediário, e não a cor da moldura: no tema claro
   a moldura é Azul Claro e o furo sumia dentro da tela. */
.hm-barra__camera {
  inline-size: calc(8 * var(--u));
  block-size: calc(8 * var(--u));
  border-radius: 50%;
  background: var(--hm-tinta-fraca);
}

.hm-inicio {
  inline-size: calc(52 * var(--u));
  block-size: calc(4 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--hm-tinta-fraca);
  margin-block-start: calc(6 * var(--u));
  margin-inline: auto;
  flex: none;
}

.hm-conteudo {
  flex: 1;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}

/* ---------- Peças comuns ---------- */

.hm-linha {
  inline-size: calc(var(--w) * var(--u));
  block-size: calc(var(--h) * var(--u));
  border-radius: calc(var(--h) * var(--u) / 2);
  background: var(--hm-tinta);
  flex: none;
}

.hm-grupo {
  display: flex;
  flex-direction: column;
  flex: none;
}

.hm-grupo--texto { gap: calc(7 * var(--u)); }
.hm-grupo--corpo { gap: calc(7 * var(--u)); }
.hm-grupo--apertado { gap: calc(3 * var(--u)); }
.hm-grupo--arejado { gap: calc(10 * var(--u)); }

.hm-botao {
  inline-size: calc(66 * var(--u));
  block-size: calc(18 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--hm-acento);
  flex: none;
}

/* ---------- Tela: card de recomendação com o número em braille ----------
   Grafia do componente braille-numero (§13): três celas — sinal de número,
   dezena, unidade — sobre uma grade de 7 × 7 pontos parados que sangra pelas
   quatro bordas. A tinta pesa mais que a grade, e o campo é claro: é a direção
   de contraste que Arditi recomenda (§6). */
.hm-braille {
  position: relative;
  flex: 1;
  min-block-size: calc(100 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--hm-painel);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--hm-borda);
  overflow: hidden;
}

.hm-ponto {
  position: absolute;
  inline-size: calc(9 * var(--u));
  block-size: calc(9 * var(--u));
  border-radius: 50%;
  background: var(--hm-tinta-fraca);
  inset-inline-start: calc((-8 + var(--c) * 23 - 4.5) * var(--u));
  inset-block-start: calc(50% + (var(--r) - 3) * 30 * var(--u) - 4.5 * var(--u));
}

.hm-ponto--tinta {
  inline-size: calc(14 * var(--u));
  block-size: calc(14 * var(--u));
  background: var(--hm-tinta);
  inset-inline-start: calc((-8 + var(--c) * 23 - 7) * var(--u));
  inset-block-start: calc(50% + (var(--r) - 3) * 30 * var(--u) - 7 * var(--u));
  animation: hm-braille-cascata 4.2s var(--movimento-padrao) infinite;
  /* Atraso negativo: a onda já está correndo no primeiro quadro, em vez de a
     primeira volta sair toda junta. --i é a coluna do ponto na grade. */
  animation-delay: calc(var(--i) * -0.13s);
}

/* O número some e volta a se formar da esquerda para a direita. O quadro 0% é
   o número inteiro: parada, a peça mostra o desenho, não um resto dele. */
@keyframes hm-braille-cascata {
  0%, 58% { scale: 1; }
  70% { scale: 0.12; }
  84%, 100% { scale: 1; }
}

/* ---------- Tela: par Faça / Não faça ---------- */

.hm-cartao {
  flex: 1;
  min-block-size: 0;
  padding: calc(10 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--hm-painel);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--hm-borda);
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  overflow: hidden;
}

/* As linhas do contraexemplo são apertadas E de baixo contraste — as duas
   coisas que o cartão reprova. Ver a nota dos modos de cor lá em cima. */
.hm-cartao--ruim .hm-linha {
  background: var(--hm-tinta-fraca);
}

/* Selo: cruz vazada × tique preenchido. A distinção é de FORMA, não de cor
   (CLAUDE.md §11), e sobrevive aos modos monocromáticos. */
.hm-selo {
  position: relative;
  inline-size: calc(20 * var(--u));
  block-size: calc(20 * var(--u));
  border-radius: 50%;
  flex: none;
}

.hm-selo--ruim {
  box-shadow: inset 0 0 0 calc(2.5 * var(--u)) var(--hm-tinta);
  animation: hm-selo-recua 6s var(--movimento-padrao) infinite;
}

.hm-selo--ruim::before,
.hm-selo--ruim::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(4.75 * var(--u));
  inset-block-start: calc(8.75 * var(--u));
  inline-size: calc(10.5 * var(--u));
  block-size: calc(2.5 * var(--u));
  border-radius: calc(1.25 * var(--u));
  background: var(--hm-tinta);
}

.hm-selo--ruim::before { rotate: 45deg; }
.hm-selo--ruim::after { rotate: -45deg; }

.hm-selo--bom {
  background: var(--hm-acento);
  animation: hm-selo-avanca 6s var(--movimento-padrao) infinite;
}

.hm-selo--bom::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(6.5 * var(--u));
  inset-block-start: calc(4.5 * var(--u));
  inline-size: calc(6 * var(--u));
  block-size: calc(10 * var(--u));
  border-inline-end: calc(2.5 * var(--u)) solid var(--hm-sobre-acento);
  border-block-end: calc(2.5 * var(--u)) solid var(--hm-sobre-acento);
  rotate: 45deg;
}

/* O cartão acessível abre as entrelinhas — a primeira linha sobe, a última
   desce — enquanto o selo bom cresce e o selo ruim recua. Só transformação. */
.hm-linha--sobe {
  animation: hm-abre-cima 6s var(--movimento-padrao) infinite;
}

.hm-linha--desce {
  animation: hm-abre-baixo 6s var(--movimento-padrao) infinite;
}

@keyframes hm-abre-cima {
  0%, 18% { translate: 0 0; }
  42%, 72% { translate: 0 calc(-5 * var(--u)); }
  100% { translate: 0 0; }
}

@keyframes hm-abre-baixo {
  0%, 18% { translate: 0 0; }
  42%, 72% { translate: 0 calc(5 * var(--u)); }
  100% { translate: 0 0; }
}

@keyframes hm-selo-avanca {
  0%, 22% { scale: 1; }
  42%, 72% { scale: 1.16; }
  100% { scale: 1; }
}

@keyframes hm-selo-recua {
  0%, 22% { scale: 1; }
  42%, 72% { scale: 0.84; }
  100% { scale: 1; }
}

/* ---------- Tela: fila de abas (nav.doc-abas do desktop) ----------
   A pílula do item corrente percorre as quatro seções, e o corpo do texto
   refaz a medida a cada troca — que é o que a página faz de verdade. */
.hm-abas {
  position: relative;
  block-size: calc(22 * var(--u));
  border-radius: calc(11 * var(--u));
  background: var(--hm-painel);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--hm-borda);
  flex: none;
}

/* Realce + anel, e não bloco preenchido: nos modos monocromáticos o realce
   fica igual ao campo, e é o anel que continua marcando qual aba está aberta
   (sem ele, os rótulos por cima da pílula sumiriam dentro dela). */
.hm-abas__ativa {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: calc(35 * var(--u));
  block-size: calc(22 * var(--u));
  border-radius: calc(11 * var(--u));
  background: var(--hm-realce);
  box-shadow: inset 0 0 0 calc(2.5 * var(--u)) var(--hm-acento);
  animation: hm-aba-corre 12s var(--movimento-padrao) infinite;
}

.hm-abas__rotulos {
  position: relative;
  block-size: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center;
}

@keyframes hm-aba-corre {
  0%, 18% { translate: 0 0; }
  25%, 43% { translate: calc(35 * var(--u)) 0; }
  50%, 68% { translate: calc(70 * var(--u)) 0; }
  75%, 93% { translate: calc(105 * var(--u)) 0; }
  100% { translate: 0 0; }
}

/* Altura fixa, não flex: crescendo com a tela ela virava um painel de 200
   unidades com quatro linhas espremidas no rodapé — deixa de parecer uma
   figura dentro de uma página e passa a parecer a página inteira. */
.hm-figura {
  flex: none;
  block-size: calc(96 * var(--u));
  border-radius: calc(12 * var(--u));
  background: var(--hm-painel);
  box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--hm-borda);
}

/* A medida das linhas muda a cada troca de aba: quatro pulsos por volta, em
   cascata. transform-origin no início para a linha encurtar pela direita,
   como texto encurta. */
.hm-linha--reflui {
  transform-origin: left center;
  animation: hm-reflui 12s var(--movimento-padrao) infinite;
}

.hm-grupo--corpo .hm-linha--reflui:nth-child(2) { animation-delay: 0.08s; }
.hm-grupo--corpo .hm-linha--reflui:nth-child(3) { animation-delay: 0.16s; }
.hm-grupo--corpo .hm-linha--reflui:nth-child(4) { animation-delay: 0.24s; }

@keyframes hm-reflui {
  0% { scale: 1 1; }
  21% { scale: 1 1; }
  24% { scale: 0.58 1; }
  32% { scale: 0.9 1; }
  46% { scale: 0.9 1; }
  49% { scale: 0.5 1; }
  57% { scale: 0.76 1; }
  71% { scale: 0.76 1; }
  74% { scale: 0.62 1; }
  82% { scale: 0.96 1; }
  96% { scale: 0.96 1; }
  100% { scale: 1 1; }
}

/* ---------- Tela: gaveta de navegação do celular ---------- */

.hm-marca {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  flex: none;
  padding-inline: calc(4 * var(--u));
  margin-block-end: calc(4 * var(--u));
}

.hm-marca__simbolo {
  inline-size: calc(22 * var(--u));
  block-size: calc(22 * var(--u));
  border-radius: 50%;
  background: var(--hm-acento);
  flex: none;
}

.hm-gaveta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  flex: none;
}

.hm-item {
  position: relative;
  z-index: 1;
  block-size: calc(22 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding-inline: calc(8 * var(--u));
  flex: none;
}

.hm-item__icone {
  inline-size: calc(12 * var(--u));
  block-size: calc(12 * var(--u));
  border-radius: 50%;
  background: var(--hm-tinta);
  flex: none;
}

/* Item selecionado: fundo de realce, como nas navegações reais do site. O anel
   é o que sobra nos modos monocromáticos, onde o realce iguala o campo. */
.hm-gaveta__ativo {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: calc(22 * var(--u));
  border-radius: calc(11 * var(--u));
  background: var(--hm-realce);
  box-shadow: inset 0 0 0 calc(2.5 * var(--u)) var(--hm-acento);
  animation: hm-item-corre 12s var(--movimento-padrao) infinite;
}

/* Passo de 30 unidades: 22 de item mais 8 de intervalo. */
@keyframes hm-item-corre {
  0%, 14% { translate: 0 0; }
  20%, 34% { translate: 0 calc(30 * var(--u)); }
  40%, 54% { translate: 0 calc(60 * var(--u)); }
  60%, 74% { translate: 0 calc(90 * var(--u)); }
  80%, 94% { translate: 0 calc(120 * var(--u)); }
  100% { translate: 0 0; }
}