/* GAUGE scroll reveals, modelled on imperium-group.com (Animate.css fadeInUp / fadeInLeft / fadeInRight).
   Whole blocks reveal once when 15% visible. Layout, spacing and the clients section are untouched. */
@media all{
 html.gm .gm-reveal{opacity:0}
 html.gm .gm-reveal.gm-go{opacity:1;animation-duration:1s;animation-fill-mode:both;animation-timing-function:ease}
 html.gm .gm-go.gm-up{animation-name:gmFadeInUp}
 html.gm .gm-go.gm-left{animation-name:gmFadeInLeft}
 html.gm .gm-go.gm-right{animation-name:gmFadeInRight}
 @keyframes gmFadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}
 @keyframes gmFadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}
 @keyframes gmFadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}
 html.gm body{overflow-x:hidden}
 /* image hover, as on the reference: slow 5% zoom inside its frame */
 html.gm #projects .project .image-button{overflow:hidden}
 html.gm #projects .project img,html.gm #mega-projects img{transition:transform .5s ease-out}
 html.gm #projects .project:hover img,html.gm #mega-projects a:hover img,html.gm #mega-projects article:hover img{transform:scale(1.05)}
 html.gm section a{transition:color .3s ease}
}

/* Phones and small tablets: no sideways sliding or long travel — a short, smooth fade-up only */
@media (max-width:820px){
 html.gm .gm-go.gm-up,html.gm .gm-go.gm-left,html.gm .gm-go.gm-right{animation-name:gmFadeInUpSoft;animation-duration:.7s;animation-timing-function:cubic-bezier(.25,.6,.3,1)}
 @keyframes gmFadeInUpSoft{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}}
}