/* ========================================================================== BRANDING DASK MOTION Scroll reveals (different types per section), hover effects on every interactive piece, and a few quiet attention loops (header button, WhatsApp, hero image, CTA glow). Safety: - Content is hidden for a reveal ONLY while has .bd-motion. That class is added by a tiny head script and removed again after 2.5 seconds if motion.js never runs, so text can never stay invisible. - Visitors with "reduce motion" switched on get no motion at all. - Only opacity and transform animate, so scrolling stays smooth. ========================================================================== */ :root{--ease-out:cubic-bezier(.2,.75,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)} /* ------------------------------------------------ 1. SCROLL REVEAL ------ */ /* Waiting state. Rules only match before .is-in is added, so once an item has arrived its own hover effects work normally. */ .bd-motion .wrap-head > :not(.is-in), .bd-motion .sec.hero .split > div:not(.media) > :not(.is-in), .bd-motion .sec.hero .container.center > :not(.is-in), .bd-motion .pagehead .container > :not(.is-in), .bd-motion .split:not(.hero) > :not(.is-in), .bd-motion .split.hero > .media:not(.is-in), .bd-motion .solo > :not(.is-in), .bd-motion .grid > :not(.is-in), .bd-motion .btnrow:not(.is-in), .bd-motion .faq > .faqrow:not(.is-in), .bd-motion .ctabox:not(.is-in), .bd-motion .footcta:not(.is-in), .bd-motion .footgrid > :not(.is-in), .bd-motion .zig:not(.is-in){ opacity:0; transform:translate3d(0,32px,0); } /* Type: slide in from the side (text and image columns) */ .bd-motion .split:not(.hero) > :not(.media):not(.is-in){transform:translate3d(-46px,0,0)} .bd-motion .split:not(.hero) > .media:not(.is-in), .bd-motion .split:not(.hero) > .mapframe:not(.is-in){transform:translate3d(46px,0,0)} .bd-motion .split.rev:not(.hero) > :not(.media):not(.is-in){transform:translate3d(46px,0,0)} .bd-motion .split.rev:not(.hero) > .media:not(.is-in){transform:translate3d(-46px,0,0)} /* Type: zoom (hero image, CTA box, review cards) */ .bd-motion .split.hero > .media:not(.is-in){transform:scale(.9)} .bd-motion .ctabox:not(.is-in){transform:scale(.93)} .bd-motion .grid.reviews > :not(.is-in){transform:translate3d(0,24px,0) scale(.94)} /* Type: pop (stats, logos) */ .bd-motion .grid > .stat:not(.is-in){transform:scale(.8)} .bd-motion .grid.cols6 > :not(.is-in){transform:scale(.7)} /* Type: flip up (process steps) */ .bd-motion .grid.steps > :not(.is-in){transform:perspective(900px) rotateX(-22deg) translate3d(0,30px,0);transform-origin:50% 0} /* Type: alternate left and right (feature cards without borders) */ .bd-motion .cards-flat > :nth-child(odd):not(.is-in){transform:translate3d(-36px,0,0)} .bd-motion .cards-flat > :nth-child(even):not(.is-in){transform:translate3d(36px,0,0)} /* Type: tilt up (blog cards) */ .bd-motion .grid.postcards > :not(.is-in){transform:translate3d(0,34px,0) rotate(-2.5deg)} /* Type: slide from the left (FAQ rows) */ .bd-motion .faq > .faqrow:not(.is-in){transform:translate3d(-28px,0,0)} /* Arriving: the entrance transition, with each item's stagger delay. motion.js adds .rv-done afterwards so hovers get their own timing back. */ .bd-motion .is-in:not(.rv-done){ transition:opacity .75s var(--ease-out),transform .85s var(--ease-out) !important; transition-delay:var(--d,0ms) !important; } .bd-motion .grid > .stat.is-in:not(.rv-done), .bd-motion .grid.cols6 > .is-in:not(.rv-done){ transition:opacity .6s ease,transform .8s var(--ease-spring) !important; transition-delay:var(--d,0ms) !important; } /* ------------------------------------------------- 2. HOVER EFFECTS ------ */ /* Buttons: lift, and a light sweep across */ .btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease-out),background .2s,color .2s,border-color .2s,box-shadow .25s} .btn::after{content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);z-index:-1;transition:left .6s var(--ease-out);pointer-events:none} .btn:hover{transform:translateY(-3px)} .btn:hover::after{left:130%} .btn:active{transform:translateY(0) scale(.98)} /* Card pill link: arrow slides in on hover */ .card-link .linklike{transition:background .2s,transform .25s var(--ease-out),padding .25s} .card-link .linklike .arr{display:inline-block;width:0;opacity:0;overflow:hidden;transition:width .25s,opacity .25s,transform .25s} a.card-link:hover .linklike{transform:translateY(-2px)} a.card-link:hover .linklike .arr{width:14px;opacity:1} /* Cards: lift, deeper shadow, green edge */ .card{transition:transform .35s var(--ease-out),box-shadow .35s,border-color .25s,background .25s} .grid > .card:hover,.grid > .step:hover{transform:translateY(-8px);box-shadow:0 26px 44px -24px rgba(13,57,34,.55);border-color:var(--brand)} .sec.dark .grid > .card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 24px 40px -24px rgba(0,0,0,.7)} /* Icons: fill green and give a little spin-bounce */ .iconbox{transition:background .3s,color .3s,transform .5s var(--ease-spring)} .card:hover .iconbox{background:var(--brand);color:#fff;transform:rotate(-8deg) scale(1.12)} .sec.dark .card:hover .iconbox{background:var(--accent);color:var(--dark)} .card:hover .iconbox .glyph{animation:bd-wiggle .6s ease} @keyframes bd-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}} /* Card title turns brand green */ .h-card{transition:color .2s} .grid > .card:hover .h-card{color:var(--heading)} .sec.dark .grid > .card:hover .h-card{color:#fff} /* Stats on the dark band: glow and grow */ .stat .num{display:inline-block;transition:transform .4s var(--ease-spring),color .25s} .stat:hover .num{transform:scale(1.12)} .sec.dark .stat.card:hover{background:rgba(180,232,48,.08);border-color:var(--accent)} .sec.dark .stat.card:hover .num{color:var(--accent)} /* Process steps: number box fills, arrows nudge forward */ .step .badge{transition:background .25s,color .25s,transform .4s var(--ease-spring)} .step:hover .badge{background:var(--brand);color:#fff;transform:scale(1.1)} .grid.steps > .step::after{animation:bd-nudge 1.8s ease-in-out infinite} @keyframes bd-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}} /* Images: slow zoom inside their frame */ .media{overflow:hidden} .media img{transition:transform .9s var(--ease-out)} .split > .media:hover img,.card:hover .media img{transform:scale(1.06)} .media.natural:hover img{transform:scale(1.03)} /* Hero image: gentle float */ .sec.hero .split > .media img,.sec.hero .split > .media.natural img{animation:bd-float 6s ease-in-out infinite} @keyframes bd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .sec.hero .split > .media:hover img{animation-play-state:paused;transform:scale(1.04)} /* Hero eyebrow pill: a light passes over it */ .eyebrow.herobrow{position:relative;overflow:hidden} .eyebrow.herobrow::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);animation:bd-shine 4.5s ease-in-out 1.2s infinite} @keyframes bd-shine{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}} /* Reviews: avatar tilts, stars twinkle */ .av{transition:transform .4s var(--ease-spring)} .review:hover .av{transform:rotate(-6deg) scale(1.08)} .review:hover .stars{animation:bd-twinkle .8s ease} @keyframes bd-twinkle{0%,100%{transform:scale(1)}40%{transform:scale(1.15)}} .grid > .card .stars{display:inline-flex} /* Logo tiles: grow with a lime glow */ .grid.cols6 > .card{transition:transform .35s var(--ease-spring),box-shadow .3s} .grid.cols6 > .card:hover{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 2px var(--accent),0 18px 30px -18px rgba(0,0,0,.6)} /* FAQ: row nudges right, question shifts */ .faqrow{transition:transform .3s var(--ease-out),border-color .2s,box-shadow .3s} .faqrow:hover{transform:translateY(-2px)} .faqrow[open] .a{animation:bd-drop .35s var(--ease-out)} @keyframes bd-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* Blog cards: lift, image zoom, underline grows under Read more */ .postcards .card:hover{transform:translateY(-6px) rotate(-.5deg)} .readmore{position:relative;display:inline-block} .readmore::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .3s var(--ease-out)} .card:hover .readmore::after{width:100%} /* Menu: underline grows from the centre */ .navlinks > li > a{position:relative} .navlinks > li > a::after{content:"";position:absolute;left:50%;right:50%;bottom:4px;height:2px;border-radius:2px;background:var(--accent);transition:left .25s var(--ease-out),right .25s var(--ease-out)} .navlinks > li > a:hover::after,.navlinks > li.current-menu-item > a::after{left:12px;right:12px} .logo{transition:transform .3s var(--ease-spring)} .logo:hover{transform:scale(1.04)} /* Header button: a soft lime ring pulses every few seconds */ .navcta.btn{animation:bd-ring 3.2s ease-out 2s infinite} @keyframes bd-ring{0%{box-shadow:0 0 0 0 rgba(180,232,48,.7)}60%,100%{box-shadow:0 0 0 12px rgba(180,232,48,0)}} /* Header shrinks a little once the page scrolls */ .nav{transition:height .25s} .stickyhead.scrolled .nav{height:var(--headh-s,64px)} /* Proof chip: lift */ .proofchip{transition:transform .25s var(--ease-out),border-color .2s} .proofchip:hover{transform:translateY(-2px)} /* Dark bands and the CTA box: slowly drifting light */ .sec.dark:not(.ctaband),.ctabox{position:relative;overflow:hidden} .sec.dark:not(.ctaband) > .container,.ctabox > *{position:relative;z-index:1} .sec.dark:not(.ctaband)::before,.ctabox::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(180,232,48,.16),transparent 65%);top:-200px;left:-160px;animation:bd-drift 16s ease-in-out infinite alternate;pointer-events:none} .ctabox::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(28,120,68,.45),transparent 65%);bottom:-200px;right:-120px;animation:bd-drift 12s ease-in-out infinite alternate-reverse;pointer-events:none} @keyframes bd-drift{to{transform:translate(120px,80px) scale(1.15)}} /* CTA buttons get the attention bounce once they appear */ .ctabox.is-in .btn:first-child{animation:bd-bounce 1s var(--ease-spring) .5s 1 both} @keyframes bd-bounce{0%{transform:scale(1)}40%{transform:scale(1.08)}70%{transform:scale(.97)}100%{transform:scale(1)}} /* Footer: links slide right, social icons hop */ .footcol a{transition:color .2s,transform .2s var(--ease-out)} .footcol a:hover{transform:translateX(5px)} .social a{transition:transform .3s var(--ease-spring),background .2s} .social a:hover{transform:translateY(-4px) rotate(-6deg)} /* WhatsApp: pulse ring */ .wafloat::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:bd-wa 2.4s ease-out infinite} @keyframes bd-wa{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.6);opacity:0}} .wafloat{transition:transform .3s var(--ease-spring)} .wafloat:hover{transform:scale(1.1) rotate(-8deg)} /* Touch screens: no sticky hover lifts */ @media (hover:none){ .grid > .card:hover,.grid > .step:hover,.faqrow:hover,.postcards .card:hover{transform:none} } /* Reduce motion: everything still, everything visible */ @media (prefers-reduced-motion:reduce){ .bd-motion *{opacity:1 !important} *,*::before,*::after{animation:none !important;transition:none !important} }