@import url('variables.css');

/* ---------- انميشن الظهور المتدرّج ---------- */
.stagger-item {
  opacity: 0;
  transform: translateY(14px);
  animation: stagger-in 0.6s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes stagger-in {
  to { opacity: 1; transform: translateY(0); }
}
/* البطاقات تستخدم animation للظهور المتدرّج بدل IntersectionObserver هنا،
   لذا نلغي سلوك .card الافتراضي القائم على in-view */
.profile-card.stagger-item { transition: none; }
.profile-card.stagger-item.in-view { opacity: 0; transform: translateY(14px); animation: stagger-in 0.6s var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 90ms); }

.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 30px 22px 26px;
}

.avatar-upload-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.avatar-upload-wrap::before { display: none; }

.profile-avatar {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 10px 26px rgba(0, 0, 0, 0.55);
}
.avatar-edit-badge {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(20, 24, 30, 0.85);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3), 0 4px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-edit-badge::before {
  content: '';
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eaf3ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.profile-name { margin-top: 4px; }

.profile-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-meta-row .chip { letter-spacing: 0.4px; }

.profile-bio {
  max-width: 300px;
  font-size: calc(0.86rem * var(--font-scale));
  color: var(--text-h4);
  text-shadow: var(--shadow-text);
  line-height: 1.7;
}

.profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  width: 100%;
}
.profile-actions .btn { flex: 1; }

.profile-card--soon {
  align-items: center;
  gap: 8px;
  padding: 26px 20px;
  min-height: 96px;
  justify-content: center;
}
.soon-badge {
  padding: 4px 14px;
  border-radius: var(--radius-btn);
  background: rgba(140, 190, 255, 0.14);
  box-shadow: inset 0 0 0 1.5px rgba(190, 220, 250, 0.4);
  font-size: calc(0.74rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-h1);
  text-shadow: var(--shadow-text);
}

.logout-btn { margin-top: 4px; }

/* ---------- صحيفة تعديل الملف ---------- */
.edit-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(2, 3, 5, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-standard);
}
.edit-sheet-overlay.open { opacity: 1; pointer-events: auto; }

.edit-sheet {
  width: 100%;
  max-width: var(--app-max-w);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 22px 20px 28px;
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease-out);
  opacity: 1;
}
.edit-sheet-overlay.open .edit-sheet { transform: translateY(0); }

.edit-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}