/*
 * Os modelos de botao do formulario -- os vinte e tres, num arquivo so.
 *
 * **Eles moravam no `form.css`, e a previa do painel nao carrega esse
 * arquivo.** Por isso havia uma copia no `shell.css` do painel, com os
 * seletores re-alvejados para `.form-preview__submit`; e por isso os treze
 * modelos do lote 2 nasceram invisiveis la -- escolher "Varredura" mostrava o
 * botao preenchido, sem erro nenhum para avisar.
 *
 * Agora a folha e uma so e os dois lados a carregam: a pagina publica pelos
 * moldes, o painel pelo `index.html`. O seletor tambem e um so --
 * `[data-buttons="x"] .pf-submit` --, que ja casa nos dois, porque a previa
 * desenha o cartao com `data-buttons` e o botao dela leva `pf-submit` junto.
 *
 * O que a previa **nao** faz e o que depende de JavaScript: o brilho acende no
 * meio em vez de seguir o ponteiro, a cifra nao embaralha e o confete nao
 * estoura. E o botao parado, que e o que uma previa promete.
 *
 * As cores saem do tema. Nenhum modelo escreve matiz: o que cada um traz de
 * proprio e a forma -- sombra dura, corte enviesado, traco do texto, bloco
 * deslocado --, e a cor acompanha o formulario.
 */
/* Botao de enviar. */
[data-buttons="outline"] .pf-submit {
  color: var(--accent); background: none; border: 2px solid var(--accent);
}
[data-buttons="outline"] .pf-submit:hover:not(:disabled) {
  color: #fff; background: var(--accent);
}
[data-buttons="pill"] .pf-submit { border-radius: 999px; padding: 0.7rem 2rem; }
[data-buttons="soft"] .pf-submit {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--field));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
[data-buttons="soft"] .pf-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 28%, var(--field));
}

/* Brilho que segue o ponteiro. O modelo que o dono escolheu acendia um verde
   fixo; aqui o brilho e **a cor do formulario**, para o botao continuar sendo
   do tema que a pessoa escolheu.

   O circulo e um `::before` atras do texto (`isolation: isolate` prende o
   `z-index: -1` dentro do botao, senao ele cairia atras do cartao inteiro). O
   lugar dele vem de `--pf-x`/`--pf-y`, que o `form.js` escreve enquanto o
   ponteiro anda; sem JS -- ou em quem so usa teclado -- ficam os 50% do meio,
   e o botao continua acendendo igual. */
[data-buttons="glow"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--field));
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: none;
}
[data-buttons="glow"] .pf-submit::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: var(--pf-x, 50%); top: var(--pf-y, 50%);
  width: 14rem; height: 14rem; margin: -7rem 0 0 -7rem; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 85%, transparent) 10%, transparent 70%);
  opacity: 0; transform: scale(0.2);
  transition: opacity 0.25s ease, transform 0.4s ease-out;
}
[data-buttons="glow"] .pf-submit:hover:not(:disabled),
[data-buttons="glow"] .pf-submit:focus-visible {
  color: #fff;
  border-color: var(--accent);
}
[data-buttons="glow"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="glow"] .pf-submit:focus-visible::before { opacity: 0.55; transform: scale(1); }

/* Faisca. O segundo modelo: preenchimento em degrade, um halo na propria cor
   por fora e a faisca no fim do texto. O `::after` e so enfeite -- quem le com
   leitor de tela ja ouviu o texto do botao, e o simbolo nao acrescenta nada.
   A varredura de luz so corre com as animacoes ligadas, que e a chave do
   formulario. */
