{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card fx-projects-card'><span class='fx-projects-fill'></span><div class='projects__icon'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><circle cx='5' cy='6' r='2'/><circle cx='19' cy='6' r='2'/><circle cx='5' cy='18' r='2'/><circle cx='19' cy='18' r='2'/><path d='M7 7l3 3'/><path d='M17 7l-3 3'/><path d='M7 17l3-3'/><path d='M17 17l-3-3'/></svg></div><h3 class='projects__card-title'>Нейрокад</h3><p class='projects__card-text'>Инструмент для быстрого проектирования и визуализации нейронных сетей прямо в браузере.</p></a><a href='#' class='projects__card fx-projects-card'><span class='fx-projects-fill'></span><div class='projects__icon'><svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/><path d='M16 17l2 2 3-3'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации адресов электронной почты с проверкой синтаксиса и домена в реальном времени.</p></a></div></div></section>",
  "css": ".projects .fx-projects-card { position: relative; overflow: hidden; isolation: isolate; border-width: 2px; border-color: #e2ecff; box-shadow: 0 10px 30px rgba(37, 99, 235, 0.07), 0 0 0 rgba(37, 99, 235, 0); transition: transform 0.3s ease, box-shadow 0.5s ease, border-color 0.3s ease; } .projects .fx-projects-card > * { position: relative; z-index: 2; } .projects .fx-projects-card .fx-projects-fill { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 55%, #4f6ef7 100%); transform: scaleY(0); transform-origin: bottom center; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .projects .fx-projects-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 90% at 50% 0%, rgba(2, 20, 60, 0.55) 0%, rgba(2, 20, 60, 0.28) 45%, rgba(2, 20, 60, 0) 75%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .projects .fx-projects-card:hover { transform: translateY(-6px); border-color: #0284c7; box-shadow: 0 26px 60px rgba(2, 132, 199, 0.28), 0 0 0 3px rgba(56, 189, 248, 0.22); } .projects .fx-projects-card:hover .fx-projects-fill { transform: scaleY(1); } .projects .fx-projects-card:hover::after { opacity: 1; } .projects .fx-projects-card:hover .projects__card-title { color: #ffffff; } .projects .fx-projects-card:hover .projects__card-text { color: #e6f4ff; } .projects .fx-projects-card:hover .projects__icon { color: #0284c7; background: #ffffff; border-color: #ffffff; box-shadow: 0 8px 22px rgba(2, 20, 60, 0.35); } .projects .fx-projects-card .projects__card-title, .projects .fx-projects-card .projects__card-text, .projects .fx-projects-card .projects__icon { transition: color 0.45s ease, background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; }"
}