@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');

@keyframes moveLoadingScreen {
  0% {opacity: 1; }
  100% {opacity: 0;}
}
@keyframes displayNone {
    0% {display: block; }
  100% {display: none;}
}
@keyframes removeOverflow {
    0% {overflow: hidden; }
  100% {overflow: visible;}
}
body {
  overflow: hidden;
  animation: removeOverflow 0.05s ease 5s forwards;

}

.logo-container {
  background: white;
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  z-index: 1031;
  animation: moveLoadingScreen 0.75s ease-out 4.5s forwards, displayNone 0.05s ease 5.75s forwards;
}
.logo-virtualeo {
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
   
}

.logo-shape {
  position: relative;
  display: block;
  height: 100px;
  width: 100px;   
  margin-bottom: 0.5em;
  left: 50%;
  transform: translateX(-50%);
}

.logo-bar {
  width: 9px;
  transform: rotate(-28deg);
  border-radius: 9px;
  background: linear-gradient(to top, #d38454, #35a9e1);
  position: absolute;
}

.logo-bar1{  background: linear-gradient(to top, #da9261, #5096ae);  height: 71px;  top: 0px;   left: -1px;} 
.logo-bar2{  background: linear-gradient(to top, #ee9257, #ac937b);  height: 33px;  top: 68px;  left: 25px;}
.logo-bar3{  background: linear-gradient(to top, #d39266, #2597c6);  height: 91px;  top: -1px;  left: 23px;}
.logo-bar4{  background: linear-gradient(to top, #d39265, #7b9495);  height: 18px;  top: 52px;  left: 50px; }
.logo-bar5{  background: linear-gradient(to top, #a39380, #5f95a5);  height: 21px;  top: 36px;  left: 59px; }
.logo-bar6{  background: linear-gradient(to top, #8e948c, #4b96b1);  height: 23px;  top: 20px;  left: 68px;}
.logo-bar7{  background: linear-gradient(to top, #6a95a0, #2297c8);  height: 26px;  top: 3px;   left: 77px;}

.logo-bar {
  animation: barFadeIn 0.4s ease-out forwards;
  opacity: 0;
  transform: rotate(-28deg) translateY(10px);
}

@keyframes barFadeIn {
  0% {
    opacity: 0;
    transform: rotate(-28deg) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: rotate(-28deg) translateY(0);
  }
}

/* Délais pour un effet de séquence fluide */
.logo-bar1 { animation-delay: 0.4s; }
.logo-bar2 { animation-delay: 0.5s; }
.logo-bar3 { animation-delay: 0.6s; }
.logo-bar4 { animation-delay: 0.7s; }
.logo-bar5 { animation-delay: 0.8s; }
.logo-bar6 { animation-delay: 0.9s; }
.logo-bar7 { animation-delay: 1s; }





/* Texte */
.logo-text {
  font-weight: 800;
  font-size: 27px;
  letter-spacing: 1.4px;
  color: #ff914d;
  margin-top: 20px; 
   font-family: "Dosis", sans-serif;
}

@keyframes  firstLetterAppear {from{left: 41%;}  to {left: 0;}}
@keyframes  letterFadeIn      {from {opacity: 0;}  to {opacity: 1;}}
@keyframes  letterSlideUp     {from {top: 10px;}  to {top: 0;}}

.logo-text span {
  opacity: 0;
  position: relative;
}

.logo-text span:first-child {
  background: linear-gradient(0deg,rgba(217, 146, 98, 1) 20%, rgba(81, 150, 174, 1) 65%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  left: 41%;
  animation: letterFadeIn 0.5s cubic-bezier(.61,0,.54,1.14) 0.5s normal forwards,
  firstLetterAppear 0.40s ease-in-out 1 1s normal forwards;
}
.letter-to-show {
  display: inline-block;
  top: 10px;
}
.letter-to-show:nth-child(1) { 
  animation: letterFadeIn 0.5s ease 1.3s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 1.3s normal forwards;
}
.letter-to-show:nth-child(2) { 
  animation: letterFadeIn 0.5s ease 1.4s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 1.4s normal forwards;
}
.letter-to-show:nth-child(3) { 
  animation: letterFadeIn 0.5s ease 1.5s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 1.5s normal forwards;
}
.letter-to-show:nth-child(4) { 
  animation: letterFadeIn 0.5s ease 1.6s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 1.6s normal forwards;
}
.letter-to-show:nth-child(5) { 
  animation: letterFadeIn 0.5s ease 1.7s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 1.7s normal forwards;
}
.letter-to-show:nth-child(6) { 
  animation: letterFadeIn 0.5s ease 1.8s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 1.8s normal forwards;
}
.letter-to-show:nth-child(7) { 
  animation: letterFadeIn 0.5s ease 1.9s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 1.9s normal forwards;
}
.letter-to-show:nth-child(8) { 
  animation: letterFadeIn 0.5s ease 2s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 2s normal forwards;
}
.letter-to-show:nth-child(9) { 
  animation: letterFadeIn 0.5s ease 2.1s normal forwards,
  letterSlideUp 0.50s cubic-bezier(.17,.67,.49,1.35) 1 2.1s normal forwards;
}

.scan-line {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  animation: scan 1s ease-in-out 2.5s forwards;
}

@keyframes scan {
  0% { top: -100%; }
  100% { top: 100%; }
}