[data-buttons="spark"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; border: 0; border-radius: 12px;
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 92%, #fff),
    color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    0 10px 28px -12px color-mix(in srgb, var(--accent) 90%, transparent);
}
[data-buttons="spark"] .pf-submit::after { content: " \2726"; }
[data-buttons="spark"] .pf-submit:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
    0 14px 34px -12px color-mix(in srgb, var(--accent) 95%, transparent);
}
[data-buttons="spark"] .pf-submit:active:not(:disabled) { transform: scale(0.985); }
[data-animations="on"][data-buttons="spark"] .pf-submit::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(100deg, transparent 35%,
    color-mix(in srgb, #fff 45%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: pf-brilho 2.8s ease-in-out infinite;
}

/* Chapa metalica. O CSS desenha a chapa **parada** -- degrade escuro, borda
   clara e o texto com sombra --, e o `buttons.js` poe por cima dela uma tela
   WebGL que a faz correr. Sem WebGL, sem JavaScript ou com a animacao
   desligada, fica o que esta aqui, que ja e um botao de chapa. */
[data-buttons="metal"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; border: 0; border-radius: 999px; padding: 0.75rem 1.9rem;
  background-image: linear-gradient(180deg, #202020 0%, #000 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 9px 9px rgba(0, 0, 0, 0.12),
    0 2px 5px rgba(0, 0, 0, 0.15);
}
[data-buttons="metal"] .pf-submit:hover:not(:disabled) {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45),
    0 12px 6px rgba(0, 0, 0, 0.05),
    0 4px 4px rgba(0, 0, 0, 0.15);
}
[data-buttons="metal"] .pf-submit:active:not(:disabled) { transform: translateY(1px) scale(0.98); }

/* A casca do rotulo. Ela existe em todo botao -- e so um `<span>` -- porque
   dois modelos precisam mexer **so no texto**: o `flow` o desloca e o
   `encrypt` o reescreve letra a letra. */
.pf-submit__texto { position: relative; z-index: 1; }

/* Fluxo. A pilula vira retangulo, uma seta entra pela esquerda, a outra sai
   pela direita e um circulo escuro cresce do meio ate cobrir tudo. E so CSS:
   as duas setas sao os pseudo-elementos e o circulo e um degrade radial do
   proprio fundo, crescendo pelo `background-size`. */
[data-buttons="flow"] .pf-submit {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.7rem 2rem; border-radius: 100px;
  color: var(--text); background: transparent;
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 92%, #000) 0 50%, transparent 50%);
  background-repeat: no-repeat; background-position: center;
  background-size: 0 0;
  border: 1.5px solid color-mix(in srgb, var(--text) 35%, transparent);
  box-shadow: none;
  transition: color 0.4s ease, border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              border-radius 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              background-size 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
[data-buttons="flow"] .pf-submit::before,
[data-buttons="flow"] .pf-submit::after {
  content: "\2192"; position: absolute; z-index: 2;
  font-weight: 700; line-height: 1; color: inherit;
  transition: left 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              right 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.4s ease;
}
[data-buttons="flow"] .pf-submit::before { left: -25%; }
[data-buttons="flow"] .pf-submit::after { right: 1rem; }
[data-buttons="flow"] .pf-submit .pf-submit__texto {
  transform: translateX(-0.75rem);
  transition: transform 0.8s ease-out;
}
[data-buttons="flow"] .pf-submit:hover:not(:disabled),
[data-buttons="flow"] .pf-submit:focus-visible {
  color: #fff; border-color: transparent; border-radius: 12px;
  background-size: 440px 440px;
}
[data-buttons="flow"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="flow"] .pf-submit:focus-visible::before { left: 1rem; }
[data-buttons="flow"] .pf-submit:hover:not(:disabled)::after,
[data-buttons="flow"] .pf-submit:focus-visible::after { right: -25%; }
[data-buttons="flow"] .pf-submit:hover:not(:disabled) .pf-submit__texto,
[data-buttons="flow"] .pf-submit:focus-visible .pf-submit__texto {
  transform: translateX(0.75rem);
}
[data-buttons="flow"] .pf-submit:active:not(:disabled) { transform: scale(0.95); }

/* Cifra. O rotulo se embaralha ao passar o ponteiro e volta ao lugar letra a
   letra (quem faz isso e o `buttons.js`); o CSS poe o halo em degrade por
   fora, a letra monoespacada e a linha que varre o botao de cima a baixo.

   **A largura e travada no tamanho do rotulo** (`ch` do texto nao da conta de
   fonte proporcional, entao e `min-width` medido pelo proprio botao): sem
   isso o botao encolheria e cresceria a cada quadro do embaralhamento. */
[data-buttons="encrypt"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.08em;
  color: var(--text); border-radius: 16px;
  background: color-mix(in srgb, var(--field) 85%, #000);
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.3s ease, color 0.3s ease;
}
[data-buttons="encrypt"] .pf-submit::before {
  content: ''; position: absolute; z-index: -1; inset: -2px;
  border-radius: inherit; filter: blur(14px); opacity: 0.45;
  background: linear-gradient(45deg,
    color-mix(in srgb, var(--accent) 80%, transparent),
    color-mix(in srgb, var(--ok) 70%, transparent),
    color-mix(in srgb, var(--accent) 80%, transparent));
  background-size: 300% 300%;
  transition: opacity 0.4s ease;
}
[data-buttons="encrypt"] .pf-submit:hover:not(:disabled) {
  color: #fff;
  box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 30%, transparent),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-buttons="encrypt"] .pf-submit:hover:not(:disabled)::before { opacity: 0.85; }
/* A linha que varre. So corre com as animacoes ligadas, e so sob o ponteiro:
   uma luz passeando sozinha no fim de um formulario de denuncia seria enfeite
   demais. */
[data-animations="on"][data-buttons="encrypt"] .pf-submit:hover:not(:disabled)::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--accent) 95%, #fff), transparent);
  animation: pf-varredura 2s ease-in-out infinite;
}
/* **Os tres botoes usam o modelo escolhido** -- enviar, Proximo e Voltar.
   Eu tinha feito so o de enviar usa-lo; o dono pediu o contrario, e a escolha
   e dele: um formulario com um botao desenhado e dois padrao parece
   inacabado.

   O que os separa e `data-pf-role`. O Voltar continua sendo o irmao discreto:
   ele existe para quem errou, e nao pode disputar a atencao com o botao que
   leva adiante. Como o modelo pode ser qualquer um -- inclusive um com shader
   --, o recuo e feito por fora: opacidade e escala, que valem para os dez sem
   precisar de uma regra por modelo. */
