/* css/hero-entrance.css */
/* Cinematic entrance animations for hero section */
.hero-section {
  position: relative; /* ensure children are positioned */
}

/* Initial hidden state */
.hero-section .entrance-step {
  opacity: 0;
  transform: translateY(20px);
}

/* When body has .hero-enter, start animations */
body.hero-enter .hero-calligraphy {
  animation: fadeInBg 1.2s forwards;
}
body.hero-enter .hero-overlay {
  animation: fadeInOverlay 1s forwards;
  animation-delay: 0.4s;
}
body.hero-enter .hero-glow {
  animation: fadeInGlow 0.8s forwards;
  animation-delay: 0.8s;
}
body.hero-enter .hero-title {
  animation: slideUp 0.6s forwards;
  animation-delay: 1.2s;
}
body.hero-enter .hero-subtitle {
  animation: slideUp 0.6s forwards;
  animation-delay: 1.6s;
}
body.hero-enter .hero-description {
  animation: slideUp 0.6s forwards;
  animation-delay: 2.0s;
}
body.hero-enter .hero-buttons {
  animation: slideUp 0.6s forwards;
  animation-delay: 2.4s;
}

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

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

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}