/*!
 * Adaptado de React Bits (https://reactbits.dev) – BorderGlow – licença MIT + Commons Clause
 *
 * Borda com brilho que segue o cursor (par de /static/js/fx/border-glow.js).
 * O JS adiciona .border-glow-card, o <span class="edge-light" aria-hidden="true"> e o wrapper
 * .border-glow-inner, e atualiza --edge-proximity (0–100) e --cursor-angle no elemento.
 *
 * Variantes prontas (combináveis com --button):
 *   .border-glow--brand   fundo navy #0b1d2f, mesh azul/ciano/dourado, brilho ciano
 *   .border-glow--light   cartão claro em fundo claro (texto navy, brilho azul, contraste AA)
 *   .border-glow--button  botões/links: pílula, padding próprio, altura mínima 44px, sem overflow:auto
 *
 * Camadas (ordem de pintura igual à do original): ::before = borda mesh-gradient · ::after = preenchimento
 * soft-light perto das bordas · .edge-light = halo externo (box-shadows) · conteúdo por cima.
 * Se o elemento já tem ::before/::after próprios, o JS usa <span> no lugar (.border-glow-card--spans).
 *
 * Padrões com especificidade zero (:where) – o CSS do site e as variantes sobrescrevem sem !important.
 */

/* ------------------------------------------------------------------ padrões */
:where(.border-glow-card) {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --glow-padding: 40px;
  --cone-spread: 25;
  --fill-opacity: 0.5;
  /* sem valor → o JS aproveita o fundo/raio do próprio elemento (ou usa o padrão do original) */
  --card-bg: initial;
  --border-radius: initial;

  /* brilho: HSL + intensidade → opacidades 100/60/50/40/30/20/10 × intensidade (máx. 100%) */
  --glow-hsl: 40deg 80% 80%;
  --glow-intensity: 1;
  --glow-color: hsl(var(--glow-hsl) / min(100%, calc(100% * var(--glow-intensity))));
  --glow-color-60: hsl(var(--glow-hsl) / min(100%, calc(60% * var(--glow-intensity))));
  --glow-color-50: hsl(var(--glow-hsl) / min(100%, calc(50% * var(--glow-intensity))));
  --glow-color-40: hsl(var(--glow-hsl) / min(100%, calc(40% * var(--glow-intensity))));
  --glow-color-30: hsl(var(--glow-hsl) / min(100%, calc(30% * var(--glow-intensity))));
  --glow-color-20: hsl(var(--glow-hsl) / min(100%, calc(20% * var(--glow-intensity))));
  --glow-color-10: hsl(var(--glow-hsl) / min(100%, calc(10% * var(--glow-intensity))));

  /* mesh-gradient: 3 cores, mesmo mapa do original (COLOR_MAP = 0,1,2,0,1,2,1) */
  --mesh-color-1: #c084fc;
  --mesh-color-2: #f472b6;
  --mesh-color-3: #38bdf8;
  --gradient-one: radial-gradient(at 80% 55%, var(--mesh-color-1) 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, var(--mesh-color-2) 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, var(--mesh-color-3) 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, var(--mesh-color-1) 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, var(--mesh-color-2) 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, var(--mesh-color-3) 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, var(--mesh-color-2) 0px, transparent 50%);
  --gradient-base: linear-gradient(var(--mesh-color-1) 0 100%);

  /* estado: 0 = apagado, 1 = aceso (hover, toque, varredura, foco por teclado) */
  --glow-on: 0;
  --glow-fade: 0.75s ease-in-out;
  --border-glow-focus: #1b8cc8; /* ≥ 3:1 em branco e em navy */

  border-radius: var(--border-radius, 28px);
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120F17);
  color: #f4f6f8;
  overflow: visible;
  transform: translate3d(0, 0, 0.01px);
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

/* superfície clara (detectada pela luminância do fundo, como no original) */
:where(.border-glow-card--light) {
  color: inherit;
  border-color: rgb(24 24 27 / 12%);
  box-shadow:
    rgb(24 24 27 / 4%) 0 1px 2px,
    rgb(24 24 27 / 5%) 0 8px 24px;
}

/* títulos herdam a cor clara em superfícies escuras (o site pinta h1–h4 com --ink, escuro) */
:where(.border-glow-card:not(.border-glow-card--light)) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* ------------------------------------------------------------------ estrutura */
.border-glow-card { isolation: isolate; }
.border-glow-card.border-glow-card--pos { position: relative; }
.border-glow-card.border-glow-card--inline { display: inline-block; }

/* ------------------------------------------------------------------ aceso / apagado */
.border-glow-card:hover,
.border-glow-card.sweep-active,
.border-glow-card.is-glow-active {
  --glow-on: 1;
  --glow-fade: 0.25s ease-out;
}

