/* projects.css */

/* ===== HERO / TITLE ===== */
.projects-hero{
  position: relative;
  padding: 92px 0 86px;
}

.projects-hero .section-header{
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.projects-hero .section-header h1,
.projects-hero .section-header h2{
  font-size: 40px;
  line-height: 1.08;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.projects-hero .section-header p{
  margin: 0 auto;
  max-width: 64ch;
  font-size: 15px;
  color: var(--text-muted);
}

/* мягкая подсветка зоны проектов (без видимого среза снизу) */
.projects-hero::before{
  content:"";
  position:absolute;
  left:50%;
  top:-180px;
  bottom:-220px;           /* важно: вместо height */
  width:min(1200px, 94vw);
  transform:translateX(-50%);
  pointer-events:none;

  background:
    radial-gradient(circle at 25% 20%, rgba(56,189,248,0.18), transparent 60%),
    radial-gradient(circle at 75% 25%, rgba(37,99,235,0.25), transparent 62%),
    radial-gradient(circle at 50% 85%, rgba(56,189,248,0.12), transparent 62%);

  filter: blur(18px);
  opacity: .95;

  /* плавное затухание по краям, убирает “линию” */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}


/* ===== GRID ===== */
.projects-grid{
  position: relative;
  margin-top: 28px;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* если проектов мало — делаем красивый центр */
.projects-grid:has(.project-card:only-child){
  grid-template-columns: 1fr;
  justify-items: center;
}

.projects-grid:has(.project-card:only-child) .project-card{
  width: min(720px, 100%);
}

/* ===== CARD ===== */
.project-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(31,41,55,0.85);

  background:
    radial-gradient(900px 320px at 40% -20%, rgba(37,99,235,0.22), transparent 55%),
    radial-gradient(700px 340px at 85% 0%, rgba(56,189,248,0.14), transparent 60%),
    linear-gradient(180deg, rgba(11,17,32,0.92), rgba(5,8,22,0.86));

  padding: 18px;
  min-height: 190px;
  box-shadow: 0 18px 48px rgba(2,6,23,0.45);

  transform: translate3d(0,0,0);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

/* постоянное лёгкое “включено” (не только hover) */
.project-card::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 55%),
    radial-gradient(420px 220px at 20% 10%, rgba(56,189,248,0.06), transparent 60%),
    radial-gradient(420px 240px at 90% 0%, rgba(37,99,235,0.08), transparent 65%);
  opacity: .85;
}

.project-card:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(96,165,250,0.55);
  box-shadow: 0 28px 80px rgba(2,6,23,0.65);
}

/* верх карточки */
.project-card-top{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
}

.project-card-icon{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(15,23,42,0.62);
  border: 1px solid rgba(55,65,81,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 34px rgba(2,6,23,0.35);
}

.project-card-icon img{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(56,189,248,0.35));
}

.project-card-icon-fallback{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,0.9), rgba(96,165,250,0.9));
  box-shadow: 0 12px 28px rgba(37,99,235,0.35);
}

/* заголовок + описание */
.project-card-title{
  font-size: 17px;
  line-height: 1.22;
  font-weight: 650;
  margin-top: 2px;
}

.project-card-desc{
  font-size: 13px;
  color: rgba(156,163,175,0.95);
  margin-top: 7px;
  max-width: 62ch;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* кнопка */
.project-card-actions{
  margin-top: 14px;
}

.project-card-btn{
  width: 100%;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* мягкий “пробегающий” блик по кнопке */
.project-card-btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width: 50%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: rotate(18deg) translateX(-160%);
  transition: transform .55s ease;
  pointer-events:none;
}

.project-card:hover .project-card-btn::after{
  transform: rotate(18deg) translateX(280%);
}

/* glow в углу */
.project-card-glow{
  position: absolute;
  inset: -90px -120px auto auto;
  width: 280px;
  height: 280px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(56,189,248,0.20), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(37,99,235,0.26), transparent 60%);
  filter: blur(12px);
  pointer-events: none;
  opacity: 0.95; /* всегда видно */
  transform: translate3d(0,0,0);
}

.projects-empty{
  margin: 74px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(226,232,240,0.78);
}

/* FIX: когда empty внутри grid — растягиваем на всю ширину */
.projects-grid .projects-empty{
  grid-column: 1 / -1;   /* занять все колонки */
  justify-self: center;  /* если блок не 100% */
  width: 100%;
}



/* ===== REVEAL (появление карточек) ===== */
.project-card{
  animation: projIn .55s ease both;
}

.projects-grid .project-card:nth-child(1){ animation-delay: .05s; }
.projects-grid .project-card:nth-child(2){ animation-delay: .12s; }
.projects-grid .project-card:nth-child(3){ animation-delay: .19s; }
.projects-grid .project-card:nth-child(4){ animation-delay: .26s; }
.projects-grid .project-card:nth-child(5){ animation-delay: .33s; }
.projects-grid .project-card:nth-child(6){ animation-delay: .40s; }

@keyframes projIn{
  from{ opacity:0; transform: translateY(10px) scale(0.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ===== ADAPTIVE ===== */
@media (max-width: 1024px){
  .projects-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px){
  .projects-hero{ padding: 82px 0 72px; }
  .projects-hero .section-header h1,
  .projects-hero .section-header h2{ font-size: 34px; }
  .projects-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .projects-hero{ padding: 74px 0 66px; }
  .project-card{ padding: 16px; }
}