/*===================================================== SOFTOGRID SOLUTIONS ANIMATION.CSS - HERO ANIMATIONS - TEXT REVEAL - FLOATING EFFECTS - CARD MOTION - BACKGROUND ANIMATION ======================================================*/ /*========================= PAGE LOAD ANIMATION =========================*/ .hero-left, .hero-right{ animation:fadeUp 1s ease forwards; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:translateY(0); } } /*========================= NAVBAR ANIMATION =========================*/ .navbar{ animation:navDrop .8s ease forwards; } @keyframes navDrop{ from{ opacity:0; transform:translateY(-30px); } to{ opacity:1; transform:translateY(0); } } /*========================= BADGE ANIMATION =========================*/ .hero-badge{ animation: badgeShow 1s ease .2s both; } @keyframes badgeShow{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } } /*========================= HEADING LETTER EFFECT =========================*/ .hero-left h1{ animation: headingReveal 1s ease .3s both; } @keyframes headingReveal{ from{ opacity:0; transform:translateX(-50px); } to{ opacity:1; transform:translateX(0); } } /*========================= DESCRIPTION ANIMATION =========================*/ .hero-left p{ animation: paragraphShow 1s ease .5s both; } @keyframes paragraphShow{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } } /*========================= BUTTON ANIMATION =========================*/ .hero-buttons{ animation: buttonShow 1s ease .7s both; } @keyframes buttonShow{ from{ opacity:0; transform:translateY(25px); } to{ opacity:1; transform:translateY(0); } } /*========================= STATS ANIMATION =========================*/ .hero-stats{ animation: statsShow 1s ease .9s both; } @keyframes statsShow{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } /*========================= GLASS CARD ENTRANCE =========================*/ .main-card{ animation: cardEntrance 1.2s ease .4s both; } @keyframes cardEntrance{ from{ opacity:0; transform: translateX(80px) scale(.9); } to{ opacity:1; transform: translateX(0) scale(1); } } /*========================= FLOATING CARDS =========================*/ .floating-card{ animation-duration:4s; animation-iteration-count:infinite; animation-timing-function:ease-in-out; } .card1{ animation-name:floatingOne; } .card2{ animation-name:floatingTwo; } .card3{ animation-name:floatingThree; } @keyframes floatingOne{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(-20px) rotate(3deg); } } @keyframes floatingTwo{ 0%,100%{ transform: translateY(0) rotate(0deg); } 50%{ transform: translateY(25px) rotate(-4deg); } } @keyframes floatingThree{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-15px); } } /*========================= BACKGROUND BLOBS =========================*/ .blob{ animation: blobMove 15s infinite alternate ease-in-out; } @keyframes blobMove{ from{ transform: translate(0,0) scale(1); } to{ transform: translate(60px,40px) scale(1.2); } } /*========================= RING ROTATION =========================*/ .ring{ animation: ringPulse 8s infinite ease-in-out; } @keyframes ringPulse{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } } /*========================= BUTTON HOVER GLOW =========================*/ .primary-btn:hover, .nav-btn:hover{ animation: buttonPulse .8s infinite alternate; } @keyframes buttonPulse{ from{ box-shadow: 0 15px 35px rgba(108,99,255,.25); } to{ box-shadow: 0 25px 55px rgba(0,194,168,.35); } } /*========================= LOOPING SHINE =========================*/ .logo-box{ animation: logoGlow 3s infinite; } @keyframes logoGlow{ 0%,100%{ box-shadow: 0 20px 45px rgba(108,99,255,.25); } 50%{ box-shadow: 0 20px 60px rgba(0,194,168,.45); } } /*========================= REDUCE MOTION SUPPORT =========================*/ @media(prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } } .about-content.reveal.active{ transition-delay:.1s; } .about-visual.reveal.active{ transition-delay:.25s; } .mission-card:nth-child(2).reveal.active{ transition-delay:.2s; } .value-card:nth-child(2).reveal.active{ transition-delay:.15s; } .value-card:nth-child(3).reveal.active{ transition-delay:.25s; } .value-card:nth-child(4).reveal.active{ transition-delay:.35s; } /*===================================================== SOFTOGRID SOLUTIONS ANIMATION.CSS UPDATE PHASE 3 SERVICES SECTION - CARD REVEAL - ICON FLOATING - HOVER GLOW - ENTRANCE EFFECTS ======================================================*/ /*========================= SERVICES CARD REVEAL =========================*/ .service-card.reveal{ opacity:0; transform: translateY(60px) scale(.95); transition: opacity .8s ease, transform .8s ease; } .service-card.reveal.active{ opacity:1; transform: translateY(0) scale(1); } /*========================= STAGGER SERVICE CARDS =========================*/ .service-card:nth-child(1).reveal.active{ transition-delay:.1s; } .service-card:nth-child(2).reveal.active{ transition-delay:.2s; } .service-card:nth-child(3).reveal.active{ transition-delay:.3s; } .service-card:nth-child(4).reveal.active{ transition-delay:.4s; } .service-card:nth-child(5).reveal.active{ transition-delay:.5s; } .service-card:nth-child(6).reveal.active{ transition-delay:.6s; } /*========================= SERVICE ICON FLOATING =========================*/ .service-icon{ animation: serviceIconFloat 4s ease-in-out infinite; } @keyframes serviceIconFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } } /*========================= ICON HOVER EFFECT =========================*/ .service-card:hover .service-icon{ animation: iconRotate .6s ease; } @keyframes iconRotate{ 0%{ transform: rotateY(0deg); } 50%{ transform: rotateY(180deg); } 100%{ transform: rotateY(360deg); } } /*========================= SERVICE CARD GLOW =========================*/ .service-card::after{ content:""; position:absolute; inset:-2px; border-radius:32px; background: linear-gradient( 135deg, rgba(108,99,255,.5), rgba(0,194,168,.5) ); opacity:0; z-index:-1; transition:.4s; filter:blur(20px); } .service-card:hover::after{ opacity:.7; } /*========================= SERVICE NUMBER ANIMATION =========================*/ .service-number{ animation: numberPulse 5s infinite ease-in-out; } @keyframes numberPulse{ 0%,100%{ transform: scale(1); opacity:.8; } 50%{ transform: scale(1.08); opacity:1; } } /*========================= SERVICE LINK ANIMATION =========================*/ .service-card a i{ animation: arrowMove 2s infinite ease-in-out; } @keyframes arrowMove{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(5px); } } /*========================= SECTION TITLE ANIMATION =========================*/ .services-section .section-title.reveal.active{ animation: titleReveal .8s ease forwards; } @keyframes titleReveal{ from{ opacity:0; transform: translateY(-30px); } to{ opacity:1; transform: translateY(0); } }