/*----------------------------------------------------------------------------------- Zovencia Pvt. Ltd. — Motion Layer Loaded after zovencia-brand.css. Adds transitions, scroll-reveal states, micro-interactions and the hero ambient effect. Rules this file follows - Animates transform / opacity / filter only, so everything stays on the compositor and nothing triggers layout. - Never sets a starting opacity that JS is not guaranteed to clear. The reveal states below only apply once JS has added .z-motion to , so if the script fails to run the page renders fully visible. - Leaves the template's own GSAP animations (.fade-anim, .char-anim, .rr_title_anim, .word-anim, [data-speed]) completely alone. - Honours prefers-reduced-motion at the end of the file. ------------------------------------------------------------------------------------ /************ TABLE OF CONTENTS *************** 01. easing tokens 02. scroll reveal 03. hero ambient (the green swirl) 04. page transition 05. buttons 06. cards 07. images & media 08. navigation & links 09. forms 10. cursor + misc micro-interactions 11. reduced motion **********************************************/ /*----------------------------------------*/ /* 01. easing tokens */ /*----------------------------------------*/ :root { /* soft, slightly overshoot-free curves — the "expensive" feel comes from long tails rather than bounce */ --z-ease: cubic-bezier(0.22, 1, 0.36, 1); --z-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --z-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --z-dur-fast: 0.28s; --z-dur: 0.45s; --z-dur-slow: 0.75s; } /*----------------------------------------*/ /* 02. scroll reveal */ /*----------------------------------------*/ /* Start states apply ONLY when the motion script has booted (.z-motion on ) AND the element has been tagged .z-reveal by that script. Without JS nothing is hidden. */ .z-motion .z-reveal { opacity: 0; transform: translate3d(0, var(--z-reveal-y, 34px), 0) scale(var(--z-reveal-s, 1)); transition: opacity var(--z-dur-slow) var(--z-ease-out) var(--z-reveal-delay, 0s), transform var(--z-dur-slow) var(--z-ease-out) var(--z-reveal-delay, 0s); will-change: transform, opacity; } .z-motion .z-reveal.z-in { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* once settled, drop the compositor hint again */ .z-motion .z-reveal.z-settled { will-change: auto; } /* variants the script picks per element type */ .z-motion .z-reveal.z-reveal-scale { --z-reveal-y: 22px; --z-reveal-s: 0.965; } .z-motion .z-reveal.z-reveal-left { transform: translate3d(-32px, 0, 0); } .z-motion .z-reveal.z-reveal-right { transform: translate3d(32px, 0, 0); } .z-motion .z-reveal.z-reveal-left.z-in, .z-motion .z-reveal.z-reveal-right.z-in { transform: translate3d(0, 0, 0); } /* cards nested inside a wrapper the template already fades in use a shorter travel so the two movements don't compound into an exaggerated slide */ .z-motion .z-reveal.z-reveal-nested { --z-reveal-y: 16px; } /*----------------------------------------*/ /* 03. hero ambient (the green swirl) */ /*----------------------------------------*/ /* .body-bg is the template's column-grid backdrop on the homepage. The two grid images stay exactly where they are — they're just dialled back so the brand glow can sit behind them. */ .body-bg { pointer-events: none; overflow: hidden; } .body-bg img { opacity: 0.55; transition: opacity var(--z-dur-slow) var(--z-ease); } /* soft green aurora — two large, very low-alpha radial pools that drift. Blur is baked into the gradient stops rather than filter: blur() so this costs nothing to composite. */ .body-bg::before, .body-bg::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; will-change: transform; } .body-bg::before { width: 78vw; height: 78vw; max-width: 1150px; max-height: 1150px; top: -34vw; inset-inline-start: -18vw; background: radial-gradient(closest-side, rgba(10, 234, 10, 0.13) 0%, rgba(10, 234, 10, 0.075) 38%, rgba(2, 53, 6, 0.042) 66%, rgba(10, 234, 10, 0) 100%); animation: z-aurora-a 26s var(--z-ease-inout) infinite alternate; } .body-bg::after { width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; top: -8vw; inset-inline-end: -14vw; background: radial-gradient(closest-side, rgba(10, 234, 10, 0.13) 0%, rgba(5, 122, 7, 0.07) 44%, rgba(2, 53, 6, 0.04) 70%, rgba(10, 234, 10, 0) 100%); animation: z-aurora-b 32s var(--z-ease-inout) infinite alternate; } @keyframes z-aurora-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(6vw, 4vw, 0) scale(1.12); } } @keyframes z-aurora-b { 0% { transform: translate3d(0, 0, 0) scale(1.06); } 100% { transform: translate3d(-5vw, 5vw, 0) scale(0.94); } } /* the same ambience, much quieter, behind inner-page hero titles so every page shares the homepage's atmosphere */ .page-title-area { position: relative; isolation: isolate; } .page-title-area::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; top: -22vw; inset-inline-start: 50%; background: radial-gradient(closest-side, rgba(10, 234, 10, 0.10) 0%, rgba(2, 53, 6, 0.045) 52%, rgba(10, 234, 10, 0) 100%); border-radius: 50%; animation: z-aurora-b 30s var(--z-ease-inout) infinite alternate; } /* scroll reaction — JS writes --z-scroll (0 → 1 across the hero) and the glow drifts and fades with it. Transform/opacity only. */ .body-bg { --z-scroll: 0; } .body-bg::before { opacity: calc(1 - (var(--z-scroll) * 0.55)); } .body-bg::after { opacity: calc(1 - (var(--z-scroll) * 0.7)); } /*----------------------------------------*/ /* 04. page transition */ /*----------------------------------------*/ .z-page-veil { position: fixed; inset: 0; z-index: 99999; pointer-events: none; opacity: 0; background: radial-gradient(120% 80% at 50% 0%, rgba(2, 53, 6, 0.55) 0%, rgba(0, 0, 0, 0) 70%), #000000; transition: opacity 0.5s var(--z-ease-inout); } .z-page-veil.z-veil-on { opacity: 1; pointer-events: all; } /* incoming page settles in */ .z-motion body { animation: z-page-in 0.7s var(--z-ease-out) both; } @keyframes z-page-in { from { opacity: 0; } to { opacity: 1; } } /*----------------------------------------*/ /* 05. buttons */ /*----------------------------------------*/ .rr-btn { transition: border-color var(--z-dur) var(--z-ease), background-color var(--z-dur) var(--z-ease), box-shadow var(--z-dur) var(--z-ease), transform var(--z-dur) var(--z-ease); will-change: transform; } .rr-btn:hover, .rr-btn:focus-visible { transform: translate3d(0, -2px, 0); box-shadow: 0 10px 26px -12px var(--z-green-glow), 0 2px 6px -3px rgba(2, 53, 6, 0.35); } .rr-btn:active { transform: translate3d(0, 0, 0) scale(0.985); transition-duration: 0.12s; } /* the label wipe already exists in the template — this only softens its curve */ .rr-btn .btn-wrap .text-one, .rr-btn .btn-wrap .text-two { transition: transform 0.55s var(--z-ease-out), color 0.4s var(--z-ease); } .rr-btn::before { transition: height 0.55s var(--z-ease-out); } /* underline button — line retracts from the right, arrow eases forward */ .rr-btn-underline::before { transition: width 0.45s var(--z-ease-out); } .rr-btn-underline i { transition: transform 0.45s var(--z-ease-out); } .rr-btn-underline:hover i { transform: translate3d(4px, 0, 0); } /* circular button */ .rr-btn-circle { transition: color 0.45s var(--z-ease), border-color 0.45s var(--z-ease); } .rr-btn-circle-dot { transition: width 0.6s var(--z-ease-out), height 0.6s var(--z-ease-out); } /*----------------------------------------*/ /* 06. cards */ /*----------------------------------------*/ .service-box, .work-box, .team-box, .client-box, .z-category-card, .feature-box, .approach-box { /* NOTE: .testimonial-item is deliberately absent. It lives inside a looping Swiper with autoplay, and transitioning transform/box-shadow on the slides made the carousel judder. Testimonials stay on stock motion. */ transition: transform var(--z-dur-slow) var(--z-ease), box-shadow var(--z-dur-slow) var(--z-ease), border-color var(--z-dur) var(--z-ease), background-color var(--z-dur) var(--z-ease); } .z-category-card:hover { transform: translate3d(0, -8px, 0); } .team-box:hover, .client-box:hover { transform: translate3d(0, -5px, 0); } /* titles inside cards get a soft colour ease rather than an instant swap */ .service-box .title a, .work-box .title a, .team-box .name a, .blog .title a, .post .title a { transition: color 0.4s var(--z-ease); } /* list rows nudge on hover */ .service-box .service-list li a, .footer-nav-list li a, .info-list li { transition: color 0.35s var(--z-ease), transform 0.35s var(--z-ease); display: inline-block; } .service-box .service-list li a:hover, .footer-nav-list li a:hover { transform: translate3d(4px, 0, 0); } /* accordion rows */ .accordion-item { transition: background-color var(--z-dur) var(--z-ease), border-color var(--z-dur) var(--z-ease); } .accordion-button::after { transition: transform var(--z-dur) var(--z-ease), color var(--z-dur) var(--z-ease); } /*----------------------------------------*/ /* 07. images & media */ /*----------------------------------------*/ /* one shared, unhurried zoom curve for every card image */ .work-box .thumb img, .team-box .thumb img, .z-category-card .thumb img, .blog .thumb img, .post .thumb img, .gallery-area-service .thumb img { transition: transform 1.1s var(--z-ease) !important; } .work-box:hover .thumb img, .team-box:hover .thumb img, .blog:hover .thumb img, .post:hover .thumb img { transform: scale(1.045); } /* thumbnails revealed by the script get a gentle clip-up rather than a slide */ .z-motion .z-reveal-media { clip-path: inset(12% 0 0 0); opacity: 0; transform: translate3d(0, 26px, 0); transition: clip-path 1.05s var(--z-ease-out), opacity 0.85s var(--z-ease-out), transform 1.05s var(--z-ease-out); } .z-motion .z-reveal-media.z-in { clip-path: inset(0 0 0 0); opacity: 1; transform: translate3d(0, 0, 0); } /*----------------------------------------*/ /* 08. navigation & links */ /*----------------------------------------*/ .main-menu li a { position: relative; transition: color 0.35s var(--z-ease); } /* hover underline grows from the left; the .active underline already exists in the brand layer, so this only draws on non-active items */ .main-menu>ul>li:not(.active)>a::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: 12px; height: 2px; border-radius: 2px; background-image: var(--z-grad-accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.42s var(--z-ease-out); } .main-menu>ul>li:not(.active):hover>a::after { transform: scaleX(1); } .main-menu ul.dp-menu { transition: opacity 0.4s var(--z-ease), transform 0.4s var(--z-ease-out); transform: translate3d(0, 8px, 0); } .main-menu>ul>li:hover>ul.dp-menu { transform: translate3d(0, 0, 0); } .main-menu ul.dp-menu li a { transition: color 0.3s var(--z-ease), transform 0.3s var(--z-ease); } .main-menu ul.dp-menu li a:hover { transform: translate3d(3px, 0, 0); } /* sticky header slide */ .header-sticky, .sticky, .transformed { transition: transform 0.55s var(--z-ease-out), background-color 0.4s var(--z-ease), box-shadow 0.4s var(--z-ease); } .sticky { box-shadow: 0 6px 24px -18px rgba(2, 53, 6, 0.55); } /* social / footer links */ .footer-nav-list li a, .info-link a, .copyright-text .text a { transition: color 0.35s var(--z-ease), opacity 0.45s var(--z-ease); } /*----------------------------------------*/ /* 09. forms */ /*----------------------------------------*/ .contact-form input, .contact-form textarea, .contact-form select, .subscribe-form .input-field { transition: border-color 0.35s var(--z-ease), box-shadow 0.35s var(--z-ease), background-color 0.35s var(--z-ease); } /*----------------------------------------*/ /* 10. cursor + misc micro-interactions */ /*----------------------------------------*/ .cb-cursor:before { transition: transform 0.3s var(--z-ease-out), opacity 0.3s var(--z-ease); } .progress-wrap { transition: opacity 0.35s var(--z-ease), transform 0.45s var(--z-ease-out), box-shadow 0.35s var(--z-ease); } .progress-wrap:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 8px 22px -10px var(--z-green-glow); } .side-info { transition: transform 0.55s var(--z-ease-out); } .offcanvas-overlay { transition: opacity 0.45s var(--z-ease), visibility 0.45s var(--z-ease); } /* icon chips give a small lift */ .contact-item .icon, .offset-widget-box .contact-item .icon { transition: transform 0.4s var(--z-ease), background-color 0.4s var(--z-ease), color 0.4s var(--z-ease); } .contact-item:hover .icon, .offset-widget-box .contact-item:hover .icon { transform: translate3d(0, -2px, 0) scale(1.06); } /*----------------------------------------*/ /* 11. reduced motion */ /*----------------------------------------*/ /* Only the motion introduced by THIS layer is switched off. There is deliberately no blanket `*, *::before, *::after { transition- duration: 0.001ms !important }` rule here. It looks harmless but it is not: `!important` beats inline styles, and Swiper drives its slide animation by writing transition-duration inline on .swiper-wrapper. The blanket rule therefore froze the testimonial carousel's transitions, so a looping autoplay slider snapped between positions instead of sliding — which reads as flickering and juddering pagination. It also disabled the template's own animations, which are not this layer's to switch off. */ @media (prefers-reduced-motion: reduce) { .z-motion .z-reveal, .z-motion .z-reveal-media { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .body-bg::before, .body-bg::after, .page-title-area::after { animation: none !important; } .z-motion body { animation: none !important; } .z-page-veil { display: none !important; } /* drop the movement from this layer's hover states, keep the colour changes so affordances still read */ .rr-btn:hover, .rr-btn:focus-visible, .rr-btn:active, .z-category-card:hover, .team-box:hover, .client-box:hover, .progress-wrap:hover, .contact-item:hover .icon, .offset-widget-box .contact-item:hover .icon, .rr-btn-underline:hover i, .service-box .service-list li a:hover, .footer-nav-list li a:hover, .main-menu ul.dp-menu li a:hover { transform: none !important; } .work-box:hover .thumb img, .team-box:hover .thumb img, .blog:hover .thumb img, .post:hover .thumb img { transform: none !important; } }