{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><line x1='12' x2='12' y1='19' y2='22'/></svg></div><h3 class='projects__card-title' data-text='Нейрокад'>Нейрокад</h3><p class='projects__card-text'>Интеллектуальная система автоматизированного проектирования на основе нейросетей.</p><span class='projects__ripple'></span></a><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg></div><h3 class='projects__card-title' data-text='Проверка Email'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации email-адресов в реальном времени.</p><span class='projects__ripple'></span></a></div></div></section>",
  "css": ".projects { animation: projects-breathe 4s ease-in-out infinite; }\n\n@keyframes projects-breathe {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.01); }\n}\n\n.projects .projects__title { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); }\n\n.projects .projects__title::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -12px;\n  height: 3px;\n  border-radius: 3px;\n  background: linear-gradient(90deg, transparent, #2563eb, #3b82f6, #60a5fa, #3b82f6, #2563eb, transparent);\n  background-size: 200% 100%;\n  animation: projects-wave 2.4s ease-in-out infinite;\n  animation-delay: 0.2s;\n}\n\n@keyframes projects-wave {\n  0% { background-position: 0% 50%; transform: scaleX(0.6); opacity: 0.6; }\n  50% { background-position: 100% 50%; transform: scaleX(1); opacity: 1; }\n  100% { background-position: 0% 50%; transform: scaleX(0.6); opacity: 0.6; }\n}\n\n.projects .projects__card { position: relative; overflow: hidden; }\n\n.projects .projects__card-title { position: relative; transition: color 0.25s ease; }\n\n.projects .projects__card-title::before,\n.projects .projects__card-title::after {\n  content: attr(data-text);\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease, transform 0.25s ease;\n}\n\n.projects .projects__card-title::before { color: #3b82f6; transform: translate(-3px, -2px); }\n.projects .projects__card-title::after { color: #60a5fa; transform: translate(3px, 2px); }\n\n.projects .projects__card:hover .projects__card-title::before,\n.projects .projects__card:hover .projects__card-title::after { opacity: 1; }\n\n.projects .projects__card:hover .projects__card-title::before { transform: translate(-4px, -3px); }\n.projects .projects__card:hover .projects__card-title::after { transform: translate(4px, 3px); }\n\n.projects .projects__ripple {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, rgba(59, 130, 246, 0.15) 40%, transparent 70%);\n  transform: translate(-50%, -50%) scale(0);\n  opacity: 0;\n  pointer-events: none;\n  transition: transform 4s ease-in-out, opacity 4s ease-in-out;\n}\n\n.projects .projects__card:hover .projects__ripple {\n  transform: translate(-50%, -50%) scale(40);\n  opacity: 1;\n}\n\n.projects .projects__card:hover .projects__icon {\n  background: #bfdbfe;\n  color: #1d4ed8;\n  transition: background 0.3s ease, color 0.3s ease;\n}"
}