{
  "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 width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 2C9.5 2 7.5 4 7.5 6.5C7.5 9 9.5 11 12 11C14.5 11 16.5 9 16.5 6.5C16.5 4 14.5 2 12 2Z' stroke='#6C5CE7' stroke-width='1.8'/><path d='M7.5 11L5 22M16.5 11L19 22M9 16H15' stroke='#6C5CE7' stroke-width='1.8' stroke-linecap='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 width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='9' stroke='#6C5CE7' stroke-width='1.8'/><path d='M12 3V21M3 12H21' stroke='#6C5CE7' stroke-width='1.8' stroke-linecap='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 width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 3L14.5 9H21L15.5 13L17.5 19L12 15.5L6.5 19L8.5 13L3 9H9.5L12 3Z' stroke='#6C5CE7' stroke-width='1.8' stroke-linejoin='round'/></svg></div><h3 class='projects__card-title'>Детская студия</h3><p class='projects__card-text'>Развитие координации, пластики и любви к танцу с 4 лет в игровой форме.</p></a><a href='#' class='projects__card'><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 20V10L12 4L20 10V20H4Z' stroke='#6C5CE7' stroke-width='1.8' stroke-linejoin='round'/><path d='M9 20V14H15V20' stroke='#6C5CE7' stroke-width='1.8' stroke-linejoin='round'/></svg></div><h3 class='projects__card-title'>Постановка свадебного танца</h3><p class='projects__card-text'>Индивидуальные занятия для пар — создаём ваш уникальный первый танец.</p></a></div></div></section>",
  "css": ".projects { animation: projects-breathe 6s ease-in-out infinite; } @keyframes projects-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } } .projects .projects__card { position: relative; animation: projects-sway 4s ease-in-out infinite; } .projects .projects__card:nth-child(2) { animation-delay: 0.5s; } .projects .projects__card:nth-child(3) { animation-delay: 1s; } .projects .projects__card:nth-child(4) { animation-delay: 1.5s; } @keyframes projects-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(2deg); } 75% { transform: rotate(-2deg); } } .projects .projects__card-title { position: relative; display: inline-block; } .projects .projects__card-title::before, .projects .projects__card-title::after { content: attr(data-text); position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .projects .projects__card-title::before { color: #6C5CE7; transform: translate(-2px, -2px); } .projects .projects__card-title::after { color: #f472b6; transform: translate(2px, 2px); } .projects .projects__card:hover .projects__card-title::before, .projects .projects__card:hover .projects__card-title::after { opacity: 0.6; } .projects .projects__card:hover .projects__card-title::before { transform: translate(-4px, -4px); } .projects .projects__card:hover .projects__card-title::after { transform: translate(4px, 4px); } .projects .projects__card::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: radial-gradient(circle, rgba(108, 92, 231, 0.3) 0%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); animation: projects-ripple 3s ease-out infinite; pointer-events: none; } @keyframes projects-ripple { 0% { width: 0; height: 0; opacity: 0.8; } 100% { width: 300px; height: 300px; opacity: 0; } }"
}