/*
  SOCIMEX — motion system inspired by the pacing of AGS Logistics.
  Progressive enhancement only: content is visible by default and becomes
  temporarily staged only after JavaScript confirms that observers are ready.
*/
:root{
  --ags-ease:cubic-bezier(.22,1,.36,1);
  --ags-ease-soft:cubic-bezier(.16,1,.3,1);
  --ags-duration:820ms;
  --ags-distance:42px;
}
html{scroll-behavior:smooth}
body{position:relative}

/* Header: calm, premium, sticky behaviour. */
.socimex-site-header{
  transition:transform .46s var(--ags-ease),background-color .35s ease,box-shadow .35s ease,border-color .35s ease;
  will-change:transform;
}
.socimex-site-header.is-scrolled{
  background:rgba(255,255,255,.975);
  border-bottom-color:rgba(203,213,225,.9);
  box-shadow:0 16px 44px rgba(15,23,42,.1);
}
.socimex-site-header.ags-header-hidden{transform:translateY(-102%)}
.socimex-site-header.ags-header-enter{animation:agsHeaderEnter .72s var(--ags-ease-soft) both}
@keyframes agsHeaderEnter{from{transform:translateY(-100%);opacity:.65}to{transform:translateY(0);opacity:1}}
.socimex-services-dropdown{transform-origin:top center}
.socimex-services-wrap:hover .socimex-services-dropdown,.socimex-services-wrap.open .socimex-services-dropdown{animation:agsMenuDrop .32s var(--ags-ease-soft) both}
@keyframes agsMenuDrop{from{opacity:0;transform:translate(-50%,12px) scale(.975)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* Hero uses the same visual rhythm: badge -> title -> copy -> actions -> proof. */
[data-purpose="hero"]{isolation:isolate}
[data-purpose="hero"] .absolute.inset-0.z-0 img{will-change:transform;transform:scale(1.06);transform-origin:center center}
[data-purpose="hero"] .hero-gradient{animation:agsHeroShade 1.35s ease both}
@keyframes agsHeroShade{from{opacity:.72}to{opacity:1}}

/* Progressive reveal system. Nothing is hidden until html.ags-motion-on exists. */
html.ags-motion-on [data-ags-animate].ags-pending{
  opacity:0;
  transition-property:opacity,transform,clip-path,filter;
  transition-duration:var(--ags-dur,var(--ags-duration));
  transition-delay:var(--ags-delay,0ms);
  transition-timing-function:var(--ags-ease);
  will-change:opacity,transform,clip-path;
}
html.ags-motion-on [data-ags="up"].ags-pending{transform:translate3d(0,var(--ags-distance),0)}
html.ags-motion-on [data-ags="left"].ags-pending{transform:translate3d(-52px,0,0)}
html.ags-motion-on [data-ags="right"].ags-pending{transform:translate3d(52px,0,0)}
html.ags-motion-on [data-ags="scale"].ags-pending{transform:translate3d(0,22px,0) scale(.965)}
html.ags-motion-on [data-ags="media"].ags-pending{
  opacity:.15;
  transform:scale(1.075);
  clip-path:inset(0 0 18% 0 round 16px);
  filter:saturate(.82);
}
html.ags-motion-on [data-ags-animate].ags-in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0 round 0);
  filter:none;
  transition-property:opacity,transform,clip-path,filter;
  transition-duration:var(--ags-dur,var(--ags-duration));
  transition-delay:var(--ags-delay,0ms);
  transition-timing-function:var(--ags-ease);
}

/* Hero reveal is slightly stronger and more editorial. */
html.ags-motion-on [data-ags-hero].ags-pending{opacity:0;transform:translate3d(0,34px,0);filter:blur(5px)}
html.ags-motion-on [data-ags-hero].ags-in{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ags-ease) var(--ags-delay,0ms),transform .9s var(--ags-ease) var(--ags-delay,0ms),filter .9s ease var(--ags-delay,0ms)}
[data-purpose="hero"] h1{transform-origin:left bottom}

