@keyframes floatPhone {
  0%, 100% {
    transform: perspective(1200px) rotateY(-18deg) rotateX(6deg) translateY(0);
  }
  50% {
    transform: perspective(1200px) rotateY(-18deg) rotateX(6deg) translateY(-18px);
  }
}

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

@keyframes fadeSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateY(-18deg) rotateX(6deg) translateX(60px);
  }
  to {
    opacity: 1;
    transform: perspective(1200px) rotateY(-18deg) rotateX(6deg) translateX(0);
  }
}

@keyframes bounceScroll {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__content {
  animation: fadeSlideLeft 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero__visual {
  animation: fadeSlideRight 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
  opacity: 0;
}

.hero__visual.is-animated {
  opacity: 1;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes rotateBadge {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.phone-mockup {
  animation: floatPhone 5s ease-in-out infinite;
}

.scroll-indicator {
  animation: bounceScroll 2s ease-in-out infinite;
}