/* intro-hacker.css : styles pour l'animation d'intro hacker/space */

#hacker-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #181c2f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(.77,0,.18,1);
}
#hacker-intro.hide {
  opacity: 0;
  pointer-events: none;
}
#stars-bg {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 1;
  background: transparent;
}
.hacker-data {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1100px;
  max-width: 99vw;
  height: 700px;
  max-height: 92vh;
  transform: translate(-50%,-50%);
  background: rgba(35,41,70,0.85);
  border-radius: 12px;
  box-shadow: 0 0 32px #6c63ff55, 0 2px 16px #000a;
  overflow-y: auto;
  padding: 1.2em 1.1em 1.2em 1.1em;
  font-family: 'Fira Mono', 'Consolas', monospace;
  font-size: 1.45em;
  color: #b8c1ec;
  z-index: 2;
  border: 1.5px solid #3a4be7;
  opacity: 0.98;
}
.hacker-line {
  line-height: 1.3;
  margin-bottom: 0.18em;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px #6c63ff55;
  white-space: pre;
  color: #00ff5a;
  font-size: 1.25em;
  font-family: 'Fira Mono', 'Consolas', monospace;
}
.hacker-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0.9);
  color: #fff;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 0 32px #6c63ff, 0 2px 8px #000a, 0 0 64px #3a4be7;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.7s, transform 0.7s cubic-bezier(.77,0,.18,1);
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
.hacker-title.show {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1.08);
}
.hacker-loader {
  width: 100%;
  height: 8px;
  background: rgba(0,0,0,0.12);
  border-radius: 6px;
  margin-bottom: 1.2em;
  overflow: hidden;
  position: relative;
}
.hacker-loader-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #00ff5a 0%, #6c63ff 100%);
  border-radius: 6px;
  animation: loader-bar-grow 2s linear forwards;
}
@keyframes loader-bar-grow {
  from { width: 0%; }
  to { width: 100%; }
}
@media (max-width: 1200px) {
  .hacker-data { width: 98vw; height: 420px; font-size: 1.12em; }
}
@media (max-width: 900px) {
  .hacker-data { width: 99vw; height: 320px; font-size: 1em; }
}
@media (max-width: 600px) {
  .hacker-title { font-size: 1.1rem; }
  .hacker-data { width: 100vw; height: 220px; font-size: 0.95em; }
}