1. Опис задачіПотрібно створитиCSS-анімацію обертання ДНК подвійної спіраліна основі готового SVG-файлу (логотип). Анімація має створювати ілюзіюбезперервного 3D-обертання навколо власної осі спіралі. Вся геометрія (координати, розміри та форми точок, з'єднувальні лінії) має бути точною копією оригінального SVG.2. Вхідні матеріали2.1 SVG-файл ДНКSVG-файл містить два ланцюги ДНК:Зелений ланцюг (#B7D054) — 13 елементів (точки різного розміру + з'єднувальні лінії/перемички)Темний ланцюг (#2E2E2E)— 19 елементів (точки + з'єднувальні лінії/перемички)Загалом32 SVG path-елементи. Деякі path включають не тільки круг (точку), а й лінію-перемичку між ланцюгами або вертикальний «стем».Вісь спіраліпроходить діагонально під кутом ~46° від верхнього лівого до нижнього правого кута.2.2 Приклад анімації (референс)Додається HTML/CSS код з прикладом обертання спрощеної спіралі.Принцип роботи референсу:Кожен «рядок» спіралі — це горизонтальна пара:LEFT dot+lineтаRIGHT dot+lineТочки фізично переміщуються(translateX) з одного боку на інший, імітуючи обертання палиці у 3DЛінія між точкамистискається (scaleX → 0.1)коли пара повернута «ребром» до глядачаТочкизмінюють масштаб (scale): більше = ближче до глядача, менше = даліХвильова затримка (--i)створює ефект крутки, що біжить вздовж спіралі3. Вимоги до результату3.1 Геометрія — точна копія SVGВсі 32 path-елементи мають бути присутні з оригінальними координатамиФорма, розмір та позиція кожної точки — 1:1 як в SVGЗ'єднувальні лінії (перемички та стеми) — як в SVGКольори: зелений #B7D054 та темний #2E2E2E3.2 Анімація — 3D обертанняГоловна вимога:Спіраль має виглядати так, наче вона безперервно обертається навколо своєї діагональної осі у 3D-просторі.Що це означає конкретно:Точки мають ФІЗИЧНО рухатися по простору— не просто збільшуватися/зменшуватися на місці. Зелена точка має переїжджати на позицію темної, і навпаки (як два кінці палиці, що крутиться).Ланцюги по черзі виходять на передній план— коли зелений ланцюг «спереду» (більший, яскравіший), темний має бути «ззаду» (менший, тьмяніший), і навпаки через пів-циклу.Перспектива через scale— елементи ближче до глядача = більші (наприклад 1.1×), далі = менші (наприклад 0.5×).Хвиля крутки біжить вздовж осі— сусідні елементи мають невеликий зсув по фазі (animation-delay), щоб обертання виглядало як спіральна хвиля від верхнього лівого до нижнього правого кута.Плавний, безперервний рух— без ривків, м'який easing (ease-in-out або cubic-bezier). Анімація циклічна та безшовна.З'єднувальні лінії реагують на обертання— перемички між ланцюгами мають стискатися, коли пара точок повернута «ребром», та розтягуватися, коли «обличчям» до глядача.3.3 Технічні вимогиОдин HTML-файл— HTML + CSS (+ мінімальний JS, якщо необхідно)Бажано CSS-only анімація(без JavaScript), але якщо для правильної роботи потрібен JS — допускаєтьсяРеспонсивність — масштабується під розмір вікна (vmin)Темний фон (#0a0a0a або #111)Кросбраузерність: Chrome, Firefox, Safari4. Чого НЕ треба робитиБлимання/мерехтіння (opacity pulse)— елементи не мають блимати. Зміна прозорості допускається лише як частина імітації глибини (далі = трохи прозоріше).Просте збільшення/зменшення на місці— scale без translate НЕ створює ефект обертання. Точки мають реально рухатися.Перемальовування геометрії— не малювати нові точки/лінії. Використовувати оригінальні SVG path.Плоский 2D-рух— не ковзання вліво-вправо без зміни глибини. Потрібен саме ефект 3D-обертання.5. Що здатиОдин HTML-файл з робочою анімацією (html, css, js(по можливості уникнути))Коротке пояснення підходу (як реалізовано 3D-ефект)6. ДодаткиДо завдання додаються:resea logo.zip — оригінальний SVG-файл ДНКreference-helix.html — приклад анімації обертання спрощеної спіралі (HTML+CSS)