/* === animation.css === */
.qms-fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1.2s ease forwards;
  animation-delay: 0.3s;
}

.qms-logo-fade {
  opacity: 0;
  transform: scale(0.95);
  animation: logoIn 1.1s ease forwards;
  animation-delay: 0.2s;
}

.qms-float {
  opacity: 0;
  transform: translateY(20px);
  animation: floatUp 1s ease forwards;
}

.qms-float:nth-child(1) { animation-delay: 0.2s; }
.qms-float:nth-child(2) { animation-delay: 0.4s; }
.qms-float:nth-child(3) { animation-delay: 0.6s; }


.particles {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(255,215,0,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
  animation: moveParticles 40s linear infinite;
}

@keyframes moveParticles {
  from { background-position: 0 0; }
  to { background-position: 200px 200px; }
}

.hero > * {
  position: relative;
  z-index: 2;
}



@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}