{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card'><span class='projects__ribbon'></span><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='3'/><path d='M10 9l5 3-5 3V9z'/></svg></div><h3 class='projects__card-title' data-text='Классика кино'>Классика кино</h3><p class='projects__card-text'>Подборка культовых фильмов прошлого века с рецензиями и историей создания.</p><span class='projects__particles'><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i></span></a><a href='#' class='projects__card'><span class='projects__ribbon'></span><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h16M4 12h16M4 18h10'/></svg></div><h3 class='projects__card-title' data-text='Списки и подборки'>Списки и подборки</h3><p class='projects__card-text'>Тематические списки: для вечера, для путешествия, для вдохновения.</p><span class='projects__particles'><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i></span></a><a href='#' class='projects__card'><span class='projects__ribbon'></span><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5L12 3z'/></svg></div><h3 class='projects__card-title' data-text='Рекомендации'>Рекомендации</h3><p class='projects__card-text'>Личные советы: что посмотреть, если хочется чего-то особенного.</p><span class='projects__particles'><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i><i class='projects__particle'></i></span></a></div></div></section>",
  "css": ".projects .projects__card { position: relative; overflow: hidden; isolation: isolate; } .projects .projects__ribbon { position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa); transform: skewX(-20deg) translateX(-110%); transform-origin: left center; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2; } .projects .projects__card:hover .projects__ribbon { transform: skewX(-20deg) translateX(0); } .projects .projects__card-title { position: relative; transition: color 0.25s ease; } .projects .projects__card-title::before, .projects .projects__card-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .projects .projects__card-title::before { color: #3b82f6; transform: translate(-3px, -2px); } .projects .projects__card-title::after { color: #60a5fa; transform: translate(3px, 2px); } .projects .projects__card:hover .projects__card-title::before, .projects .projects__card:hover .projects__card-title::after { opacity: 1; } .projects .projects__card:hover .projects__card-title::before { transform: translate(-4px, -3px); } .projects .projects__card:hover .projects__card-title::after { transform: translate(4px, 3px); } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .projects .projects__particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #60a5fa; opacity: 0; animation: projects-float 4s ease-in-out infinite; } .projects .projects__particle:nth-child(1) { left: 12%; bottom: 10%; animation-delay: 0s; background: #2563eb; } .projects .projects__particle:nth-child(2) { left: 32%; bottom: 20%; animation-delay: 0.8s; background: #3b82f6; } .projects .projects__particle:nth-child(3) { left: 55%; bottom: 8%; animation-delay: 1.6s; background: #60a5fa; } .projects .projects__particle:nth-child(4) { left: 74%; bottom: 22%; animation-delay: 2.4s; background: #2563eb; } .projects .projects__particle:nth-child(5) { left: 88%; bottom: 12%; animation-delay: 3.2s; background: #3b82f6; } .projects .projects__card:hover .projects__particle { opacity: 1; } .projects .projects__icon { position: relative; animation: projects-pulse 2.4s ease-in-out infinite; } .projects .projects__card:hover .projects__icon { animation-duration: 1.2s; } @keyframes projects-float { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 20% { opacity: 0.9; } 50% { transform: translate(10px, -40px) scale(1); opacity: 0.7; } 80% { opacity: 0.4; } 100% { transform: translate(-6px, -80px) scale(0.5); opacity: 0; } } @keyframes projects-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28), 0 0 0 0 rgba(59, 130, 246, 0.45); } 50% { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28), 0 0 0 12px rgba(59, 130, 246, 0); } }"
}