/* ============================================================ HOMEPAGE-ANIMATIONS.CSS Rich scroll & entrance animations — Homepage only Applied when is present TO DISABLE: Comment out the tag in index.html ============================================================ */ /* ============================================================ SECTION REVEAL — each section fades + rises on scroll ============================================================ */ /* Hero is already animated via hero2.css — skip it here */ /* Every direct section child of main gets a subtle entrance */ .page-home main > section:not(.hero2-section) { opacity: 0; transform: translateY(32px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .page-home main > section:not(.hero2-section).is-in-view { opacity: 1; transform: translateY(0); } /* ============================================================ HERO SECTION — enhanced entrance on top of hero2.css ============================================================ */ /* Eyebrow badge — bounces in */ .page-home .hero2-badge { animation: hp-badge-enter 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; } /* Title lines — stagger */ .page-home .hero2-title { animation: hp-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; } /* Description */ .page-home .hero2-description { animation: hp-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both; } /* Feature checkmarks */ .page-home .hero2-features { animation: hp-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both; } /* CTA buttons */ .page-home .hero2-cta-buttons { animation: hp-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.56s both; } /* Trust bar */ .page-home .hero2-trust-bar { animation: hp-fade-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.66s both; } /* Visual cards — slide from right */ .page-home .hero2-visual { animation: hp-slide-right 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; } /* Floating badges — pop in */ .page-home .hero2-floating-stats { animation: hp-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both; } .page-home .hero2-floating-review { animation: hp-pop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both; } /* ============================================================ SECTION HEADER — eyebrow + title + sub stagger ============================================================ */ .page-home .mwd-eyebrow[data-reveal], .page-home .mwd-section-title[data-reveal], .page-home .mwd-section-sub[data-reveal] { /* Override global data-reveal with faster, snappier transitions */ transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } /* Eyebrow slides right */ .page-home .mwd-eyebrow[data-reveal] { transform: translateX(-20px); } .page-home .mwd-eyebrow[data-reveal].is-revealed { transform: translateX(0); } /* Title rises faster */ .page-home .mwd-section-title[data-reveal] { transform: translateY(20px); transition-delay: 0.08s; } /* Sub fades slower */ .page-home .mwd-section-sub[data-reveal] { transition-delay: 0.16s; } /* ============================================================ CARDS — staggered rise on scroll ============================================================ */ /* Service cards, pricing cards, testimonial cards etc. */ .page-home [data-reveal="scale"] { transform: scale(0.93) translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); } .page-home [data-reveal="scale"].is-revealed { transform: scale(1) translateY(0); } /* ============================================================ STAT COUNTER BLOCKS — flip up ============================================================ */ .page-home [data-counter] { display: inline-block; transition: color 0.3s ease; } /* ============================================================ PLATFORM LOGOS STRIP — smooth scroll fade-in sides ============================================================ */ .page-home .hp-platforms, .page-home .fp-section { /* slight blur clears on scroll */ transition: filter 0.8s ease, opacity 0.8s ease; } /* ============================================================ PROCESS STEPS — wave stagger ============================================================ */ .page-home .svc-process__step:nth-child(1)[data-reveal] { transition-delay: 0.05s; } .page-home .svc-process__step:nth-child(2)[data-reveal] { transition-delay: 0.13s; } .page-home .svc-process__step:nth-child(3)[data-reveal] { transition-delay: 0.21s; } .page-home .svc-process__step:nth-child(4)[data-reveal] { transition-delay: 0.29s; } /* ============================================================ CTA SECTION — dramatic entrance ============================================================ */ .page-home .abt-cta [data-reveal] { transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ HORIZONTAL SCROLL PARALLAX — subtle depth on scroll Applied via JS (homepage-animations.js) ============================================================ */ .page-home .hp-parallax-slow { will-change: transform; /* JS sets --parallax-y via inline style */ transform: translateY(var(--parallax-y, 0px)); } .page-home .hp-parallax-fast { will-change: transform; transform: translateY(var(--parallax-y, 0px)); } /* ============================================================ KEYFRAMES — homepage-specific ============================================================ */ @keyframes hp-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } @keyframes hp-slide-right { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes hp-badge-enter { from { opacity: 0; transform: translateY(-16px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes hp-pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } @keyframes hp-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================================ REDUCED MOTION — disable all extras ============================================================ */ @media (prefers-reduced-motion: reduce) { .page-home main > section:not(.hero2-section) { opacity: 1 !important; transform: none !important; transition: none !important; } .page-home .hero2-badge, .page-home .hero2-title, .page-home .hero2-description, .page-home .hero2-features, .page-home .hero2-cta-buttons, .page-home .hero2-trust-bar, .page-home .hero2-visual, .page-home .hero2-floating-stats, .page-home .hero2-floating-review { animation: none !important; opacity: 1 !important; transform: none !important; } .page-home .hp-parallax-slow, .page-home .hp-parallax-fast { transform: none !important; } }