/* ============================================================
   Vengeance FX layer — efeitos extraidos da biblioteca,
   aplicados SOBRE a pagina original. Nao altera layout,
   cores da marca (coral #ed6f5c), background ou conteudo.
   ============================================================ */

@property --vfx-beam-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- Border Beam (feixe girando na borda) ---- */
.vfx-beam { position: relative; }
.vfx-beam::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(
    from var(--vfx-beam-a),
    transparent 0 74%,
    var(--coral) 86%,
    var(--coral-soft) 92%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: vfx-beam-spin 5.5s linear infinite;
  pointer-events: none;
  z-index: 4;
}
@keyframes vfx-beam-spin { to { --vfx-beam-a: 360deg; } }

/* ---- Hover lift + glow coral nos cards ---- */
.vfx-lift { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; will-change: transform; }
.vfx-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 50px rgba(237,111,92,.18); }

/* ---- Aurora shimmer atras do frame do hero ---- */
.vfx-aurora { position: relative; isolation: isolate; }
.vfx-aurora::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  border-radius: 28px;
  filter: blur(42px);
  opacity: .5;
  background:
    radial-gradient(38% 52% at 20% 28%, rgba(237,111,92,.55), transparent 60%),
    radial-gradient(44% 48% at 82% 22%, rgba(233,185,74,.45), transparent 60%),
    radial-gradient(52% 60% at 62% 92%, rgba(110,116,72,.42), transparent 65%);
  background-size: 180% 180%;
  animation: vfx-aurora-move 12s ease-in-out infinite alternate;
}
@keyframes vfx-aurora-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---- Numeros: figuras tabulares pra nao "pular" durante a contagem ---- */
.vfx-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   CAMADA DE MOVIMENTO (overlay por secao)
   Contrato: a secao vira stacking context proprio; o overlay
   .vfx-layer fica em z-index:0 (acima do bg original, que NAO
   e tocado) e o conteudo (.container) sobe pra z-index:1.
   ============================================================ */
.vfx-host { isolation: isolate; }
.vfx-host > .container { position: relative; z-index: 1; }
.vfx-layer {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Twisting Ribbon (canvas) sobre o hero ---- */
.vfx-ribbon canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.vfx-ribbon {
  opacity: .9;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 46%, #000 40%, transparent 82%);
          mask-image: radial-gradient(120% 120% at 50% 46%, #000 40%, transparent 82%);
}

/* ---- Perspective Grid (CSS 3D) sobre plataforma + crm ---- */
.vfx-grid { perspective: 2000px; }
.vfx-grid-stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 80rem; height: 80rem;
  display: grid;
  transform-origin: center;
  transform: translate(-50%, -50%) rotateX(30deg) rotateY(-5deg) rotateZ(20deg) scale(2);
  will-change: transform;
  animation: vfx-grid-drift 26s ease-in-out infinite alternate;
}
.vfx-tile {
  min-width: 1px; min-height: 1px;
  border: 1px solid rgba(237,111,92,.16);
  background: transparent;
}
@keyframes vfx-grid-drift {
  0%   { transform: translate(-50%, -50%) rotateX(30deg) rotateY(-5deg) rotateZ(18deg) scale(1.95); }
  100% { transform: translate(-50%, -50%) rotateX(34deg) rotateY(3deg)  rotateZ(23deg) scale(2.1); }
}
/* Mascara de fade radial (some nas bordas, funde no bg da secao) */
.vfx-grid-fade {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 1;
  background: radial-gradient(circle at 50% 50%, transparent 22%, var(--paper, #efe7d2) 78%);
  mix-blend-mode: normal;
}

@media (max-width: 880px) {
  .vfx-grid-stage { width: 52rem; height: 52rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vfx-beam::after, .vfx-aurora::before, .vfx-grid-stage { animation: none; }
  .vfx-ribbon, .vfx-grid { display: none; }
}