.banner { position: relative; display: flex; justify-content: center; align-items: center; /* پس‌زمینه radial-gradient */ background: radial-gradient(circle at center, #FF6F70, #F74A67); padding: 10px 0; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); font-family: Vazirmatn, IRANSans, sans-serif; overflow: hidden; } .banner-text { font-size: 28px; font-weight: 700; z-index: 3; color: #FFFFFF; /* زوم اوت: سفید */ text-shadow: 0 2px 6px rgba(0,0,0,0.3); display: inline-block; animation: zoomBounce 3s ease-in-out infinite; } /* زوم bounce متن و تغییر رنگ */ @keyframes zoomBounce { 0% { transform: scale(1); color: #FFFFFF; /* زوم اوت: سفید */ text-shadow: 0 2px 6px rgba(0,0,0,0.3); } 25% { transform: scale(1.07); color: #444444; /* کمی روشن‌تر */ text-shadow: 0 3px 8px rgba(0,0,0,0.35); } 50% { transform: scale(1.15); color: #FFFFFF; /* زوم این: سفید */ text-shadow: 0 4px 10px rgba(0,0,0,0.4); } 75% { transform: scale(1.07); color: #444444; text-shadow: 0 3px 8px rgba(0,0,0,0.35); } 100% { transform: scale(1); color: #FFFFFF; /* بازگشت زوم اوت */ text-shadow: 0 2px 6px rgba(0,0,0,0.3); } } /* موج‌های نورانی */ .wave { position: absolute; top: -10%; width: 200%; height: 120%; background: rgba(255,255,255,0.08); border-radius: 45%; transform: rotate(45deg); z-index: 1; } .wave1 { animation: waveMove 8s linear infinite; } .wave2 { top: 0%; height: 140%; background: rgba(255,255,255,0.05); animation: waveMove 12s linear infinite; } /* حرکت آرام و پیوسته موج‌ها */ @keyframes waveMove { 0% { transform: translateX(-100%) rotate(45deg); } 100% { transform: translateX(100%) rotate(45deg); } } /* ریسپانسیو موبایل */ @media (max-width:768px){ .banner-text { font-size:22px; } }