/* ========================================================================== animations.css KV SecureTech Innovation Animations & Motion ========================================================================== */ /* Keyframes */ @keyframes fadeIn{ from{opacity:0;} to{opacity:1;} } @keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } } @keyframes fadeDown{ from{ opacity:0; transform:translateY(-24px); } to{ opacity:1; transform:translateY(0); } } @keyframes slideInLeft{ from{ opacity:0; transform:translateX(-40px); } to{ opacity:1; transform:translateX(0); } } @keyframes slideInRight{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:translateX(0); } } @keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.04);} } @keyframes float{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} } /* Utility Classes */ .fade-in{animation:fadeIn .8s ease both;} .fade-up{animation:fadeUp .8s ease both;} .fade-down{animation:fadeDown .8s ease both;} .slide-left{animation:slideInLeft .8s ease both;} .slide-right{animation:slideInRight .8s ease both;} .pulse{animation:pulse 2.5s ease-in-out infinite;} .float{animation:float 5s ease-in-out infinite;} /* Default page transitions */ .section{ animation:fadeUp .7s ease both; } .hero{ animation:fadeIn .7s ease both; } .card{ transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal); } .card:hover{ transform:translateY(-6px); } .nav-links a, .btn, .btn-outline, input, textarea, select{ transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .logo img:hover{ animation:pulse .8s ease; } /* Scroll Reveal Defaults to visible so content isn't hidden if JS fails to load. Only animates once the "js" class is present on (set inline in ) and JS adds "visible" via IntersectionObserver. */ .reveal{ opacity:1; } .js .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; } .js .reveal.visible{ opacity:1; transform:translateY(0); } /* ========================================================== Hero Phrase Sequence (Home page) 12s loop — pure opacity, no movement. Schedule: phrase1 0→0.8s | phrase2 1.4→2.2s | phrase3 2.8→3.6s phrase4 4.2→5.0s | logo 5.6→6.4s | final text 7.0→7.8s | hold until 9.9s | fade out 9.9→10.7s | blank 10.7→12s | loop ========================================================== */ @keyframes heroPhrase1{ 0%{opacity:0;} 6.67%{opacity:1;} 82.5%{opacity:1;} 89.17%{opacity:0;} 100%{opacity:0;} } @keyframes heroPhrase2{ 0%,11.67%{opacity:0;} 18.33%{opacity:1;} 82.5%{opacity:1;} 89.17%{opacity:0;} 100%{opacity:0;} } @keyframes heroPhrase3{ 0%,23.33%{opacity:0;} 30%{opacity:1;} 82.5%{opacity:1;} 89.17%{opacity:0;} 100%{opacity:0;} } @keyframes heroPhrase4{ 0%,35%{opacity:0;} 41.67%{opacity:1;} 82.5%{opacity:1;} 89.17%{opacity:0;} 100%{opacity:0;} } @keyframes heroLogoReveal{ 0%,46.67%{opacity:0;} 53.33%{opacity:1;} 82.5%{opacity:1;} 89.17%{opacity:0;} 100%{opacity:0;} } @keyframes heroFinalText{ 0%,58.33%{opacity:0;} 65%{opacity:1;} 82.5%{opacity:1;} 89.17%{opacity:0;} 100%{opacity:0;} } .hero-phrase, .hero-logo-reveal, .hero-final-text{ opacity:0; } .hero-phrase-1{animation:heroPhrase1 12s ease infinite;} .hero-phrase-2{animation:heroPhrase2 12s ease infinite;} .hero-phrase-3{animation:heroPhrase3 12s ease infinite;} .hero-phrase-4{animation:heroPhrase4 12s ease infinite;} .hero-logo-reveal{animation:heroLogoReveal 12s ease infinite;} .hero-final-text{animation:heroFinalText 12s ease infinite;} /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; } .hero-phrase, .hero-logo-reveal, .hero-final-text{ opacity:1 !important; } }