/* ========== Page load: reload par top pe ========== */
html { scroll-behavior: smooth; }

/* ========== Hero overlay + load animations ========== */
.hero { position: relative; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(55px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: translateX(0); }
}

.hero-badge { opacity: 0; animation: fadeInLeft 0.9s ease-out forwards; }
.hero-title { opacity: 0; animation: fadeInUp 0.9s ease-out 0.2s forwards; }
.hero-subtitle { opacity: 0; animation: fadeIn 1s ease-out 0.45s forwards; }

/* ========== Scroll par animation: upar, neeche, left, right ========== */
.animate-on-scroll {
  opacity: 0 !important;
  visibility: visible;
  transform: translateY(60px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.animate-on-scroll.visible {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

.animate-on-scroll.fade-up { transform: translateY(80px) !important; }
.animate-on-scroll.fade-up.visible { transform: translateY(0) translateX(0) scale(1) !important; }

.animate-on-scroll.fade-left { transform: translateX(-100px) translateY(0) !important; }
.animate-on-scroll.fade-left.visible { transform: translateX(0) translateY(0) scale(1) !important; }

.animate-on-scroll.fade-right { transform: translateX(100px) translateY(0) !important; }
.animate-on-scroll.fade-right.visible { transform: translateX(0) translateY(0) scale(1) !important; }

.animate-on-scroll.fade-down { transform: translateY(-80px) !important; }
.animate-on-scroll.fade-down.visible { transform: translateY(0) translateX(0) scale(1) !important; }

.animate-on-scroll.fade-scale { transform: scale(0.75) !important; }
.animate-on-scroll.fade-scale.visible { transform: scale(1) translateY(0) translateX(0) !important; }

.animate-on-scroll.fade-zoom { transform: scale(0.8) !important; }
.animate-on-scroll.fade-zoom.visible { transform: scale(1) translateY(0) translateX(0) !important; }

.animate-on-scroll.fade-only { transform: none !important; transition: opacity 1s ease-out; }
.animate-on-scroll.fade-only.visible { transform: none !important; }

.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }