{
  "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 viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='2'/><path d='M8 14s1.5 2 4 2 4-2 4-2' stroke='currentColor' stroke-width='2' stroke-linecap='round'/><circle cx='9' cy='9' r='1.5' fill='currentColor'/><circle cx='15' cy='9' r='1.5' fill='currentColor'/></svg></div><h3 class='projects__card-title'>День рождения</h3><p class='projects__card-text'>Весёлый праздник с аниматорами, играми и шариками для вашего ребёнка.</p></a><a href='#' class='projects__card'><div class='projects__icon'><svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 2L15 9H22L16 14L18 21L12 17L6 21L8 14L2 9H9L12 2Z' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/></svg></div><h3 class='projects__card-title'>Выпускной</h3><p class='projects__card-text'>Яркое завершение учебного года с шоу, конкурсами и сладкими подарками.</p></a><a href='#' class='projects__card'><div class='projects__icon'><svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='8' width='18' height='12' rx='2' stroke='currentColor' stroke-width='2'/><path d='M12 8V4M8 4H16' stroke='currentColor' stroke-width='2' stroke-linecap='round'/><circle cx='8' cy='14' r='1' fill='currentColor'/><circle cx='16' cy='14' r='1' fill='currentColor'/></svg></div><h3 class='projects__card-title'>Новый год</h3><p class='projects__card-text'>Волшебная ёлка с Дедом Морозом, хороводами и фейерверком эмоций.</p></a></div></div><div class='projects__particles' aria-hidden='true'><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span></div></section>",
  "css": ".projects { position: relative; overflow: hidden; animation: projects-breathe 6s ease-in-out infinite alternate-reverse; } .projects .projects__title { position: relative; padding-bottom: 18px; } .projects .projects__title::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 120px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #60a5fa, #2563eb, #60a5fa); background-size: 200% 100%; animation: projects-wave 4s ease-in-out infinite; } .projects .projects__card { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(96, 165, 250, 0.35); box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08); } .projects .projects__card::after { content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: projects-shine 4s ease-in-out infinite; pointer-events: none; } .projects .projects__card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(37, 99, 235, 0.18); } .projects .projects__icon { background: linear-gradient(135deg, #e0f2fe, #dbeafe); color: #2563eb; } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .projects .projects__particle { position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; opacity: 0; animation: projects-float 8s linear infinite; } .projects .projects__particle:nth-child(1) { left: 8%; background: #60a5fa; animation-delay: 0s; } .projects .projects__particle:nth-child(2) { left: 20%; background: #93c5fd; animation-delay: 1.2s; width: 6px; height: 6px; } .projects .projects__particle:nth-child(3) { left: 33%; background: #2563eb; animation-delay: 2.4s; } .projects .projects__particle:nth-child(4) { left: 46%; background: #bfdbfe; animation-delay: 0.6s; width: 10px; height: 10px; } .projects .projects__particle:nth-child(5) { left: 58%; background: #3b82f6; animation-delay: 3.2s; } .projects .projects__particle:nth-child(6) { left: 70%; background: #93c5fd; animation-delay: 1.8s; width: 6px; height: 6px; } .projects .projects__particle:nth-child(7) { left: 82%; background: #60a5fa; animation-delay: 4s; } .projects .projects__particle:nth-child(8) { left: 92%; background: #bfdbfe; animation-delay: 2.8s; width: 7px; height: 7px; } @keyframes projects-breathe { from { transform: scale(1); } to { transform: scale(1.01); } } @keyframes projects-wave { 0% { background-position: 0% 50%; width: 80px; } 50% { background-position: 100% 50%; width: 140px; } 100% { background-position: 0% 50%; width: 80px; } } @keyframes projects-shine { 0% { left: -60%; } 50% { left: 120%; } 100% { left: 120%; } } @keyframes projects-float { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.6; } 100% { transform: translateY(-520px) scale(1.1); opacity: 0; } }"
}