@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}
@keyframes float-delayed {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(-5deg);
  }
}
@keyframes confetti-fall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(60px) rotate(360deg);
    opacity: 0;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.gradient-text {
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.float-emoji {
  animation: float 6s ease-in-out infinite;
}
.float-emoji-delayed {
  animation: float-delayed 5s ease-in-out infinite;
  animation-delay: 1s;
}
.hero-fade {
  animation: fade-in-up 0.8s ease-out both;
}
.hero-fade-delay-1 {
  animation-delay: 0.15s;
}
.hero-fade-delay-2 {
  animation-delay: 0.3s;
}
.hero-fade-delay-3 {
  animation-delay: 0.45s;
}
.hero-fade-delay-4 {
  animation-delay: 0.6s;
}

/* Phone mockup scrollbar hide */
.phone-scroll::-webkit-scrollbar {
  display: none;
}
.phone-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Details marker */
details summary::-webkit-details-marker {
  display: none;
}
details summary {
  list-style: none;
}
details[open] summary .faq-arrow {
  transform: rotate(180deg);
}
.faq-arrow {
  transition: transform 0.2s ease;
}