/* ============================================================================
   efeitos.css — o movimento do Delta Finances.
   Fundo de grade reativo ao cursor, abertura animada, transição de página e as
   micro-interações que dizem ao usuário o que é clicável.

   Tudo aqui lê as variáveis de tema definidas em app.css, então o mesmo efeito
   serve aos três temas (noir, claro e delta).
   ========================================================================== */

/* ===========================================================================
   1. O FUNDO HEXAGONAL
   Quatro camadas: dois brilhos radiais, a malha fixa e — por cima — uma malha
   "viva" recortada por um círculo que segue o mouse. Passar o cursor acende a
   malha embaixo dele.

   O favo não sai de linear-gradient como saía o quadriculado: ele é um
   ladrilho SVG usado como MÁSCARA, e quem dá a cor é o background-color
   atrás. Assim a malha continua lendo as variáveis de tema (--grade-linha,
   --grade-viva) em vez de ter a cor presa dentro do SVG.
   ========================================================================== */

:root {
  /* um favo de ponta para cima: ziguezague, prumo, ziguezague invertido,
     prumo. O ladrilho fecha nas quatro bordas, então repete sem emenda. */
  --favo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.7128' height='48' viewBox='0 0 27.7128 48'%3E%3Cpath d='M0 8L13.8564 0L27.7128 8M0 8L0 24M27.7128 8L27.7128 24M0 24L13.8564 32L27.7128 24M13.8564 32L13.8564 48' fill='none' stroke='%23000' stroke-width='0.7'/%3E%3C/svg%3E");
  /* a razão do ladrilho é fixa (√3/3): a altura acompanha a largura */
  --favo-tam: var(--grade) calc(var(--grade) * 1.7320508);
}

#fundo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--base);
  background-image:
    radial-gradient(60rem 30rem at 86% -12%, var(--glow-1), transparent 60%),
    radial-gradient(50rem 30rem at -12% 18%, var(--glow-2), transparent 60%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent);
  mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent);
  transition: background-color 0.3s ease;
}

/* o favo fixo. Fica numa camada só dele porque a máscara do hexágono não
   pode recortar os brilhos radiais nem a cor de base do #fundo. */
#fundo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--grade-linha);
  -webkit-mask-image: var(--favo);
  mask-image: var(--favo);
  -webkit-mask-size: var(--favo-tam);
  mask-size: var(--favo-tam);
}

/* a malha que acende sob o cursor */
/* Duas máscaras ao mesmo tempo: o favo diz ONDE há linha, o círculo diz até
   onde o cursor acende. `intersect` guarda só o que está nas duas — sem isso
   uma delas apagaria a outra. */
#fundo .rede-viva {
  position: absolute;
  inset: 0;
  background-color: var(--grade-viva);
  -webkit-mask-image: radial-gradient(240px 240px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%), var(--favo);
  mask-image: radial-gradient(240px 240px at var(--mx, -500px) var(--my, -500px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 72%), var(--favo);
  -webkit-mask-size: auto, var(--favo-tam);
  mask-size: auto, var(--favo-tam);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: var(--rede-on, 0);
  transition: opacity 0.45s ease;
}

/* o halo quente que acompanha o ponteiro */
#fundo .facho {
  position: absolute;
  inset: 0;
  background: radial-gradient(300px 300px at var(--mx, -500px) var(--my, -500px), var(--facho), transparent 70%);
  opacity: var(--rede-on, 0);
  transition: opacity 0.45s ease;
}

/* as três manchas que respiram devagar ao fundo */
#fundo .mancha {
  position: absolute;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: var(--mancha-op, 0.35);
  animation: derivar 22s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
#fundo .mancha:nth-child(1) { top: -14%; right: -6%;  background: var(--glow-1); animation-duration: 19s; }
#fundo .mancha:nth-child(2) { top: 32%;  left: -12%;  background: var(--glow-2); animation-duration: 26s; animation-delay: -6s; }
#fundo .mancha:nth-child(3) { bottom: -18%; left: 42%; background: var(--glow-1); animation-duration: 31s; animation-delay: -12s; }

@keyframes derivar {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(5vw, -4vw) scale(1.12); }
  100% { transform: translate(-4vw, 3vw) scale(0.94); }
}

