/* ============================================================
   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.1), 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(0.16, 1, 0.3, 1), transform .85s
    cubic-bezier(0.16, 1, 0.3, 1), filter .85s cubic-bezier(0.16, 1, 0.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(0.16, 1, 0.3, 1), transform .6s cubic-bezier(0.16, 1, 0.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: -1;
  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(0.16, 1, 0.3, 1), box-shadow .45s
    cubic-bezier(0.16, 1, 0.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(0.16, 1, 0.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(0.16, 1, 0.3, 1), box-shadow .4s ease;
}

/* Chaos cards: leve reação */
.dcard {
  transition: transform .5s cubic-bezier(0.16, 1, 0.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(0.16, 1, 0.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: 0.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: 0.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(0.16, 1, 0.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: 0.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(0.16, 1, 0.3, 1), rotate .9s cubic-bezier(0.16, 1, 0.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(0.16, 1, 0.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(0.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;
  }
}