/* CodeHub IT - motion system.
   One easing family, three durations, transform/opacity only (GPU-friendly).
   <body data-motion="off|subtle|full"> comes from Admin -> Site settings -> Animations.
   Everything is disabled for visitors who ask for reduced motion. */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --t-fast:.18s; --t-med:.35s; --t-slow:.9s;
  --tint:rgba(20,83,45,.10);
}

/* ------------------------------------------------ 1. scroll reveal + stagger */
.js-reveal [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out);transition-delay:calc(var(--d,0) * 1ms)}
[data-motion="full"].js-reveal [data-reveal]{filter:blur(6px)}
.js-reveal [data-reveal].is-visible{opacity:1;transform:none;filter:none}
[data-motion="subtle"].js-reveal [data-reveal]{transform:translateY(12px);transition-duration:.55s}
.reveal-done [data-reveal],[data-motion="off"] [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}

/* ------------------------------------------------ 2. hero entrance on load */
@keyframes mx-rise{from{opacity:0;transform:translateY(28px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes mx-rise-soft{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes mx-draw{to{background-size:100% 100%}}
@keyframes mx-scale-in{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
[data-motion="full"] .rg-hero__copy>*,[data-motion="full"] .sp-hero__grid>div:first-child>*,[data-motion="full"] .svc-hero__grid>div:first-child>*,[data-motion="full"] .page-hero .container>*{animation:mx-rise .95s var(--ease-out) both}
[data-motion="subtle"] .rg-hero__copy>*,[data-motion="subtle"] .page-hero .container>*{animation:mx-rise-soft .6s var(--ease-out) both}
.rg-hero__copy>:nth-child(2),.page-hero .container>:nth-child(2),.sp-hero__grid>div:first-child>:nth-child(2),.svc-hero__grid>div:first-child>:nth-child(2){animation-delay:.08s}
.rg-hero__copy>:nth-child(3),.page-hero .container>:nth-child(3),.sp-hero__grid>div:first-child>:nth-child(3),.svc-hero__grid>div:first-child>:nth-child(3){animation-delay:.16s}
.rg-hero__copy>:nth-child(4),.page-hero .container>:nth-child(4),.sp-hero__grid>div:first-child>:nth-child(4),.svc-hero__grid>div:first-child>:nth-child(4){animation-delay:.24s}
.rg-hero__copy>:nth-child(5),.page-hero .container>:nth-child(5),.sp-hero__grid>div:first-child>:nth-child(5),.svc-hero__grid>div:first-child>:nth-child(5){animation-delay:.32s}
.rg-hero__copy>:nth-child(n+6),.page-hero .container>:nth-child(n+6),.sp-hero__grid>div:first-child>:nth-child(n+6){animation-delay:.4s}
/* hero/data-reveal containers animate themselves - don't double up */
[data-motion="full"] .rg-hero__copy[data-reveal],[data-motion="full"] .page-hero .container[data-reveal],[data-motion="subtle"] .rg-hero__copy[data-reveal],[data-motion="subtle"] .page-hero .container[data-reveal]{opacity:1;transform:none;filter:none}
/* highlighted words get a soft marker stroke drawn under them */
[data-motion="full"] .rg-hero h1 em,[data-motion="full"] .page-hero h1 em{background:linear-gradient(transparent 64%,rgba(20,83,45,.13) 64%,rgba(20,83,45,.13) 92%,transparent 92%) no-repeat 0 0/0 100%;animation:mx-draw 1.1s .55s var(--ease-out) forwards}
[data-motion="full"] .rg-collage>*{animation:mx-scale-in 1.1s var(--ease-out) both}
[data-motion="full"] .rg-collage>:nth-child(2){animation-delay:.12s}
[data-motion="full"] .rg-collage>:nth-child(3){animation-delay:.24s}
[data-motion="full"] .sp-shot{animation:mx-scale-in 1.1s .15s var(--ease-out) both}

/* ------------------------------------------------ 3. image curtain reveal */
/* the curtain clips the child, never the observed element (a clipped target
   is invisible to IntersectionObserver and would never be revealed) */
[data-motion="full"] .rg-feature__media[data-reveal]>*,[data-motion="full"] .rg-member[data-reveal] .rg-member__photo,[data-motion="full"] .mx-curtain>img{clip-path:inset(0 0 100% 0 round 24px);transition:clip-path 1.1s var(--ease-out) .1s}
[data-motion="full"] .rg-feature__media[data-reveal].is-visible>*,[data-motion="full"] .rg-member[data-reveal].is-visible .rg-member__photo,[data-motion="full"] .mx-curtain.is-visible>img{clip-path:inset(0 0 0 0 round 24px)}
.reveal-done .rg-feature__media>*,.reveal-done .rg-member__photo,.reveal-done .mx-curtain>img{clip-path:none!important}
.rg-feature__media img,.rg-member__photo img,.case-card img{transition:transform 1.2s var(--ease-out)}
[data-motion="full"] .rg-feature__media:not(.is-visible) img{transform:scale(1.12)}
.rg-member:hover .rg-member__photo img{transform:scale(1.05)}
.case-card:hover img{transform:scale(1.025)}

/* ------------------------------------------------ 4. buttons */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform var(--t-med) var(--ease-spring),box-shadow var(--t-med) var(--ease-soft),background-color var(--t-med),color var(--t-med),border-color var(--t-med)}
.btn>span[aria-hidden],.btn>svg{display:inline-block;transition:transform var(--t-med) var(--ease-spring)}
.btn:hover>span[aria-hidden],.btn:hover>svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)!important;transition-duration:.08s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(20,83,45,.7)}
[data-motion="full"] .btn-primary::after,[data-motion="full"] .btn-light::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .75s var(--ease-out)}
[data-motion="full"] .btn-primary:hover::after,[data-motion="full"] .btn-light:hover::after{transform:translateX(120%)}
.btn-secondary{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100%/100% 0;transition:background-size .42s var(--ease-out),color .3s,transform var(--t-med) var(--ease-spring)}
.btn-secondary:hover,.btn-secondary:focus-visible{background-color:transparent;background-image:linear-gradient(var(--ink),var(--ink));background-size:100% 100%;color:var(--bg);border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost-light{background:linear-gradient(var(--bg),var(--bg)) no-repeat 0 100%/100% 0;transition:background-size .42s var(--ease-out),color .3s}
.btn-ghost-light:hover,.btn-ghost-light:focus-visible{background-color:transparent;background-image:linear-gradient(var(--bg),var(--bg));background-size:100% 100%;color:var(--ink);border-color:var(--bg)}
.rg-menu-btn i,.rg-menu-btn i::before,.rg-menu-btn i::after{transition:transform var(--t-med) var(--ease-out),top var(--t-med) var(--ease-out)}
.rg-menu-btn:hover i::before{top:-7px}.rg-menu-btn:hover i::after{top:7px}

/* ------------------------------------------------ 5. links */
.rg-link{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1.5px;padding-bottom:2px;transition:background-size .4s var(--ease-out),color .2s}
.rg-link:hover{background-size:calc(100% - 28px) 1.5px;gap:8px}
.rg-link svg{transition:transform var(--t-med) var(--ease-spring)}
.rg-link:hover svg,a:hover .rg-link svg{transform:translateX(5px)}
.prose a{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;transition:background-size .35s var(--ease-out)}
.prose a:hover{background-size:0 1px;background-position:100% 100%}
.rg-footer__col a,.rg-footer__meta a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .35s var(--ease-out),color .2s}
.rg-footer__col a:hover,.rg-footer__meta a:hover{background-size:100% 1px}
.rg-socials a{transition:transform var(--t-med) var(--ease-spring),border-color .2s,background-color .2s}
.rg-socials a:hover{transform:translateY(-3px);background:rgba(143,184,148,.12)}

/* ------------------------------------------------ 6. header, menus, sidebar */
.rg-header{transition:transform .45s var(--ease-out),border-color .2s,box-shadow .2s,background-color .2s}
[data-motion="full"] .rg-header.is-hidden{transform:translateY(-100%)}
.rg-header__inner{transition:min-height .35s var(--ease-out)}
.rg-header.is-scrolled .rg-header__inner{min-height:64px}
.rg-nav__link{position:relative}
.rg-nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease-out)}
a.rg-nav__link:hover::after,.rg-nav__link.is-active::after{transform:scaleX(1)}
.rg-dd{transition:opacity .25s var(--ease-out),transform .3s var(--ease-out),visibility .25s;transform:translate(-50%,10px) scale(.98);transform-origin:top center}
.rg-nav__item.is-open>.rg-dd{transform:translate(-50%,0) scale(1)}
@keyframes mx-dd-item{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[data-motion="full"] .rg-nav__item.is-open .rg-dd__list>li,[data-motion="full"] .rg-nav__item.is-open .rg-dd__promo{animation:mx-dd-item .4s var(--ease-out) both}
.rg-nav__item.is-open .rg-dd__list>li:nth-child(2){animation-delay:.04s}.rg-nav__item.is-open .rg-dd__list>li:nth-child(3){animation-delay:.08s}.rg-nav__item.is-open .rg-dd__list>li:nth-child(4){animation-delay:.12s}.rg-nav__item.is-open .rg-dd__list>li:nth-child(5){animation-delay:.16s}.rg-nav__item.is-open .rg-dd__list>li:nth-child(n+6){animation-delay:.2s}.rg-nav__item.is-open .rg-dd__promo{animation-delay:.1s}
.rg-dd__icon{transition:background-color .3s,color .3s,transform .4s var(--ease-spring)}
.rg-dd__link:hover .rg-dd__icon,.rg-drawer__sub a:hover .rg-dd__icon{background:var(--brand);color:var(--bg);transform:rotate(-6deg) scale(1.06)}
.rg-dd__link{transition:background-color .2s,transform .3s var(--ease-out)}
.rg-dd__link:hover{transform:translateX(3px)}
@keyframes mx-drawer-item{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
[data-motion="full"] body.drawer-open .rg-drawer__nav>li,[data-motion="full"] body.drawer-open .rg-drawer__card,[data-motion="full"] body.drawer-open .rg-drawer__contact{animation:mx-drawer-item .5s var(--ease-out) both}
body.drawer-open .rg-drawer__nav>li:nth-child(1){animation-delay:.08s}body.drawer-open .rg-drawer__nav>li:nth-child(2){animation-delay:.12s}body.drawer-open .rg-drawer__nav>li:nth-child(3){animation-delay:.16s}body.drawer-open .rg-drawer__nav>li:nth-child(4){animation-delay:.2s}body.drawer-open .rg-drawer__nav>li:nth-child(5){animation-delay:.24s}body.drawer-open .rg-drawer__nav>li:nth-child(n+6){animation-delay:.28s}body.drawer-open .rg-drawer__card{animation-delay:.32s}body.drawer-open .rg-drawer__contact{animation-delay:.38s}
.rg-scrim{backdrop-filter:blur(0);transition:opacity .3s,visibility .3s,backdrop-filter .3s}
body.drawer-open .rg-scrim{backdrop-filter:blur(3px)}

/* ------------------------------------------------ 7. cards: lift + cursor spotlight */
.rg-door,.rg-product,.case-card,.rg-client,.sp-card,.rg-quote,.svc-caps article,.related-card,.product-card{position:relative;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .3s}
.sp-card:hover,.rg-quote:hover,.svc-caps article:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.svc-caps article:hover{z-index:1}
[data-motion="full"] .has-spotlight{overflow:hidden}
[data-motion="full"] .has-spotlight::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--tint),transparent 60%)}
[data-motion="full"] .has-spotlight:hover::before{opacity:1}
.has-spotlight>*{position:relative;z-index:1}
.rg-product__mark,.rg-client__mono,.sp-card .rg-dd__icon,.svc-hero__icon{transition:transform .5s var(--ease-spring),background-color .3s,color .3s}
.rg-product:hover .rg-product__mark{transform:rotate(-8deg) scale(1.08)}
.rg-client:hover .rg-client__mono,.sp-card:hover .rg-dd__icon{transform:scale(1.1) rotate(-6deg)}
.rg-client:hover .rg-client__mono{background:var(--brand);color:var(--bg)}
.rg-door small,.case-card .chip{transition:letter-spacing .4s var(--ease-out)}
.rg-door:hover small{letter-spacing:.14em}
.rg-door[lang="bn"]:hover small{letter-spacing:0}