/* o app flutua por cima do fundo: nada de fundo opaco no corpo */
body.com-fundo { background: transparent; }

/* ===========================================================================
   2. A ABERTURA
   Cortina inteira, a marca se desenha, o nome sobe letra por letra, uma linha
   varre embaixo e a cortina abre pra dois lados.
   ========================================================================== */

#intro {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: var(--void);
  overflow: hidden;
  cursor: pointer;
}

#intro.saindo { animation: introSair 0.72s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
@keyframes introSair {
  to { clip-path: inset(0 0 100% 0); opacity: 0; }
}

/* a grade da abertura entra desenhando */
#intro .intro-grade {
  position: absolute;
  inset: 0;
  background-color: var(--grade-viva);
  opacity: 0;
  animation: introGrade 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%), var(--favo);
  mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent 78%), var(--favo);
  -webkit-mask-size: auto, var(--favo-tam);
  mask-size: auto, var(--favo-tam);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
@keyframes introGrade {
  from { opacity: 0; transform: scale(1.18); }
  to   { opacity: 1; transform: scale(1); }
}

#intro .intro-halo {
  position: absolute;
  width: 70vmin;
  height: 70vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-1), transparent 62%);
  filter: blur(40px);
  opacity: 0;
  animation: introHalo 1.8s ease-out 0.15s forwards;
}
@keyframes introHalo {
  0%   { opacity: 0; transform: scale(0.5); }
  45%  { opacity: 0.9; transform: scale(1.05); }
  100% { opacity: 0.55; transform: scale(1); }
}

#intro .intro-centro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 0 24px;
  text-align: center;
}

/* As três fitas se desenham em sequência, de cima para baixo — a mesma ordem
   em que o olho lê o símbolo. Cada uma leva o perímetro inteiro como
   dasharray (os três triângulos são congruentes, então o número serve aos
   três) e entra 180ms depois da anterior. */
#intro .intro-marca { width: 104px; height: 104px; }
#intro .intro-marca svg { display: block; overflow: visible; }
#intro .intro-marca path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 114;
  stroke-dashoffset: 114;
  animation: introTraco 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  filter: drop-shadow(0 10px 30px var(--glow-1));
}
#intro .intro-marca path:nth-child(1) { animation-delay: 0.1s; }
#intro .intro-marca path:nth-child(2) { animation-delay: 0.28s; opacity: 0.82; }
#intro .intro-marca path:nth-child(3) { animation-delay: 0.46s; opacity: 0.64; }

@keyframes introTraco { to { stroke-dashoffset: 0; } }

#intro .intro-nome {
  display: flex;
  gap: 2px;
  font-family: var(--display);
  font-size: clamp(30px, 7vw, 58px);
  font-weight: 800;
  letter-spacing: var(--display-ls, -0.045em);
  text-transform: var(--display-tt, none);
  line-height: 1;
}
#intro .intro-nome span {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px) rotate(4deg);
  animation: introLetra 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  /* Tinta sólida. O degradê estava em CADA letra, não ao longo da palavra:
     toda letra recebia a rampa inteira, e o conjunto virava um vermelho
     chapado em vez da varredura que o código prometia. Com o símbolo logo
     acima carregando o vermelho da marca, o nome não precisa competir. */
  color: var(--t1);
}
#intro .intro-nome .espaco { width: 0.32em; }
@keyframes introLetra {
  to { opacity: 1; transform: none; }
}

#intro .intro-lema {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--t3);
  opacity: 0;
  animation: surgir 0.6s ease 1.25s forwards;
}

/* a barra de carga: 1,4s e a cortina abre */
#intro .intro-barra {
  width: min(260px, 60vw);
  height: 2px;
  border-radius: 2px;
  background: var(--fill-3);
  overflow: hidden;
  opacity: 0;
  animation: surgir 0.4s ease 0.9s forwards;
}
#intro .intro-barra i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  animation: introCarga 1.25s cubic-bezier(0.65, 0, 0.35, 1) 0.95s forwards;
}
@keyframes introCarga { to { width: 100%; } }

#intro .intro-pular {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t4);
  opacity: 0;
  animation: surgir 0.5s ease 1.6s forwards;
}
#intro .intro-pular kbd {
  font-family: inherit;
  border: 1px solid var(--b2);
  border-radius: 4px;
  padding: 2px 6px;
  margin: 0 3px;
}

