/* ============================================================
   Camada de efeitos — some sozinha se o usuário pediu
   "menos animação" no sistema operacional.
   ============================================================ */

/* ---- brilho de borda por cor ---- */
.painel.glow-ouro:hover  { border-color: rgba(245,197,66,.55);
  box-shadow: 0 0 0 1px rgba(245,197,66,.12), 0 0 34px rgba(245,197,66,.16),
              0 12px 34px rgba(0,0,0,.5); }
.painel.glow-ciano:hover { border-color: rgba(34,211,238,.55);
  box-shadow: 0 0 0 1px rgba(34,211,238,.12), 0 0 34px rgba(34,211,238,.16),
              0 12px 34px rgba(0,0,0,.5); }
.painel.glow-verde:hover { border-color: rgba(52,211,153,.55);
  box-shadow: 0 0 0 1px rgba(52,211,153,.12), 0 0 34px rgba(52,211,153,.16),
              0 12px 34px rgba(0,0,0,.5); }
.painel.glow-roxo:hover  { border-color: rgba(167,139,250,.55);
  box-shadow: 0 0 0 1px rgba(167,139,250,.12), 0 0 34px rgba(167,139,250,.16),
              0 12px 34px rgba(0,0,0,.5); }

.painel:hover { transform: translateY(-3px); }

/* ---- borda que corre no card em destaque ---- */
.painel.destaque-vivo { position: relative; }
.painel.destaque-vivo::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--giro, 0deg),
              transparent 0turn, var(--ouro) .12turn, transparent .28turn,
              transparent .5turn, var(--ciano) .62turn, transparent .78turn, transparent 1turn);
  animation: girar 6s linear infinite;
}
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes girar { to { --giro: 1turn; } }

/* ---- texto com gradiente ---- */
.brilha { background: linear-gradient(100deg, #FFD86B 0%, #F5C542 30%, #FFF3C4 50%, #F5C542 70%, #FFD86B 100%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text;
  color: transparent; animation: varrer 5s linear infinite; }
@keyframes varrer { to { background-position: 220% center; } }

/* ---- aparecer ao rolar ---- */
.surge { opacity: 0; transform: translateY(22px);
         transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.surge.visivel { opacity: 1; transform: none; }

/* ---- faixa que corre com os selos de confiança ---- */
.faixa-selos { overflow: hidden; border-top: 1px solid var(--borda);
               border-bottom: 1px solid var(--borda);
               background: rgba(7,11,22,.55); padding: 13px 0;
               -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
               mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faixa-trilho { display: flex; gap: 42px; width: max-content;
                animation: correr 34s linear infinite; }
.faixa-selos:hover .faixa-trilho { animation-play-state: paused; }
.faixa-selos b { font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--pergaminho);
                 display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.faixa-selos b span { color: var(--apagado); font-weight: 400; letter-spacing: .04em; }
.faixa-selos b i { font-style: normal; color: var(--ouro); }
@keyframes correr { to { transform: translateX(-50%); } }

/* ---- etiqueta de desconto ---- */
.etiqueta-off { position: absolute; top: 14px; left: 14px; z-index: 2;
  background: linear-gradient(135deg, #34D399, #10B981); color: #06231A;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 11px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(52,211,153,.35); }

/* ---- pulso no botão principal ---- */
.botao.pulsa { position: relative; }
.botao.pulsa::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(245,197,66,.55); animation: pulso 2.6s ease-out infinite; }
@keyframes pulso { 70%, 100% { box-shadow: 0 0 0 16px rgba(245,197,66,0); } }

/* ---- aviso de compra recente ---- */
#recente { position: fixed; left: 18px; bottom: 18px; z-index: 55;
  width: min(310px, calc(100vw - 36px));
  background: linear-gradient(160deg, var(--painel-luz), var(--painel));
  border: 1px solid var(--borda-luz); border-radius: 13px; padding: 13px 15px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 26px rgba(52,211,153,.09);
  transform: translateY(140%); opacity: 0;
  transition: transform .45s cubic-bezier(.2,.9,.3,1.1), opacity .45s ease; }
#recente.aberto { transform: none; opacity: 1; }
#recente .cab { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
#recente .bola { width: 7px; height: 7px; border-radius: 50%; background: var(--musgo);
                 box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulso-v 2s infinite; }
@keyframes pulso-v { 70%,100% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } }
#recente .cab span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
                     text-transform: uppercase; color: var(--musgo); }
#recente .cab button { margin-left: auto; background: none; border: 0; cursor: pointer;
                       color: var(--apagado); font-size: 17px; line-height: 1; padding: 0 2px; }
#recente .quem { font-size: 13.5px; color: var(--pergaminho); }
#recente .oque { font-size: 12.5px; color: var(--apagado); margin-top: 2px; }
#recente .quando { font-family: var(--mono); font-size: 10.5px; color: var(--apagado);
                   margin-top: 7px; }

@media (prefers-reduced-motion: reduce) {
  .faixa-trilho, .brilha, .painel.destaque-vivo::before, .botao.pulsa::after { animation: none; }
  .surge { opacity: 1; transform: none; }
  .painel:hover { transform: none; }
}