/* ═══════════════════════════════════════════════════════════════════ LANDING PAGE ANIMATIONS — landing-animations.css ضع هذا الملف في: public/css/landing-animations.css وأضف في الـ : ═══════════════════════════════════════════════════════════════════ */ /* ── Particle Canvas Background ───────────────────────────────────── */ #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.5; } /* ── Hero Section ─────────────────────────────────────────────────── */ .hero-animated-bg { position: relative; overflow: hidden; } .hero-animated-bg::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(99,153,34,.12) 0%, transparent 70%); animation: blob-move 8s ease-in-out infinite; pointer-events: none; } .hero-animated-bg::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(59,109,17,.08) 0%, transparent 70%); animation: blob-move 10s ease-in-out infinite reverse; pointer-events: none; } @keyframes blob-move { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 15px) scale(0.95); } } /* ── Floating Shapes Background ───────────────────────────────────── */ .floating-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .shape { position: absolute; border-radius: 50%; opacity: 0.06; background: #639922; animation: float-shape linear infinite; } .shape:nth-child(1) { width:80px; height:80px; top:10%; right:15%; animation-duration:6s; animation-delay:0s; } .shape:nth-child(2) { width:120px; height:120px; top:60%; right:5%; animation-duration:8s; animation-delay:1s; } .shape:nth-child(3) { width:60px; height:60px; top:30%; left:8%; animation-duration:7s; animation-delay:2s; } .shape:nth-child(4) { width:100px; height:100px; top:80%; left:20%; animation-duration:9s; animation-delay:0.5s; } .shape:nth-child(5) { width:40px; height:40px; top:50%; right:30%; animation-duration:5s; animation-delay:3s; } @keyframes float-shape { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-30px) rotate(180deg); } 100% { transform: translateY(0px) rotate(360deg); } } /* ── Animated Grid Lines ───────────────────────────────────────────── */ .grid-bg { background-image: linear-gradient(rgba(99,153,34,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(99,153,34,.05) 1px, transparent 1px); background-size: 50px 50px; animation: grid-move 20s linear infinite; } @keyframes grid-move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } } /* ── Text Animations ──────────────────────────────────────────────── */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-left { opacity: 0; transform: translateX(40px); transition: opacity .7s ease, transform .7s ease; } .fade-left.visible { opacity: 1; transform: translateX(0); } .fade-right { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease, transform .7s ease; } .fade-right.visible { opacity: 1; transform: translateX(0); } .zoom-in { opacity: 0; transform: scale(.9); transition: opacity .6s ease, transform .6s ease; } .zoom-in.visible { opacity: 1; transform: scale(1); } /* Staggered delays */ .delay-1 { transition-delay: .1s; } .delay-2 { transition-delay: .2s; } .delay-3 { transition-delay: .3s; } .delay-4 { transition-delay: .4s; } .delay-5 { transition-delay: .5s; } .delay-6 { transition-delay: .6s; } /* ── Typewriter Effect ────────────────────────────────────────────── */ .typewriter { overflow: hidden; border-left: 3px solid #639922; white-space: nowrap; animation: typing 2.5s steps(30, end), blink .75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink { from, to { border-color: transparent; } 50% { border-color: #639922; } } /* ── Animated Gradient Text ───────────────────────────────────────── */ .gradient-text-animated { background: linear-gradient(270deg, #639922, #3B6D11, #8BC34A, #639922); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradient-shift 4s ease infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── Counter Animation ────────────────────────────────────────────── */ .counter { transition: all .3s ease; } /* ── Floating Dashboard ───────────────────────────────────────────── */ .dashboard-float { animation: dashboard-hover 4s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(99,153,34,.15)); } @keyframes dashboard-hover { 0%, 100% { transform: translateY(0px) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } } /* ── Feature Cards ────────────────────────────────────────────────── */ .feature-card-anim { transition: all .3s cubic-bezier(.4, 0, .2, 1); border: 1.5px solid #e5e7eb; position: relative; overflow: hidden; } .feature-card-anim::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(99,153,34,.04), transparent); transition: left .5s ease; } .feature-card-anim:hover::before { left: 100%; } .feature-card-anim:hover { border-color: #639922; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(99,153,34,.1); } /* ── Pricing Cards ────────────────────────────────────────────────── */ .plan-card-anim { transition: all .3s cubic-bezier(.4, 0, .2, 1); } .plan-card-anim:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0,0,0,.12); } .plan-card-anim.featured { animation: plan-pulse 3s ease-in-out infinite; } @keyframes plan-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99,153,34,.2); } 50% { box-shadow: 0 0 0 8px rgba(99,153,34,0); } } /* ── Navbar ────────────────────────────────────────────────────────── */ .navbar-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Scroll Progress Bar ──────────────────────────────────────────── */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #639922, #3B6D11); z-index: 9999; transition: width .1s linear; border-radius: 0 2px 2px 0; } /* ── Testimonials Carousel ───────────────────────────────────────── */ .testimonials-track { display: flex; gap: 24px; animation: testimonials-scroll 40s linear infinite; } .testimonials-track:hover { animation-play-state: paused; } @keyframes testimonials-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── CTA Section ──────────────────────────────────────────────────── */ .cta-section { position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,.05); animation: cta-blob 6s ease-in-out infinite; } .cta-section::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.05); animation: cta-blob 8s ease-in-out infinite reverse; } @keyframes cta-blob { 0%, 100% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.2) translate(20px, -20px); } } /* ── Buttons ───────────────────────────────────────────────────────── */ .btn-primary-anim { position: relative; overflow: hidden; } .btn-primary-anim::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; } .btn-primary-anim:active::after { width: 300px; height: 300px; } /* ── Stats Counter ─────────────────────────────────────────────────── */ .stat-card-anim { transition: transform .3s ease, box-shadow .3s ease; } .stat-card-anim:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 30px rgba(99,153,34,.12); } /* ── Smooth Reveal on Section Enter ──────────────────────────────── */ section { position: relative; z-index: 1; } /* ── Number counting animation trigger ───────────────────────────── */ @keyframes count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .count-animated { animation: count-up .5s ease forwards; }