/* Rabi' Live Streaming Platform Custom Styles */

/* Animations */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

@keyframes heartFloatUp {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.6) rotate(0deg);
  }
  50% {
    transform: translate(var(--tw-drift), -140px) scale(1.1) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tw-drift-end), -300px) scale(1.4) rotate(-15deg);
  }
}

.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

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

/* Hide scrollbar while keeping ability to scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom scrollbar for Chat container */
#chat-messages-container::-webkit-scrollbar {
  width: 4px;
}
#chat-messages-container::-webkit-scrollbar-track {
  background: rgba(30, 12, 56, 0.5);
}
#chat-messages-container::-webkit-scrollbar-thumb {
  background: #471B7F;
  border-radius: 9999px;
}
#chat-messages-container::-webkit-scrollbar-thumb:hover {
  background: #8B5CF6;
}

/* Chat bubble entrance */
.chat-bubble-enter {
  animation: slideUp 0.18s ease-out forwards;
}

/* RTL Safety for numbers and metrics */
.font-mono {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  direction: ltr;
  display: inline-block;
}

/* Video Stage Aspect Ratio Handling */
#video-container {
  touch-action: manipulation;
}

/* Home Screen Smooth Cards and Badges */
.cat-chip-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.cat-chip-btn:hover {
  transform: translateY(-1px);
}

/* Story pulse ring */
#story-my-stream-btn:hover {
  filter: brightness(1.1);
}

/* Bottom Nav Dock Safe Spacing */
#bottom-nav-dock {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* Official Logo Aura & Shimmer */
#mascot-avatar {
  box-shadow: 0 0 16px rgba(250, 204, 21, 0.28), 0 4px 14px rgba(71, 27, 127, 0.65);
}

#mascot-avatar:hover {
  box-shadow: 0 0 26px rgba(250, 204, 21, 0.5), 0 6px 18px rgba(139, 92, 246, 0.6);
}

.logo-shimmer {
  position: relative;
  overflow: hidden;
}

.logo-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: rotate(25deg) translateY(-100%);
  animation: logoShine 5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes logoShine {
  0%, 75% {
    transform: rotate(25deg) translateY(-120%);
  }
  100% {
    transform: rotate(25deg) translateY(120%);
  }
}