/*
 * REALCE NO PONTEIRO - o efeito de hover compartilhado pelos blocos de módulo.
 *
 * Nasceu no [clima_semana], desenhado e calibrado lá (ver o histórico daquele
 * arquivo: a versão em dock do macOS, com vizinhos reagindo, foi descartada; a
 * assimetria entrada-rápida/saída-lenta também). Quando a tabela de quinze dias
 * precisou do MESMO efeito, o certo era extrair, não copiar: dois arquivos com
 * os mesmos 650ms e a mesma curva sairiam do compasso na primeira calibragem
 * que mexesse só num deles.
 *
 * COMO USAR: a peça que reage ganha a classe .elo-clima-realce e MAPEIA quatro
 * variáveis suas para as quatro daqui. Cada bloco decide o que "mais presente"
 * significa no seu tema - este arquivo não conhece cor nenhuma.
 *
 *     .elo-clima-semana__dia {
 *       --elo-clima-realce-fundo: var(--elo-clima-semana-fundo-hover);
 *       --elo-clima-realce-borda: var(--elo-clima-semana-fundo-borda-hover);
 *       --elo-clima-realce-fundo-solido: var(--elo-clima-semana-fundo-solido-hover);
 *     }
 *
 * ---------------------------------------------------------------------------
 * O QUE COMPÕE o efeito (as decisões vieram inteiras do bloco da semana)
 *
 *   - AMPLIAÇÃO crescendo PELA BASE (transform-origin: center bottom): a linha
 *     de baixo fica firme e o topo sobe. É o que substitui um translateY - a
 *     subida vem do próprio crescimento.
 *   - FUNDO e BORDA um pouco mais presentes, a única parte que sobrevive com
 *     prefers-reduced-motion.
 *   - SEM SOMBRA, de propósito: estes blocos ficam sobre um fundo com nuvens
 *     passando, simulando céu, e sombra projetada sugere objeto sólido sobre
 *     superfície - contradiz a ideia.
 *   - NADA APLICADO AO CONTEÚDO (sem opacidade, desfoque ou cor no texto): o
 *     efeito não pode atrapalhar a leitura dos números e do ícone.
 *   - MESMA DURAÇÃO E MESMA CURVA NOS DOIS SENTIDOS - 650ms, ida e volta, em
 *     tudo. Por isso a transição é declarada UMA vez, na regra base: vale nos
 *     dois sentidos sozinha, sem uma segunda declaração no :hover.
 *   - NÃO MEXE NO LAYOUT: transform não ocupa espaço, então a peça cresce sem
 *     empurrar vizinho. O z-index existe só pra ela passar por cima em vez de
 *     ser cortada pela borda do vizinho seguinte.
 *   - SÓ EM PONTEIRO REAL: hover:hover + pointer:fine, o mesmo critério das
 *     pílulas do hero. Em tela de toque o hover simulado deixaria a peça
 *     ampliada depois do toque, sem jeito de voltar.
 *
 * ---------------------------------------------------------------------------
 * A ESCALA É VARIÁVEL, E O PADRÃO É O DO CARTÃO DA SEMANA
 *
 * 1,06 foi calibrado num cartão de ~180px: cresce cerca de 11px no total, 5px
 * por lado. A MESMA razão numa LINHA de tabela, que ocupa a largura inteira,
 * dá outro efeito - a 1168px seriam 70px, 35px por lado, transbordando a
 * coluna. Por isso a escala é uma variável: quem usa em peça larga a reduz,
 * mantendo curva, duração, fundo e borda idênticos. Ver o valor escolhido pela
 * tabela no CSS dela, com a conta.
 */

.elo-clima-realce {
  --elo-clima-realce-escala: 1.06;
}

@media (hover: hover) and (pointer: fine) {
  .elo-clima-realce {
    transform-origin: center bottom;
    transition:
      transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1),
      background-color 650ms cubic-bezier(0.22, 0.61, 0.36, 1),
      border-color 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .elo-clima-realce:hover {
    transform: scale(var(--elo-clima-realce-escala));
    z-index: 2;
    background-color: var(--elo-clima-realce-fundo);
    border-color: var(--elo-clima-realce-borda);
  }

  /* Navegador sem backdrop-filter usa o fundo SÓLIDO (o @supports fica no CSS
     de cada bloco, junto do fundo de repouso), e o hover precisa do par sólido
     correspondente - senão passar o mouse trocaria o sólido pelo translúcido e
     a peça ficaria mais clara em vez de mais presente. Precisa vir DEPOIS da
     regra acima (mesma especificidade, ganha a última) e DENTRO desta media
     query (senão, numa tela de toque sem backdrop-filter, o fundo de hover
     ficaria preso depois do toque). */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .elo-clima-realce:hover {
      background-color: var(--elo-clima-realce-fundo-solido);
    }
  }
}

/* ---- Acessibilidade: sem movimento, mas com resposta ----
   prefers-reduced-motion pede menos MOVIMENTO, não menos informação: a peça
   para de crescer, e o fundo/borda continua mudando - agora sem transição, na
   hora. Quem passa o mouse continua vendo qual peça está sob o ponteiro, que é
   a função do efeito. */
@media (prefers-reduced-motion: reduce) {
  .elo-clima-realce {
    transition: none !important;
  }

  .elo-clima-realce:hover {
    transform: none !important;
  }
}