/* === Animations === */

/* Scroll reveal base */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
[data-animate].stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-animate].stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
[data-animate].stagger.visible > *:nth-child(2) { transition-delay: 100ms; }
[data-animate].stagger.visible > *:nth-child(3) { transition-delay: 200ms; }
[data-animate].stagger.visible > *:nth-child(4) { transition-delay: 300ms; }
[data-animate].stagger.visible > *:nth-child(5) { transition-delay: 400ms; }
[data-animate].stagger.visible > *:nth-child(6) { transition-delay: 500ms; }

[data-animate].stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Hero orb float */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%  { transform: translateY(-12px) rotate(1deg); }
  66%  { transform: translateY(6px) rotate(-1deg); }
}

.hero__orb--1 { animation: float 12s ease-in-out infinite; }
.hero__orb--2 { animation: float 10s ease-in-out infinite reverse; }
.hero__orb--3 { animation: float 14s ease-in-out infinite 2s; }

/* Fade in from below */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title    { animation: fadeInUp 0.7s ease-out both; }
.hero__desc     { animation: fadeInUp 0.7s ease-out 0.15s both; }
.hero__actions  { animation: fadeInUp 0.7s ease-out 0.3s both; }
.badge--glass   { animation: fadeInUp 0.5s ease-out both; }