[data-pf-role="back"] {
  opacity: 0.72; transform: scale(0.94); transform-origin: left center;
}
[data-pf-role="back"]:hover:not(:disabled) { opacity: 1; }
/* O botao simples (`solid` e os outros tres de CSS) nao tem desenho proprio
   para recuar, entao o Voltar dele vira contorno -- o mesmo gesto, com o peso
   certo. */
.pf-submit[data-pf-role="back"] {
  color: var(--muted); background: transparent;
  border: 1px solid var(--line);
}
.pf-submit[data-pf-role="back"]:hover:not(:disabled) {
  color: var(--text); border-color: var(--accent);
}


/* ======================================================================
   == modelos de botao, lote 2 (Uiverse) ==

   Dezesseis desenhos que o dono escolheu em 2026-10-04. Todos em CSS puro --
   nenhum precisa de estado --, todos valendo para os tres papeis do
   formulario, e todos com a cor saindo do tema: o que cada um traz de proprio
   e a FORMA (sombra dura, corte enviesado, traco do texto, bloco deslocado),
   nao a paleta.

   O rotulo mora sempre em `.pf-submit__texto`, como nos seis primeiros: ha
   modelos que o deslocam e modelos que desenham por cima dele.
   ====================================================================== */

/* **A tinta destes modelos.** Varios deles tem borda grossa e sombra dura, e
   as duas precisam ser escuras nos dois temas.

   A primeira versao as tirava de `var(--text)`: no tema claro deu certo por
   acidente, e no escuro -- onde `--text` e quase branco -- a sombra saiu
   CLARA, como se o botao estivesse iluminado por baixo. Derivar do fundo
   resolve nos dois: `--bg` escurecido e escuro no tema escuro e e um cinza
   forte no claro, que e exatamente o traco de tinta que o desenho pede. */
