/* assets/css/style.css */

/* Importação de Fontes (Inter e Space Grotesk) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;600;700&display=swap');

/* Reset e Base */
body {
    background-color: #0e1512;
    color: #e5e5e5;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Evita rolagem lateral indesejada */
}

/* Efeito de Granulação (Noise) */
.grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* SVG Noise otimizado */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
}

/* Animação do Marquee (Letreiro Infinito) */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-content {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Ajustes de Scroll */
html {
    scroll-behavior: smooth;
}

/* Ajuste fino de seleção de texto */
::selection {
    background-color: #ffffff;
    color: #000000;
}

.process-row{
  overflow: hidden; 
}

.process-circle{
  width: 190px;
  height: 190px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 9999px;

  display: grid;
  place-items: center;

  color: rgba(255,255,255,.75);
  font-size: 18px;
  line-height: 1;
  text-align: center;

  opacity: 0;
  transform: translateX(70px);
  will-change: transform, opacity;
}

.process-circle.is-visible{
  opacity: 1;
  transform: translateX(0);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease;
}

@media (max-width: 640px){
  .process-circle{
    width: 150px;
    height: 150px;
    font-size: 16px;
  }
}
html{
  scroll-behavior: smooth;
}

section{
  scroll-margin-top: 110px; /* ajuste se seu header for maior/menor */
}

.nav-link.is-active{
  color: rgba(255,255,255,1);
  position: relative;
}

.nav-link.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,.6);
  border-radius: 999px;
}