/* ==========================================================================
   AXIONMESK — CARTÃO PREMIUM v2 (impacto visual)
   Cartão maior, relevo metálico, brilho dinâmico e reflexo 3D real.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) PALCO — luz e profundidade
   -------------------------------------------------------------------------- */
.bnx-stage {
  position: relative;
  display: flex !important;
  justify-content: center;
  padding: 14px 0 26px !important;
  perspective: 1200px;
}

/* Halo luminoso atrás do cartão */
.bnx-stage::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(56,107,255, .22) 0%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: haloPulse 5s ease-in-out infinite;
}

@keyframes haloPulse {
  0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .85; transform: translate(-50%, -50%) scale(1.06); }
}

/* --------------------------------------------------------------------------
   2) CARTÃO — maior, com relevo e borda luminosa
   -------------------------------------------------------------------------- */
.bnx-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px !important;
  aspect-ratio: 1.586 / 1 !important;
  max-height: none !important;
  min-height: 232px;
  border-radius: 22px !important;
  padding: 20px 22px !important;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(0,0,0,.5) inset,
    0 3px 6px rgba(0,0,0,.4),
    0 24px 52px rgba(0,0,0,.62);
}

/* Borda prismática (contorno que reage ao ângulo) */
.bnx-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.5) 0%,
    rgba(255,255,255,.06) 22%,
    rgba(56,107,255,.28) 50%,
    rgba(255,255,255,.05) 74%,
    rgba(255,255,255,.38) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  opacity: .95;
}

/* Textura guilhoché mais nítida */
.bnx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(58deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px),
    radial-gradient(ellipse at 22% 10%, rgba(255,255,255,.16), transparent 48%);
}

.bnx-card > *:not(.bnx-sheen) { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   3) SHEEN — brilho diagonal percorrendo
   -------------------------------------------------------------------------- */
.bnx-sheen {
  position: absolute;
  top: -60%;
  left: -150%;
  width: 55%;
  height: 230%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,.06) 34%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,.06) 66%,
    transparent 100%);
  transform: rotate(12deg);
  animation: sheenV2 7s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes sheenV2 {
  0%        { left: -150%; opacity: 0; }
  10%       { opacity: 1; }
  52%       { left: 150%; opacity: 1; }
  60%, 100% { left: 150%; opacity: 0; }
}

/* --------------------------------------------------------------------------
   4) REFLEXO QUE SEGUE O MOUSE (usado pelo cartao-3d.js)
   -------------------------------------------------------------------------- */
.bnx-card .bnx-glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.08) 22%,
    transparent 52%
  );
  mix-blend-mode: soft-light;
}
.bnx-card:hover .bnx-glare { opacity: 1; }

/* --------------------------------------------------------------------------
   5) CHIP — mais metálico
   -------------------------------------------------------------------------- */
.bnx-card__chip {
  width: 46px !important;
  height: 34px !important;
  border-radius: 7px !important;
  background: linear-gradient(150deg,
    #FFF6CE 0%, #EDD07A 16%, #D9B450 38%, #A87E1C 62%, #E5CB83 84%, #FFF3C0 100%) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -1px 3px rgba(0,0,0,.5),
    0 2px 7px rgba(0,0,0,.45) !important;
}

/* --------------------------------------------------------------------------
   6) HOLOGRAMA — selo maior e mais vivo
   -------------------------------------------------------------------------- */
.bnx-holo {
  width: 32px !important;
  height: 32px !important;
  box-shadow:
    inset 0 0 9px rgba(255,255,255,.8),
    inset 0 0 2px rgba(0,0,0,.4),
    0 2px 5px rgba(0,0,0,.45) !important;
}

/* --------------------------------------------------------------------------
   7) TIPOGRAFIA — números maiores
   -------------------------------------------------------------------------- */
.bnx-card__num {
  font-size: clamp(17px, 4.8vw, 22px) !important;
  letter-spacing: .07em !important;
  margin-top: 16px !important;
  font-weight: 700 !important;
}

.bnx-card__logo { font-size: 16px !important; }
.bnx-card__logo img { width: 26px !important; height: 26px !important; }

.bnx-card__brand { font-size: 11px !important; }
.bnx-card__brand small { font-size: 6.5px !important; }

.bnx-card__label { font-size: 7.5px !important; }
.bnx-card__holder,
.bnx-card__exp { font-size: 11.5px !important; }

/* --------------------------------------------------------------------------
   8) INTERAÇÃO — elevação e escala
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .bnx-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow:
      0 1px 0 rgba(255,255,255,.28) inset,
      0 4px 10px rgba(0,0,0,.42),
      0 32px 68px rgba(0,0,0,.68);
  }
}

.bnx-card:active {
  transform: scale(.985);
}

/* --------------------------------------------------------------------------
   9) MOBILE — grande, mas proporcional à tela
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .bnx-stage { padding: 10px 0 22px !important; }
  .bnx-stage::before { height: 100px; filter: blur(22px); }

  .bnx-card {
    max-width: 100% !important;
    aspect-ratio: 1.586 / 1 !important;
    min-height: 0 !important;
    border-radius: 20px !important;
    padding: 18px 19px !important;
  }

  .bnx-card__num { font-size: 16px !important; letter-spacing: .055em !important; margin-top: 14px !important; }
  .bnx-card__chip { width: 42px !important; height: 31px !important; }
  .bnx-holo { width: 28px !important; height: 28px !important; }
  .bnx-card__logo { font-size: 15px !important; }
  .bnx-card__logo img { width: 24px !important; height: 24px !important; }
  .bnx-card__mid { margin-top: 12px !important; }
  .bnx-card__row { padding-top: 14px !important; gap: 20px !important; }
}

@media (max-width: 380px) {
  .bnx-card { padding: 15px 16px !important; }
  .bnx-card__num { font-size: 14.5px !important; }
}

/* --------------------------------------------------------------------------
   10) ACESSIBILIDADE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bnx-sheen,
  .bnx-stage::before { animation: none !important; }
  .bnx-card { transition: none !important; }
  .bnx-card:hover { transform: none !important; }
}