@keyframes bg-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


.animate-bg-scroll {
  animation: bg-scroll 80s linear infinite;
}

@keyframes scroll-line-down {
  0% {
    transform: translateY(-100%);
  }
  30% {
    transform: translateY(0);
  }
  60%, 100% {
    transform: translateY(100%);
  }
}


.animate-scroll-line {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}


.animate-scroll-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1c72b2; 
  animation: scroll-line-down 2.5s cubic-bezier(0.15, 0, 0.45, 1) infinite;
}

@keyframes text-scroll-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}


.animate-text-loop {
  display: flex;
  flex-direction: column;
  animation: text-scroll-up 20s linear infinite;
  will-change: transform;
}


.animate-text-loop span {
  flex-shrink: 0;
}

[data-fade-trigger],
[data-head-fade-trigger], 
[data-text-fade-trigger] {
  opacity: 0;
}

.fade-up-anime {
  animation: fadeUp 0.8s ease forwards;
}

.fade-in-anime {
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


dialog[open] {
  animation: fadeIn 0.3s ease-out forwards;
}

dialog[open]::backdrop {
  animation: backdropFadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95); 
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes backdropFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}