/* toque: ignora o :hover "grudado" dos celulares; acende só enquanto o dedo está pressionado */
.border-glow-card.is-touch:not(.is-glow-active):not(.sweep-active) {
  --glow-on: 0;
  --glow-fade: 0.75s ease-in-out;
}

/* teclado: borda acesa no ângulo padrão (vence os valores do ponteiro gravados no style) */
.border-glow-card:focus-visible {
  --glow-on: 1 !important;
  --glow-fade: 0.25s ease-out !important;
  --edge-proximity: 100 !important;
  --cursor-angle: 45deg !important;
  border-radius: var(--border-radius, 28px); /* o :focus-visible global do site troca o raio */
  outline: 3px solid var(--border-glow-focus);
  outline-offset: 3px;
}
/* foco num link/botão dentro do cartão (regra separada: navegadores sem :has ignoram só ela) */
.border-glow-card:has(:focus-visible) {
  --glow-on: 1 !important;
  --glow-fade: 0.25s ease-out !important;
  --edge-proximity: 100 !important;
  --cursor-angle: 45deg !important;
}

/* ------------------------------------------------------------------ camadas */
.border-glow-card:not(.border-glow-card--spans)::before,
.border-glow-card:not(.border-glow-card--spans)::after,
.border-glow-card > .border-glow-mesh,
.border-glow-card > .border-glow-fill,
.border-glow-card > .edge-light {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -2;
  transition: opacity var(--glow-fade);
}

/* borda colorida em mesh-gradient */
.border-glow-card:not(.border-glow-card--spans)::before,
.border-glow-card > .border-glow-mesh {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;

  opacity: calc(var(--glow-on) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* fundo com imagem/gradiente do próprio elemento (ex.: .btn-primary): em vez de cobrir o miolo com
   --card-bg, a camada é recortada por máscara só no anel da borda (mesmo resultado visual) */
.border-glow-card.border-glow-card--ring:not(.border-glow-card--spans)::before,
.border-glow-card.border-glow-card--ring > .border-glow-mesh {
  background:
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    ),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  -webkit-mask-clip: border-box, padding-box, border-box;
  -webkit-mask-composite: source-in, xor;
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    ),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  mask-clip: border-box, padding-box, border-box;
  mask-composite: intersect, exclude;
}

