html {
  scroll-behavior: smooth;
}

body {
  background-color: #0d1117;
}

.bg-noise {
  background-image: radial-gradient(circle at 1px 1px, rgba(232, 240, 254, 0.04) 1px, transparent 0);
  background-size: 22px 22px;
}

.tag-link:hover .tag-name,
.tag-link.active .tag-name {
  color: #38bdf8;
}

.terminal-caret {
  display: inline-block;
  width: 9px;
  height: 1.1em;
  background: #38bdf8;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.skill-fill {
  width: 0%;
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
}

.card-hover {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.card-hover:hover {
  transform: translateY(-6px);
  border-color: #38bdf855;
  box-shadow: 0 20px 40px -20px rgba(56, 189, 248, 0.22);
}

::selection {
  background: #38bdf8;
  color: #0d1117;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .terminal-caret {
    animation: none;
  }
}

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}

#mobile-menu.open {
  max-height: 400px;
}

/* Devicons */
.tech-icon {
  font-size: 2.4rem;
  transition: transform .2s ease;
}

.tech-item:hover .tech-icon {
  transform: translateY(-4px);
}

/* Depoimentos carrossel */
.testimonial-track {
  display: flex;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.testimonial-slide {
  flex: 0 0 100%;
}

.stars {
  color: #60a5fa;
  letter-spacing: 2px;
}

.dot-btn {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #2a3348;
  transition: background .2s, width .2s;
}

.dot-btn.active {
  background: #38bdf8;
  width: 22px;
}