/* ============================================================
   NexArq — Premium motion & atmosphere layer
   Carregado por último. Adiciona profundidade e animação
   sobre o redesign premium. Respeita prefers-reduced-motion.
   ============================================================ */

/* ---------- Grão / textura global ---------- */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: 0.03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Barra de progresso de scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 150; transform-origin: left;
  background: linear-gradient(90deg, var(--lavender), var(--violet));
  box-shadow: 0 0 10px rgba(91,61,245,0.5);
  transition: width .08s linear;
}

/* ---------- HERO: malha de gradiente em movimento ---------- */
.phero { isolation: isolate; }
.phero::after {
  content: ""; position: absolute; inset: -25% -15% 30%; z-index: -3;
  background:
    radial-gradient(38% 42% at 22% 20%, rgba(91,61,245,0.16), transparent 62%),
    radial-gradient(34% 40% at 80% 12%, rgba(155,140,255,0.16), transparent 60%),
    radial-gradient(30% 36% at 60% 40%, rgba(120,96,255,0.10), transparent 60%);
  filter: blur(40px); opacity: 0.9;
  animation: meshDrift 26s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.03); }
}

/* Linhas de blueprint sutis (motif arquitetura) */
.phero__stage::before {
  content: ""; position: absolute; inset: -40px -6% -40px; z-index: -1;
  background-image:
    linear-gradient(rgba(91,61,245,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91,61,245,0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask: radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 78%);
          mask: radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 78%);
  pointer-events: none;
}

/* ---------- Reveal cinematográfico ---------- */
.reveal {
  filter: blur(6px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1),
              transform .85s cubic-bezier(.16,1,.3,1),
              filter .85s cubic-bezier(.16,1,.3,1);
}
.reveal.in { filter: blur(0); }

/* Produto do hero: entrada mais dramática */
.phero__stage.reveal { transform: translateY(52px) scale(0.975); }
.phero__stage.reveal.in { transform: none; }

/* ---------- Stagger (filhos animados em sequência) ---------- */
[data-stagger] > * {
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
[data-stagger].anim-in > * { opacity: 1; transform: none; }

/* ---------- Botão primário: brilho que varre ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary > * { position: relative; z-index: 1; }
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-18deg); z-index: 0; pointer-events: none;
}
.btn--primary:hover::after { animation: btnSheen .85s ease; }
@keyframes btnSheen { from { left: -140%; } to { left: 150%; } }

/* Pulso de convite no CTA do hero (uma vez, discreto) */
.phero__cta .btn--primary { animation: ctaGlow 3.6s ease-in-out 1.2s 2; }
@keyframes ctaGlow {
  0%,100% { box-shadow: 0 6px 22px rgba(91,61,245,0.26); }
  50%     { box-shadow: 0 10px 36px rgba(91,61,245,0.5); }
}

/* ---------- Cards premium: elevar + brilho + borda ---------- */
.module, .browser, .ba, .sec-item, .segment, .cta-band, .case__photo {
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1), border-color .45s ease;
}
.module { position: relative; overflow: hidden; }
.module::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(155,140,255,0.16), transparent 60%);
  transition: opacity .45s ease;
}
.module:hover::after { opacity: 1; }
.module:hover { border-color: var(--pill-border); box-shadow: 0 30px 70px rgba(91,61,245,0.14), 0 6px 20px rgba(23,18,42,0.06); }
.feature__media .browser { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; }
.feature__media:hover .browser { transform: translateY(-6px); box-shadow: var(--shadow-float); }
.sec-item:hover .sec-item__ic { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(91,61,245,0.22); }
.sec-item__ic { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }

/* Chaos cards: leve reação */
.dcard { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease; }
.chaos:hover .dcard { border-color: var(--border); }
.dcard:hover { border-style: solid; border-color: var(--pill-border) !important; box-shadow: 0 14px 34px rgba(23,18,42,0.08); }

/* Módulos: tilt 3D (perspectiva no container) */
.module-grid { perspective: 1200px; }

/* ---------- Nav links: sublinhado animado ---------- */
.nav__links > a, .nav__trigger { position: relative; }
.nav__links > a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.16,1,.3,1); opacity: 0.7;
}
.nav__links > a:hover::after { transform: scaleX(1); }

/* ---------- Aurora: orb vivo ---------- */
.aspot__orb { animation: orbFloat 8s ease-in-out infinite; }
@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.aspot__orb::before { animation: ringPulse 5s ease-in-out infinite; }
.aspot__orb::after  { animation: ringPulse 5s ease-in-out infinite .6s; }
@keyframes ringPulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.04); }
}
.aspot__orb .halo {
  position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(219,209,255,0.85) 40deg, transparent 120deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mix-blend-mode: screen; opacity: .8;
  animation: haloSpin 6s linear infinite;
}
@keyframes haloSpin { to { transform: rotate(360deg); } }

