/* Cartao da secao de precos (Issue / Funding / Limits) da home.
   Opcao D, "camaleao": um cartao so, desenhado em CSS, que passa devagar por
   tres cores, uma derretendo na outra: preto, prata e azul.
   O cartao antigo da pagina herdada (m3sh-card.jpg e m3sh-card-mobile.jpg) fica
   escondido desde o primeiro instante: a mesma regra esta embutida no <head> do
   index.html, para valer antes de esta folha chegar. Os arquivos viraram imagens em
   branco; os originais estao em PROJETO PILOTO/imagens-guardadas.
   O revezamento de quatro cartoes anterior esta em m3sh-cartoes.*.antes-opcao-d. */

img[src$="/images/m3sh-card.jpg"],
img[src$="/images/m3sh-card-mobile.jpg"] { display: none !important; }

.m3-palco {
  --azul-a: #8a84ff;   --azul-b: #635bff;
  --prata-a: #c3c5cc;  --prata-b: #878992;
  --preto-a: #2a2a2f;  --preto-b: #0f0f12;
  --tinta-escura: #17161b; --tinta-clara: #f4f3f7;
  --borda: rgba(23, 22, 27, .10);
  --sombra: rgba(20, 18, 30, .26); --sombra-leve: rgba(20, 18, 30, .12);

  position: relative; z-index: 0; display: block;
  width: min(92vw, 430px); aspect-ratio: 1 / .9; margin: 6vw auto 0;
}

@media (min-width: 768px) {
  .m3-palco {
    position: absolute; margin: 0;
    left: 43vw; right: 5vw; width: auto; max-width: 820px;
    top: 50%; transform: translateY(-50%);
    aspect-ratio: 1 / .86;
  }
}

.m3-cartao {
  position: absolute; left: 16.5%; top: 50%; width: 67%; aspect-ratio: 1.586;
  margin-top: -21.1%;                 /* metade da altura: 67% / 1.586 / 2 */
  border-radius: 4.4% / 7%;
  background: linear-gradient(135deg, var(--preto-a), var(--preto-b)); color: var(--tinta-clara);
  overflow: hidden; transform: rotate(14deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .22),
    0 0 0 1px var(--borda),
    0 2px 3px var(--sombra-leve), 0 14px 22px -10px var(--sombra), 0 34px 50px -26px var(--sombra);
}
/* As tres cores sao camadas do mesmo cartao: o preto fica embaixo, a prata e o
   azul aparecem e somem por cima. Cada cor fica parada cerca de 2,5 s; a volta
   completa leva 12 s. Cada camada traz a sua bandeira. */
/* sombra no chao, embaixo do cartao, para dar volume */
.m3-palco::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 22%; width: 60%; top: 79%; height: 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 18, 30, .30) 0%, rgba(20, 18, 30, .12) 50%, rgba(20, 18, 30, 0) 100%);
  filter: blur(8px);
}
.m3-face { position: absolute; inset: 0; }
.m3-face.preto { background: linear-gradient(135deg, var(--preto-a), var(--preto-b)); }
/* Metal liso: so degrade, com uma faixa mais clara no meio. */
.m3-face.prata {
  background: linear-gradient(135deg, var(--prata-a) 0%, #b4b6be 34%, #cfd1d7 50%, #a3a5ae 68%, var(--prata-b) 100%);
  opacity: 0; animation: m3-prata 12s linear infinite;
}
.m3-face.azul {
  background: linear-gradient(135deg, var(--azul-a), var(--azul-b));
  opacity: 0; animation: m3-azul 12s linear infinite;
}
@keyframes m3-prata {
  0%, 21%   { opacity: 0; }
  33%, 66%  { opacity: 1; }
  67%, 100% { opacity: 0; }   /* some escondida atras do azul */
}
@keyframes m3-azul {
  0%, 54%   { opacity: 0; }
  66%, 88%  { opacity: 1; }
  100%      { opacity: 0; }
}
.m3-palco.parado .m3-face { animation-play-state: paused; }
/* luz do alto a esquerda, faixa de reflexo e base mais escura */
.m3-cartao::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(118deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .16) 47%, rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .14) 100%);
}
.m3-chip { z-index: 2; position: absolute; left: 9%; top: 31%; width: 14.5%; height: auto; display: block; filter: drop-shadow(0 1px 1px var(--sombra-leve)); }
.m3-aprox { z-index: 2; position: absolute; left: 26.5%; top: 33.5%; width: 7.5%; height: auto; display: block; opacity: .75; }
.m3-digitos {
  z-index: 2; position: absolute; left: 9%; bottom: 11%; line-height: 1; opacity: .9;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(10px, 1.4vw, 19px); letter-spacing: .12em;
}
.m3-bandeira { position: absolute; right: 7%; bottom: 9%; width: 21%; display: block; line-height: 0; }
.m3-bandeira svg { width: 100%; height: auto; display: block; }
.m3-bandeira.visa { width: 19%; bottom: 10.5%; }