/* Section heading underline grows after reveal. */
[data-ags-heading]{position:relative}
[data-ags-heading]::after{
  content:"";display:block;width:54px;height:3px;border-radius:999px;margin-top:14px;
  background:linear-gradient(90deg,#155eef,#7c3aed);
  transform:scaleX(0);transform-origin:left center;transition:transform .75s var(--ags-ease) .18s;
}
[data-ags-heading].ags-in::after{transform:scaleX(1)}
.text-center [data-ags-heading]::after{margin-left:auto;margin-right:auto;transform-origin:center}

/* Cards and service rows: staggered lift, then restrained hover movement. */
[data-ags-card]{transition:transform .42s var(--ags-ease),box-shadow .42s ease,border-color .32s ease,background-color .32s ease!important;backface-visibility:hidden}
@media (hover:hover) and (pointer:fine){
  [data-ags-card]:hover{transform:translateY(-7px);box-shadow:0 22px 52px rgba(15,23,42,.12)!important}
  [data-ags-card]:hover img{transform:scale(1.045)}
  [data-ags-magnetic]{transition:transform .25s var(--ags-ease),box-shadow .25s ease,background-color .25s ease}
}
[data-ags-card] img{transition:transform .8s var(--ags-ease),filter .5s ease!important}
[data-ags-service-row]{position:relative}
[data-ags-service-row] .huge-watermark{transition:transform 1.1s var(--ags-ease),opacity .7s ease}
[data-ags-service-row].ags-in .huge-watermark{transform:translate3d(0,8px,0) rotate(-2deg)}

/* Workflow: sequential cards feel like one connected movement. */
[data-purpose="workflow-steps"] [data-ags-card]{position:relative;overflow:hidden}
[data-purpose="workflow-steps"] [data-ags-card]::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,#155eef,#7c3aed);
  transform:scaleX(0);transform-origin:left;transition:transform .85s var(--ags-ease) .2s;
}
[data-purpose="workflow-steps"] [data-ags-card].ags-in::after{transform:scaleX(1)}

/* CTA: slow image drift + button confidence. */
[data-purpose="bottom-cta"]{isolation:isolate}
[data-purpose="bottom-cta"]>.absolute img{transform:scale(1.07);will-change:transform}
[data-purpose="bottom-cta"] a{position:relative;overflow:hidden}
[data-purpose="bottom-cta"] a::before,.socimex-quote-header::before{
  content:"";position:absolute;inset:-2px auto -2px -45%;width:36%;transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transition:left .62s var(--ags-ease);
}
@media (hover:hover){[data-purpose="bottom-cta"] a:hover::before,.socimex-quote-header:hover::before{left:120%}}

/* Gallery/media blocks: reveal through a shallow mask rather than a generic fade. */
[data-purpose*="gallery"] img,[data-purpose="case-studies"] img{will-change:transform}

/* Footer enters as a single grounded block; links remain fully interactive. */
footer[data-ags-animate]{transform-origin:center bottom}
footer a{transition:opacity .22s ease,transform .22s ease,color .22s ease}
@media (hover:hover){footer a:hover{transform:translateX(3px)}}

/* Respect accessibility and mobile performance. */
@media(max-width:767px){
  :root{--ags-distance:24px;--ags-duration:620ms}
  .socimex-site-header.ags-header-hidden{transform:none}
  html.ags-motion-on [data-ags="left"].ags-pending,html.ags-motion-on [data-ags="right"].ags-pending{transform:translate3d(0,24px,0)}
  html.ags-motion-on [data-ags="media"].ags-pending{transform:scale(1.035);clip-path:inset(0 0 10% 0 round 14px)}
  [data-purpose="hero"] .absolute.inset-0.z-0 img,[data-purpose="bottom-cta"]>.absolute img{transform:scale(1.03)!important}
}
@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}
  [data-ags-animate]{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important}
  .socimex-site-header.ags-header-hidden{transform:none!important}
  [data-purpose="hero"] .absolute.inset-0.z-0 img,[data-purpose="bottom-cta"]>.absolute img{transform:none!important}
}