@import url('variables.css');

/* ============================== شاشة التهيئة ============================== */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(20, 26, 34, 0.96), rgba(3, 4, 6, 0.98));
  transition: opacity 0.45s var(--ease-standard), visibility 0.45s var(--ease-standard);
}
.splash-screen.dismissed { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.6));
  animation: splash-pulse 1.6s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.82; }
}
.splash-title { font-family: 'Reem Kufi', sans-serif; font-size: 1.5rem; }
.splash-subtitle { font-size: 0.82rem; color: var(--text-h4); margin-top: -8px; }
.splash-track {
  width: 160px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.splash-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #9dc3e6, #eef7ff);
  transition: width 0.05s linear;
}

/* ============================== المحتوى الرئيسي ============================== */
.content-container {
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- الصور الإعلانية ---------- */
.ad-carousel {
  width: 100%;
  height: 205px;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.ad-track-wrap { width: 100%; height: 100%; direction: ltr; overflow: hidden; border-radius: inherit; }
.ad-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.48s var(--ease-out);
  will-change: transform;
}
.ad-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; }
.ad-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-slide--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}

.ad-dots {
  position: absolute;
  bottom: 12px;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.ad-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: width var(--t-fast) var(--ease-standard), background var(--t-fast);
}
.ad-dot.active { width: 20px; border-radius: 999px; background: #eef7ff; }

.ad-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  z-index: 3;
}
.ad-arrow .svg-icon { width: 16px; height: 16px; }
.ad-arrow--prev { right: 10px; }
.ad-arrow--next { left: 10px; }

/* ---------- شريط الملف الشخصي المصغّر ---------- */
.mini-profile {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  z-index: 0;
}
.mini-profile > * { position: relative; z-index: 2; }
.mini-profile__side { display: flex; align-items: center; gap: 10px; }
.mini-profile__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.5);
}
.mini-profile__name {
  font-weight: 700;
  font-size: calc(0.94rem * var(--font-scale));
  color: var(--text-h2);
  text-shadow: var(--shadow-text);
}
.mini-profile__id {
  font-size: calc(0.72rem * var(--font-scale));
  color: var(--text-h4);
  letter-spacing: 0.4px;
}

/* ---------- شبكة الأقسام ---------- */
.sections-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.section-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 4px;
  border-radius: var(--radius-card-sm);
  text-decoration: none;
  aspect-ratio: 1 / 1;
  z-index: 0;
}
.section-card > * { position: relative; z-index: 2; }
.section-card__icon-wrap {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.section-card__icon-wrap .svg-icon { width: 19px; height: 19px; }
.section-card__title {
  font-size: calc(0.78rem * var(--font-scale));
  font-weight: 700;
  color: var(--text-h3);
  text-shadow: var(--shadow-text);
  text-align: center;
}

@media (min-width: 700px) {
  .content-container { padding: 22px 28px 10px; gap: 18px; }
  .ad-carousel { height: clamp(260px, 34vw, 420px); }
  .sections-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .section-card { aspect-ratio: 1 / 1; min-height: 120px; }
  .mini-profile { padding: 12px 18px; }
}

@media (min-width: 1050px) {
  .sections-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
}

@media (max-width: 420px) {
  .ad-carousel { height: 180px; }
  .content-container { padding-inline: 10px; gap: 10px; }
  .sections-grid { gap: 8px; }
  .section-card { padding-inline: 4px; }
}