* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* scroll-snap-type: block; */

}

:root{
  --top-section-scroll: 0;
}

html, body{
  height: 100%;
  width: 100%;
  /* scroll-behavior: smooth; */
  /* scroll-snap-type: y mandatory; */

  /* overflow: hidden; */
}
.center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: red;
}


.section {
  height: 100vh;
  /* width: 100vw; */
  /* position: relative; */
  /* overflow: hidden; */
}

#section1{
  width: 100vw;
  height: 400vh;

}


.sticky{
  position:sticky;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  top: 0;
}


.bg-wrapper{
  height: 100vh;
  background: radial-gradient(50% 50% at 50% 50%, #001F31 0%, #000418 100%);
}

.line-section{
  height: 100vh;

}

#horizontal-line{
  height: 80vh;
  width: 2px;
  border: 1px;
  transform: translate(50vw, 10vh);
  background: linear-gradient( rgba(6, 206, 124, 0) 0%, #06CE7C 50%, rgba(6, 206, 124, 0) 100%);
  animation: animate-horizontal-line 0.8s ease-in-out  forwards, animate-line-dim 1s linear forwards;
  animation-delay: 0s, 1.6s;

}
@keyframes animate-horizontal-line {
  0% { transform : translate(50vw, -80vh)  }
  100% { transform : translate(50vw, 10vh)  }
}

#vertical-line{
  position: absolute;
  height: min(120vw, 80vh);
  width: 2px;
  border: 1px;
  top: 50%;
  left: 50%;
  transform-origin: top left;
  transform: rotate(-60deg) translateY(50vh);
  background: linear-gradient( rgba(6, 206, 124, 0) 0%, #06CE7C 50%, rgba(6, 206, 124, 0) 100%);
  animation: animate-vertical-line 0.8s ease-in-out  forwards, animate-line-dim 1s linear forwards;
  animation-delay: 0s, 1.6s;
}

@keyframes animate-vertical-line {
  0% {   transform: rotate(-60deg) translateY(50vh);
  }
  100% {   transform: rotate(-60deg) translateY(max(-60vw, -40vh));
  }
}
@keyframes animate-line-dim {
  0% {   opacity: 1 }
  
  100% { opacity: 0}
}




/* BG glowing Section */
#bg-glow{
  position: absolute;
  transform-origin: 50% 46%;
  height: 90vh;
  width: 100vw;
  top: 8vh;
  transform : scale(0);
  animation: animate-glow 1s ease-in-out  forwards, animate-dim 1s linear  forwards;
  animation-delay: 0.8s, 1.6s;
}

@keyframes animate-glow {
  0% { transform : scale(0)  }
  100% { transform : scale(1)  }
}

@keyframes animate-dim {
  0% { transform : scale(1)  }
  100% { transform : scale(0)  }
}



/* Logo Section */
#logo-top{
  position: absolute;
  width: 32vh;
  height: 14vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(40deg) rotateZ(130deg) scale(1);
  background-image: radial-gradient(#06CE7C,#00B6D0,#87E600,#06CE7C );
  background-size: 200% 200%;
  /* animation-composition: accumulate; */
}


#logo-top.animate{
  transform: translate(-50%, -50%) skewX(40deg) rotateZ(130deg) scale(0);

  animation: animate-logo-top-gradient 5s ease-in-out infinite alternate, animate-logo-top-scale 1.5s ease-in-out forwards;
  animation-delay: 0s, 1.6s;
}

@keyframes animate-logo-top-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 200% 200%; }
}

@keyframes animate-logo-top-scale {
  0% { transform: translate(-50%, -50%) skewX(40deg) rotateZ(130deg) scale(0); }
  100% { transform: translate(-50%, -50%) skewX(40deg) rotateZ(130deg) scale(1); }
  
}

#logo-top-wrapper{
  transform: translate(calc( max(-1 * ( var(--top-section-scroll) * (36vw) / 200), -36vw)), -30vh) rotate(calc( max( -1 * var(--top-section-scroll) * (180deg) / 200, -180deg)));
  width: 100%;
  height: 100%;
  transition-timing-function: linear;
  /* translate for a time */
  /* transition: transform 0.5s ease-in-out; */
  /* scroll-behavior: smooth; */
}


#logo-bottom{
  position: absolute;
  width: 34vh;
  height: 18.4vh;
  top: 91.5%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(90deg) skewX(40deg)  scale(0);

  background: radial-gradient(383.42% 96.01% at 50.06% 14.65%, #005BC8 0%, #004AA3 32.81%, #004AA3 70.31%, #004AA3 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;
  background-size: 200% 200%;
  /* background-image: radial-gradient(#06CE7C,#00B6D0,#87E600,#06CE7C );
  */
  animation: animate-logo-bottom-scale 1.5s ease-in-out forwards;
  animation-delay: 1.6s; 
}

@keyframes animate-logo-bottom-scale {
  0% { transform: translate(-50%, -50%) rotateZ(90deg) skewX(40deg)  scale(0);  }
  100% { transform: translate(-50%, -50%) rotateZ(90deg) skewX(40deg)  scale(1); }
  
}