/* Landing Page Styles */
html {
  scroll-behavior: smooth;
}


/* Hero image as background, always behind text */
.hero-section {
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('/images/landing_page.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  animation: pixelateIn 0.05s ease-out forwards;
  z-index: 0;
}
.hero-section > * {
  position: relative;
  z-index: 1;
}

/* Pixelate-in animation for hero background */
@keyframes pixelateIn {
  0% {
    filter: blur(20px);
    opacity: 0;
  }
  50% {
    filter: blur(10px);
    opacity: 0.7;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

/* Slide in from left animation */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: fadeInDown 0.1s ease-out forwards;
}

/* Typing/fade-in animation for subtitle */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typing-container {
  display: block;
  max-width: 100%;
}

.typing-text {
  animation: fadeInUp 0.1s ease-out forwards;
  display: block;
}
/* Fade up animation for hero button */
.hero-button {
  opacity: 0;
  animation: fadeInUp 2.5s ease-out forwards;
  
}


/* Initially hide animated elements */
.hero-title {
  opacity: 0;
  background: none !important;
  box-shadow: none !important;
}

.hero-subtitle {
  opacity: 0;
  background: none !important;
  box-shadow: none !important;
}