/* ===================================
   Notebody Landing Page - Animations
   =================================== */

/* ===================================
   Fade In Animation
   =================================== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

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

/* ===================================
   Hero SVG Float Animation
   =================================== */
.hero-svg {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* ===================================
   Floating Note Animations
   =================================== */
.floating-note-1 {
  animation: noteFloat1 5s ease-in-out infinite;
}

.floating-note-2 {
  animation: noteFloat2 4.5s ease-in-out infinite 0.5s;
}

.floating-note-3 {
  animation: noteFloat3 4s ease-in-out infinite 1s;
}

@keyframes noteFloat1 {
  0%, 100% {
    transform: translateY(-40px) rotate(-2deg);
  }
  50% {
    transform: translateY(-52px) rotate(1deg);
  }
}

@keyframes noteFloat2 {
  0%, 100% {
    transform: translateY(-80px) rotate(1.5deg);
  }
  50% {
    transform: translateY(-88px) rotate(-1deg);
  }
}

@keyframes noteFloat3 {
  0%, 100% {
    transform: translateY(-40px) rotate(1deg);
  }
  50% {
    transform: translateY(-50px) rotate(-1.5deg);
  }
}