.pf-submit { --pf-tinta: color-mix(in srgb, var(--bg) 28%, #000); }

/* -- Lamina. O corte enviesado corre por tras do texto, da esquerda para a
      direita. O original e o botao do Valorant, com dois tracos horizontais
      que se afastam ao apertar -- e esse detalhe, e nao o vermelho, que faz o
      desenho. */
[data-buttons="blade"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; background: var(--pf-tinta);
  border: 0; border-radius: 2px; text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-buttons="blade"] .pf-submit::before {
  content: ''; position: absolute; z-index: -1; inset: 0 100% 0 -0.5rem;
  background: var(--accent); transform: skewX(-15deg);
  transition: inset 0.22s ease;
}
[data-buttons="blade"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="blade"] .pf-submit:focus-visible::before { inset: 0 -0.5rem 0 -0.5rem; }
[data-buttons="blade"] .pf-submit:active:not(:disabled) { transform: translateY(1px); }

/* -- Chapa polida. Pilula clara com luz por dentro; ao passar o mouse ela
      afunda. Dez sombras internas sao o desenho inteiro -- e por isso que ele
      nao vira componente. */
[data-buttons="plate"] .pf-submit {
  color: var(--pf-tinta);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--text) 14%, #fff),
    color-mix(in srgb, var(--text) 30%, #fff));
  border: 0; border-radius: 100em;
  box-shadow:
    0 0.05em 0.05em -0.01em rgba(0, 0, 0, 0.55),
    0.15em 0.3em 0.1em -0.01em rgba(0, 0, 0, 0.22),
    0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 0.9),
    -0.075em -0.25em 0.25em 0.1em inset rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s ease, transform 0.25s ease;
}
[data-buttons="plate"] .pf-submit:hover:not(:disabled) {
  box-shadow:
    0.1em 0.15em 0.05em 0 inset rgba(0, 0, 0, 0.5),
    0.25em 0.25em 0.2em 0 inset rgba(0, 0, 0, 0.35),
    0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    -0.075em -0.12em 0.2em 0.1em inset rgba(0, 0, 0, 0.25);
}
[data-buttons="plate"] .pf-submit:active:not(:disabled) { transform: scale(0.975); }

/* -- Neon. Contorno apagado que acende inteiro -- texto, borda e halo -- na
      cor do tema. */
[data-buttons="neon"] .pf-submit {
  color: color-mix(in srgb, var(--text) 55%, transparent);
  background: transparent; border: 1px solid color-mix(in srgb, var(--text) 45%, transparent);
  border-radius: 8px; text-transform: uppercase; letter-spacing: 0.05em;
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease,
    box-shadow 0.4s ease, text-shadow 0.4s ease;
}
[data-buttons="neon"] .pf-submit:hover:not(:disabled),
[data-buttons="neon"] .pf-submit:focus-visible {
  color: #fff; background: var(--accent); border-color: var(--accent);
  text-shadow: 0 0 5px #fff, 0 0 10px #fff;
  box-shadow:
    0 0 5px var(--accent), 0 0 20px var(--accent), 0 0 50px var(--accent);
}

/* -- Carimbo. Borda grossa e sombra dura que encurta ao apertar: o botao se
      move para dentro do proprio desenho. Tres dos modelos do dono eram este
      mesmo com cores diferentes -- aqui e um so, com a cor do tema. */
[data-buttons="stamp"] .pf-submit {
  color: #fff;
  background: var(--accent);
  border: 3px solid var(--pf-tinta);
  border-radius: 0.4em; font-weight: 900;
  box-shadow: 0.1em 0.1em 0 var(--pf-tinta);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
[data-buttons="stamp"] .pf-submit:hover:not(:disabled) {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em 0 var(--pf-tinta);
}
[data-buttons="stamp"] .pf-submit:active:not(:disabled) {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em 0 var(--pf-tinta);
}

/* -- Prisma. O mesmo carimbo, com o preenchimento em varias camadas de
      degrade misturadas -- o modelo mais colorido do lote, e o unico em que o
      proprio fundo e o assunto. */
[data-buttons="prism"] .pf-submit {
  color: #fff;
  background:
    radial-gradient(115% 107% at 40% 100%,
      color-mix(in srgb, var(--accent) 20%, #fff) 0%,
      color-mix(in srgb, var(--accent) 20%, #fff) 40%,
      color-mix(in srgb, var(--accent) 55%, var(--card)) calc(40% + 1px),
      color-mix(in srgb, var(--accent) 55%, var(--card)) 70%,
      color-mix(in srgb, var(--accent) 80%, #000) calc(70% + 2px),
      color-mix(in srgb, var(--accent) 80%, #000) 100%),
    linear-gradient(245deg, var(--card) 0%, var(--accent) 100%);
  background-blend-mode: overlay, normal;
  border: 3px solid var(--pf-tinta);
  border-radius: 0.4em; font-weight: 900;
  box-shadow: 0.1em 0.1em 0 var(--pf-tinta);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
[data-buttons="prism"] .pf-submit:hover:not(:disabled) {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em 0 var(--pf-tinta);
}
[data-buttons="prism"] .pf-submit:active:not(:disabled) {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em 0 var(--pf-tinta);
}

/* -- Tecla. Um bloco com altura: ele tem uma base embaixo, e apertar o botao
      afunda a tampa ate encostar nela. */
[data-buttons="key"] .pf-submit {
  position: relative;
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 22%, var(--field));
  border: 3px solid var(--pf-tinta);
  border-radius: 4px;
  box-shadow: 0 8px 0 0 var(--pf-tinta);
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
[data-buttons="key"] .pf-submit:active:not(:disabled) {
  transform: translateY(8px); box-shadow: 0 0 0 0 var(--pf-tinta);
}

/* -- Deslize. O botao se desloca para cima e para a esquerda, e a sombra dura
      aparece atras dele -- o gesto do Gumroad. */
[data-buttons="slide"] .pf-submit {
  color: #fff; background: var(--pf-tinta);
  border: 1px solid var(--pf-tinta); border-radius: 4px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease,
    box-shadow 0.2s ease;
}
[data-buttons="slide"] .pf-submit:hover:not(:disabled) {
  color: #fff;
  background: var(--accent);
  transform: translate(-0.25rem, -0.25rem);
  box-shadow: 0.25rem 0.25rem 0 var(--pf-tinta);
}
[data-buttons="slide"] .pf-submit:active:not(:disabled) {
  transform: translate(0, 0); box-shadow: none;
}

/* -- Contorno. O texto e so traco, e a cor entra por dentro dele da esquerda
      para a direita, com um cursor na ponta.

      O efeito e feito com `background-clip: text` sobre o proprio rotulo: o
      `::after` do `.pf-submit__texto` repete o texto por `attr(data-texto)`,
      que o aplicativo escreve. Sem esse atributo fica o traco parado, que e um
      botao legivel -- a regra de que todo modelo e botao antes de ser efeito. */
[data-buttons="stroke"] .pf-submit {
  background: transparent; border: 0; padding: 0.4rem 0.2rem;
  color: transparent; font-weight: 800; font-size: 1.35rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--text) 60%, transparent);
}
[data-buttons="stroke"] .pf-submit .pf-submit__texto { position: relative; display: inline-block; }
[data-buttons="stroke"] .pf-submit .pf-submit__texto::after {
  content: attr(data-texto); position: absolute; inset: 0;
  width: 0; overflow: hidden; white-space: nowrap;
  color: var(--accent);
  -webkit-text-stroke: 1px var(--accent);
  border-right: 4px solid var(--accent);
  transition: width 0.5s ease;
}
[data-buttons="stroke"] .pf-submit:hover:not(:disabled) .pf-submit__texto::after,
[data-buttons="stroke"] .pf-submit:focus-visible .pf-submit__texto::after { width: 100%; }

/* -- Etiqueta. Um bloco escrito por cima, deslocado; ao passar o mouse ele
      encaixa no lugar. Como o rotulo e repetido por `attr`, o teto de largura
      vem do proprio texto. */
[data-buttons="label"] .pf-submit {
  position: relative; background: var(--field);
  color: transparent; border: 2px solid var(--pf-tinta);
  border-radius: 2px; letter-spacing: 0.04em;
}
[data-buttons="label"] .pf-submit .pf-submit__texto::before {
  content: attr(data-texto); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform: translate(7%, -14%);
  background: var(--pf-tinta);
  /* A tinta e sempre escura, entao o texto em cima dela e sempre claro. A
     primeira versao usava `var(--card)`, que no tema claro e quase branco e
     deu certo -- e no escuro e quase preto: texto preto sobre bloco preto,
     contraste 1,1. A cor do bloco nao pode decidir a cor do texto por acaso. */
  color: color-mix(in srgb, var(--bg) 15%, #fff);
  font-weight: 700;
  transition: transform 0.15s ease-in-out;
}
[data-buttons="label"] .pf-submit:hover:not(:disabled) .pf-submit__texto::before,
[data-buttons="label"] .pf-submit:focus-visible .pf-submit__texto::before {
  transform: translate(0, 0);
}

/* -- Varredura. Dois triangulos entram de cima e de baixo e se encontram no
      meio, cobrindo o botao. */
[data-buttons="wipe"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--text); background: var(--field);
  border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em;
  transition: color 0.4s ease;
}
[data-buttons="wipe"] .pf-submit::before,
[data-buttons="wipe"] .pf-submit::after {
  content: ''; position: absolute; z-index: -1; inset: 50%;
  width: 100%; height: 100%; background: var(--accent);
  transition: transform 0.5s ease-out;
}
[data-buttons="wipe"] .pf-submit::before {
  transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
}
[data-buttons="wipe"] .pf-submit::after {
  transform: skew(90deg) translate(-50%, -50%);
}
[data-buttons="wipe"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="wipe"] .pf-submit:focus-visible::before {
  transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
}
[data-buttons="wipe"] .pf-submit:hover:not(:disabled)::after,
[data-buttons="wipe"] .pf-submit:focus-visible::after {
  transform: skew(45deg) translate(-50%, -50%);
}
[data-buttons="wipe"] .pf-submit:hover:not(:disabled),
[data-buttons="wipe"] .pf-submit:focus-visible { color: #fff; }

/* -- Subida. Um preenchimento sobe de baixo para cima e o texto troca de cor
      quando ele chega. */
[data-buttons="rise"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--text); background: transparent;
  border: 1px solid var(--text); border-radius: 0;
  transition: color 0.4s ease;
}
[data-buttons="rise"] .pf-submit::before {
  content: ''; position: absolute; z-index: -1; left: 0; bottom: 0;
  width: 100%; height: 0; background: var(--accent);
  transition: height 0.4s ease;
}
[data-buttons="rise"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="rise"] .pf-submit:focus-visible::before { height: 100%; }
[data-buttons="rise"] .pf-submit:hover:not(:disabled),
[data-buttons="rise"] .pf-submit:focus-visible { color: #fff; }

/* -- Relevo. Sombra dura solida que some ao apertar, e o botao cai dentro
      dela. O mais sobrio do lote. */
[data-buttons="emboss"] .pf-submit {
  color: var(--text); background: var(--card);
  border: 2px solid var(--pf-tinta);
  border-radius: 5px; font-weight: 600;
  box-shadow: 4px 4px 0 var(--pf-tinta);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
[data-buttons="emboss"] .pf-submit:active:not(:disabled) {
  box-shadow: 0 0 0 var(--pf-tinta);
  transform: translate(3px, 3px);
}

/* -- Ceu. Um ceu escuro com meteoros aparece por tras do texto ao passar o
      mouse. E o unico do lote que anima sozinho, entao ele respeita a chave
      "Animar a pagina" -- com ela desligada o ceu aparece parado. */
[data-buttons="sky"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--text); background: transparent;
  border: 0; outline: 1px solid color-mix(in srgb, var(--accent) 70%, var(--line));
  border-radius: 0; font-weight: 600; letter-spacing: 0.08em;
  text-shadow:
    1px 0 color-mix(in srgb, var(--accent) 70%, var(--line)),
    0 1px color-mix(in srgb, var(--accent) 70%, var(--line)),
    -1px 0 color-mix(in srgb, var(--accent) 70%, var(--line)),
    0 -1px color-mix(in srgb, var(--accent) 70%, var(--line));
}
[data-buttons="sky"] .pf-submit::before {
  content: ''; position: absolute; z-index: -1; inset: 0; opacity: 0;
  background:
    repeating-linear-gradient(-30deg,
      transparent 0 14px,
      color-mix(in srgb, #fff 70%, transparent) 14px 16px,
      transparent 16px 44px),
    linear-gradient(160deg,
      color-mix(in srgb, var(--card) 70%, #000),
      color-mix(in srgb, var(--accent) 30%, #000));
  background-size: 200% 200%, auto;
  transition: opacity 0.5s ease-in-out;
}
[data-buttons="sky"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="sky"] .pf-submit:focus-visible::before { opacity: 1; }
[data-animations="on"][data-buttons="sky"] .pf-submit:hover:not(:disabled)::before {
  animation: pf-botao-meteoro 2.4s linear infinite;
}
@keyframes pf-botao-meteoro {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 200px, 0 0; }
}


/* -- Bola. Uma bola incha e varre o botao; o rotulo sai pela direita e o mesmo
      rotulo entra pela esquerda, atrasado, como se tivesse dado a volta.

      O original e o botao "PLAY / NOW!" do Uiverse, com o personagem de um
      jogo. A arte de terceiro nao vem junto -- e o movimento que faz o
      desenho, e nao de quem e a figura --, e o rotulo entra de volta em vez de
      virar outra palavra, porque um botao de formulario tem um rotulo so.

      Os dois tempos sao o que o original tem de melhor: a bola comeca a inchar
      na hora, e o rotulo so troca 300ms depois -- e esse atraso que faz
      parecer que ela empurrou o texto para fora. */
[data-buttons="ball"] .pf-submit {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  color: #fff; background: var(--accent);
  border: 2px solid var(--pf-tinta); border-radius: 50px;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  text-shadow: 2px 2px color-mix(in srgb, var(--pf-tinta) 55%, transparent);
  transition: transform 0.5s ease;
}
/* A bola. `flex: 0 0 auto` para ela nao encolher quando o rotulo e longo. */
[data-buttons="ball"] .pf-submit::before {
  content: ''; flex: 0 0 auto; z-index: 2;
  width: 1.05em; height: 1.05em; border-radius: 50%;
  background: var(--pf-tinta);
  transition: transform 0.5s ease;
}
[data-buttons="ball"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="ball"] .pf-submit:focus-visible::before {
  transform: scale(3) translateX(50%);
}
/* O rotulo sai. */
[data-buttons="ball"] .pf-submit .pf-submit__texto {
  z-index: 2;
  transition: transform 0.5s ease; transition-delay: 300ms;
}
[data-buttons="ball"] .pf-submit:hover:not(:disabled) .pf-submit__texto,
[data-buttons="ball"] .pf-submit:focus-visible .pf-submit__texto {
  transform: translateX(200%);
}
/* O rotulo que entra, esperando fora do botao a esquerda.
   **Ele e `::after` do BOTAO, e nao do rotulo que sai.** A primeira versao o
   pendurou no proprio texto, e um `transform` no pai arrasta o filho junto:
   ele saia para a direita abracado ao outro e nunca aparecia. No original ele
   e irmao, e e isso que faz os dois se cruzarem. */
[data-buttons="ball"] .pf-submit::after {
  content: attr(data-texto);
  position: absolute; left: 0; top: 50%; z-index: 2;
  transform: translate(-150%, -50%);
  white-space: nowrap;
  transition: transform 0.5s ease; transition-delay: 300ms;
}
[data-buttons="ball"] .pf-submit:hover:not(:disabled)::after,
[data-buttons="ball"] .pf-submit:focus-visible::after {
  transform: translate(1.1rem, -50%);
}
[data-buttons="ball"] .pf-submit:active:not(:disabled) { transform: scale(0.9); }

/* == modelos de botao, lote 3 (Uiverse, rabisco) == */
/* -- Rabisco, Rabisco pop e Lâmpada ------------------------------------- */
/* Pedido do dono em 2026-10-07, a partir de modelos do Uiverse.io (autor
   mamyapro123, licença MIT), reescritos para o `.pf-submit`. As cores são
   as da paleta "doodle" e não as do tema: amarelo, tinta e pastel são o
   desenho, e um rabisco na cor do tema seria outro botão. Os três combinam
   com qualquer tema, e com o Caderno em especial.

   O que se move continuamente (arco-íris, balanço, estrelas, halo) só roda
   com "Animar a página" ligado; desligado, `form.css` já para tudo. */

/* Rabisco: o adesivo de caderno. Borda de caneta irregular, uma linha
   tracejada por dentro e a sombra sólida que o botão "afunda" no clique. */
[data-buttons="doodle"] .pf-submit {
  position: relative;
  padding: 0.75rem 2.4rem;
  color: #1e1e24;
  background: #ffde59;
  border: 4px solid #1e1e24;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 6px 8px 0 #1e1e24;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.6);
  background-size: 300% 300%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
[data-buttons="doodle"] .pf-submit::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px dashed rgba(30, 30, 36, 0.35);
  border-radius: inherit;
  pointer-events: none;
}
[data-buttons="doodle"] .pf-submit:hover:not(:disabled),
[data-buttons="doodle"] .pf-submit:focus-visible {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 8px 12px 0 #1e1e24;
  background-image: linear-gradient(85deg, #ffde59, #fec195, #ffb6c1, #dcd0ff, #8ef0ce);
  filter: none;
}
[data-animations="on"][data-buttons="doodle"] .pf-submit:hover:not(:disabled),
[data-animations="on"][data-buttons="doodle"] .pf-submit:focus-visible {
  animation: doodle-vento 3s ease-in-out infinite;
}
[data-buttons="doodle"] .pf-submit:active:not(:disabled) {
  transform: translate(4px, 6px) rotate(1deg);
  box-shadow: 2px 2px 0 #1e1e24;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
[data-buttons="doodle"] .pf-submit:focus-visible { outline: 4px dashed #8ef0ce; outline-offset: 8px; }
@keyframes doodle-vento {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Rabisco pop: amarelo-limão com três sombras em camadas (rosa, azul, tinta).
   No hover balança, solta uma estrela de cada lado e o texto pula. */
[data-buttons="doodle-pop"] .pf-submit {
  position: relative;
  padding: 0.8rem 2.6rem;
  color: #111111;
  background: #ffea00;
  border: 3px solid #111111;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 4px 4px 0 #ff007f, 8px 8px 0 #00d4ff, 12px 12px 0 #111111;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 2px 3px 0 #ff007f;
  margin: 0 12px 12px 0;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}
[data-buttons="doodle-pop"] .pf-submit::before,
[data-buttons="doodle-pop"] .pf-submit::after {
  content: "\2605";
  position: absolute;
  font-size: 1.3rem;
  -webkit-text-stroke: 1px #111;
  text-shadow: none;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
[data-buttons="doodle-pop"] .pf-submit::before { top: -0.4rem; left: -1.4rem; color: #ff007f; }
[data-buttons="doodle-pop"] .pf-submit::after { bottom: -0.2rem; right: -1.5rem; color: #00d4ff; }
[data-buttons="doodle-pop"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="doodle-pop"] .pf-submit:hover:not(:disabled)::after,
[data-buttons="doodle-pop"] .pf-submit:focus-visible::before,
[data-buttons="doodle-pop"] .pf-submit:focus-visible::after { opacity: 1; }
[data-buttons="doodle-pop"] .pf-submit:hover:not(:disabled),
[data-buttons="doodle-pop"] .pf-submit:focus-visible {
  color: #ffffff;
  text-shadow: -1px -1px 0 #111, 1px -1px 0 #111, -1px 1px 0 #111, 1px 1px 0 #111, 3px 3px 0 #111;
  transform: rotate(-2deg) scale(1.02);
  box-shadow: 4px 4px 0 #ff007f, 8px 8px 0 #00d4ff, 12px 12px 0 #111111;
  filter: none;
}
[data-animations="on"][data-buttons="doodle-pop"] .pf-submit:hover:not(:disabled),
[data-animations="on"][data-buttons="doodle-pop"] .pf-submit:focus-visible {
  animation: doodle-bamboleio 0.4s ease-in-out infinite alternate;
}
[data-animations="on"][data-buttons="doodle-pop"] .pf-submit:hover:not(:disabled)::before {
  animation: doodle-estrela 1s ease-in-out infinite alternate;
}
[data-animations="on"][data-buttons="doodle-pop"] .pf-submit:hover:not(:disabled)::after {
  animation: doodle-estrela 1s ease-in-out infinite alternate-reverse 0.3s;
}
[data-animations="on"][data-buttons="doodle-pop"] .pf-submit:hover:not(:disabled) .pf-submit__texto {
  display: inline-block;
  animation: doodle-pulo 0.9s ease-in-out infinite alternate;
}
[data-buttons="doodle-pop"] .pf-submit:active:not(:disabled) {
  transform: scale(0.94) translateY(5px);
  box-shadow: 2px 2px 0 #ff007f, 4px 4px 0 #00d4ff, 6px 6px 0 #111111;
}
[data-buttons="doodle-pop"] .pf-submit:focus-visible { outline: 4px dashed #00d4ff; outline-offset: 8px; }
@keyframes doodle-bamboleio {
  from { transform: rotate(-2deg) scale(1.02); }
  to { transform: rotate(2deg) scale(1.02); }
}
@keyframes doodle-estrela {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-8px) rotate(-20deg); }
}
@keyframes doodle-pulo {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(-3px) rotate(3deg); }
}

/* Lâmpada: o botão é o bulbo, e o soquete listrado sai pela esquerda (o
   `::before`). Parada, a lâmpada está apagada; no hover ou no foco ela
   acende -- bulbo amarelo, soquete menta, um halo tracejado em volta (o
   `::after`) e um pequeno filamento antes do texto. No clique ela afunda. */
[data-buttons="bulb"] .pf-submit {
  position: relative;
  margin-left: 3.1rem;
  padding: 0.75rem 2.2rem 0.75rem 1.2rem;
  color: #1e1e24;
  background: #fdfbf7;
  border: 4px solid #1e1e24;
  border-radius: 10px 50px 50px 10px / 10px 55px 45px 10px;
  box-shadow: 6px 6px 0 #1e1e24;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}
[data-buttons="bulb"] .pf-submit::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  right: 100%;
  width: 3.1rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(30, 30, 36, 0.15) 9px 13px),
    #dcd0ff;
  border: 4px solid #1e1e24;
  border-right: 0;
  border-radius: 40% 10% 10% 40% / 50% 10% 10% 50%;
  box-shadow: inset -4px 0 0 rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
}
[data-buttons="bulb"] .pf-submit::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 4px dashed #ff7e82;
  border-radius: 15px 60px 70px 15px / 20px 75px 65px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
[data-buttons="bulb"] .pf-submit .pf-submit__texto::before {
  content: "\2307 ";
  color: #1e1e24;
  opacity: 0.4;
  transition: color 0.3s, opacity 0.3s;
}
[data-buttons="bulb"] .pf-submit:hover:not(:disabled),
[data-buttons="bulb"] .pf-submit:focus-visible {
  background: #ffde59;
  transform: translateX(4px) translateY(-2px);
  box-shadow: 8px 10px 0 #1e1e24;
  outline: none;
  filter: none;
}
[data-buttons="bulb"] .pf-submit:hover:not(:disabled)::before,
[data-buttons="bulb"] .pf-submit:focus-visible::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(30, 30, 36, 0.15) 9px 13px),
    #8ef0ce;
}
[data-buttons="bulb"] .pf-submit:hover:not(:disabled)::after,
[data-buttons="bulb"] .pf-submit:focus-visible::after { opacity: 1; }
[data-buttons="bulb"] .pf-submit:hover:not(:disabled) .pf-submit__texto::before,
[data-buttons="bulb"] .pf-submit:focus-visible .pf-submit__texto::before {
  color: #ff0a54;
  opacity: 1;
}
[data-animations="on"][data-buttons="bulb"] .pf-submit:hover:not(:disabled)::after,
[data-animations="on"][data-buttons="bulb"] .pf-submit:focus-visible::after {
  animation: doodle-luz 3s linear infinite;
}
[data-buttons="bulb"] .pf-submit:active:not(:disabled) {
  transform: scale(0.95) rotate(2deg);
}
@keyframes doodle-luz {
  0% { transform: scale(1) rotate(0deg); }
  15% { transform: scale(1.03) rotate(1.5deg); }
  30% { transform: scale(1) rotate(0deg); }
  60% { transform: scale(1.04) rotate(-1.5deg); opacity: 0.7; }
  100% { transform: scale(1) rotate(0deg); }
}