/* ═══════════════════════════════════════════════════════════
   projects.css — سکشن پروژه‌های منتخب (صفحه اصلی)
   بازسازی‌شده — هماهنگ با بقیه سکشن‌های front-page
═══════════════════════════════════════════════════════════ */

.projects {
  position: relative;
  background: #0c0a08;
  padding: clamp(60px, 9vw, 110px) 0;
  overflow: hidden;
  direction: rtl;
  font-family: 'IRANSans', 'Vazirmatn', Tahoma, sans-serif;
}

/* ── Sparkles ─────────────────────────────────────── */
.projects__sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(231, 181, 114, 0.8);
  box-shadow: 0 0 8px rgba(231, 181, 114, 0.7);
  pointer-events: none;
  animation: projects-twinkle 2.4s ease-in-out infinite;
}

.projects__sparkle--1  { top: 8%;  right: 6%;  animation-delay: 0s; }
.projects__sparkle--2  { top: 14%; right: 28%; animation-delay: .6s; width: 2px; height: 2px; }
.projects__sparkle--3  { top: 6%;  right: 52%; animation-delay: 1.3s; }
.projects__sparkle--4  { top: 18%; right: 74%; animation-delay: .9s; width: 2px; height: 2px; }
.projects__sparkle--5  { top: 10%; right: 90%; animation-delay: 1.8s; }
.projects__sparkle--6  { top: 36%; right: 12%; animation-delay: 2.1s; width: 2px; height: 2px; }
.projects__sparkle--7  { top: 42%; right: 44%; animation-delay: .3s; }
.projects__sparkle--8  { top: 34%; right: 68%; animation-delay: 1.5s; width: 2px; height: 2px; }
.projects__sparkle--9  { top: 48%; right: 88%; animation-delay: .8s; }
.projects__sparkle--10 { top: 60%; right: 8%;  animation-delay: 1.1s; width: 2px; height: 2px; }
.projects__sparkle--11 { top: 66%; right: 32%; animation-delay: 2.4s; }
.projects__sparkle--12 { top: 58%; right: 56%; animation-delay: .5s; width: 2px; height: 2px; }
.projects__sparkle--13 { top: 70%; right: 78%; animation-delay: 1.7s; }
.projects__sparkle--14 { top: 84%; right: 16%; animation-delay: 2s; width: 2px; height: 2px; }
.projects__sparkle--15 { top: 90%; right: 42%; animation-delay: .4s; }
.projects__sparkle--16 { top: 82%; right: 64%; animation-delay: 1.2s; width: 2px; height: 2px; }
.projects__sparkle--17 { top: 92%; right: 86%; animation-delay: 2.6s; }

@keyframes projects-twinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* ── Wrap ─────────────────────────────────────────── */
.projects__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 24px);
  position: relative;
  z-index: 1;
}

/* ── Head ─────────────────────────────────────────── */
.projects__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.projects__eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 3px;
  color: #e7b572;
  margin-bottom: 10px;
}

.projects__head-side h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 700;
  color: #f4ead9;
  line-height: 1.5;
  margin: 0 0 10px;
}

.projects__head-side h2 em {
  font-style: normal;
  background: linear-gradient(120deg, #f6d29a 0%, #e7b572 55%, #c9a96e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.projects__head-side p {
  font-size: .95rem;
  font-weight: 300;
  color: rgba(230, 218, 198, 0.6);
  line-height: 1.9;
  max-width: 480px;
  margin: 0;
}

.projects__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  color: #e7b572;
  text-decoration: none;
  background: rgba(231, 181, 114, 0.06);
  border: 1px solid rgba(231, 181, 114, 0.25);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.projects__link:hover {
  background: rgba(231, 181, 114, 0.13);
  border-color: rgba(231, 181, 114, 0.5);
  transform: translateY(-2px);
}

.projects__link svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transform: scaleX(-1); /* RTL */
}

/* ── Grid ─────────────────────────────────────────── */
.projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
}

/* ── Card ─────────────────────────────────────────── */
.pcard {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(231, 181, 114, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(246, 210, 154, 0.08),
    0 18px 44px -18px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(26px);
  animation: pcard-in .9s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) forwards;
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}

@keyframes pcard-in {
  to { opacity: 1; transform: translateY(0); }
}

.pcard:hover {
  border-color: rgba(231, 181, 114, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(246, 210, 154, 0.1),
    0 24px 56px -18px rgba(0, 0, 0, 0.85),
    0 0 30px -6px rgba(231, 181, 114, 0.18);
  transform: translateY(-6px);
}

.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1), filter .6s ease;
}

.pcard:hover .pcard__img {
  transform: scale(1.07);
  filter: brightness(1.06);
}

.pcard__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 8, 5, 0.96) 0%,
    rgba(10, 8, 5, 0.55) 38%,
    rgba(10, 8, 5, 0.12) 65%,
    rgba(10, 8, 5, 0.25) 100%
  );
  transition: background .5s ease;
}

.pcard__shine {
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 181, 114, 0.55) 50%, transparent);
}

/* category chip */
.pcard__cat {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .5px;
  color: #e7b572;
  background: rgba(12, 10, 8, 0.55);
  border: 1px solid rgba(231, 181, 114, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pcard__cat i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e7b572;
  box-shadow: 0 0 6px rgba(231, 181, 114, 0.8);
}

/* info */
.pcard__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 20px 22px;
}

.pcard__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(231, 181, 114, 0.85);
  margin-bottom: 8px;
}

.pcard__loc svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.pcard__title {
  font-size: 1.12rem;
  font-weight: 700;
  color: #f4ead9;
  line-height: 1.6;
  margin: 0;
  transition: color .3s ease;
}

.pcard:hover .pcard__title {
  color: #f6d29a;
}

/* hover reveal */
.pcard__reveal {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .55s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

.pcard:hover .pcard__reveal {
  max-height: 140px;
  opacity: 1;
  transform: translateY(0);
}

.pcard__reveal p {
  font-size: .85rem;
  font-weight: 300;
  color: rgba(230, 218, 198, 0.75);
  line-height: 1.9;
  margin: 10px 0 12px;
}

.pcard__view {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  font-weight: 500;
  color: #e7b572;
}

.pcard__view svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transform: scaleX(-1); /* RTL */
  transition: transform .3s ease;
}

.pcard:hover .pcard__view svg {
  transform: scaleX(-1) translateX(4px);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
  .projects__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .projects__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .projects__grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
  .pcard {
    aspect-ratio: 4 / 5;
  }
  /* موبایل: توضیح همیشه نمایان */
  .pcard__reveal {
    max-height: 140px;
    opacity: 1;
    transform: none;
  }
}