/* Conecta Mob | movimento. Só transform e opacity nos elementos grandes.
   Estado final é o estado padrão: se o movimento falhar ou for desligado, tudo aparece pronto. */

/* Abertura da Hero: uma sequência só */
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes ignite {
  from { fill-opacity: 0; filter: drop-shadow(0 0 0 rgba(73, 207, 148, 0)); }
  55% { fill-opacity: 1; filter: drop-shadow(0 0 34px rgba(0, 184, 244, .9)); }
  to { fill-opacity: 1; filter: drop-shadow(0 0 14px rgba(73, 207, 148, .55)); }
}
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes drift { from { transform: scale(1) translateX(0); } to { transform: scale(1.08) translateX(-2%); } }
@keyframes blink { 50% { opacity: .15; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes topo { from { transform: translateX(-26px); } to { transform: translateX(26px); } }

h1 .line { animation: rise 1s var(--ease) both; }
h1 .mask:nth-child(2) .line { animation-delay: .14s; }
h1 .l2 { animation: rise 1s var(--ease) .14s both, shimmer 9s linear 1.2s infinite; }
.lead { animation: fade-up .9s var(--ease) .55s both; }
.cta { animation: fade-up .9s var(--ease) .7s both; }
.vf { animation: fade-up 1.2s var(--ease) .9s both; }
.rec b { animation: blink 1.2s steps(1) infinite; }

.mark-outline, .mark-bolt-line { animation: draw 2.4s cubic-bezier(.6, .1, .2, 1) both; }
.mark-bolt { animation: ignite 1.1s ease-out 2s both; }
.hero-bg .fallback { animation: drift 40s ease-in-out infinite alternate; will-change: transform; }
.hero-bg .fallback { translate: 0 var(--bgshift, 0px); }

/* Marquee */
.marquee-track { animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Relevo do drone em deriva lenta */
.contornos path { animation: topo 14s ease-in-out infinite alternate; }
.contornos path:nth-child(2) { animation-duration: 17s; animation-delay: -3s; }
.contornos path:nth-child(3) { animation-duration: 12s; animation-delay: -6s; }
.contornos path:nth-child(4) { animation-duration: 19s; animation-delay: -2s; }
.contornos path:nth-child(5) { animation-duration: 15s; animation-delay: -8s; }
.contornos path:nth-child(6) { animation-duration: 21s; animation-delay: -5s; }
.contornos path:nth-child(7) { animation-duration: 16s; animation-delay: -9s; }

/* Brilho que segue o cursor em cartões */
.s-tile::after, .plano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(73, 207, 148, .16), transparent 70%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.s-tile:hover::after, .plano:hover::after { opacity: 1; }

/* Brilho de passagem no botão principal */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn-primary:hover::after { transform: translateX(120%); }

@keyframes pop { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.18); } }
.problemas li.in .x { animation: pop .55s var(--ease) .15s both; }

/* Revelar ao rolar (só com JS ativo) */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rv.in { opacity: 1; transform: none; }

/* Movimento reduzido: tudo estático e já completo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .pares em { --p: 1; }
  .etapas { --prog: 1; }
  .etapas li::before { background: var(--green); border-color: var(--green); }
  .etapas li:not(.on) .n { opacity: 1; }
  .marquee { -webkit-mask: none; mask: none; }
  .marquee-track { width: auto; flex-wrap: wrap; }
  .marquee ul + ul { display: none; }
}