/* ============================================
   رفيق النجاح - Motion Design System
   Professional Animations & Transitions
   ============================================ */

/* === SCROLL REVEAL ANIMATIONS (CLS-safe: opacity only, no layout shift) === */
.reveal{opacity:0;transition:opacity 0.6s ease;will-change:opacity}
.reveal.active{opacity:1}
.reveal-up,.reveal-down,.reveal-right,.reveal-left,.reveal-scale,.reveal-rotate,.reveal-flip{/* No transform to prevent CLS */}

/* Stagger delays for grid items */
.stagger-1{transition-delay:0.1s!important}
.stagger-2{transition-delay:0.2s!important}
.stagger-3{transition-delay:0.3s!important}
.stagger-4{transition-delay:0.4s!important}
.stagger-5{transition-delay:0.5s!important}
.stagger-6{transition-delay:0.6s!important}

/* === HERO ANIMATIONS === */
@keyframes heroFadeUp{0%{opacity:0;transform:translateY(40px)}100%{opacity:1;transform:translateY(0)}}
@keyframes heroFadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes heroBadgeSlide{0%{opacity:0;transform:translateY(-20px) scale(0.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes heroGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes heroParticle{0%{transform:translateY(0) scale(1);opacity:0.3}50%{opacity:0.6}100%{transform:translateY(-100vh) scale(0);opacity:0}}

.hero-animated .trust-badge{animation:heroBadgeSlide 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both}
.hero-animated h1,.hero-animated h2{animation:heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.4s both}
.hero-animated p{animation:heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.6s both}
.hero-animated .hero-btns{animation:heroFadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.8s both}

/* Hero particle background */
.hero-particles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1;pointer-events:none}
.hero-particle{position:absolute;width:4px;height:4px;background:rgba(212,165,116,0.3);border-radius:50%;animation:heroParticle linear infinite}

/* === GRADIENT ANIMATIONS === */
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.gradient-animate{background-size:200% 200%;animation:gradientFlow 8s ease infinite}

/* === FLOATING ANIMATION === */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float{animation:float 4s ease-in-out infinite}
.float-slow{animation:floatSlow 6s ease-in-out infinite}

/* === SHIMMER EFFECT === */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);background-size:200% 100%;animation:shimmer 3s ease-in-out infinite;pointer-events:none}

/* === GLOW PULSE === */
@keyframes glowPulse{0%,100%{box-shadow:0 0 5px rgba(212,165,116,0.2)}50%{box-shadow:0 0 20px rgba(212,165,116,0.4),0 0 40px rgba(212,165,116,0.1)}}
.glow-pulse{animation:glowPulse 3s ease-in-out infinite}

/* === 3D TILT CARD EFFECT === */
.tilt-card{transition:transform 0.4s cubic-bezier(0.03,0.98,0.52,0.99),box-shadow 0.4s ease;transform-style:preserve-3d;will-change:transform}
.tilt-card:hover{box-shadow:0 20px 40px rgba(0,0,0,0.15)!important}
.tilt-card .card-inner{transition:transform 0.4s ease;transform:translateZ(20px)}

/* === ICON ANIMATIONS === */
@keyframes iconBounce{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes iconSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.card:hover .icon-box{animation:iconBounce 0.6s ease}
.card:hover .icon-box i{transition:transform 0.3s ease}
.why-item:hover .icon-circle{animation:iconBounce 0.6s ease;box-shadow:0 5px 20px rgba(0,51,102,0.3)}

/* === BUTTON MICRO-INTERACTIONS === */
.btn-magnetic{transition:transform 0.3s cubic-bezier(0.03,0.98,0.52,0.99),box-shadow 0.3s ease,background 0.3s ease}
.btn-magnetic:hover{transform:translateY(-3px)}
.btn-magnetic:active{transform:translateY(0) scale(0.98)}

/* Ripple effect */
.btn-ripple{position:relative;overflow:hidden}
.btn-ripple::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background:radial-gradient(circle,rgba(255,255,255,0.3) 10%,transparent 10%);transform:scale(10);opacity:0;transition:transform 0.5s,opacity 0.8s}
.btn-ripple:active::after{transform:scale(0);opacity:1;transition:0s}

/* === SECTION DIVIDER ANIMATIONS === */
@keyframes lineGrow{0%{width:0}100%{width:60px}}
.section-title.reveal.active h2::after,.section-title.reveal.active h3::after{animation:lineGrow 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s both}

/* === COUNTER ANIMATION ENHANCEMENT === */
@keyframes countPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
.stat-number.counted{animation:countPulse 0.5s ease}

/* === TEXT HIGHLIGHT === */
@keyframes highlightSlide{0%{background-size:0% 100%}100%{background-size:100% 100%}}
.text-highlight{background:linear-gradient(to left,rgba(212,165,116,0.2),rgba(212,165,116,0.2));background-repeat:no-repeat;background-position:right;background-size:0% 100%;transition:background-size 0.6s ease}
.text-highlight.active{background-size:100% 100%}

