/*================================================== RUSH TECH ANIMATIONS.CSS Premium Motion System ==================================================*/ /*================================================== KEYFRAMES ==================================================*/ @keyframes loading{ 0%{ left:-100%; } 100%{ left:100%; } } @keyframes floatSlow{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-18px); } 100%{ transform:translateY(0px); } } @keyframes floatPhone{ 0%{ transform:translateY(0px) rotate(-3deg); } 50%{ transform:translateY(-20px) rotate(3deg); } 100%{ transform:translateY(0px) rotate(-3deg); } } @keyframes pulseGlow{ 0%{ box-shadow: 0 20px 45px rgba(171,53,0,.10); } 50%{ box-shadow: 0 35px 80px rgba(171,53,0,.25); } 100%{ box-shadow: 0 20px 45px rgba(171,53,0,.10); } } @keyframes heroFade{ 0%{ opacity:0; transform: translateY(60px); } 100%{ opacity:1; transform: translateY(0); } } @keyframes revealBlur{ 0%{ opacity:0; filter:blur(10px); transform: translateY(35px); } 100%{ opacity:1; filter:blur(0); transform: translateY(0); } } @keyframes scrollMouse{ 0%{ opacity:1; top:10px; } 100%{ opacity:0; top:30px; } } @keyframes rotateSlow{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } @keyframes shimmer{ 0%{ background-position:-250px 0; } 100%{ background-position:250px 0; } } /*================================================== HERO ==================================================*/ .hero-content{ animation: heroFade 1s ease both; } .hero-content h1{ animation-delay:.15s; } .hero-description{ animation: heroFade 1s .3s both; } .hero-buttons{ animation: heroFade 1s .45s both; } .hero-trust{ animation: heroFade 1s .6s both; } /*================================================== FLOATING CARDS ==================================================*/ .laptop-card{ animation: floatSlow 7s ease-in-out infinite, pulseGlow 6s ease-in-out infinite; } .phone-card{ animation: floatPhone 6s ease-in-out infinite; } .analytics-card{ animation: floatSlow 5s ease-in-out infinite; animation-delay:.8s; } .code-card{ animation: floatSlow 8s ease-in-out infinite; animation-delay:1.4s; } .review-card{ animation: floatPhone 7s ease-in-out infinite; animation-delay:2s; } /*================================================== SECTION REVEALS ==================================================*/ .section-heading{ animation: revealBlur 1s both; } .about-image{ animation: revealBlur 1s both; } .about-content{ animation: revealBlur 1.2s both; } /*================================================== BUTTONS ==================================================*/ .btn-primary{ position:relative; overflow:hidden; } .btn-primary::before{ content:""; position:absolute; left:-120%; top:0; width:60%; height:100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-25deg); transition:1s; } .btn-primary:hover::before{ left:170%; } /*================================================== LOGO ==================================================*/ .logo img{ transition:.4s; } .logo:hover img{ transform:scale(1.05); } /*================================================== END PART 1 ==================================================*/ /*================================================== PART 2 CARD ANIMATIONS ==================================================*/ /*---------------------------------- Service Cards ----------------------------------*/ .service-card{ opacity:0; transform:translateY(70px); animation:revealBlur .9s forwards; } .service-card:nth-child(1){animation-delay:.10s;} .service-card:nth-child(2){animation-delay:.20s;} .service-card:nth-child(3){animation-delay:.30s;} .service-card:nth-child(4){animation-delay:.40s;} .service-card:nth-child(5){animation-delay:.50s;} .service-card:nth-child(6){animation-delay:.60s;} .service-card:hover{ transform:translateY(-16px) scale(1.02); } /*---------------------------------- Highlight Cards ----------------------------------*/ .highlight-card{ opacity:0; animation:revealBlur .9s forwards; } .highlight-card:nth-child(1){animation-delay:.10s;} .highlight-card:nth-child(2){animation-delay:.20s;} .highlight-card:nth-child(3){animation-delay:.30s;} .highlight-card:nth-child(4){animation-delay:.40s;} .highlight-card i{ transition:.35s; } .highlight-card:hover i{ transform:rotate(-8deg) scale(1.15); } /*---------------------------------- Portfolio ----------------------------------*/ .project-showcase{ opacity:0; animation:revealBlur 1s forwards; } .project-showcase:nth-of-type(1){ animation-delay:.2s; } .project-showcase:nth-of-type(2){ animation-delay:.4s; } .project-showcase:nth-of-type(3){ animation-delay:.6s; } .project-image{ overflow:hidden; border-radius:32px; } .project-image img{ transition: transform .9s ease, filter .6s ease; } .project-showcase:hover img{ transform:scale(1.05); filter:brightness(1.04); } .project-tech span{ transition:.35s; } .project-tech span:hover{ background:var(--primary); color:#fff; transform:translateY(-4px); } /*---------------------------------- Statistics ----------------------------------*/ .stat-box{ transition: transform .4s, box-shadow .4s; } .stat-box:hover{ transform:translateY(-10px); } .stat-box h2{ transition:.4s; } .stat-box:hover h2{ transform:scale(1.12); } /*---------------------------------- Timeline ----------------------------------*/ .timeline-item{ opacity:0; animation:revealBlur .9s forwards; } .timeline-item:nth-child(1){animation-delay:.15s;} .timeline-item:nth-child(2){animation-delay:.30s;} .timeline-item:nth-child(3){animation-delay:.45s;} .timeline-item:nth-child(4){animation-delay:.60s;} .timeline-item:nth-child(5){animation-delay:.75s;} .timeline-item:nth-child(6){animation-delay:.90s;} .timeline-number{ transition:.35s; } .timeline-item:hover .timeline-number{ transform:scale(1.12); } /*---------------------------------- Technology Cards ----------------------------------*/ .tech-card{ opacity:0; animation:revealBlur .8s forwards; } .tech-card:nth-child(odd){ animation-delay:.20s; } .tech-card:nth-child(even){ animation-delay:.35s; } .tech-card:hover{ transform: translateY(-10px) rotate(-2deg); } /*---------------------------------- Why Us ----------------------------------*/ .why-card{ opacity:0; animation:revealBlur .9s forwards; } .why-card:nth-child(1){animation-delay:.15s;} .why-card:nth-child(2){animation-delay:.30s;} .why-card:nth-child(3){animation-delay:.45s;} .why-card:nth-child(4){animation-delay:.60s;} .why-card i{ transition:.4s; } .why-card:hover i{ transform: scale(1.15) rotate(10deg); } /*---------------------------------- Training Banner ----------------------------------*/ .training-image img{ animation: floatSlow 8s ease-in-out infinite; } /*---------------------------------- Testimonials ----------------------------------*/ .testimonial-card{ opacity:0; animation:revealBlur .9s forwards; } .testimonial-card:nth-child(1){ animation-delay:.15s; } .testimonial-card:nth-child(2){ animation-delay:.35s; } .testimonial-card:nth-child(3){ animation-delay:.55s; } .testimonial-card:hover{ transform: translateY(-12px) rotate(-1deg); } .quote-icon{ transition:.35s; } .testimonial-card:hover .quote-icon{ transform:scale(1.2); color:var(--primary-light); } /*================================================== END PART 2 ==================================================*/ /*================================================== PART 3 MICRO INTERACTIONS & PREMIUM EFFECTS ==================================================*/ /*---------------------------------- FAQ ----------------------------------*/ .faq-item{ transition: transform .35s, box-shadow .35s; } .faq-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow-medium); } .faq-question{ transition:.3s; } .faq-question:hover{ color:var(--primary); } /*---------------------------------- Contact Cards ----------------------------------*/ .contact-card{ transition: transform .35s, box-shadow .35s; } .contact-card:hover{ transform: translateX(8px) translateY(-6px); } .contact-card i{ transition:.35s; } .contact-card:hover i{ transform:scale(1.18); } /*---------------------------------- Footer Links ----------------------------------*/ .footer-links a{ position:relative; } .footer-links a::before{ content:""; position:absolute; left:-16px; top:50%; width:0; height:2px; background:var(--primary-light); transition:.35s; transform:translateY(-50%); } .footer-links a:hover::before{ width:10px; } /*---------------------------------- Social Icons ----------------------------------*/ .social-links a{ transition: transform .35s, background .35s; } .social-links a:hover{ transform: translateY(-8px) rotate(10deg); } /*---------------------------------- Floating WhatsApp ----------------------------------*/ @keyframes whatsappPulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.08); } 100%{ transform:scale(1); } } .floating-whatsapp{ animation: whatsappPulse 2.5s ease-in-out infinite; } /*---------------------------------- Back To Top ----------------------------------*/ #backToTop{ transition: opacity .35s, transform .35s; } #backToTop:hover{ transform: translateY(-6px); } /*---------------------------------- Cursor Glow ----------------------------------*/ .cursor-glow{ transition: left .08s linear, top .08s linear; } /*---------------------------------- Images ----------------------------------*/ img{ transition: transform .5s ease, filter .5s ease; } /*---------------------------------- Buttons ----------------------------------*/ .btn-primary, .btn-secondary{ transition: transform .25s, box-shadow .25s, background .35s, color .35s; } .btn-primary:active, .btn-secondary:active{ transform:scale(.96); } /*---------------------------------- Section Hover Glow ----------------------------------*/ section{ position:relative; } section::after{ content:""; position:absolute; left:50%; bottom:0; width:0; height:1px; background: linear-gradient( 90deg, transparent, rgba(171,53,0,.35), transparent); transition:.7s; transform:translateX(-50%); } section:hover::after{ width:80%; } /*---------------------------------- Glass Hover ----------------------------------*/ .highlight-card, .service-card, .tech-card, .stat-box, .testimonial-card, .contact-card{ backdrop-filter:blur(10px); } /*---------------------------------- Smooth Image Zoom ----------------------------------*/ .about-image{ overflow:hidden; border-radius:32px; } .about-image img:hover{ transform:scale(1.04); } /*---------------------------------- Navigation Hover Glow ----------------------------------*/ .nav-links a{ transition: color .35s; } .nav-links a:hover{ text-shadow: 0 0 15px rgba(171,53,0,.25); } /*---------------------------------- Hero Buttons ----------------------------------*/ .hero-buttons a{ position:relative; overflow:hidden; } .hero-buttons a::after{ content:""; position:absolute; inset:0; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.18), transparent); transform:translateX(-120%); } .hero-buttons a:hover::after{ transition:1s; transform:translateX(120%); } /*---------------------------------- Page Fade ----------------------------------*/ body{ animation: heroFade .8s ease; } /*================================================== ANIMATION UTILITIES ==================================================*/ .fade-up{ opacity:0; transform:translateY(40px); transition:all .8s ease; } .fade-up.show{ opacity:1; transform:translateY(0); } .fade-left{ opacity:0; transform:translateX(-40px); transition:all .8s ease; } .fade-left.show{ opacity:1; transform:translateX(0); } .fade-right{ opacity:0; transform:translateX(40px); transition:all .8s ease; } .fade-right.show{ opacity:1; transform:translateX(0); } .zoom-in{ opacity:0; transform:scale(.9); transition:all .8s ease; } .zoom-in.show{ opacity:1; transform:scale(1); } /*================================================== END OF ANIMATIONS.CSS ==================================================*/