/* preenchimento em mesh-gradient perto das bordas */
.border-glow-card:not(.border-glow-card--spans)::after,
.border-glow-card > .border-glow-fill {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box,
    var(--gradient-two) padding-box,
    var(--gradient-three) padding-box,
    var(--gradient-four) padding-box,
    var(--gradient-five) padding-box,
    var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box,
    var(--gradient-base) padding-box;

  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;

  opacity: calc(var(--glow-on) * var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* halo externo */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: -1;
  border: 0;
  background: none;

  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc(var(--glow-on) * (var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

/* Sem overflow de layout: no original o .edge-light fica --glow-padding (40px) maior que o cartão, e
   essa caixa entra na área rolável (barra de rolagem horizontal quando o cartão encosta na borda de um
   contêiner). Aqui ele tem o tamanho do cartão e a máscara cônica é que fica 40px maior, centrada e
   sem recorte (mask-clip: no-clip). O halo continua vindo do box-shadow, que não cria rolagem.
   Mesmo centro e mesma máscara do original, então o desenho é o mesmo. */
/* Ápice do cone deslocado 0,3 px: a máscara maior que a caixa vira uma imagem de tamanho inteiro; com largura
   ímpar o centro caía exatamente no centro de um pixel e o Chrome (DPR 1) desenhava uma linha de 1 px do halo no
   lado oposto ao cursor (medido: 20/255 em cartões de 296,5 px; some com o deslocamento, invisível no desenho). */
@supports (mask-clip: no-clip) {
  .border-glow-card > .edge-light {
    inset: 0;
    -webkit-mask-image:
      conic-gradient(
        from var(--cursor-angle) at calc(50% + 0.3px) calc(50% + 0.3px), black 2.5%, transparent 10%, transparent 90%, black 97.5%
      );
    mask-image:
      conic-gradient(
        from var(--cursor-angle) at calc(50% + 0.3px) calc(50% + 0.3px), black 2.5%, transparent 10%, transparent 90%, black 97.5%
      );
    mask-size: calc(100% + 2 * var(--glow-padding)) calc(100% + 2 * var(--glow-padding));
    mask-position: center;
    mask-repeat: no-repeat;
    mask-origin: border-box;
    mask-clip: no-clip;
  }
  .border-glow-card > .edge-light::before {
    inset: 0;
  }
}

/* superfície clara: sem mesclagem aditiva (no branco ela some) */
.border-glow-card.border-glow-card--light:not(.border-glow-card--spans)::after,
.border-glow-card.border-glow-card--light > .border-glow-fill,
.border-glow-card.border-glow-card--light > .edge-light,
.border-glow-card.border-glow--light:not(.border-glow-card--spans)::after,
.border-glow-card.border-glow--light > .border-glow-fill,
.border-glow-card.border-glow--light > .edge-light {
  mix-blend-mode: normal;
}

/* ------------------------------------------------------------------ wrapper do conteúdo */
/* original (data-border-glow-wrap="box" ou marcação manual) */
.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 1;
}
/* automático: transparente para o layout (herda display, gap, grid e alinhamento do elemento) */
.border-glow-inner.border-glow-inner--auto {
  display: contents;
}
.border-glow-card.border-glow-card--boxed { display: grid; }
.border-glow-card.border-glow-card--boxed-inline { display: inline-grid; }

/* ------------------------------------------------------------------ variante: marca (navy) */
.border-glow-card.border-glow--brand {
  --card-bg: #0b1d2f;
  --mesh-color-1: #1b8cc8;
  --mesh-color-2: #24b6cd;
  --mesh-color-3: #c9a65e;
  --glow-hsl: 195deg 80% 70%;
  background: var(--card-bg);
  border-color: rgb(255 255 255 / 12%);
  color: #eaf2f8;
}
:where(.border-glow-card.border-glow--brand) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
:where(.border-glow-card.border-glow--brand) a:not([class]) { color: #8fd3ec; }
:where(.border-glow-card.border-glow--brand) a:not([class]):hover { color: #e7d3a4; }

/* ------------------------------------------------------------------ variante: clara */
.border-glow-card.border-glow--light {
  --card-bg: #ffffff;
  --mesh-color-1: #1569ab;
  --mesh-color-2: #1b8cc8;
  --mesh-color-3: #c9a65e;
  --glow-hsl: 206deg 78% 42%;
  --fill-opacity: 0.16;
  background: var(--card-bg);
  color: #0b1d2f;
  border-color: rgb(11 29 47 / 12%);
  box-shadow:
    rgb(11 29 47 / 5%) 0 1px 2px,
    rgb(11 29 47 / 8%) 0 10px 28px -6px;
}
:where(.border-glow-card.border-glow--light) :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* ------------------------------------------------------------------ variante: botão / link */
.border-glow-card.border-glow--button {
  --border-radius: 999px;
  --glow-padding: 28px;
  --edge-sensitivity: 15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  min-width: 44px;
  padding: 0.7em 1.5em;
  margin: 0;
  border-radius: var(--border-radius);
  overflow: visible;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  color: #f4f8fb;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* links: vencem a cor/sublinhado globais de a, a:hover e a:visited */
.border-glow-card.border-glow--button:link,
.border-glow-card.border-glow--button:visited,
.border-glow-card.border-glow--button:hover,
.border-glow-card.border-glow--button:active,
.border-glow-card.border-glow--button:focus {
  color: #f4f8fb;
  text-decoration: none;
}
.border-glow-card.border-glow--button.border-glow-card--light,
.border-glow-card.border-glow--button.border-glow-card--light:link,
.border-glow-card.border-glow--button.border-glow-card--light:visited,
.border-glow-card.border-glow--button.border-glow-card--light:hover,
.border-glow-card.border-glow--button.border-glow-card--light:active,
.border-glow-card.border-glow--button.border-glow-card--light:focus,
.border-glow-card.border-glow--button.border-glow--light,
.border-glow-card.border-glow--button.border-glow--light:link,
.border-glow-card.border-glow--button.border-glow--light:visited,
.border-glow-card.border-glow--button.border-glow--light:hover,
.border-glow-card.border-glow--button.border-glow--light:active,
.border-glow-card.border-glow--button.border-glow--light:focus {
  color: #0b1d2f;
}
.border-glow-card.border-glow--button:disabled,
.border-glow-card.border-glow--button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}
/* wrapper "box" num botão: linha centralizada, sem barra de rolagem */
.border-glow-card.border-glow--button > .border-glow-inner {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: inherit;
  overflow: visible;
}

/* ------------------------------------------------------------------ acessibilidade / impressão */
@media (forced-colors: active) {
  .border-glow-card:not(.border-glow-card--spans)::before,
  .border-glow-card:not(.border-glow-card--spans)::after,
  .border-glow-card > .border-glow-mesh,
  .border-glow-card > .border-glow-fill,
  .border-glow-card > .edge-light { display: none; }
}
@media print {
  .border-glow-card:not(.border-glow-card--spans)::before,
  .border-glow-card:not(.border-glow-card--spans)::after,
  .border-glow-card > .border-glow-mesh,
  .border-glow-card > .border-glow-fill,
  .border-glow-card > .edge-light { display: none; }
  .border-glow-card { transform: none; box-shadow: none; }
}