میتونی پایین دکمه شروع یه انیمیشن بسازی که مثلاً یک مدل باشه با یک لباس و یک علامت مساوی تن مدل لباس نباشه و بعد تن مدل با انیمیشن لباس بشه و مساوی بشه با مدل که اون لباس پوشیده راستی کد رو هم کامل میخواستم با اضافه این 
<p>&nbsp;</p>
<style>
        /* کلیات صفحه */
        body {
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            direction: rtl;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: auto;
        }

        .ai-animation-gallery {
            padding: 20px;
            width: 100%;
            max-width: 800px;
            text-align: center;
        }

        .ai-animation-gallery .section {
            margin: 0;
            text-align: center;
        }

        /* دکمه شروع جدید با انیمیشن */
        .start-button {
            position: relative;
            background: linear-gradient(45deg, #FF6B6B, #6B5B95);
            color: white;
            padding: 15px 40px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        /* محتوای دکمه */
        .button-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .button-text {
            margin-right: 0;
        }

        .clothing-icon {
            margin-right: 15px;
            font-size: 24px;
            animation: changeClothes 3s infinite;
        }

        @keyframes changeClothes {
            0% { content: "👔"; }
            33% { content: "👗"; }
            66% { content: "🧥"; }
            100% { content: "👔"; }
        }

        /* افکت hover */
        .start-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
            background: linear-gradient(45deg, #6B5B95, #FF6B6B);
        }

        /* افکت ripple */
        .start-button::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease-out, height 0.6s ease-out;
        }

        .start-button:active::after {
            width: 200px;
            height: 200px;
        }

        /* استایل آکوردئون */
        .accordion {
            max-width: 800px;
            width: 100%;
            background: #ffffff;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
            animation: fadeIn 1s ease-out;
            margin-top: 20px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .accordion-item {
            border-bottom: 1px solid #e2e8f0;
            overflow: hidden;
        }

        .accordion-header {
            background: none;
            border: none;
            outline: none;
            padding: 20px;
            width: 100%;
            text-align: right;
            font-size: 18px;
            font-weight: 600;
            color: #2d3748;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
        }

        .accordion-header:hover {
            color: #6B5B95;
            background: #f8f9fa;
        }

        .chevron {
            transition: transform 0.3s ease;
            font-size: 20px;
            color: #a0aec0;
        }

        .accordion-header.active .chevron {
            transform: rotate(180deg);
            color: #6B5B95;
        }

        .accordion-content {
            max-height: 0;
            opacity: 0;
            transform: translateY(-20px);
            overflow: hidden;
            transition: all 0.5s ease;
            background-color: #f7fafc;
            padding: 0 20px;
        }

        .accordion-content.active {
            max-height: 1000px;
            opacity: 1;
            transform: translateY(0);
            padding: 20px;
        }

        .accordion-content p {
            color: #4a5568;
            line-height: 1.6;
            margin: 10px 0;
        }

        /* استایل ویدیو */
        .accordion-content video {
            width: 100%;
            max-width: 800px;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .accordion-content video:hover {
            transform: scale(1.02);
        }

        /* واکنش‌گرایی */
        @media (max-width: 600px) {
            .accordion {
                padding: 15px;
            }

            .accordion-header {
                font-size: 16px;
                padding: 15px;
            }

            .start-button {
                padding: 12px 30px;
                font-size: 16px;
            }
        }
    </style>
<div class="ai-animation-gallery">
<div class="section"><a href="#/nav/online/news/getSingle/1149635/eyJpdiI6Illlb2dXcitWMk9FOGJ5K1NrcmUyMGc9PSIsInZhbHVlIjoiSGZId004S1dEbld1d1JmbVd6VDR0YlE2VHNSYWhDWjI1bTAzTnFGVk9ldkhaWGlBd1BQZTVJUWVxeFVqRzRzUiIsIm1hYyI6IjQwNTgyZTViMTcyZjNhOWQ0MjgzMTdhNjNkMmY4NmJlYjY2ZTA3MzJhOGY1OGM2ZjhmMzJkNGZhYTliMzIyZDQiLCJ0YWciOiIifQ==/17638102" class="start-button"> <span class="button-content"> <span class="button-text">شروع</span> <span class="clothing-icon">👔</span> </span> </a>
<h2 style="text-align: center;"><span style="font-size: 16pt;">ربات</span> <span style="font-size: 10.6667px;"> &nbsp;<span style="color: #ff0000;">تغییر لباس</span> با </span> <span style="font-size: 16pt;"> <span style="color: #008080;">هوش مصنوعی</span> </span></h2>
</div>
</div>
<div class="accordion"><!-- سوال 1 -->
<div class="accordion-item"><button class="accordion-header"> <span>🤔 این ربات چیکار می&zwnj;کند؟</span> <span class="chevron">▼</span> </button>
<div class="accordion-content">
<p>برای تغییر لباس با هوش مصنوعی می&zwnj;توانید در کادر اول عکس خود را اضافه کنید و در کادر دوم عکس لباس مورد نظر خود را بارگذاری کنید.</p>
<p>برای اضافه کردن عکس لباس می&zwnj;توانید در گوگل لباس مورد نظر خود را جستجو کنید و لباس را دانلود کرده و داخل ربات قرار دهید تا لباس شما بر روی تصویری که اضافه کرده&zwnj;اید اعمال شود.</p>
<p>همچنین برای جستجوی لباس در گوگل، در انتهای نام مدل لباس عبارت PNG را اضافه کنید.</p>
<p>به عنوان مثال، اگر می&zwnj;خواهید یک مدل کت و شلوار از گوگل دانلود کنید، عبارت "دانلود کت و شلوار PNG" را وارد کنید.</p>
<p>توجه داشته باشید: در صورت اضافه کردن مدل و لباس، فقط یک بار روی دکمه Try-on کلیک کنید و باید منتظر بمانید تا هوش مصنوعی تصویر شما را ایجاد کند.</p>
</div>
</div>
<!-- سوال 2 -->
<div class="accordion-item"><button class="accordion-header"> <span>🔒 آیا این ربات محدودیت تعداد ساخت دارد؟</span> <span class="chevron">▼</span> </button>
<div class="accordion-content">
<p>خیر، شما می&zwnj;توانید به&zwnj;صورت نامحدود و رایگان از این ربات برای تبدیل تصاویر خود استفاده کنید. در صورت مواجه شدن با ارور بعد از ساخت چندین تصویر، اگر همچنان نیاز به ایجاد تصاویر جدید دارید، باید از تحریم&zwnj;شکن پور لایت که معرفی کرده&zwnj;ایم استفاده کنید. با خاموش و روشن کردن پور لایت، محدودیت&zwnj;ها برداشته می&zwnj;شوند.</p>
</div>
</div>
<!-- سوال 3 -->
<div class="accordion-item"><button class="accordion-header"> <span>👗 آیا می&zwnj;توانم لباس&zwnj;های فروشگاه خودم را بر روی مدل دلخواهم اعمال کنم؟</span> <span class="chevron">▼</span> </button>
<div class="accordion-content">
<p>بله، شما می&zwnj;توانید مدل را در کادر اول اضافه کنید و در قسمت پایین هم عکس لباس خود را آپلود کنید تا لباس به مدل انتخابی شما اعمال شود.</p>
<p>همچنین برای ساخت مدل می&zwnj;توانید از هوش مصنوعی فلاکس داخل برنامه نیز استفاده کنید.</p>
</div>
</div>
<!-- ویدیو آموزشی -->
<div class="accordion-item"><button class="accordion-header"> <span>🎥 ویدیو آموزشی</span> <span class="chevron">▼</span> </button>
<div class="accordion-content"><video width="100%" height="auto" controls="controls">
                    <source src="https://uploadkon.ir/uploads/fe4608_24XiaoYing-Video-1731070946076-HD.mp4" type="video/mp4" />
                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
                </video></div>
</div>
</div>
<p>
<script>
        // اسکریپت آکوردئون
        document.querySelectorAll('.accordion-header').forEach(header => {
            header.addEventListener('click', () => {
                const activeHeader = document.querySelector('.accordion-header.active');
                if (activeHeader && activeHeader !== header) {
                    activeHeader.classList.remove('active');
                    activeHeader.nextElementSibling.classList.remove('active');
                }
                header.classList.toggle('active');
                header.nextElementSibling.classList.toggle('active');
            });
        });

        // اسکریپت انیمیشن آیکون لباس
        const clothingIcons = ["👔", "👗", "🧥"];
        let currentIcon = 0;
        
        setInterval(() => {
            const icon = document.querySelector('.clothing-icon');
            currentIcon = (currentIcon + 1) % clothingIcons.length;
            icon.textContent = clothingIcons[currentIcon];
        }, 1000);
    </script>
</p>