@keyframes bounceY {
  0%,
  100% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(-30px);
    animation-timing-function: ease-out;
  }
}

.animate-bounceY {
  animation: bounceY 2s infinite;
}

.bg-hero {
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
}
.glass {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.floating-element {
  animation: float 6s ease-in-out infinite;
}
.floating-element:nth-child(2) {
  animation-delay: 1s;
}
.floating-element:nth-child(3) {
  animation-delay: 2s;
}
.bg-decoration {
  animation: pulse-slow 4s ease-in-out infinite;
}
.bg-decoration:nth-child(2) {
  animation-delay: 2s;
}
.bg-decoration:nth-child(3) {
  animation-delay: 1s;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-20px) rotate(1deg);
  }
  66% {
    transform: translateY(-10px) rotate(-1deg);
  }
}
@keyframes pulse-slow {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.1;
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.2;
  }
}

.faq-item {
  transition: all 0.3s ease;
}
.faq-item:hover {
  transform: translateY(-2px);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-answer.active {
  max-height: 999px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.chevron {
  transition: transform 0.3s ease;
}
.chevron.rotate {
  transform: rotate(180deg);
}
.gradient-bg {
  background: linear-gradient(135deg, #f97316 0%, #0d9488 100%);
}
.gradient-bg-kursus {
  background: linear-gradient(135deg, #f97316 0%, #0d9488 50%, #6366f1 100%);
}
.icon-bounce {
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.perspective-1000 {
  perspective: 1000px;
}
.transform-style-preserve-3d {
  transform-style: preserve-3d;
}
.backface-hidden {
  backface-visibility: hidden;
}
.transform-rotate-y-180 {
  transform: rotateY(180deg);
}

/* Smooth transitions */
#flip-container {
  transform-origin: center;
  will-change: transform;
}