/*================================================== MIGRACIONPRO ANIMATIONS.CSS ==================================================*/ /*================================================== FADE IN ==================================================*/ @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } /*================================================== FADE UP ==================================================*/ @keyframes fadeUp{ from{ opacity:0; transform:translateY(50px); } to{ opacity:1; transform:translateY(0); } } /*================================================== FADE DOWN ==================================================*/ @keyframes fadeDown{ from{ opacity:0; transform:translateY(-50px); } to{ opacity:1; transform:translateY(0); } } /*================================================== FADE LEFT ==================================================*/ @keyframes fadeLeft{ from{ opacity:0; transform:translateX(-60px); } to{ opacity:1; transform:translateX(0); } } /*================================================== FADE RIGHT ==================================================*/ @keyframes fadeRight{ from{ opacity:0; transform:translateX(60px); } to{ opacity:1; transform:translateX(0); } } /*================================================== ZOOM IN ==================================================*/ @keyframes zoomIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } } /*================================================== SPIN ==================================================*/ @keyframes spin{ to{ transform:rotate(360deg); } } /*================================================== FLOAT ==================================================*/ @keyframes floating{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } 100%{ transform:translateY(0); } } /*================================================== PULSE ==================================================*/ @keyframes pulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.05); } 100%{ transform:scale(1); } } /*================================================== BOUNCE ==================================================*/ @keyframes bounce{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } } /*================================================== HERO BACKGROUND ==================================================*/ @keyframes gradientShift{ 0%{ transform:translate(0,0) scale(1); } 25%{ transform:translate(40px,-20px) scale(1.05); } 50%{ transform:translate(-30px,30px) scale(.95); } 75%{ transform:translate(20px,-40px) scale(1.08); } 100%{ transform:translate(0,0) scale(1); } } .gradient-one{ animation:gradientShift 18s ease-in-out infinite; } .gradient-two{ animation:gradientShift 24s ease-in-out infinite reverse; } /*================================================== GRID MOVEMENT ==================================================*/ @keyframes gridMove{ from{ background-position:0 0; } to{ background-position:60px 60px; } } .hero-grid-pattern{ animation:gridMove 14s linear infinite; } /*================================================== BUTTON SHIMMER ==================================================*/ .btn-primary{ position:relative; overflow:hidden; } .btn-primary::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.55), transparent ); transform:skewX(-20deg); } .btn-primary:hover::before{ animation:buttonShine .9s ease; } @keyframes buttonShine{ to{ left:160%; } } /*================================================== CARD HOVER ==================================================*/ .service-card, .tech-card, .project-card, .testimonial-card, .stat-card{ transform-origin:center; } .service-card:hover{ animation:cardLift .35s ease forwards; } @keyframes cardLift{ to{ transform: translateY(-10px) scale(1.015); } } /*================================================== IMAGE PARALLAX ==================================================*/ .project-image{ overflow:hidden; } .project-image img{ transition: transform .8s ease, filter .6s ease; } .project-card:hover img{ transform:scale(1.08); filter:brightness(1.06); } /*================================================== ICON ROTATION ==================================================*/ .service-icon, .step-icon, .benefit-icon{ transition: transform .35s ease, box-shadow .35s ease; } .service-card:hover .service-icon, .process-step:hover .step-icon, .benefit-item:hover .benefit-icon{ transform: rotate(-8deg) scale(1.08); } /*================================================== WHATSAPP PULSE ==================================================*/ @keyframes whatsappPulse{ 0%{ box-shadow: 0 0 0 0 rgba(37,211,102,.45); } 70%{ box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); } } .whatsapp-float{ animation: whatsappPulse 2.5s infinite, floating 4s ease-in-out infinite; } /*================================================== STATS ==================================================*/ .stat-card:hover .stat-number{ animation:pulse .5s ease; } /*================================================== TESTIMONIALS ==================================================*/ .testimonial-card:hover{ animation: cardLift .35s ease forwards; } .testimonial-author img{ transition: transform .35s ease; } .testimonial-card:hover img{ transform:scale(1.08); } /*================================================== STAGGER ==================================================*/ .stagger>*{ opacity:0; transform:translateY(30px); } .stagger.active>*:nth-child(1){ animation:fadeUp .7s .05s forwards; } .stagger.active>*:nth-child(2){ animation:fadeUp .7s .15s forwards; } .stagger.active>*:nth-child(3){ animation:fadeUp .7s .25s forwards; } .stagger.active>*:nth-child(4){ animation:fadeUp .7s .35s forwards; } .stagger.active>*:nth-child(5){ animation:fadeUp .7s .45s forwards; } .stagger.active>*:nth-child(6){ animation:fadeUp .7s .55s forwards; } /*================================================== REVEAL ==================================================*/ .reveal{ opacity:0; transform: translateY(50px); will-change: transform, opacity; } .reveal.active{ animation: fadeUp .9s cubic-bezier(.2,.8,.2,1) forwards; } /*================================================== MOBILE MENU ==================================================*/ @keyframes menuSlideDown{ from{ opacity:0; transform:translateY(-20px); } to{ opacity:1; transform:translateY(0); } } .menu.active{ animation:menuSlideDown .35s ease-out; } /*================================================== BACK TO TOP ==================================================*/ @keyframes rise{ from{ opacity:0; transform: translateY(20px) scale(.9); } to{ opacity:1; transform: translateY(0) scale(1); } } .back-to-top.show{ animation:rise .35s ease; } /*================================================== FOOTER SOCIAL ==================================================*/ .social-links a{ position:relative; overflow:hidden; } .social-links a::before{ content:""; position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.12); transform:scale(0); transition:transform .35s ease; } .social-links a:hover::before{ transform:scale(1.8); } /*================================================== LINKS ==================================================*/ .menu a, .footer-links a{ position:relative; } .menu a::before, .footer-links a::before{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:currentColor; transition:width .35s ease; } .menu a:hover::before, .footer-links a:hover::before{ width:100%; } /*================================================== FORM ==================================================*/ .form-group input, .form-group textarea, .form-group select{ transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus{ transform:translateY(-2px); } /*================================================== IMAGE SHINE ==================================================*/ .project-image{ position:relative; } .project-image::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent ); transform:skewX(-20deg); } .project-card:hover .project-image::after{ animation:imageShine 1s ease; } @keyframes imageShine{ to{ left:160%; } } /*================================================== GPU OPTIMIZATION ==================================================*/ .hero-media, .project-image img, .service-card, .tech-card, .project-card, .testimonial-card, .floating-card, .whatsapp-float{ transform:translateZ(0); backface-visibility:hidden; will-change:transform; } /*================================================== PERFORMANCE ==================================================*/ .hero, .services, .projects, .testimonials{ contain:layout style; } /*================================================== REDUCED MOTION ==================================================*/ @media (prefers-reduced-motion: reduce){ .gradient-one, .gradient-two, .hero-grid-pattern, .floating-card, .whatsapp-float{ animation:none !important; } }