html {
  scroll-behavior: auto; /* o Lenis cuida da rolagem suave */
  -webkit-text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid #eb4b3d;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Estado inicial de quem vai animar. Some se o JS não rodar,
   então quem tem JS desligado ainda vê a página inteira. */
.js-reveal {
  will-change: transform, opacity;
}

/* --- Faixa de recursos: rolagem infinita --- */
.marquee-mascara {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-trilho {
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* a lista está duplicada, então 50% = uma volta completa */
}

/* --- Selos flutuantes sobre a imagem do hero --- */
.anima-flutuar {
  animation: flutuar 3.2s ease-in-out infinite;
}

@keyframes flutuar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- Cursor piscando no balão de busca em destaque --- */
.busca-cursor {
  animation: busca-piscar 1s steps(1, start) infinite;
}

@keyframes busca-piscar {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* --- Carrossel de cartões (seção "Tudo conectado") — loop infinito --- */
.marquee-trilho-cartoes {
  animation: carrossel-cartoes 45s linear infinite;
}

/* passar o mouse em qualquer ponto da faixa pausa a rolagem */
[data-marquee]:hover .marquee-trilho-cartoes {
  animation-play-state: paused;
}

@keyframes carrossel-cartoes {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* os cartões estão duplicados, 50% = uma volta completa */
}

/* cartão sob o cursor cresce e fica por cima dos vizinhos */
.carrossel-cartao:hover {
  transform: scale(1.04);
  z-index: 10;
}

/* --- Carrossel vertical de prints (seção "Dashboard") --- */
/* contínuo, sem pausa no hover — por isso não tem regra de :hover aqui */
.marquee-trilho-vertical {
  animation: marquee-vertical 22s linear infinite;
}

@keyframes marquee-vertical {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); } /* prints duplicados, 50% = uma volta completa */
}

.marquee-mascara-vertical {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-trilho-vertical {
    animation: none;
  }

  .marquee-trilho-cartoes {
    animation: none;
  }

  .marquee-trilho {
    animation: none;
  }

  .anima-flutuar {
    animation: none;
  }

  .js-reveal {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}