/* ===========================================================================
   3. ENTRADA DA PÁGINA
   Cada troca de rota refaz o conteúdo: ele sobe e aparece, e os cards nascem
   em cascata (a classe .nasce já existia; aqui ela ganha o deslocamento).
   ========================================================================== */

#pagina.trocando { animation: paginaEntra 0.48s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes paginaEntra {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* o primeiro desenho depois da abertura: mais lento e mais longe */
#pagina.estreia .nasce { animation-duration: 0.7s; }
#pagina.estreia .nasce { animation-name: nascerLonge; }

/* O redesenho no lugar — gravar um campo, filtrar uma tabela — refaz o DOM,
   e todo elemento recém-criado recomeçaria a animação de entrada. Para quem
   está digitando, isso é a tela inteira piscando a cada campo. Aqui ela fica
   parada: o que mudou aparece trocado, o que não mudou não se mexe. */
#pagina.sem-nascer .nasce { animation: none; opacity: 1; }
#pagina.sem-nascer .trilha > i { transition: none; }
@keyframes nascerLonge {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* ===========================================================================
   4. MICRO-INTERAÇÕES
   O que levanta, brilha ou desliza quando o ponteiro chega.
   ========================================================================== */

/* --- o card ------------------------------------------------------------- */
.card {
  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.34s ease;
  isolation: isolate;
}

.card:hover {
  transform: translateY(var(--card-sobe, -3px));
  border-color: var(--borda-viva);
  box-shadow: var(--sombra-viva);
}

/* a varredura diagonal que atravessa o card no hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 36%, var(--lustro) 48%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover::before { transform: translateX(110%); }

/* a linha de gradiente no pé do card — a assinatura do tema delta */
.card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fio-h, 0);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 30%, transparent),
    var(--brand), var(--brand-2), var(--brand),
    color-mix(in srgb, var(--brand) 30%, transparent));
  background-size: 200% 100%;
  animation: correrFio 6s linear infinite;
  opacity: 0.85;
  transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.38s;
}
.card:hover::after { height: calc(var(--fio-h, 0px) + 1px); opacity: 1; }
@keyframes correrFio { to { background-position: -200% 0; } }

/* o conteúdo fica acima das duas camadas decorativas */
.card > * { position: relative; z-index: 3; }

/* --- o botão ------------------------------------------------------------ */
.bt { position: relative; overflow: hidden; isolation: isolate; }

.bt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 26%, var(--lustro-bt) 50%, transparent 74%);
  transform: translateX(-130%);
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}
.bt:hover::after { transform: translateX(130%); }
.bt:hover { transform: translateY(-2px); }
.bt:active { transform: translateY(1px) scale(0.985); }

.bt.marca:hover {
  box-shadow: 0 12px 32px -6px color-mix(in srgb, var(--brand) 62%, transparent);
  filter: brightness(1.06);
}

/* --- o item do menu ----------------------------------------------------- */
.item { position: relative; }
.item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  transform: translateY(-50%);
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.item[aria-current="page"]::before { height: 22px; }
.item[aria-current="page"] { box-shadow: none; }
.item:hover::before { height: 12px; }

/* --- a linha da tabela -------------------------------------------------- */
.tabela tbody tr { position: relative; }
.tabela tbody tr::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.tabela tbody tr:hover::after { transform: scaleY(1); }

/* --- o chip e o quadrado do mapa ---------------------------------------- */
.chip { transition: transform 0.2s ease, border-color 0.2s ease; }
.chip:hover { transform: translateY(-1px); border-color: var(--borda-viva); }

.heat > span { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease; }
.heat > span:hover {
  transform: scale(1.3);
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--brand) 55%, transparent);
  z-index: 3;
}

