/* Custom Arabesque & Refined Islamic UI Styles */

/* Prevent mobile pull-to-refresh & pinch-zoom */
html, body {
  overscroll-behavior-y: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Subtle Geometric Star Pattern */
.arabesque-pattern {
  background-image: radial-gradient(#1A3C34 1.5px, transparent 1.5px), radial-gradient(#D4AF37 1.5px, transparent 1.5px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* Atmospheric Sunbeam / Vignette */
.bg-radial-vignette {
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.7) 0%, rgba(249, 246, 240, 0.4) 60%, rgba(226, 217, 200, 0.8) 100%);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.03);
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.4);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.7);
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

.animate-fade-in {
  animation: fadeIn 0.2s ease-out forwards;
}

/* Smooth Bead Ripple Effect on Tap */
.bead-pulse {
  animation: beadPulse 0.3s ease-out;
}

@keyframes beadPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}