/* Global motion background */
/* Subtle motion and interaction enhancements */
body::before,body::after{
  content:none;
}
/* Sparse vertical strokes moving along their vertical axis. */
body::before{
  inset:-160px -500px;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 359px,rgba(19,168,101,.28) 359px 360px,transparent 360px 719px),
    repeating-linear-gradient(90deg,transparent 0 629px,rgba(24,26,25,.12) 629px 630px,transparent 630px 1259px);
  -webkit-mask-image:repeating-linear-gradient(0deg,transparent 0 90px,#000 90px 270px,transparent 270px 520px);
  mask-image:repeating-linear-gradient(0deg,transparent 0 90px,#000 90px 270px,transparent 270px 520px);
  animation:moving-vertical-lines 26s ease-in-out infinite alternate;
}
/* Sparse horizontal strokes moving along their horizontal axis. */
body::after{
  inset:-500px -160px;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 439px,rgba(19,168,101,.25) 439px 440px,transparent 440px 879px),
    repeating-linear-gradient(0deg,transparent 0 719px,rgba(24,26,25,.11) 719px 720px,transparent 720px 1439px);
  -webkit-mask-image:repeating-linear-gradient(90deg,transparent 0 70px,#000 70px 290px,transparent 290px 560px);
  mask-image:repeating-linear-gradient(90deg,transparent 0 70px,#000 70px 290px,transparent 290px 560px);
  animation:moving-horizontal-lines 22s ease-in-out infinite alternate;
}
/* Shared cross-page shutter transition. The curtain closes upward, then
   carries its right-edge logo left as it reveals the next page. */
.page-transition{
  position:fixed;
  z-index:9999;
  inset:0;
  pointer-events:none;
  background:var(--green);
  box-shadow:0 -24px 70px rgba(19,168,101,.16);
  opacity:0;
  transform:translateX(-101%);
  will-change:transform,opacity;
}
.page-transition .shutter-logo{
  position:absolute;
  top:50%;
  right:clamp(16px,3vw,48px);
  width:clamp(110px,16vw,220px);
  height:auto;
  transform:translateY(-50%);
}
.main-loader{
  position:fixed;
  z-index:2147483647;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:var(--soft);
  opacity:1;
  transition:opacity .28s ease;
}
.main-loader__mark,.main-loader__liquid{
  position:absolute;
  width:min(18vw,150px);
  aspect-ratio:327 / 378;
  /* Render the SVG colors and native overlap filter, rather than its alpha mask. */
  background:url("../assets/svg/z-fill.svg?v=2") center / contain no-repeat;
}
.main-loader__mark{
  opacity:.16;
}
.main-loader__liquid{
  clip-path:polygon(0 105%,12.5% 105%,25% 105%,37.5% 105%,50% 105%,62.5% 105%,75% 105%,87.5% 105%,100% 105%,100% 100%,0 100%);
  animation:loader-liquid-rise 3s linear .08s forwards;
}
.main-loader.is-opening{opacity:0}
.page-transition.is-preparing{opacity:1;transform:translateX(0)}
.page-transition.is-opening{animation:page-shutter-open .8s cubic-bezier(.76,0,.24,1) both}
.page-transition.is-closing{animation:page-shutter-close .42s cubic-bezier(.76,0,.24,1) both}
body.is-page-leaving > :not(.page-transition){animation:page-content-fade .42s ease both}

/* The wave travels sideways as the waterline rises above the full SVG bounds. */
@keyframes loader-liquid-rise{
  0%{clip-path:polygon(0 105%,12.5% 105%,25% 105%,37.5% 105%,50% 105%,62.5% 105%,75% 105%,87.5% 105%,100% 105%,100% 100%,0 100%)}
  15%{clip-path:polygon(0 85%,12.5% 82%,25% 81%,37.5% 82%,50% 85%,62.5% 88%,75% 89%,87.5% 88%,100% 85%,100% 100%,0 100%)}
  30%{clip-path:polygon(0 70%,12.5% 73%,25% 74%,37.5% 73%,50% 70%,62.5% 67%,75% 66%,87.5% 67%,100% 70%,100% 100%,0 100%)}
  45%{clip-path:polygon(0 55%,12.5% 52%,25% 51%,37.5% 52%,50% 55%,62.5% 58%,75% 59%,87.5% 58%,100% 55%,100% 100%,0 100%)}
  60%{clip-path:polygon(0 40%,12.5% 43%,25% 44%,37.5% 43%,50% 40%,62.5% 37%,75% 36%,87.5% 37%,100% 40%,100% 100%,0 100%)}
  75%{clip-path:polygon(0 25%,12.5% 22%,25% 21%,37.5% 22%,50% 25%,62.5% 28%,75% 29%,87.5% 28%,100% 25%,100% 100%,0 100%)}
  90%{clip-path:polygon(0 8%,12.5% 11%,25% 12%,37.5% 11%,50% 8%,62.5% 5%,75% 4%,87.5% 5%,100% 8%,100% 100%,0 100%)}
  100%{clip-path:polygon(0 -5%,12.5% -5%,25% -5%,37.5% -5%,50% -5%,62.5% -5%,75% -5%,87.5% -5%,100% -5%,100% 100%,0 100%)}
}
/* Shared component interactions */
.hero::before{animation:accent-line-down 4s ease-in-out infinite}
.hero::after{animation:accent-line-up 4.8s ease-in-out infinite}
.site-header{animation:fade-down .7s ease-out both}
.site-header nav a{position:relative;transition:color .25s ease}
.site-header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:var(--green);transition:right .25s ease}
.site-header nav a:hover{color:var(--green)}
.site-header nav a:hover::after{right:0}
.pill{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
.pill:hover{transform:translateY(-2px);background:#0d9659;box-shadow:0 10px 22px #13a86535}
.pill span{transition:transform .25s ease}
.pill:hover span{transform:rotate(45deg)}
.ghost{transition:border-color .25s ease,color .25s ease,transform .25s ease}
.ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
/* Home page entrance animations */
.hero .eyebrow{animation:eyebrow-in .7s .05s cubic-bezier(.2,.75,.25,1) both}
.hero h1{animation:hero-rise .8s .1s cubic-bezier(.2,.7,.2,1) both}
.hero .hero-inner>p{animation:hero-rise .8s .22s ease-out both}
.hero .hero-inner>.actions{animation:hero-rise .8s .34s ease-out both}
.hero small{animation:fade-in .8s .55s both}
.logo-marquee{animation:fade-in 1s .65s both}
.logo-track{animation:logo-marquee 24s linear infinite}
.logo-marquee:hover .logo-track{animation-play-state:paused}
/* Section hover interactions */
.tool-cloud i{animation:soft-float 4s ease-in-out infinite}
.tool-cloud i:nth-child(2),.tool-cloud i:nth-child(4){animation-delay:-2s}
.number img{animation:zynact-spin 10s linear infinite}
.number:hover img{animation-duration:2.5s}
.timeline i{transition:transform .25s ease,background-color .25s ease}
.timeline article:hover i{transform:scale(1.16);background:var(--green)}
.timeline article>div{transition:transform .25s ease}
.timeline article:hover>div{transform:translateX(5px)}
.quotes blockquote{transition:transform .3s ease,box-shadow .3s ease}
.quotes blockquote:hover{transform:translateY(-5px);box-shadow:0 16px 35px #173b2a0d}
.accordion details{transition:background-color .25s ease,padding .25s ease}
.accordion details:hover{background:#f9fcfa;padding-left:12px;padding-right:12px}
.accordion summary::after{transition:transform .3s ease}
.accordion details[open] summary::after{transform:rotate(180deg)}
.accordion details[open] p{animation:answer-in .35s ease-out both}
.footer a{transition:color .2s ease,transform .2s ease}
.footer a:hover{color:var(--green);transform:translateX(3px)}
/* Utility motion hooks */
.scroll-drop-copy{
  align-self:start;
  height:max-content;
  will-change:transform;
}
/* Keyframes */
@keyframes fade-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes hero-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes eyebrow-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes greeting-flip-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes greeting-flip-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.eyebrow span.is-flipping-out{animation:greeting-flip-out .32s ease-out both}
.eyebrow span.is-flipping-in{animation:greeting-flip-in .48s cubic-bezier(.22,1,.36,1) both}
@keyframes rotating-word-out{to{opacity:0;transform:translateY(-.28em);filter:blur(3px)}}
@keyframes rotating-word-in{from{opacity:0;transform:translateY(.28em);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.rotating-word{display:inline-block;text-align:center;vertical-align:baseline;transform-origin:center bottom;will-change:transform,opacity,filter}
.rotating-word.is-rotating-out{animation:rotating-word-out .36s cubic-bezier(.4,0,1,1) both}
.rotating-word.is-rotating-in{animation:rotating-word-in .52s cubic-bezier(.16,1,.3,1) both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes soft-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes zynact-spin{to{transform:rotate(360deg)}}
@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes moving-vertical-lines{from{transform:translate3d(0,-90px,0)}to{transform:translate3d(0,150px,0)}}
@keyframes moving-horizontal-lines{from{transform:translate3d(-120px,0,0)}to{transform:translate3d(170px,0,0)}}
@keyframes logo-marquee{to{transform:translateX(-50%)}}
@keyframes accent-line-down{0%,100%{transform:translateY(-18px);opacity:.3}50%{transform:translateY(28px);opacity:1}}
@keyframes accent-line-up{0%,100%{transform:translateY(25px);opacity:.35}50%{transform:translateY(-22px);opacity:1}}
@keyframes page-shutter-open{0%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(-101%)}}
@keyframes page-shutter-close{0%{opacity:0;transform:translateY(101%)}38%{opacity:1}100%{opacity:1;transform:translateY(0)}}
@keyframes page-content-fade{to{opacity:.84;transform:translateY(-10px)}}

/* Page-specific hero entrances */
.about-hero h1,.services-hero h1,.works-hero h1,.detail-title h1{animation:hero-rise .8s .08s cubic-bezier(.2,.7,.2,1) both}
.about-hero p,.services-hero p,.works-hero p{animation:hero-rise .8s .2s ease-out both}
.about-actions,.hero-actions{animation:hero-rise .8s .32s ease-out both}

/* Interactive elements shared by inner pages */
.metrics div,.works-metrics div,.proof-grid div{transition:transform .3s ease}
.metrics div:hover,.works-metrics div:hover,.proof-grid div:hover{transform:translateY(-5px)}
.capability-rows article{transition:background-color .3s ease,padding-left .3s ease}
.capability-rows article:hover{background:#fbfefc;padding-left:24px}
.beliefs li{transition:background-color .3s ease,padding-left .3s ease}
.case-summary aside span{transition:border-color .25s ease,color .25s ease,transform .25s ease}
.case-summary aside span:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.gallery-panel{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.gallery-panel:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 20px 45px #10271d20}
.network-green path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw-network 1.5s .45s ease-out forwards}
.network-faint line,.network-faint polygon{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw-network 1.8s .15s ease-out forwards}
.network-nodes circle{transform-box:fill-box;transform-origin:center;animation:node-pop .45s 1.45s ease-out both}
.network-nodes circle:nth-child(2){animation-delay:1.55s}.network-nodes circle:nth-child(3){animation-delay:1.65s}.network-nodes circle:nth-child(4){animation-delay:1.75s}.network-nodes circle:nth-child(5){animation-delay:1.85s}.network-nodes .hub{animation-delay:1.25s}

/* Scroll reveal animations */
/* Progressive CSS-only scroll reveals for every page. */
@supports (animation-timeline:view()){
  .intro>*,.studio>*,.services>*,.service-grid article,.section-head,.timeline article,.faq>*,.cta>*{animation:scroll-rise linear both;animation-timeline:view();animation-range:entry 3% cover 25%}
  .story>*,.belief-heading,.beliefs li,.disciplines>*,.metrics div{animation:scroll-rise linear both;animation-timeline:view();animation-range:entry 3% cover 24%}
  .capability-heading>*,.capability-rows article,.works-metrics div,.case-studies>header>*,.trusted>*{animation:scroll-rise linear both;animation-timeline:view();animation-range:entry 2% cover 22%}
  .quotes blockquote,.accordion details,.case-summary>*,.gallery-panel{animation:scroll-card linear both;animation-timeline:view();animation-range:entry 2% cover 24%}
  .projects article:nth-child(even),.quotes blockquote:nth-child(even),.gallery-panel:nth-child(even){animation-name:scroll-card-right}
  .discipline-tags span,.capability-tags span,.case-summary aside span{animation:scroll-pop linear both;animation-timeline:view();animation-range:entry 5% cover 18%}
  .footer>div,.footer>small{animation:scroll-rise linear both;animation-timeline:view();animation-range:entry 0 cover 20%}
}

@keyframes scroll-rise{from{opacity:0;translate:0 42px}to{opacity:1;translate:0 0}}
@keyframes scroll-card{from{opacity:0;translate:-30px 35px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes scroll-card-right{from{opacity:0;translate:30px 35px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes scroll-pop{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes draw-network{to{stroke-dashoffset:0}}
@keyframes node-pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
/* Accessibility */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}