/* --- as barras dos gráficos crescem da base ----------------------------- */
.grafico .barra {
  transform-origin: center bottom;
  animation: crescerBarra 0.62s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes crescerBarra {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* a linha do gráfico se desenha da esquerda pra direita */
.grafico .linha {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: desenharLinha 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
@keyframes desenharLinha { to { stroke-dashoffset: 0; } }

/* --- o texto em degradê, como no deltacpa ------------------------------- */
.txt-grad {
  background-image: linear-gradient(100deg, var(--t1) 0, color-mix(in srgb, var(--brand) 55%, transparent) 26%, var(--brand) 56%, var(--brand-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: correrGrad 8s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
@keyframes correrGrad { to { background-position: 100% 0; } }

/* --- a fita de avisos que corre no topo do painel ----------------------- */
.fita {
  position: relative;
  overflow: hidden;
  margin: 2px 0 14px;
  border: 1px solid var(--b1);
  border-radius: var(--raio-bt);
  background: var(--surface);
  padding: 9px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.fita-trilho {
  display: flex;
  width: max-content;
  gap: 34px;
  animation: correrFita 34s linear infinite;
}
.fita:hover .fita-trilho { animation-play-state: paused; }
.fita-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}
.fita-item b { color: var(--t1); letter-spacing: -0.01em; }
.fita-item i {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--brand);
  transform: rotate(45deg);
}
@keyframes correrFita { to { transform: translateX(-50%); } }

/* --- os cantos de mira do tema delta ------------------------------------ */
.mira { position: relative; }
.mira::before, .mira::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--brand);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 4;
}
.mira::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; transform: translate(5px, 5px); }
.mira::after  { right: 10px; bottom: 10px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; transform: translate(-5px, -5px); }
.mira:hover::before, .mira:hover::after { opacity: 0.85; transform: none; }

/* ===========================================================================
   5. RESPEITO AO MOVIMENTO REDUZIDO
   Quem pediu menos animação recebe o painel parado — e sem abertura.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  #fundo .mancha,
  .card::before, .card::after, .bt::after,
  .fita-trilho, .txt-grad, .grafico .barra, .grafico .linha {
    animation: none !important;
    transition: none !important;
  }
  .grafico .linha { stroke-dashoffset: 0; }
  .card:hover, .bt:hover { transform: none; }
}


/* ============================================================================
   O Δ QUE SE DESENHA FORA DA ABERTURA

   O mesmo traço de `#intro .intro-marca`, solto para quem quiser usá-lo como
   selo. Hoje quem usa é a Meta do dia, quando o dia fecha os 100%.

   Reaproveita o `@keyframes introTraco` — keyframes são globais, e duplicar a
   animação seria manter duas verdades sobre o mesmo gesto.
   ========================================================================== */

.marca-traco svg { display: block; overflow: visible; }
.marca-traco path {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 114;
  stroke-dashoffset: 114;
  animation: introTraco 0.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.marca-traco path:nth-child(1) { animation-delay: 0.08s; }
.marca-traco path:nth-child(2) { animation-delay: 0.26s; opacity: 0.82; }
.marca-traco path:nth-child(3) { animation-delay: 0.44s; opacity: 0.64; }

/* --------------------------------------------------- o selo da Meta do dia */
/* Fica no canto direito, por cima da onda e fora do caminho do texto: é um
   carimbo no cartão, não um elemento da leitura.

   O seletor repete `.painel-operacao .meta-dia >` de propósito: a regra que
   põe `position: relative` em todo filho do cartão tem essa especificidade, e
   um `.meta-dia-selo` solto perdia para ela — o selo caía no fluxo e pousava
   em cima do valor. */
.painel-operacao .meta-dia > .meta-dia-selo {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 62px;
  height: 62px;
  z-index: 1;
  pointer-events: none;
  color: #fff;
  opacity: 0.9;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.3));
}
.meta-dia-selo svg { width: 100%; height: 100%; }

/* O selo MONTA a marca: um triângulo por vez, e cada um FICA. O primeiro se
   desenha e para; o segundo se desenha ao lado dele e para; o terceiro fecha o
   símbolo. Os três ficam juntos um instante — é a marca inteira, como ela é —
   e aí tudo apaga e a montagem recomeça.

   Cada fita tem o seu próprio keyframe porque cada uma espera um tempo
   diferente e segura por um tempo diferente: o primeiro triângulo fica na
   tela quase o laço todo, o terceiro só o fim dele. Com um keyframe só e
   atrasos, como no revezamento anterior, não dá — o atraso desloca o gesto
   inteiro, e o que se quer aqui é o gesto acontecer em momentos diferentes de
   uma linha do tempo COMUM.

   A régua dos 2,6s, em porcentagem: 0–20% desenha o primeiro, 25–45% o
   segundo, 50–70% o terceiro, até 88% os três ficam, até 96% apagam, e o
   resto é a emenda do laço. Em segundos: meio segundo por triângulo, a marca
   inteira montada em 1,8s e o laço fechando em 2,6s. */
.painel-operacao .meta-dia > .meta-dia-selo path {
  animation: 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: 0s;
}
.painel-operacao .meta-dia > .meta-dia-selo path:nth-child(1) { animation-name: marcaMonta1; }
.painel-operacao .meta-dia > .meta-dia-selo path:nth-child(2) { animation-name: marcaMonta2; }
.painel-operacao .meta-dia > .meta-dia-selo path:nth-child(3) { animation-name: marcaMonta3; }

/* Quem apaga é `stroke-opacity`, e não `opacity`: a opacidade de cada fita
   (1, 0,82 e 0,64) é o escalonamento da marca, e agora ele volta a fazer
   sentido, porque no fim da montagem os três aparecem juntos. Os dois se
   multiplicam, então o apagar não encosta nessa profundidade.

   A emenda não estala porque a opacidade só volta a 1 quando o traço já está
   recolhido — e traço recolhido é traço invisível. */
@keyframes marcaMonta1 {
  0%   { stroke-dashoffset: 114; stroke-opacity: 1; }
  20%  { stroke-dashoffset: 0;   stroke-opacity: 1; }
  88%  { stroke-dashoffset: 0;   stroke-opacity: 1; }
  96%  { stroke-dashoffset: 0;   stroke-opacity: 0; }
  97%  { stroke-dashoffset: 114; stroke-opacity: 0; }
  100% { stroke-dashoffset: 114; stroke-opacity: 1; }
}

@keyframes marcaMonta2 {
  0%   { stroke-dashoffset: 114; stroke-opacity: 1; }
  25%  { stroke-dashoffset: 114; stroke-opacity: 1; }
  45%  { stroke-dashoffset: 0;   stroke-opacity: 1; }
  88%  { stroke-dashoffset: 0;   stroke-opacity: 1; }
  96%  { stroke-dashoffset: 0;   stroke-opacity: 0; }
  97%  { stroke-dashoffset: 114; stroke-opacity: 0; }
  100% { stroke-dashoffset: 114; stroke-opacity: 1; }
}

@keyframes marcaMonta3 {
  0%   { stroke-dashoffset: 114; stroke-opacity: 1; }
  50%  { stroke-dashoffset: 114; stroke-opacity: 1; }
  70%  { stroke-dashoffset: 0;   stroke-opacity: 1; }
  88%  { stroke-dashoffset: 0;   stroke-opacity: 1; }
  96%  { stroke-dashoffset: 0;   stroke-opacity: 0; }
  97%  { stroke-dashoffset: 114; stroke-opacity: 0; }
  100% { stroke-dashoffset: 114; stroke-opacity: 1; }
}

/* o valor não corre por baixo do selo */
.painel-operacao .meta-dia:has(.meta-dia-selo) .meta-dia-valor,
.painel-operacao .meta-dia:has(.meta-dia-selo) .meta-dia-pe { padding-right: 76px; }

@media (max-width: 1100px) {
  /* no cartão baixo do celular o centro cai em cima da trilha de progresso:
     o selo sobe um pouco e fica na linha do valor */
  .painel-operacao .meta-dia > .meta-dia-selo {
    width: 52px;
    height: 52px;
    right: 10px;
    top: 40%;
  }
  .painel-operacao .meta-dia:has(.meta-dia-selo) .meta-dia-valor,
  .painel-operacao .meta-dia:has(.meta-dia-selo) .meta-dia-pe { padding-right: 64px; }
}

/* quem pediu menos movimento recebe o símbolo pronto, não a ausência dele —
   inclusive o selo, que de outro modo ficaria piscando sem parar */
@media (prefers-reduced-motion: reduce) {
  .marca-traco path,
  .painel-operacao .meta-dia > .meta-dia-selo path {
    animation: none;
    stroke-dashoffset: 0;
    stroke-opacity: 1;
  }
}

/* ===========================================================================
   OS EMBLEMAS DOS RANKS, VIVOS

   Quinze pedras paradas numa fileira parecem um gráfico. Com um respiro lento
   e um brilho que atravessa a pedra de vez em quando, a escada vira um lugar.

   Regras que mantêm isso barato e suportável:
     · só `transform`, `opacity` e `filter` — nada que force recálculo de
       layout a 60 quadros por segundo;
     · tudo é LENTO (3,5s a 9s) e de amplitude pequena. Animação curta e larga
       numa tela que a pessoa fica olhando vira irritação em dois minutos;
     · cada elo começa num instante diferente (`--atraso`, posto pelo JS): os
       quinze pulsando em uníssono viraria um letreiro de loja;
     · `prefers-reduced-motion` desliga tudo.
   ========================================================================= */

/* o respiro: a pedra infla de leve e o halo acompanha */
@keyframes rankRespiro {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* o brilho que atravessa a pedra na diagonal, de tempos em tempos */
@keyframes rankBrilho {
  0%, 68%, 100% { transform: translate(-130%, -130%) rotate(28deg); opacity: 0; }
  74%           { opacity: 0.75; }
  86%, 99%      { transform: translate(130%, 130%) rotate(28deg); opacity: 0; }
}

.rank-emblema {
  position: relative;
  overflow: hidden;
  animation: rankRespiro 5.5s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
}

.rank-emblema::after {
  content: '';
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 62%);
  animation: rankBrilho 7s ease-in-out infinite;
  animation-delay: var(--atraso, 0s);
  pointer-events: none;
}

/* o traço do ícone fica acima do brilho */
.rank-emblema svg { position: relative; z-index: 1; }

/* --- cada família com o seu jeito ------------------------------------- */

/* a chama tremula: sobe, encolhe, muda de brilho — nunca no mesmo compasso */
@keyframes rankChama {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  25%      { transform: translateY(-1.5px) scale(1.07); filter: brightness(1.25); }
  55%      { transform: translateY(0.5px) scale(0.96); filter: brightness(0.92); }
  78%      { transform: translateY(-1px) scale(1.04); filter: brightness(1.15); }
}
.ico-chama svg { animation: rankChama 2.6s ease-in-out infinite; }

/* a estrela gira devagar e cintila no topo da volta */
@keyframes rankEstrela {
  0%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
  45%      { transform: rotate(8deg) scale(1.08); filter: brightness(1.45); }
  70%      { transform: rotate(-6deg) scale(1); filter: brightness(1); }
}
.ico-estrela svg { animation: rankEstrela 4.2s ease-in-out infinite; }

/* a gema balança como uma pedra pendurada, pegando luz de um lado e de outro */
@keyframes rankGema {
  0%, 100% { transform: rotate(-4deg); filter: brightness(1); }
  50%      { transform: rotate(4deg); filter: brightness(1.2); }
}
.ico-gema svg { animation: rankGema 4.8s ease-in-out infinite; transform-origin: 50% 20%; }

/* a coroa flutua: é peso que não encosta no chão */
@keyframes rankCoroa {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.ico-coroa svg { animation: rankCoroa 3.6s ease-in-out infinite; }

/* o olho pisca — raro e rápido, como piscada deve ser */
@keyframes rankOlho {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}
.ico-olho svg { animation: rankOlho 6.5s ease-in-out infinite; transform-origin: 50% 50%; }

/* o escudo só pulsa de leve: é o começo da escada, não precisa chamar atenção */
@keyframes rankEscudo {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}
.ico-escudo svg, .ico-escudoLiso svg { animation: rankEscudo 4s ease-in-out infinite; }

/* o raio pisca forte e fica apagado a maior parte do tempo */
@keyframes rankRaio {
  0%, 60%, 100% { filter: brightness(1); transform: scale(1); }
  66%           { filter: brightness(2); transform: scale(1.12); }
  72%           { filter: brightness(1); transform: scale(1); }
  78%           { filter: brightness(1.8); transform: scale(1.08); }
}
.ico-raio svg { animation: rankRaio 3.2s ease-in-out infinite; }

/* no hover a animação para e o emblema fica firme: quem está escolhendo quer
   olhar, não assistir */
.rank-coluna:hover .rank-emblema,
.rank-coluna:hover .rank-emblema svg,
.rank-coluna:focus-visible .rank-emblema,
.rank-coluna:focus-visible .rank-emblema svg { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .rank-emblema,
  .rank-emblema::after,
  .rank-emblema svg { animation: none; }
  .rank-emblema::after { opacity: 0; }
}