/* ════════════════════════════════════════════════════ * 1. ANIMATED PREMIUM BACKGROUND (replaces gold particles) * ════════════════════════════════════════════════════ */ @keyframes mtGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes mtFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } } @keyframes mtPulseGlow { 0%, 100% { box-shadow: 0 0 30px rgba(212, 175, 55,.3), inset 0 0 20px rgba(212, 175, 55,.05); } 50% { box-shadow: 0 0 60px rgba(212, 175, 55,.5), inset 0 0 30px rgba(212, 175, 55,.1); } } @keyframes mtShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } body::before { background: radial-gradient(ellipse 80% 60% at 20% 30%, rgba(212, 175, 55,.18), transparent), radial-gradient(ellipse 60% 80% at 80% 70%, rgba(168,85,247,.12), transparent), radial-gradient(ellipse 70% 50% at 50% 50%, rgba(245,200,66,.08), transparent), linear-gradient(135deg, rgba(10,14,26,1), rgba(26,31,58,1)) !important; background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100% !important; animation: mtGradientShift 25s ease infinite !important; } /* ════════════════════════════════════════════════════ * 2. 3D CARD HOVER (services, calculators, products) * ════════════════════════════════════════════════════ */ .service-card, .calc-card, .feature-card, .product, [class*="card-item"], .case { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.9,.3,1.1), box-shadow .4s ease, border-color .3s !important; position: relative; will-change: transform; } .service-card:hover, .calc-card:hover, .feature-card:hover, .product:hover, [class*="card-item"]:hover, .case:hover { transform: perspective(1000px) translateY(-12px) rotateX(2deg) rotateY(-2deg) scale(1.025) !important; box-shadow: 0 30px 80px rgba(212, 175, 55,.25), 0 20px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -1px 0 rgba(0,0,0,.2) !important; } /* Animated gradient border on hover */ .service-card::before, .calc-card::before, .feature-card::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(135deg, transparent, rgba(212, 175, 55,.6), transparent, rgba(245,200,66,.6), transparent); background-size: 300% 300%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s ease; animation: mtGradientShift 4s ease infinite; z-index: -1; pointer-events: none; } .service-card:hover::before, .calc-card:hover::before, .feature-card:hover::before { opacity: 1; } /* ════════════════════════════════════════════════════ * 3. ICON ANIMATIONS - bounce, rotate, scale * ════════════════════════════════════════════════════ */ .service-icon, .card-icon, .feature-icon, .calc-icon, [class*="-icon"] svg, [class*="-icon"] i { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), filter .4s !important; display: inline-block; } .service-card:hover .service-icon, .calc-card:hover .calc-icon, .feature-card:hover .feature-icon, .product:hover .product-icon, .card:hover [class*="-icon"] { transform: scale(1.2) rotate(-8deg) translateY(-4px); filter: drop-shadow(0 8px 20px rgba(212, 175, 55,.6)) brightness(1.15); } /* Floating icons (subtle) */ .hero-icon, .calc-icon-wrap { animation: mtFloat 4s ease-in-out infinite; } /* ════════════════════════════════════════════════════ * 4. SHIMMER EFFECT للنصوص الرئيسية * ════════════════════════════════════════════════════ */ /* Shimmer ONLY on specific opted-in headlines (.mt-shimmer class) */ .mt-shimmer { background: linear-gradient(120deg, #D4AF37 0%, #f5c842 50%, #D4AF37 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mtShimmer 6s ease-in-out infinite; } /* Keep main h1 visible - just add subtle glow */ .hero h1, .page-head h1, .hero-title { text-shadow: 0 2px 20px rgba(212, 175, 55,.3); } /* ════════════════════════════════════════════════════ * 5. BUTTON PREMIUM EFFECTS * ════════════════════════════════════════════════════ */ .btn-primary, .btn-pro, .cta-btn, .mt-topbar-cta, .mt-cookie-btn-accept, button[type="submit"], a.button { position: relative; overflow: hidden; transition: all .35s cubic-bezier(.2,.9,.3,1.1) !important; } .btn-primary::after, .btn-pro::after, .cta-btn::after, .mt-topbar-cta::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,.3); transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; pointer-events: none; } .btn-primary:hover::after, .btn-pro:hover::after, .cta-btn:hover::after, .mt-topbar-cta:hover::after { width: 400px; height: 400px; } .btn-primary:hover, .btn-pro:hover, .cta-btn:hover, .mt-topbar-cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 32px rgba(212, 175, 55,.5); } /* ════════════════════════════════════════════════════ * 6. SCROLL REVEAL ANIMATIONS * ════════════════════════════════════════════════════ */ .mt-reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1); } .mt-reveal.visible { opacity: 1; transform: translateY(0); } .mt-reveal:nth-child(2) { transition-delay: .1s; } .mt-reveal:nth-child(3) { transition-delay: .2s; } .mt-reveal:nth-child(4) { transition-delay: .3s; } .mt-reveal:nth-child(5) { transition-delay: .4s; } .mt-reveal:nth-child(6) { transition-delay: .5s; } /* ════════════════════════════════════════════════════ * 7. ANIMATED STATS NUMBERS (count-up) * ════════════════════════════════════════════════════ */ .stat-number, .hero-stats .stat-item, .stats-row > div { font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════ * 8. PARALLAX HERO BACKGROUND * ════════════════════════════════════════════════════ */ .hero, .page-hero, .hero-section { position: relative; overflow: hidden; } .hero-video-wrap, .page-hero-bg-wrap { will-change: transform; transition: transform .1s linear; } /* ════════════════════════════════════════════════════ * 9. GLOW BORDER على الـ active nav link * ════════════════════════════════════════════════════ */ .mt-topbar-link.active { animation: mtPulseGlow 3s ease infinite; } /* ════════════════════════════════════════════════════ * 10. MICRO-INTERACTIONS - Form fields * ════════════════════════════════════════════════════ */ input:focus, textarea:focus, select:focus { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(212, 175, 55,.15), 0 8px 20px rgba(212, 175, 55,.2) !important; transition: all .25s ease; } /* ════════════════════════════════════════════════════ * 11. ANIMATED UNDERLINE FOR LINKS * ════════════════════════════════════════════════════ */ .blog-post-content a, .article-content a, p a:not(.btn):not(.cta-btn) { position: relative; background-image: linear-gradient(90deg, #D4AF37, #f5c842); background-size: 0% 2px; background-position: 0% 100%; background-repeat: no-repeat; transition: background-size .4s ease; } .blog-post-content a:hover, .article-content a:hover, p a:not(.btn):not(.cta-btn):hover { background-size: 100% 2px; } /* ════════════════════════════════════════════════════ * 12. LOADING SPINNER PREMIUM * ════════════════════════════════════════════════════ */ .mt-spinner { width: 48px; height: 48px; border: 3px solid rgba(212, 175, 55,.15); border-top-color: #D4AF37; border-radius: 50%; animation: mtSpin .8s cubic-bezier(.2,.9,.3,1.1) infinite; } @keyframes mtSpin { to { transform: rotate(360deg); } } /* Reduce motion fallback */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }