:root {
--ease-out: cubic-bezier(.22, .61, .36, 1);
--ease-spring: cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes aUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes aFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes aRight { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes aDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes aKenburns { from { scale: 1.12; } to { scale: 1; } }
@keyframes aBreathe { from { scale: 1; opacity: .75; } to { scale: 1.05; opacity: 1; } }
@keyframes aFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes aPop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes aFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes aShine { from { left: -60%; } to { left: 130%; } } .anim .header { animation: aDown .7s var(--ease-out) both; }
.anim .hero__bg,
.anim .page-banner__bg { animation: aKenburns 2.4s var(--ease-out) both; }
.anim .hero__title > span,
.anim .hero__desc,
.anim .hero__cta > * { animation: aUp .9s var(--ease-out) both; }
.anim .hero__title > span:nth-child(1) { animation-delay: .25s; }
.anim .hero__title > span:nth-child(2) { animation-delay: .4s; }
.anim .hero__title > span:nth-child(3) { animation-delay: .55s; }
.anim .hero__desc { animation-delay: .7s; }
.anim .hero__cta > :nth-child(1) { animation-delay: .85s; }
.anim .hero__cta > :nth-child(2) { animation-delay: .95s; }
.anim .hero-slider { animation: aRight 1.1s .6s var(--ease-out) both; }
.anim .page-banner h1 { animation: aUp .8s .2s var(--ease-out) both; }
.anim .page-banner .breadcrumb { animation: aUp .8s .35s var(--ease-out) both; } .anim :is(
.section-head, .section-row, .about__intro .text-body, .btn-row, .socials, .about__quote-text,
.value, .service-card, .tabs, .pill-tabs, .project, .testimonials__intro,
.news-main, .news-item, .contact-form, .consultant, .footer__brand, .footer__links > div, .footer__connect,
.svc-note, .svc-card, .featured, .plan, .pricing__intro, .guide, .brief-form, .contact-card, .thanks__box,
.story__text, .vrow__text, .core li, .member, .bcard, .search-result, .pinfo__inner, .blog > h2, .date-filter
):not(.is-in) { opacity: 0; transform: translateY(40px); }
.anim :is(
.about__gallery img, .about__video, .partners__grid img, .pgallery img, .vrow__img, .story__media img, .map img
):not(.is-in) { opacity: 0; transform: scale(.92); }
.anim .vrow:nth-child(even) .vrow__text:not(.is-in) { transform: translateX(-60px); }
.anim .vrow:nth-child(odd) .vrow__text:not(.is-in) { transform: translateX(60px); }
.anim .is-in {
opacity: 1;
transition: opacity .8s var(--ease-out), transform .9s var(--ease-out), box-shadow .25s ease, background-color .25s ease;
transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
} .anim .bcard.is-in { transition: opacity .8s var(--ease-out), transform .5s var(--ease-out), box-shadow .3s ease, background-color .3s ease; transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s; } .anim .is-in:hover { transition-delay: 0s; } .anim .section-head .eyebrow img { transform: scaleX(0); transform-origin: left center; transition: transform .7s .25s var(--ease-out); }
.anim .section-head--center .eyebrow img { transform-origin: right center; }
.anim .section-head.is-in .eyebrow img { transform: none; } .project.is-pop { animation: aPop .5s var(--ease-out) both; animation-delay: var(--d, 0s); } .decor__symbol,
.thanks__symbol { animation: aBreathe 9s ease-in-out infinite alternate; transform-origin: center; }
.decor__symbol--partners { animation-delay: -4s; }
.cwidget__astro { animation: aFloat 3.2s ease-in-out infinite; }
.drawer__astronaut,
.thanks__box > img { animation: aFloat 3.6s ease-in-out infinite; } .hero__bg,
.page-banner__bg { translate: 0 var(--py, 0px); will-change: translate; } .btn-pill__icon img { transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.btn-pill:hover .btn-pill__icon img { transform: rotate(45deg); }
.btn-green,
.btn-submit { position: relative; overflow: hidden; }
.btn-green::after,
.btn-submit::after {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
transform: skewX(-20deg);
pointer-events: none;
}
.btn-green:hover::after,
.btn-submit:hover::after { animation: aShine .8s ease; }
.btn-submit__icon { transition: transform .35s var(--ease-spring); }
.btn-submit:hover .btn-submit__icon { transform: translate(4px, -3px) rotate(-12deg); }
.circle-btn { transition: background-color .2s ease, transform .25s var(--ease-spring); }
.circle-btn:hover { transform: scale(1.08); }
.circle-btn:active { transform: scale(.94); }
.project__hover > * { transform: translateY(14px); opacity: 0; transition: transform .45s var(--ease-out), opacity .35s ease; }
.project:hover .project__hover > *,
.project:focus-within .project__hover > * { transform: none; opacity: 1; }
.project:hover .project__hover > :nth-child(2),
.project:focus-within .project__hover > :nth-child(2) { transition-delay: .06s; }
.project:hover .project__hover > :nth-child(3),
.project:focus-within .project__hover > :nth-child(3) { transition-delay: .12s; }
.partners__grid img { transition: transform .35s var(--ease-spring), filter .35s ease, opacity .8s var(--ease-out); }
.nav__link { position: relative; }
.nav__link::after {
content: "";
position: absolute;
left: 12px;
right: 12px;
bottom: 4px;
height: 2px;
border-radius: 2px;
background: var(--c-green);
transform: scaleX(0);
transition: transform .3s var(--ease-out);
}
.nav__link:hover::after,
.nav__link--active::after { transform: scaleX(1); }
.mega__col li { transition: transform .25s var(--ease-out); }
.mega__col li:hover { transform: translateX(6px); }
.nav__item--mega:hover .mega__col li,
.nav__item--mega.is-open .mega__col li { animation: aUp .45s var(--ease-out) both; }
.mega__col li:nth-child(2) { animation-delay: .04s !important; }
.mega__col li:nth-child(3) { animation-delay: .08s !important; }
.mega__col li:nth-child(4) { animation-delay: .12s !important; }
.search-overlay:not([hidden]) .search-overlay__form { animation: aUp .5s var(--ease-out) both; }
.search-overlay:not([hidden]) .search-overlay__label { animation: aUp .5s .1s var(--ease-out) both; }
.search-overlay:not([hidden]) .search-overlay__chips a { animation: aPop .45s var(--ease-out) both; }
.search-overlay:not([hidden]) .search-overlay__chips a:nth-child(1) { animation-delay: .15s; }
.search-overlay:not([hidden]) .search-overlay__chips a:nth-child(2) { animation-delay: .2s; }
.search-overlay:not([hidden]) .search-overlay__chips a:nth-child(3) { animation-delay: .25s; }
.search-overlay:not([hidden]) .search-overlay__chips a:nth-child(4) { animation-delay: .3s; }
.drawer:not([hidden]) .drawer__panel > :not(.drawer__symbol):not(.drawer__close) { animation: aUp .6s var(--ease-out) both; }
.drawer:not([hidden]) .drawer__panel > :nth-child(3) { animation-delay: .08s; }
.drawer:not([hidden]) .drawer__panel > :nth-child(4) { animation-delay: .12s; }
.drawer:not([hidden]) .drawer__panel > :nth-child(5) { animation-delay: .16s; }
.drawer:not([hidden]) .drawer__panel > :nth-child(6) { animation-delay: .2s; }
.drawer:not([hidden]) .drawer__panel > :nth-child(7) { animation-delay: .24s; }
.cwidget__panel:not([hidden]) .cwidget__row { animation: aUp .4s var(--ease-out) both; }
.cwidget__panel .cwidget__row:nth-child(3) { animation-delay: .05s; }
.cwidget__panel .cwidget__row:nth-child(4) { animation-delay: .1s; }
.cwidget__panel .cwidget__row:nth-child(5) { animation-delay: .15s; }
.cwidget__panel .cwidget__row:nth-child(6) { animation-delay: .2s; }
.pricing__panel:not([hidden]) { animation: aFade .45s ease both; }
.pricing__panel:not([hidden]) .plan { animation: aPop .5s var(--ease-out) both; }
.pricing__panel:not([hidden]) .plan:nth-child(2) { animation-delay: .06s; }
.pricing__panel:not([hidden]) .plan:nth-child(3) { animation-delay: .12s; }
.pricing__panel:not([hidden]) .plan:nth-child(4) { animation-delay: .18s; }
.pricing__panel:not([hidden]) .plan:nth-child(5) { animation-delay: .24s; }
.check, .radio-card { transition: transform .2s var(--ease-spring), background-color .2s ease, border-color .2s ease; }
.check:active, .radio-card:active { transform: scale(.97); }
.check input:checked ~ .is-on,
.radio-card input:checked ~ .is-on { animation: aPop .3s var(--ease-spring); } .service-card__progress button { position: relative; overflow: hidden; }
.service-card__progress button.is-active { background: rgba(255, 255, 255, .3); }
.service-card__progress button::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--c-white);
transform: scaleX(0);
transform-origin: left center;
}
.service-card__progress button.is-active::after { animation: aFill var(--slide-ms, 6000ms) linear forwards; }
.service-card.is-paused .service-card__progress button.is-active::after { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) {
.decor__symbol, .thanks__symbol, .cwidget__astro, .drawer__astronaut, .thanks__box > img { animation: none; }
.hero__bg, .page-banner__bg { translate: none; }
.service-card__progress button.is-active::after { animation: none; transform: none; }
}