/* ------------------------------------------------ 8. lists: services, steps, FAQ */
.rg-svc__row{position:relative;isolation:isolate}
.rg-svc__row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease-out)}
.rg-svc__row:hover{background:transparent}
.rg-svc__row:hover::before{transform:scaleY(1)}
.rg-svc__row .rg-dd__icon{transition:background-color .3s,color .3s,transform .45s var(--ease-spring)}
.rg-svc__row:hover .rg-dd__icon{background:var(--brand);color:var(--bg);transform:rotate(-8deg)}
.rg-steps li{position:relative;border-top-color:var(--line)}
.rg-steps li::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) .25s}
.rg-steps li.is-visible::after,.reveal-done .rg-steps li::after,[data-motion="off"] .rg-steps li::after{transform:scaleX(1)}
.faq-item summary::after{content:"+";display:inline-block;transition:transform .35s var(--ease-spring)}
.faq-item[open] summary::after{content:"+";transform:rotate(45deg)}
.faq-item p{overflow:hidden}
.faq-item{transition:border-color .3s,box-shadow .3s,background-color .3s}
.faq-item:hover{border-color:var(--line-2)}
.chip{transition:background-color .25s,border-color .25s,transform .3s var(--ease-spring)}
.tech-chips .chip:hover{transform:translateY(-2px);border-color:var(--line-2)}

/* ------------------------------------------------ 9. small extras */
.rg-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1200;background:var(--brand);transform-origin:left;transform:scaleX(0);pointer-events:none}
@keyframes mx-pulse{0%{box-shadow:0 0 0 0 rgba(20,83,45,.45)}100%{box-shadow:0 0 0 16px rgba(20,83,45,0)}}
[data-motion="full"] .msg-toggle{animation:mx-pulse 1.6s 2.5s var(--ease-out) 2}
.rg-hero__eyebrow i{animation:mx-pulse 2.4s var(--ease-out) infinite}
.rg-badge{transition:transform .3s var(--ease-spring)}
a:hover .rg-badge{transform:scale(1.08)}

/* ------------------------------------------------ off / reduced motion */
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation:none!important;transition-duration:.01ms!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js-reveal [data-reveal]{opacity:1!important;transform:none!important;filter:none!important}
  .rg-feature__media>*,.rg-member__photo,.mx-curtain>img{clip-path:none!important}
  .rg-steps li::after{transform:scaleX(1)!important}
}
@media (hover:none){.has-spotlight::before{display:none}}