/* ============================================================================
   Efeitos 3D da Lepvi: inclinação dos cartões com o mouse, cartões que entram em perspectiva,
   chat da abertura com profundidade e cubos de vidro girando. Só transform, rotate, translate, scale e opacity.
   Mouse: inclinação (3d.js). Celular: respiração leve do chat, sem JavaScript. Movimento reduzido: tudo parado.
   ============================================================================ */

/* ---------- Cartões entram em perspectiva (a cascata de atraso vem do main.js) ---------- */
.js .revelar--cartao { transform: perspective(900px) translateY(34px) rotateX(-12deg) scale(.97); transform-origin: 50% 100%; }
.js .revelar--cartao.visivel { transform: none; }

/* ---------- Inclinação com o mouse (aplicada por 3d.js em telas com mouse) ---------- */
.p3d-pai { perspective: 1100px; }
.p3d { position: relative; }
.p3d__brilho { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(var(--cor, 45, 75, 255), .13), transparent 62%); }
.abre-chat .p3d__brilho { --cor: 255, 255, 255; background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .12), transparent 62%); }
.pacote--destaque .p3d__brilho { --cor: 255, 255, 255; }
.p3d.p3d-vivo, .p3d.p3d-volta { will-change: rotate, translate, scale; }
.p3d.p3d-vivo { transform: none; transition: rotate .16s var(--ease-out), translate .2s var(--ease-out), scale .2s var(--ease-out), box-shadow .3s ease, border-color .3s ease, opacity .3s ease, transform .3s var(--ease-out); }
.p3d.p3d-volta { transition: rotate .6s var(--ease-out), translate .6s var(--ease-out), scale .6s var(--ease-out), box-shadow .5s ease, border-color .3s ease, opacity .3s ease, transform .3s var(--ease-out); }
.p3d.p3d-vivo .p3d__brilho { opacity: 1; }
.pacote.p3d-vivo, .svc.p3d-vivo, .projeto.p3d-vivo { box-shadow: 0 34px 60px -32px rgba(13, 13, 15, .5); }

/* ---------- Chat da abertura: pose inclinada de fábrica (rotate separado, assim o JS só troca o ângulo) ---------- */
.abre-chat { transform: none; rotate: 3 -6 0 6.7deg; }
.abre-chat:hover { transform: none; }
.abre-chat.p3d-vivo { box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
.abre-chat__selo { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), translate .25s var(--ease-out); }
.abre__luz i { transition: translate 1.2s var(--ease-out); }

/* Celular e tablet: o chat "respira" devagar para ganhar vida sem precisar de mouse */
@media (hover: none), (pointer: coarse) {
  @media (prefers-reduced-motion: no-preference) {
    .abre-chat { animation: respira3d 7s ease-in-out infinite alternate; }
  }
}
@keyframes respira3d {
  from { rotate: 3 -6 0 6.7deg; translate: 0 0; }
  to { rotate: -2 5 0 5.4deg; translate: 0 -8px; }
}

/* ---------- Cubos de vidro com as cores da marca ---------- */
.abre__in > div:last-child { position: relative; }
.cubo3d { --t: 84px; position: absolute; width: var(--t); height: var(--t); transform-style: preserve-3d; pointer-events: none; z-index: 0;
  animation: cuboGira 22s linear infinite, cuboFlutua 6s ease-in-out infinite alternate; }
.cubo3d i { position: absolute; inset: 0; border-radius: 16%; border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(135deg, rgba(74, 91, 255, .62), rgba(138, 61, 255, .36) 60%, rgba(192, 77, 255, .3)); box-shadow: inset 0 0 22px rgba(255, 255, 255, .12); }
.cubo3d i:nth-child(1) { transform: translateZ(calc(var(--t) / 2)); }
.cubo3d i:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--t) / 2)); }
.cubo3d i:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.cubo3d i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--t) / 2)); }
.cubo3d i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--t) / 2)); }
.cubo3d i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--t) / 2)); }
.cubo3d--a { top: -30px; right: 10px; --t: 88px; }
.cubo3d--b { bottom: 18px; left: -44px; --t: 54px; z-index: 2; animation-duration: 16s, 5s; animation-direction: reverse, alternate-reverse; }
.cubo3d--cta { top: 26px; right: 30px; --t: 60px; opacity: .95; }
@keyframes cuboGira { from { transform: perspective(700px) rotateX(-24deg) rotateY(0deg); } to { transform: perspective(700px) rotateX(-24deg) rotateY(360deg); } }
@keyframes cuboFlutua { from { translate: 0 0; } to { translate: 0 -12px; } }

@media (max-width: 800px) {
  /* No celular os cubos da abertura sairiam por cima do texto: ficam só o chat respirando e o cubo do convite final */
  .cubo3d--a, .cubo3d--b { display: none; }
  .cubo3d--cta { top: 20px; right: 20px; --t: 44px; opacity: .8; }
}

/* ---------- Movimento reduzido: nada gira nem se inclina; os cubos ficam parados em uma pose bonita ---------- */
@media (prefers-reduced-motion: reduce) {
  .cubo3d { animation: none; transform: perspective(700px) rotateX(-24deg) rotateY(32deg); }
  .abre-chat { animation: none; }
  .js .revelar--cartao { transform: none; }
}