/* ===============================
   PROJECTS SECTION
================================ */

.projects-section {
  position: relative;
  background:
    radial-gradient(
      1200px 600px at 10% 10%,
      rgba(247,148,29,0.12),
      transparent 60%
    ),
    radial-gradient(
      1000px 500px at 90% 80%,
      rgba(247,148,29,0.08),
      transparent 60%
    ),
    linear-gradient(180deg, #0b0f14, #0e131a);

  padding: 8rem 2rem;
  overflow: hidden;
}

.projects-wrapper {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.projects-header {
  max-width: 600px;
  margin-bottom: 4.5rem;
}

.projects-eyebrow {
  display: inline-block;
  font-size: 1.75rem;
  letter-spacing: 0.15em;
  font-weight: 600;
  color: var(--accent-main);
  margin-bottom: 0.8rem;
}

.projects-header h2 {
  font-size: 3.6rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.projects-header h2 span {
  color: var(--accent-main);
}

.projects-header p {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #9ca3af;
}

/* GRID */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}

/* CARD */
.project-card {
  position: relative;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
  background: #111827;
  text-decoration: none;
}

/* IMAGE */
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(.4,0,.2,1);
}

/* OVERLAY */
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.2),
    transparent
  );
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  opacity: 0;
  transform: translateY(12px);
  transition: all 0.6s cubic-bezier(.4,0,.2,1);
}

.project-overlay h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
}

.project-overlay span {
  font-size: 0.85rem;
  margin-top: 0.4rem;
  color: #d1d5db;
}

/* HOVER */
.project-card:hover .project-media img {
  transform: scale(1.08);
}

.project-card:hover .project-overlay {
  opacity: 1;
  transform: translateY(0);
}
/* ===============================
   PROJECTS BACKGROUND EFFECTS
================================ */

.projects-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Glow blobs */
.projects-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.6;
  animation: projectGlowFloat 18s ease-in-out infinite;
}

.projects-glow.left {
  background: rgba(247,148,29,0.35);
  left: -200px;
  top: 20%;
}

.projects-glow.right {
  background: rgba(247,148,29,0.25);
  right: -200px;
  top: 60%;
  animation-delay: 6s;
}

@keyframes projectGlowFloat {
  0%   { transform: translateY(0) translateX(0); }
  50%  { transform: translateY(-60px) translateX(40px); }
  100% { transform: translateY(0) translateX(0); }
}