/* style.css */

/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: #000;
  color: #f5f5f5;
  font-family: "Inter", system-ui, sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* Canvas de linhas energéticas */
canvas#energy-lines {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at center, #0a0a0a 0%, #000 100%);
  /* blur removido conforme ajuste */
}

/* Glass effect */
.glass {
  background: rgba(15, 15, 15, .1);
  border: 1px solid rgba(255, 123, 0, 0.25);
  backdrop-filter: blur(5px) saturate(200%);
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(255, 123, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  z-index: 0;
}

.glass:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(255, 123, 0, 0.25);
}

/* Glare hover */
.glare {
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 123, 0, 0.25),
    transparent 60%
  );
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0;
}

.group:hover .glare {
  opacity: 1;
}

/* Habilidades técnicas spans */
span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

span:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 10px #ff7b00;
  border-color: #ff7b00;
}

h1 {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow: hidden;
  text-align: left;
  max-width: 100%;
}

@layer utilities {
  /* Webkit browsers (Chrome, Edge, Safari) */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f3f4f600; 
  }

  ::-webkit-scrollbar-thumb {
    background-color: #f97316; 
    border-radius: 9999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #ea580c; 
  }

  /* Firefox scrollbar */
  * {
    scrollbar-width: thin;
    scrollbar-color: #f97316 #f3f4f600;
  }
}