html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #11071f; /* fundalul întregii pagini */
}

/* Intro animat */
.container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #161616;
  animation: slide-out-container 4s cubic-bezier(0.97, 0.01, 0.36, 0.99) 2.8s forwards;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.text-wrapper {
  color: white;
  position: absolute;
}

.text {
  font-weight: lighter;
  font-size: 54px;
}

.text-1,
.text-3,
.text-4,
.text-8,
.text-9,
.text-11 {
  color: transparent;
  -webkit-text-stroke: 1px white;
}

/* Header + butoane */
.header {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  
  font-size: 30px;
  text-align: center;
  z-index: 1;
  background-color: #11071f;
  color: #fff; /* să fie vizibil textul pe fundalul închis */
}

/* Butoane gradient */
.btn {
  padding: 12px 30px;
  margin: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(#0a0a2a, #0a0a2a) padding-box,
              linear-gradient(45deg, #9b4dff, #3a7dff, #00eaff) border-box;
  transition: all 0.4s ease;
}

.btn:hover {
  background: linear-gradient(45deg, #9b4dff, #3a7dff, #00eaff);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 200, 255, 0.5);
}

/* Animații */
@keyframes blink {
    0% {
        opacity: 0%;
    }
    1% {
        opacity: 100%;
    }
    99% {
        opacity: 100%;
    }
    100% {
        opacity: 0;
    }
}

.text-1 {
    animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
    opacity: 0;
}

.text-2 {
    animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
    opacity: 0;
}

.text-3 {
    animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
    opacity: 0;
}

.text-4 {
    animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
    opacity: 0;
}

.text-5 {
    animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
    opacity: 0;
}

.text-6 {
    animation: blink 0.8s linear 0.4s, blink 0.8s linear 2.5s, slide-out 1s linear 3.2s;
    opacity: 0;
}

.text-7 {
    animation: blink 0.8s linear 0.5s, blink 0.8s linear 2.4s;
    opacity: 0;
}

.text-8 {
    animation: blink 0.8s linear 0.6s, blink 0.8s linear 2.3s;
    opacity: 0;
}

.text-9 {
    animation: blink 0.8s linear 0.7s, blink 0.8s linear 2.2s;
    opacity: 0;
}

.text-10 {
    animation: blink 0.8s linear 0.8s, blink 0.8s linear 2.1s;
    opacity: 0;
}

.text-11 {
    animation: blink 0.8s linear 0.9s, blink 0.8s linear 2s;
    opacity: 0;
}

@keyframes slide-out {
    0% {
        opacity: 0%;
    }
    1% {
        opacity: 100%;
    }

    19% {
        opacity: 100%;
    }
    20% {
        opacity: 0%;
    }

    39% {
        opacity: 0%;
    }
    40% {
        opacity: 100%;
    }

    59% {
        opacity: 100%;
    }
    60% {
        opacity: 0%;
    }

    79% {
        opacity: 0%;
    }
    80% {
        opacity: 100%;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes slide-out-container {
    0% {
        height: 100vh;
    }

    40% {
        height: 100vh;
    }

    100% {
        height: 0%;
    }
}

/* Responsiv */
@media (max-width: 990px) {
  .header { font-size: 24px; }
  .text { font-size: 24px; }
}