/* ===========================
   KEYFRAMES
=========================== */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.6; }
  50%       { transform: translateX(-50%) translateY(9px); opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(79, 142, 247, 0.15); }
  50%       { box-shadow: 0 0 40px rgba(79, 142, 247, 0.35); }
}

/* ===========================
   HERO ENTRANCE (immediate, CSS-driven)
=========================== */

.hero-tag {
  animation: fade-up 0.6s ease 0.1s both;
}

.hero-title {
  animation: fade-up 0.65s ease 0.22s both;
}

.hero-subtitle {
  animation: fade-up 0.65s ease 0.36s both;
}

.hero-actions {
  animation: fade-up 0.65s ease 0.5s both;
}

.hero-scroll {
  animation: scroll-bounce 2.2s ease-in-out 1s infinite;
}

.hero-tag-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ===========================
   SCROLL FADE-IN
   JS adds .visible class via IntersectionObserver
=========================== */

.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children automatically */
.fade-in-up:nth-child(1) { transition-delay: 0ms; }
.fade-in-up:nth-child(2) { transition-delay: 90ms; }
.fade-in-up:nth-child(3) { transition-delay: 180ms; }
.fade-in-up:nth-child(4) { transition-delay: 270ms; }
.fade-in-up:nth-child(5) { transition-delay: 360ms; }
.fade-in-up:nth-child(6) { transition-delay: 450ms; }

/* Manual delay overrides */
.delay-0   { transition-delay: 0ms   !important; }
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }