/* ============================================================ bharatpest — shared motion / animation toolkit Dependency-free. Progressive enhancement: content is fully visible with no JS (or with prefers-reduced-motion); the "hidden until scrolled into view" state only switches on once html.js-anim is present (added by a tiny inline script in , before bp-anim.js runs the actual reveal logic). ============================================================ */ :root{ --anim-d:.7s; --anim-e:cubic-bezier(.16,.84,.44,1); } /* ---------- scroll reveal ---------- */ .js-anim .reveal{ opacity:0;transform:translateY(28px); transition:opacity var(--anim-d) var(--anim-e),transform var(--anim-d) var(--anim-e); transition-delay:calc(var(--i,0) * 90ms); will-change:opacity,transform; } .js-anim .reveal.in{opacity:1;transform:none} .js-anim .reveal-scale{ opacity:0;transform:scale(.94); transition:opacity var(--anim-d) var(--anim-e),transform var(--anim-d) var(--anim-e); transition-delay:calc(var(--i,0) * 90ms); } .js-anim .reveal-scale.in{opacity:1;transform:none} .js-anim .reveal-left{ opacity:0;transform:translateX(-30px); transition:opacity var(--anim-d) var(--anim-e),transform var(--anim-d) var(--anim-e); transition-delay:calc(var(--i,0) * 90ms); } .js-anim .reveal-left.in{opacity:1;transform:none} .js-anim .reveal-right{ opacity:0;transform:translateX(30px); transition:opacity var(--anim-d) var(--anim-e),transform var(--anim-d) var(--anim-e); transition-delay:calc(var(--i,0) * 90ms); } .js-anim .reveal-right.in{opacity:1;transform:none} /* ---------- failsafe: if bp-anim.js is blocked/slow/errors, force content visible after 2.5s so the page never gets stuck blank (see head script) ---------- */ .js-anim-safe .reveal,.js-anim-safe .reveal-scale,.js-anim-safe .reveal-left,.js-anim-safe .reveal-right{ opacity:1!important;transform:none!important; } /* ---------- hover-pop (springy lift, opt-in) ---------- */ .hover-pop{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease} .hover-pop:hover{transform:translateY(-6px) scale(1.015)} /* ---------- icon micro-bounce on hover, opt-in via .ic-bounce parent ---------- */ .ic-bounce .ic,.ic-bounce .way-ic,.ic-bounce .cat .ico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .ic-bounce:hover .ic,.ic-bounce:hover .way-ic,.ic-bounce:hover .cat .ico{transform:scale(1.15) rotate(-4deg)} /* ---------- button ripple ---------- */ .btn{position:relative;overflow:hidden} .btn .bp-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:bp-ripple-anim .6s ease-out;pointer-events:none} .btn-ghost .bp-ripple{background:rgba(226,27,27,.16)} @keyframes bp-ripple-anim{to{transform:scale(2.6);opacity:0}} /* ---------- header shrink-on-scroll ---------- */ header{transition:box-shadow .3s ease} header.scrolled{box-shadow:0 8px 26px rgba(16,19,23,.1)} .nav{transition:height .25s ease} header.scrolled .nav{height:62px} /* ---------- BUY PRODUCTS nav CTA — distinct amber accent, not the brand red ---------- */ .nav-cta.btn-primary{ background:linear-gradient(135deg,#FFC15E,#F2951C)!important; color:#241a06!important; box-shadow:0 10px 26px rgba(242,149,28,.4)!important; font-weight:700!important; } .nav-cta.btn-primary .bp-ripple{background:rgba(36,26,6,.22)!important} a.fab{background:linear-gradient(135deg,#FFC15E,#F2951C)!important;color:#241a06!important;box-shadow:0 12px 30px rgba(242,149,28,.42)!important} /* ---------- gateway cards — shared across index.html & solutions.html ---------- */ .gw-card{position:relative} .gw-card .ic svg{width:52px;height:52px;display:block} .gw-card[data-cat="general"]:hover .ic{animation:bp-fly-mosquito 1.1s ease-in-out infinite} @keyframes bp-fly-mosquito{ 0%{transform:translate(0,0) rotate(0deg)} 20%{transform:translate(7px,-6px) rotate(10deg)} 40%{transform:translate(-5px,-10px) rotate(-8deg)} 60%{transform:translate(6px,-4px) rotate(9deg)} 80%{transform:translate(-4px,-9px) rotate(-7deg)} 100%{transform:translate(0,0) rotate(0deg)} } .gw-card.gw-termite:hover .ic{animation:bp-crawl-termite 1.1s ease-in-out infinite} @keyframes bp-crawl-termite{ 0%,100%{transform:translateX(0) translateY(0) rotate(0deg)} 25%{transform:translateX(7px) translateY(-2px) rotate(5deg)} 50%{transform:translateX(13px) translateY(0) rotate(0deg)} 75%{transform:translateX(7px) translateY(-2px) rotate(-5deg)} } .gw-card[data-cat="bird"]:hover .ic{animation:bp-fly-bird 1s ease-in-out infinite} @keyframes bp-fly-bird{ 0%,100%{transform:translateY(0) rotate(0deg) scaleY(1)} 25%{transform:translateY(-11px) rotate(-8deg) scaleY(.82)} 50%{transform:translateY(-4px) rotate(0deg) scaleY(1.06)} 75%{transform:translateY(-13px) rotate(8deg) scaleY(.82)} } .gw-card.gw-wood .brush{position:absolute;top:38px;left:70px;font-size:1.5rem;opacity:0;transform:translate(-14px,4px) rotate(-30deg);transition:opacity .2s;pointer-events:none} .gw-card.gw-wood:hover .brush{opacity:1;animation:bp-brush-stroke 1s ease-in-out infinite} @keyframes bp-brush-stroke{ 0%,100%{transform:translate(-14px,4px) rotate(-30deg)} 50%{transform:translate(16px,-2px) rotate(-18deg)} } .gw-card.gw-wood:hover .ic{animation:bp-wood-shine .8s ease-in-out infinite alternate} @keyframes bp-wood-shine{0%{filter:brightness(1)}100%{filter:brightness(1.15)}} .gw-card.gw-equip .fog{position:absolute;top:44px;left:78px;pointer-events:none} .gw-card.gw-equip .fog span{position:absolute;font-size:1.1rem;opacity:0} .gw-card.gw-equip:hover .fog span{animation:bp-fog-puff 1.6s ease-out infinite} .gw-card.gw-equip:hover .fog span:nth-child(2){animation-delay:.4s} .gw-card.gw-equip:hover .fog span:nth-child(3){animation-delay:.8s} @keyframes bp-fog-puff{ 0%{opacity:.6;transform:translate(0,0) scale(.4)} 100%{opacity:0;transform:translate(20px,-16px) scale(1.7)} } @media(prefers-reduced-motion:reduce){ .gw-card .ic,.gw-card.gw-wood .brush,.gw-card.gw-equip .fog span{animation:none!important} } /* ---------- stat counters ---------- */ .stat-num{font-variant-numeric:tabular-nums} /* ---------- decorative drift (used sparingly — background icons etc.) ---------- */ .js-anim .drift{animation:bp-drift 7s ease-in-out infinite} .js-anim .drift-slow{animation:bp-drift 12s ease-in-out infinite} @keyframes bp-drift{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-16px) rotate(var(--r,0deg))}} /* ---------- subtle animated gradient shimmer, opt-in via .anim-gradient ---------- */ .js-anim .anim-gradient{background-size:180% 180%;animation:bp-gradient 16s ease infinite} @keyframes bp-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} /* ---------- gentle pulse ring, opt-in via .pulse ---------- */ .js-anim .pulse{animation:bp-pulse 2.6s ease-in-out infinite} @keyframes bp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,27,27,.32)}50%{box-shadow:0 0 0 9px rgba(226,27,27,0)}} /* ---------- count-up ready state (avoid layout shift on 0) ---------- */ [data-count-to]{display:inline-block;min-width:1ch} @media(prefers-reduced-motion:reduce){ .js-anim .reveal,.js-anim .reveal-scale,.js-anim .reveal-left,.js-anim .reveal-right{ opacity:1!important;transform:none!important;transition:none!important; } .js-anim .drift,.js-anim .drift-slow,.js-anim .anim-gradient,.js-anim .pulse{animation:none!important} .hover-pop:hover{transform:none} .ic-bounce:hover .ic,.ic-bounce:hover .way-ic,.ic-bounce:hover .cat .ico{transform:none} }