/* Aurora spotlight: grade de blueprint no fundo */
.aspot .wrap { position: relative; z-index: 1; }
.aspot::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(155,140,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,140,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask: radial-gradient(80% 70% at 30% 30%, #000, transparent 75%);
          mask: radial-gradient(80% 70% at 30% 30%, #000, transparent 75%);
}

/* Cartão de comando: hover */
.cmd { transition: transform .4s cubic-bezier(.16,1,.3,1), background .4s ease, border-color .4s ease; }
.cmd:hover { transform: translateX(6px); background: rgba(255,255,255,0.08); border-color: rgba(155,140,255,0.3); }

/* Ponto "digitando" antes da resposta da Aurora (chat do hero) */
.aurora-chat__foot .sp { animation: sparklePulse 2.4s ease-in-out infinite; display: inline-block; }
@keyframes sparklePulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }

/* ---------- Shimmer no itálico de marca ---------- */
.italic {
  background-size: 220% 100%;
  animation: italicShimmer 8s ease-in-out infinite;
}
@keyframes italicShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

/* ---------- Stat band: número com leve brilho ao contar ---------- */
.stat-band .s .n { transition: filter .4s ease; }

/* ---------- Trust strip: entrada + brilho vivo ---------- */
.trust-strip .dot-live { animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(55,200,143,0.4); }
  50%     { box-shadow: 0 0 0 6px rgba(55,200,143,0); }
}

/* ---------- Float suave nos telefones white-label ---------- */
.wl-phones .phone--main { animation: floaty 7s ease-in-out infinite; }
.wl-phones .phone--l { animation: floaty 7s ease-in-out infinite .8s; }
.wl-phones .phone--r { animation: floaty 7s ease-in-out infinite 1.6s; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-12px) rotate(var(--r,0deg)); } }
.wl-phones .phone--l { --r: -8deg; }
.wl-phones .phone--r { --r: 7deg; }
.wl-appicon { animation: floaty 6.5s ease-in-out infinite .3s; }

/* ---------- Seção 2: caixas bagunçadas → agrupadas no scroll ---------- */
.chaos .dcard {
  translate: var(--tx, 0) var(--ty, 0);
  rotate: var(--rot, 0deg);
  transform: none;
  transition: translate .9s cubic-bezier(.16,1,.3,1), rotate .9s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
  animation: chaosFloat var(--fd, 6s) ease-in-out infinite;
  animation-delay: var(--fdl, 0s);
}
.chaos .dcard:nth-child(1) { --tx:-18px; --ty:-14px; --rot:-5deg;  --fd:6.4s; --fdl:0s;  }
.chaos .dcard:nth-child(2) { --tx: 20px; --ty:-22px; --rot: 4.5deg; --fd:7.2s; --fdl:.4s; }
.chaos .dcard:nth-child(3) { --tx:-24px; --ty: 16px; --rot: 3.5deg; --fd:6.8s; --fdl:.9s; }
.chaos .dcard:nth-child(4) { --tx: 24px; --ty: 12px; --rot:-4deg;  --fd:7.6s; --fdl:.2s; }
.chaos .dcard:nth-child(5) { --tx:-8px;  --ty: 28px; --rot: 5.5deg; --fd:7s;   --fdl:.7s; }
.chaos.organized .dcard { translate: 0 0; rotate: 0deg; animation: none; }
@keyframes chaosFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 600px) {
  .chaos .dcard { translate: 0 0 !important; rotate: 0deg !important; }
}

/* ---------- A virada: entrada dos painéis + selo ---------- */
.ba--before.reveal { transform: translateX(-28px); }
.ba--after.reveal { transform: translateX(28px); }
.ba--before.reveal.in, .ba--after.reveal.in { transform: none; }
.turn__seam { animation: seamPop .75s cubic-bezier(.16,1,.3,1) .45s both; }
.turn__badge { animation: seamFloat 5s ease-in-out infinite 1.2s; }
@keyframes seamPop { from { opacity: 0; transform: translate(-50%,-50%) scale(.45); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes seamFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 820px){ .turn__badge { animation: none; } }

/* ---------- Reduced motion: desliga o decorativo ---------- */
@media (prefers-reduced-motion: reduce) {
  .phero::after, .aspot__orb, .aspot__orb::before, .aspot__orb::after, .aspot__orb .halo,
  .italic, .wl-phones .phone--main, .wl-phones .phone--l, .wl-phones .phone--r, .wl-appicon,
  .phero__cta .btn--primary, .trust-strip .dot-live, .aurora-chat__foot .sp { animation: none !important; }
  .chaos .dcard { translate: 0 0 !important; rotate: 0deg !important; animation: none !important; }
  .turn__seam, .turn__badge { animation: none !important; }
  .ba--before.reveal, .ba--after.reveal { transform: none; }
  .reveal { filter: none; }
  body::after { display: none; }
}