/* ==========================================================================
   ANIMATIONS — аврора-фон, блики, скролл-появление
   ========================================================================== */

/* ---------- глобальная аврора: медленно плывущие неоновые пятна ----------
   один слой на весь сайт, не мешает контенту (pointer-events:none, position:fixed) */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.aurora::before,
.aurora::after,
.aurora .blob {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.aurora::before {
  width: 620px; height: 620px;
  top: -180px; left: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.55), transparent 70%);
  animation: auroraDrift1 26s var(--ease) infinite alternate;
}
.aurora::after {
  width: 700px; height: 700px;
  bottom: -220px; right: -160px;
  background: radial-gradient(circle at 60% 60%, rgba(91, 124, 255, 0.45), transparent 70%);
  animation: auroraDrift2 32s var(--ease) infinite alternate;
}
.aurora .blob {
  width: 480px; height: 480px;
  top: 40%; left: 50%;
  background: radial-gradient(circle, rgba(214, 139, 255, 0.32), transparent 72%);
  animation: auroraDrift3 22s var(--ease) infinite alternate;
}
@keyframes auroraDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(120px, 90px) scale(1.15); }
}
@keyframes auroraDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-100px, -70px) scale(1.1); }
}
@keyframes auroraDrift3 {
  from { transform: translate(-50%, -40%) scale(0.9) rotate(0deg); }
  to   { transform: translate(-40%, -55%) scale(1.2) rotate(30deg); }
}

/* лёгкая сетка поверх фона — намёк на "технологичность" интерфейса клиента */
.grid-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%);
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .aurora .blob { animation: none; }
}
@media (max-width: 720px) {
  .aurora::before, .aurora::after, .aurora .blob { filter: blur(60px); opacity: 0.4; }
}
@media (max-width: 480px) {
  /* на маленьких экранах убираем третье пятно и замедляем анимацию —
     blur() довольно дорог для GPU телефонов, это заметно снижает нагрев/лаги */
  .aurora .blob { display: none; }
  .aurora::before, .aurora::after { filter: blur(46px); animation-duration: 42s; }
}

/* ---------- бегущий градиентный блик (shimmer) на акцентных поверхностях ---------- */
@keyframes shimmerMove {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(110deg, var(--accent-2) 20%, #fff 40%, var(--accent-blue) 60%, var(--accent-2) 80%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerMove 6s linear infinite;
}

/* ---------- появление карточек ----------
   Раньше это делалось через IntersectionObserver (реагировал на скролл) —
   отказались от него: при быстрой перерисовке (смена вида/поиска/тегов)
   карточки иногда застревали невидимыми (opacity:0), пока их не задевал тап,
   и выглядело это как "картинки не работают". Теперь анимация — чистый CSS,
   проигрывается ОДИН РАЗ сразу при вставке в DOM, не зависит от скролла
   и не может зависнуть в невидимом состоянии. */
@keyframes cardRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.project-card,
.project-row {
  animation: cardRise .45s var(--ease) both;
}
/* лёгкий каскад по порядку в разметке — предсказуемый, не завязан на скролл */
.projects-grid .project-card:nth-child(1),  .projects-grid.list-view .project-row:nth-child(1)  { animation-delay: 0ms;  }
.projects-grid .project-card:nth-child(2),  .projects-grid.list-view .project-row:nth-child(2)  { animation-delay: 30ms; }
.projects-grid .project-card:nth-child(3),  .projects-grid.list-view .project-row:nth-child(3)  { animation-delay: 60ms; }
.projects-grid .project-card:nth-child(4),  .projects-grid.list-view .project-row:nth-child(4)  { animation-delay: 90ms; }
.projects-grid .project-card:nth-child(5),  .projects-grid.list-view .project-row:nth-child(5)  { animation-delay: 120ms; }
.projects-grid .project-card:nth-child(6),  .projects-grid.list-view .project-row:nth-child(6)  { animation-delay: 150ms; }
.projects-grid .project-card:nth-child(7),  .projects-grid.list-view .project-row:nth-child(7)  { animation-delay: 180ms; }
.projects-grid .project-card:nth-child(8),  .projects-grid.list-view .project-row:nth-child(8)  { animation-delay: 210ms; }
.projects-grid .project-card:nth-child(9),  .projects-grid.list-view .project-row:nth-child(9)  { animation-delay: 240ms; }
.projects-grid .project-card:nth-child(n+10), .projects-grid.list-view .project-row:nth-child(n+10) { animation-delay: 260ms; }

@media (prefers-reduced-motion: reduce) {
  .project-card, .project-row { animation: none; }
}

/* ---------- курсорное свечение в hero ---------- */
.cursor-glow {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  transition: opacity .3s ease;
  opacity: 0;
}
#home:hover .cursor-glow { opacity: 1; }
@media (max-width: 720px), (hover: none) {
  .cursor-glow { display: none; }
}