/* ========================================================================= PRATHAMSATYA WEBSITE — ANIMATIONS ========================================================================= Keyframes + the scroll-reveal system. main.js adds the class "is-visible" to any element with a "reveal" class once it scrolls into view — that's what actually triggers these animations. See main.js -> setupScrollReveal(). ========================================================================= */ /* --------------------------------------------------------------------- Preloader bars (used in style.css .preloader__bars span) --------------------------------------------------------------------- */ @keyframes loaderBar { 0%, 100% { height: 14px; opacity: 0.5; } 50% { height: 46px; opacity: 1; } } /* --------------------------------------------------------------------- Scroll reveal system Add class="reveal" (fade up), "reveal reveal--fade" (fade only), or "reveal reveal--scale" (scale in) to any element in the HTML. Optionally add a stagger with style="--reveal-delay: 0.1s" IMPORTANT: these opacity:0 starting states only apply once the small inline script in has added a "js" class to . This means if JavaScript is ever blocked or fails to load, every section is simply visible immediately instead of permanently hidden — the animation is a bonus, never a requirement to see the content. --------------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--reveal-delay, 0s); } .js .reveal.reveal--fade { transform: none; } .js .reveal.reveal--scale { transform: scale(0.92); } .js .reveal.reveal--left { transform: translateX(-32px); } .js .reveal.reveal--right { transform: translateX(32px); } .reveal.is-visible, .js .reveal.is-visible { opacity: 1; transform: none; } /* Stagger helper classes for grids of cards */ .js .reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; } .reveal-stagger.is-visible > * { opacity: 1; transform: none; } /* --------------------------------------------------------------------- Ambient hero motion — GPU-composited transform only (no layout shift) --------------------------------------------------------------------- */ @keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .hero__media img { animation: floatSlow 6s ease-in-out infinite; will-change: transform; /* promotes to composited layer — no layout recalc */ } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.6s ease both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero__inner > * { animation: fadeInUp 0.8s ease both; } .hero__media { animation: fadeInUp 0.9s ease 0.15s both; } /* --------------------------------------------------------------------- Spin (used for the form's submitting state) --------------------------------------------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } .btn .spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; display: none; animation: spin 0.7s linear infinite; } .btn.is-loading .spinner { display: inline-block; } .btn.is-loading .btn-label { opacity: 0.7; } /* --------------------------------------------------------------------- Gentle pulse used to draw attention to the WhatsApp floating button --------------------------------------------------------------------- */ @keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .fab-whatsapp { animation: pulseRing 2.6s ease-out infinite; } /* --------------------------------------------------------------------- Marquee-style logo strip (optional ambient motion for trust strip) --------------------------------------------------------------------- */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }