/* RESET DE BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: #171821; /* Couleur de fond */
  font-family: sans-serif;
  color: #fff;
  overflow: hidden; /* Pour éviter les scrollbars si la hauteur est insuffisante */
}

/* CONTAINER PRINCIPAL */
.container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* DESIGN LOGO (se défloute en descendant + flou léger au survol) */
.design-logo {
  position: absolute;
  width: 700px;

  /* On part du centre (50%) et on descend vers 65% */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -70%);

  /* Départ : invisible et flou */
  opacity: 0;
  filter: blur(10px);

  /* On l’anime vers un top: 65% */
  animation: deblurDown 2s ease forwards;

  /* On place un z-index inférieur à celui du LST si besoin */
  z-index: 1;
}

/* Au survol : flou léger */
.design-logo:hover {
  filter: blur(3px);
}

/* KEYFRAMES - DESIGN LOGO descend et se défloute */
@keyframes deblurDown {
  0% {
    top: 50%;
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    top: 65%;
    opacity: 1;
    filter: blur(0);
  }
}

/* LST LOGO (monte plus haut) */
.lst-logo {
  position: absolute;
  width: 200px;

  /* On part du centre (50%) et on monte vers 30% */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  opacity: 0;
  z-index: 2; /* Au-dessus du design_logo */

  /* Animation : démarrage avec un léger décalage pour éviter un chevauchement brutal */
  animation: slideUp 2s ease 0.2s forwards;
}

/* KEYFRAMES - LST LOGO monte */
@keyframes slideUp {
  0% {
    top: 50%;
    opacity: 0;
  }
  100% {
    top: 18%;
    opacity: 1;
  }
}

/* BOUTON "DISCOVER" */
.discover-button {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #00ffa1, #00c4ff);
  color: #171821;
  text-decoration: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 30px;
  transition: transform 0.3s ease;
}

/* Effet au survol */
.discover-button:hover {
  transform: translateX(-50%) scale(1.1);
}

/* MEDIA QUERIES (pour éviter chevauchement sur écrans plus petits) */
@media (max-height: 700px) {
  .lst-logo {
    top: 25%;
  }
  .design-logo {
    top: 70%;
  }
}

@media (max-height: 600px) {
  .lst-logo {
    top: 20%;
    width: 180px;
  }
  .design-logo {
    top: 75%;
    width: 300px;
  }
}

/*
  Vous pouvez également ajouter un @media (max-width: ...) si
  vous rencontrez un chevauchement sur la largeur réduite
*/