@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,600;1,400&family=Noto+Sans+Arabic:wght@400;500;700&display=swap');

:root {
  --bg: #050505;
  --surface: rgba(20, 20, 20, 0.6);
  --border: rgba(255, 255, 255, 0.06);
  --text: #f8fafc;
  --muted: #94a3b8;
  --mono: "IBM Plex Mono", monospace;
  --arabic: "Noto Sans Arabic", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--arabic);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* الكروت الاحترافية الحديثة (Glassmorphism) */
.glass-card {
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 16px; /* حواف ناعمة جداً */
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  position: relative;
}

.sier-app {
  width: 100%;
  max-width: 600px; /* تقليل العرض ليكون أركز */
  margin: 0 auto;
  padding: 24px 16px 80px;
}

/* أزرار التبويبات الحديثة */
.tab-nav {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  border-radius: 99px;
  margin-bottom: 32px;
  border: 1px solid var(--border);
}

.tab-btn {
  flex: 1;
  padding: 10px;
  border-radius: 99px;
  color: var(--muted);
  font-size: 13px;
  transition: all 0.3s ease;
  text-align: center;
}

.tab-btn--active {
  background: rgba(255,255,255,0.1);
  color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

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

/* تأثير نبض الكرت كنبضات قلب واثقة وهادئة */
@keyframes heartPulse {
  0% { transform: scale(1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
  30% { transform: scale(1.015); box-shadow: 0 16px 50px rgba(34, 197, 94, 0.15); }
  60% { transform: scale(1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
}

.animate-heart-pulse {
  animation: heartPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* تأثير نبض التوهج الخلفي بشكل متناسق مع القلب */
@keyframes glowPulse {
  0% { opacity: 0.3; transform: translate(-50%, 0) scale(1); }
  30% { opacity: 0.5; transform: translate(-50%, -5px) scale(1.2); }
  60% { opacity: 0.3; transform: translate(-50%, 0) scale(1); }
}

.animate-glow-pulse {
  animation: glowPulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* تأثير القصاصات الاحتفالية المتساقطة من الأعلى */
@keyframes confettiFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}

.animate-confetti-fall {
  animation: confettiFall 3.5s linear both;
}

/* محاكاة نبضات القلب الحقيقية (Lub-Dub) للأيقونة */
@keyframes realBeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.25); }
  60% { transform: scale(1); }
  100% { transform: scale(1); }
}

.animate-real-beat {
  animation: realBeat 1.5s ease-in-out infinite;
}