/**
 * SELO FLUTUANTE — a marca dos 25 anos ancorada no canto, em todo o site.
 *
 * Folha própria, e não um trecho do 25anos.css, porque este componente aparece
 * em todas as páginas: carregar os 2.300 despejaria os tokens da campanha no
 * :root do site inteiro e o CSS de doze blocos que ninguém vai usar.
 *
 * Pelo mesmo motivo nada aqui depende de var(--c25-*): fora da página
 * comemorativa esses tokens não existem. Os valores abaixo repetem os do design
 * system de propósito, presos ao componente em vez de soltos no :root.
 *
 * O confete tem keyframes e classes próprios (`atl25-selo-*`). Poderiam
 * reaproveitar os do bloco 1, mas aí as duas folhas passariam a disputar os
 * mesmos nomes quando ambas carregam — e um estouro de canto e um estouro de
 * herói querem ajustes diferentes de qualquer forma.
 */

.atl25-selo-flutuante {
  --selo-ease: cubic-bezier(.2, 0, .2, 1);
  --selo-estado: 200ms;

  position: fixed;
  right: 14px;
  /* Acima do emblema do reCAPTCHA, que fica em bottom:14px com 60px de altura:
     14 + 60 + 24 de respiro. Onde não há reCAPTCHA na página, sobra essa folga
     embaixo — preferível a ver o selo pular de altura de uma página para
     outra. */
  bottom: 98px;
  z-index: 50;
  /* A cápsula é deitada: quem dá a medida é a imagem, e a caixa encolhe nela. */
  width: auto;
  line-height: 0;
  box-sizing: border-box;
}

.atl25-selo-flutuante *,
.atl25-selo-flutuante *::before,
.atl25-selo-flutuante *::after { box-sizing: border-box; }

/* Sem moldura, a pedido: a cápsula solta sobre a página.
   O z-index é o que mantém a marca na frente do confete, que nasce por trás
   dela — sem isso as peças passariam por cima do desenho. */
.atl25-selo-flutuante__marca {
  position: relative;
  z-index: 1;
  display: block;
  transition: transform var(--selo-estado) var(--selo-ease);
}

.atl25-selo-flutuante:hover .atl25-selo-flutuante__marca,
.atl25-selo-flutuante:focus-visible .atl25-selo-flutuante__marca {
  transform: translateY(-3px);
}

/* Quando é link, o tema não pode pintar sublinhado nem cor por baixo. */
a.atl25-selo-flutuante {
  text-decoration: none;
  border: 0;
}

a.atl25-selo-flutuante:focus-visible {
  outline: 3px solid #EF5123;
  outline-offset: 3px;
  /* Metade da altura da cápsula: o anel acompanha a pílula em vez de desenhar
     um retângulo em volta dela. */
  border-radius: 26px;
}

/* Um pouco maior que a cápsula dos depoimentos (89x43), e agora na proporção
   nativa do PNG, que é 178x91: 102/1,956 = 52. A medida dos depoimentos
   achatava a marca em 5% na vertical; aqui, com mais altura pedida, não fazia
   sentido carregar a distorção junto. */
.atl25-selo-flutuante__img {
  display: block;
  width: 102px;
  height: 52px;
}

/* Origem do estouro: caixa 0x0 no centro do selo, com overflow visível para as
   peças cruzarem a tela. Em z-index 0, atrás da moldura, então o confete nasce
   por trás da marca em vez de passar por cima dela. */
.atl25-selo-flutuante__confete {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

/* Cada estouro é um lote descartável, removido pelo JS quando a animação acaba.
   Precisa ser posicionado para o `top/left: 50%` das peças resolver contra ele:
   50% de zero é zero, ou seja, o ponto de origem. */
.atl25-selo-flutuante__lote {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

@keyframes atl25-selo-burst {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}

@keyframes atl25-selo-cai {
  from { transform: translateY(0); }
  to   { transform: translateY(var(--queda, 220px)); }
}

@keyframes atl25-selo-gira {
  0%   { transform: rotate(0deg) scale(.4); opacity: 0; }
  5%   { opacity: 1; }
  14%  { transform: rotate(calc(var(--gira) * .14)) scale(1); opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: rotate(var(--gira)) scale(1); opacity: 0; }
}

/* O impulso é curto e a queda é longa: com um tempo só, a peça dispararia para
   a borda, pararia no ar e apagaria ali, tudo no mesmo instante. */
.atl25-selo-flutuante__burst {
  position: absolute;
  top: 50%;
  left: 50%;
  animation: atl25-selo-burst var(--dur, .7s) cubic-bezier(.16, .62, .34, 1) var(--atraso, 0s) both;
}

.atl25-selo-flutuante__cai {
  display: block;
  animation: atl25-selo-cai var(--durq, 1.6s) cubic-bezier(.36, 0, .78, .84) var(--atraso, 0s) both;
}

/* A margem negativa — metade da peça — centra o retângulo no ponto de origem.
   Fica fora do `transform` de propósito: o keyframe do giro já ocupa essa
   propriedade. */
.atl25-selo-flutuante__peca {
  display: block;
  animation: atl25-selo-gira var(--durq, 1.6s) linear var(--atraso, 0s) both;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .atl25-selo-flutuante__confete { display: none; }

  .atl25-selo-flutuante__marca {
    transition: none;
  }

  .atl25-selo-flutuante:hover .atl25-selo-flutuante__marca,
  .atl25-selo-flutuante:focus-visible .atl25-selo-flutuante__marca {
    transform: none;
  }
}