html { scroll-behavior: smooth; }


html {
  scroll-padding-top: 80px; 
}

	
.animated-bg {
    background: linear-gradient(-45deg, #004AAD, #2563eb, #1e3a8a, #FF7A00);
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (max-width: 768px) {
    .animated-bg {
        background: linear-gradient(-45deg, #004AAD, #2563eb, #1e3a8a, #FF7A00);
        background-size: 600% 400%;
    }
}
	
    /* Small icon line animation for a nicer toggle */
    .hamburger-line {
      transition: transform .25s ease, opacity .25s ease;
      transform-origin: center;
    }
	.hamburger-open .line1 { transform: translateY(9px) rotate(45deg); }
    .hamburger-open .line2 { opacity: 0; transform: scaleX(.2); }
	.hamburger-open .line3 { transform: translateY(-9px) rotate(-45deg); }
	
.translate-y-full {
  transform: translateY(-100%);
}

/* Varmista, että mobiilivalikko on näkyvissä kun se avataan */
#mobileMenu:not(.translate-y-full) {
  transform: translateY(0);
}

.hero-title {
  opacity: 0;
  animation: smoothFadeIn 1.2s ease-out forwards;
  animation-delay: 0.3s;
}

.hero-subtitle {
  opacity: 0;
  animation: smoothFadeIn 1.2s ease-out forwards;
  animation-delay: 0.6s;
}

.hero-item {
  opacity: 0;
  animation: smoothFadeIn 1.2s ease-out forwards;
}

.hero-item:nth-child(3) { animation-delay: 0.9s; }
.hero-item:nth-child(4) { animation-delay: 1.1s; }
.hero-item:nth-child(5) { animation-delay: 1.3s; }

.hero-buttons {
  opacity: 0;
  animation: smoothFadeIn 1.2s ease-out forwards;
  animation-delay: 1.6s;
}

.hero-button {
  transform: translateY(20px);
  opacity: 0;
  animation: buttonSlideUp 0.8s ease-out forwards;
}

.hero-button:nth-child(1) { animation-delay: 1.8s; }
.hero-button:nth-child(2) { animation-delay: 2.0s; }

@keyframes smoothFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes buttonSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}