/* =========================================================
   CARTÃO DE VIDRO INTERATIVO (compartilhado)
   Cartões de "Como eu trabalho?", do Contato e a janela de envio.
   O JS (js/cartao-vidro.js) atualiza as variáveis conforme o mouse:
   inclinação, escala, reflexo que desliza e brilho que segue o cursor.
   ========================================================= */

[data-cartao-vidro] {
  /* posição do brilho vermelho e do reflexo (atualizadas pelo JS) */
  --luz-x: 82%;
  --luz-y: 86%;
  --reflexo: 50%;
  --inclinacao-x: 0deg;
  --inclinacao-y: 0deg;
  --escala: 1;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: rotateX(var(--inclinacao-x)) rotateY(var(--inclinacao-y)) scale(var(--escala));
  transition:
    border-color 0.5s var(--curva-suave),
    box-shadow 0.5s var(--curva-suave);
  will-change: transform;
}

[data-cartao-vidro].ativo {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow:
    0 30px 70px -24px rgba(0, 0, 0, 0.95),
    0 0 40px -12px rgba(255, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* brilho vermelho: em repouso no canto inferior direito, no hover segue o mouse */
.cartao-brilho {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 58% 75% at var(--luz-x) var(--luz-y),
    rgba(140, 0, 0, 0.42),
    rgba(112, 0, 0, 0.14) 45%,
    transparent 75%
  );
}

/* reflexo do vidro: faixa diagonal clara que desliza com o mouse,
   mais um ponto de luz exatamente sob o cursor */
.cartao-reflexo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle 120px at var(--luz-x) var(--luz-y), rgba(255, 255, 255, var(--ponto-luz, 0)), transparent 70%),
    linear-gradient(
      105deg,
      transparent calc(var(--reflexo) - 34%),
      rgba(255, 255, 255, 0.075) calc(var(--reflexo) - 14%),
      rgba(255, 255, 255, 0.11) var(--reflexo),
      rgba(255, 255, 255, 0.03) calc(var(--reflexo) + 10%),
      transparent calc(var(--reflexo) + 26%)
    );
  mix-blend-mode: screen;
}