/* Custom TikTok styles and animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  0% { transform: scale(0.85); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.8); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-fadeIn {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-popIn {
  animation: popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

.pulse-glow {
  animation: pulseGlow 2s infinite ease-in-out;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Vertical Snap Container */
.snap-y-mandatory {
  scroll-snap-type: y mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.snap-stop-always {
  scroll-snap-stop: always;
}

/* TikTok Captions Style */
.tiktok-caption-box {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Sound wave animation */
.sound-bar {
  display: inline-block;
  width: 3px;
  background: #10b981;
  border-radius: 2px;
  animation: soundBounce 1s infinite ease-in-out;
}
.sound-bar:nth-child(1) { height: 6px; animation-delay: 0.1s; }
.sound-bar:nth-child(2) { height: 14px; animation-delay: 0.3s; }
.sound-bar:nth-child(3) { height: 8px; animation-delay: 0.2s; }
.sound-bar:nth-child(4) { height: 12px; animation-delay: 0.4s; }

@keyframes soundBounce {
  0%, 100% { height: 4px; }
  50% { height: 16px; }
}