/* BTN-05 · Botão metálico — reescrito do original do 21st.dev sem React e sem Tailwind.

   Três camadas que fazem o metal: a MOLDURA (degradê escuro→claro, 1,25 px de espessura), o
   MIOLO (degradê claro→escuro→claro, que é o reflexo) e o BOTÃO por cima. É a sobreposição dos
   três degradês em sentidos opostos que o olho lê como superfície curva.

   **Zero JavaScript.** O original carrega três estados em React (`isPressed`, `isHovered`,
   `isTouchDevice`) e um `useEffect` para detectar toque. Em CSS isso é `:active`, `:hover` e
   `@media (hover: hover)` — o navegador já sabe, e o `@media` acerta onde a detecção por
   `ontouchstart` erra (notebook com tela sensível tem as duas coisas).

   Seis variantes de cor, cada uma com os três degradês e a sombra do texto própria. */
.c-metal {
  --c-met-fora: linear-gradient(to bottom, #000, #A0A0A0);
  --c-met-dentro: linear-gradient(to bottom, #FAFAFA, #3E3E3E, #E5E5E5);
  --c-met-botao: linear-gradient(to bottom, #B9B9B9, #969696);
  --c-met-tinta: #fff;
  --c-met-sombra-tinta: 0 -1px 0 rgb(80 80 80);
  --c-met-raio: 6px;
  --c-met-altura: 44px;
  --c-met-curva: cubic-bezier(.1, .4, .2, 1);

  position: relative;
  display: inline-flex;
  padding: 1.25px;
  border-radius: var(--c-met-raio);
  background-image: var(--c-met-fora);
  transform: translateY(0) scale(1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
  transition: all .25s var(--c-met-curva);
  transform-origin: center;
}
/* o miolo: o reflexo. Fica entre a moldura e o botão. */
.c-metal::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--c-met-raio) - 1px);
  background-image: var(--c-met-dentro);
  transition: filter .25s var(--c-met-curva);
}
.c-metal__botao {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--c-met-altura);
  margin: 1px;
  padding: 0 24px;
  overflow: hidden;
  border: 0;
  border-radius: var(--c-met-raio);
  background-image: var(--c-met-botao);
  color: var(--c-met-tinta);
  text-shadow: var(--c-met-sombra-tinta);
  font: 600 14px/1 inherit;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transform: scale(1);
  transition: transform .25s var(--c-met-curva), filter .25s var(--c-met-curva);
}
.c-metal__botao::after {           /* o brilho que varre ao apertar */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  border-radius: var(--c-met-raio);
  background-image: linear-gradient(to right, transparent, #f5f5f5, transparent);
  transition: opacity .3s ease;
}

/* hover só onde hover existe de verdade — e não onde o JS do original "detectava" toque */
@media (hover: hover) {
  .c-metal:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
  .c-metal:hover::before { filter: brightness(1.05); }
  .c-metal:hover .c-metal__botao { filter: brightness(1.02); }
}
/* apertar: o conjunto AFUNDA 2,5 px e o botão encolhe — os dois juntos é que dão o clique físico */
.c-metal:active { transform: translateY(2.5px) scale(.99); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.c-metal:active::before { filter: none; }
.c-metal:active .c-metal__botao { transform: scale(.97); filter: none; }
.c-metal:active .c-metal__botao::after { opacity: .2; }
.c-metal__botao:focus-visible { outline: 2px solid #e8ad32; outline-offset: 3px; }
.c-metal:has(.c-metal__botao[disabled]) { opacity: .5; pointer-events: none; }

/* ---------- as seis variantes de cor ---------- */
.c-metal--primaria {
  --c-met-dentro: linear-gradient(to bottom, #e8ad32, #7a5510, #212121);
  --c-met-botao: linear-gradient(to bottom, #e8ad32, #b98a28);
  --c-met-tinta: #171717;
  --c-met-sombra-tinta: 0 -1px 0 rgb(232 173 50);
}
.c-metal--ganho {
  --c-met-fora: linear-gradient(to bottom, #005A43, #7CCB9B);
  --c-met-dentro: linear-gradient(to bottom, #E5F8F0, #00352F, #D1F0E6);
  --c-met-botao: linear-gradient(to bottom, #9ADBC8, #3E8F7C);
  --c-met-tinta: #FFF7F0;
  --c-met-sombra-tinta: 0 -1px 0 rgb(6 78 59);
}
.c-metal--perda {
  --c-met-fora: linear-gradient(to bottom, #5A0000, #FFAEB0);
  --c-met-dentro: linear-gradient(to bottom, #FFDEDE, #680002, #FFE9E9);
  --c-met-botao: linear-gradient(to bottom, #F08D8F, #A45253);
  --c-met-tinta: #FFF7F0;
  --c-met-sombra-tinta: 0 -1px 0 rgb(146 64 14);
}
.c-metal--ouro {
  --c-met-fora: linear-gradient(to bottom, #917100, #EAD98F);
  --c-met-dentro: linear-gradient(to bottom, #FFFDDD, #856807, #FFF1B3);
  --c-met-botao: linear-gradient(to bottom, #FFEBA1, #9B873F);
  --c-met-tinta: #FFFDE5;
  --c-met-sombra-tinta: 0 -1px 0 rgb(178 140 2);
}
.c-metal--bronze {
  --c-met-fora: linear-gradient(to bottom, #864813, #E9B486);
  --c-met-dentro: linear-gradient(to bottom, #EDC5A1, #5F2D01, #FFDEC1);
  --c-met-botao: linear-gradient(to bottom, #FFE3C9, #A36F3D);
  --c-met-tinta: #FFF7F0;
  --c-met-sombra-tinta: 0 -1px 0 rgb(124 45 18);
}

@media (prefers-reduced-motion: reduce) {
  .c-metal, .c-metal::before, .c-metal__botao, .c-metal__botao::after { transition: none; }
}