/* === PARALLAX LIGHT === */
.parallax-section{position:relative;overflow:hidden}
.parallax-bg{position:absolute;top:-20%;left:0;width:100%;height:140%;will-change:transform;transition:transform 0.1s linear}

/* === MORPHING BACKGROUND SHAPES === */
@keyframes morphBg1{0%,100%{border-radius:42% 58% 70% 30% / 45% 45% 55% 55%}25%{border-radius:30% 70% 50% 50% / 60% 40% 60% 40%}50%{border-radius:60% 40% 30% 70% / 50% 60% 40% 50%}75%{border-radius:45% 55% 60% 40% / 35% 65% 35% 65%}}
@keyframes morphBg2{0%,100%{border-radius:50% 50% 40% 60% / 55% 45% 55% 45%}33%{border-radius:40% 60% 55% 45% / 45% 55% 45% 55%}66%{border-radius:55% 45% 50% 50% / 60% 40% 60% 40%}}

.hero-morph-1{position:absolute;width:500px;height:500px;background:radial-gradient(circle,rgba(212,165,116,0.08),transparent 70%);animation:morphBg1 15s ease-in-out infinite;z-index:1;top:-10%;right:-10%}
.hero-morph-2{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,0.04),transparent 70%);animation:morphBg2 12s ease-in-out infinite;z-index:1;bottom:10%;left:-5%}

/* === SCROLL PROGRESS BAR === */
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--accent-gold),var(--accent-gold-light));z-index:10001;transition:width 0.1s linear}

/* === CARD BORDER ANIMATION === */
@keyframes borderGlow{0%{border-image:linear-gradient(135deg,var(--accent-gold),transparent,var(--accent-gold)) 1}50%{border-image:linear-gradient(135deg,transparent,var(--accent-gold),transparent) 1}100%{border-image:linear-gradient(135deg,var(--accent-gold),transparent,var(--accent-gold)) 1}}
.card-glow{border-top:4px solid;border-image:linear-gradient(135deg,var(--accent-gold),var(--accent-gold-light)) 1}

/* === SMOOTH SECTION TRANSITIONS === */
.section-transition{position:relative}
.section-transition::before{content:'';position:absolute;top:-60px;left:0;width:100%;height:60px;background:linear-gradient(to bottom,transparent,var(--white));pointer-events:none;z-index:2}

/* === TESTIMONIAL CARD ANIMATION === */
.testimonial-card.reveal{transition-duration:0.9s}
.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0.1)}
.testimonial-card:hover::before{opacity:0.5;color:var(--accent-gold)}

/* === CTA SECTION ANIMATION === */
@keyframes ctaShine{0%{left:-100%}100%{left:200%}}
.cta-section.reveal.active::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);animation:ctaShine 4s ease-in-out infinite;pointer-events:none}

/* === STATS BAR ANIMATION === */
@keyframes statsSlideIn{0%{opacity:0;transform:scale(0.8)}100%{opacity:1;transform:scale(1)}}
.stats-section .stat-item.reveal.active{animation:statsSlideIn 0.6s cubic-bezier(0.16,1,0.3,1) both}

/* === LOADING SKELETON === */
@keyframes skeletonPulse{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* === FOOTER ANIMATION === */
footer .footer-social a{transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),background-color 0.3s ease,border-color 0.3s ease}
footer .footer-social a:hover{transform:translateY(-5px) rotate(5deg)}

/* === SMOOTH HOVER FOR LINKS === */
.footer-links ul li a{position:relative;display:inline-block}
.footer-links ul li a::before{content:'◀';position:absolute;right:-15px;opacity:0;transition:opacity 0.3s,right 0.3s;color:var(--accent-gold);font-size:0.6rem}
.footer-links ul li a:hover::before{opacity:1;right:-18px}

/* === REDUCED MOTION === */
@media(prefers-reduced-motion:reduce){
.reveal,.hero-animated .trust-badge,.hero-animated h1,.hero-animated h2,.hero-animated p,.hero-animated .hero-btns{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
.float,.float-slow,.shimmer::after,.glow-pulse,.hero-morph-1,.hero-morph-2,.hero-particle{animation:none!important}
.scroll-progress{display:none}
}

/* === RESPONSIVE MOTION === */
@media(max-width:768px){
.hero-morph-1{width:300px;height:300px}
.hero-morph-2{width:250px;height:250px}
.reveal-right,.reveal-left{transform:translateY(40px)}
.hero-animated h1,.hero-animated h2{animation-delay:0.2s}
.hero-animated p{animation-delay:0.4s}
.hero-animated .hero-btns{animation-delay:0.5s}
}
@media(max-width:480px){
.hero-morph-1,.hero-morph-2{display:none}
.hero-particles{display:none}
}