/* ==========================================================================
   VA Capital — Camada de Profundidade (3D)
   Aditiva: não altera style.css. Carregar SEMPRE depois de style.css.

   Como funciona: o JS escreve --dx / --dy (posição do ponteiro, de -1 a 1)
   e --mx / --my (posição em %) no elemento. O CSS deriva daí a inclinação,
   a sombra projetada e o brilho especular. Sem biblioteca, só transform.
   ========================================================================== */

:root {
  --d3-ease: cubic-bezier(.22, .61, .36, 1);
  --d3-tilt-card: 3deg;   /* cards: contido, senão vira brinquedo */
  --d3-tilt-hero: 7deg;   /* foto do Vini: é o elemento assinatura */
  --d3-glare: rgba(255, 255, 255, .09);
}

/* Estado neutro: todo elemento com profundidade nasce em repouso */
.d3 {
  --dx: 0;
  --dy: 0;
  --mx: 50%;
  --my: 50%;
}

/* ==========================================================================
   1. Foto do Vini — o cartão que existe no espaço
   ========================================================================== */

.hero-image {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

.hero-image-frame.d3 {
  transform:
    rotateY(calc(var(--dx) * var(--d3-tilt-hero)))
    rotateX(calc(var(--dy) * var(--d3-tilt-hero) * -1))
    translate3d(0, 0, 0);
  transition: transform .5s var(--d3-ease), box-shadow .5s var(--d3-ease);
  will-change: transform;
}

/* A sombra acompanha a inclinação: é ela que vende a profundidade */
.hero-image-frame.d3 {
  box-shadow:
    calc(var(--dx) * -22px) calc(30px + var(--dy) * -14px) 80px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(0, 232, 164, .3),
    0 0 100px rgba(0, 232, 164, .18);
}

/* Brilho especular: a luz corre pelo vidro conforme o ponteiro anda */
.hero-image-frame.d3::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle 45% at var(--mx) var(--my),
    rgba(255, 255, 255, .16),
    rgba(255, 255, 255, .04) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity .45s var(--d3-ease);
}
.hero-image-frame.d3.is-live::after { opacity: 1; }

/* A tag "Vinicius Peta · Mentor" flutua um pouco à frente da foto */
.hero-image-frame.d3 .hero-image-tag {
  transform: translate3d(calc(var(--dx) * 10px), calc(var(--dy) * 7px), 0);
  transition: transform .5s var(--d3-ease);
}

/* E a foto desliza de leve no sentido contrário: duas camadas, não uma */
.hero-image-frame.d3 img {
  transform: scale(1.04) translate3d(calc(var(--dx) * -8px), calc(var(--dy) * -5px), 0);
  transition: transform .5s var(--d3-ease);
}

/* ==========================================================================
   2. Cards — levantam da página quando você chega perto
   ========================================================================== */

.card.d3,
.servico.d3,
.entregavel.d3,
.plano-card.d3,
.depoimento.d3,
.calc-cta-card.d3,
.form-card.d3,
.calc-card.d3 {
  position: relative;
  transform-origin: center;
  transition:
    transform .35s var(--d3-ease),
    box-shadow .35s var(--d3-ease),
    border-color .25s ease;
}

.card.d3:hover,
.servico.d3:hover,
.entregavel.d3:hover,
.plano-card.d3:hover,
.depoimento.d3:hover,
.calc-cta-card.d3:hover,
.form-card.d3:hover,
.calc-card.d3:hover {
  transform:
    perspective(900px)
    rotateY(calc(var(--dx) * var(--d3-tilt-card)))
    rotateX(calc(var(--dy) * var(--d3-tilt-card) * -1))
    translate3d(0, -7px, 0);
  box-shadow:
    calc(var(--dx) * -10px) 22px 50px rgba(0, 0, 0, .5),
    0 0 40px rgba(0, 232, 164, .1);
}

/* Brilho especular nos cards, no mesmo idioma da foto */
.card.d3::after,
.servico.d3::after,
.entregavel.d3::after,
.plano-card.d3::after,
.depoimento.d3::after,
.calc-cta-card.d3::after,
.form-card.d3::after,
.calc-card.d3::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle 55% at var(--mx) var(--my),
    var(--d3-glare),
    transparent 65%
  );
  opacity: 0;
  transition: opacity .3s var(--d3-ease);
}
.card.d3:hover::after,
.servico.d3:hover::after,
.entregavel.d3:hover::after,
.plano-card.d3:hover::after,
.depoimento.d3:hover::after,
.calc-cta-card.d3:hover::after,
.form-card.d3:hover::after,
.calc-card.d3:hover::after { opacity: 1; }

/* O conteúdo do card fica na frente do brilho */
.card.d3 > *,
.servico.d3 > *,
.entregavel.d3 > *,
.plano-card.d3 > *,
.depoimento.d3 > *,
.calc-cta-card.d3 > *,
.form-card.d3 > *,
.calc-card.d3 > * { position: relative; z-index: 2; }

/* ==========================================================================
   3. Parallax do topo — o texto e a foto rolam em velocidades diferentes
   ========================================================================== */

.hero-content.d3-parallax { transform: translate3d(0, calc(var(--sy, 0) * 34px), 0); }
.hero-image.d3-parallax   { transform: translate3d(0, calc(var(--sy, 0) * -22px), 0); }

/* ==========================================================================
   4. Header — ganha apoio quando a página sai do topo
   ========================================================================== */

.header { transition: box-shadow .3s ease, background-color .3s ease; }
.header.is-scrolled {
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
  background: rgba(8, 10, 18, .93);
}

/* ==========================================================================
   5. Limites: sem mouse, sem inclinação. Sem vontade de movimento, sem nada.
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
  .hero-image-frame.d3,
  .hero-image-frame.d3 img,
  .hero-image-frame.d3 .hero-image-tag,
  .card.d3:hover,
  .servico.d3:hover,
  .entregavel.d3:hover,
  .plano-card.d3:hover,
  .depoimento.d3:hover,
  .calc-cta-card.d3:hover,
  .form-card.d3:hover,
  .calc-card.d3:hover {
    transform: none;
  }
  .hero-image-frame.d3 img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image-frame.d3,
  .hero-image-frame.d3 img,
  .hero-image-frame.d3 .hero-image-tag,
  .hero-content.d3-parallax,
  .hero-image.d3-parallax,
  .card.d3,
  .servico.d3,
  .entregavel.d3,
  .plano-card.d3,
  .depoimento.d3,
  .calc-cta-card.d3,
  .form-card.d3,
  .calc-card.d3 {
    transform: none !important;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .hero-image-frame.d3 img { transform: scale(1.04) !important; }
  .hero-image-frame.d3::after { display: none; }
}