/* ============================================================================
   GEMSTAR — Motion system  (v1.0)
   Loaded after site.css. Progressive enhancement: without JS the page is
   fully visible and static. All effects disabled under prefers-reduced-motion.
   ========================================================================= */

/* ---------------------------------------------------------------- 0. tokens */
:root{
  --gs-ease:cubic-bezier(.16,1,.3,1);          /* expo-out, the "premium" curve */
  --gs-ease-soft:cubic-bezier(.22,.61,.36,1);
  --gs-dur:.85s;
  --gs-dist:26px;
}

/* ------------------------------------------------------- 1. page enter fade */
@keyframes gs-fade{from{opacity:0}to{opacity:1}}
body{animation:gs-fade .45s ease-out}

/* --------------------------------------------------- 2. scroll progress bar */
#gs-progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9999;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal) 0%,#5FD8E4 55%,var(--amber) 100%);
  pointer-events:none;opacity:0;transition:opacity .35s;
}
#gs-progress.on{opacity:1}

/* ------------------------------------------------------------ 3. sticky nav */
header.site{transition:box-shadow .3s var(--gs-ease-soft),border-color .3s}
header.site.gs-scrolled{
  box-shadow:0 1px 2px rgba(11,43,74,.04),0 10px 30px rgba(11,43,74,.09);
  border-bottom-color:transparent;
}
header.site .nav{transition:height .3s var(--gs-ease-soft)}
header.site.gs-scrolled .nav{height:62px}

/* ================================================================ 4. HERO */

/* 4a — animated aurora layer (::after; ::before already used by site.css) */
.hero:after{
  content:"";position:absolute;inset:-35% -12%;z-index:1;pointer-events:none;
  background:
    radial-gradient(38% 44% at 16% 24%,rgba(15,163,177,.34),transparent 62%),
    radial-gradient(36% 40% at 84% 10%,rgba(56,124,214,.34),transparent 64%),
    radial-gradient(30% 34% at 64% 92%,rgba(242,163,60,.13),transparent 66%);
  filter:blur(30px);
  animation:gs-aurora 30s ease-in-out infinite alternate;
}
@keyframes gs-aurora{
  0%  {transform:translate3d(0,0,0)   scale(1)}
  50% {transform:translate3d(-2.6%,1.9%,0) scale(1.09)}
  100%{transform:translate3d(2.2%,-1.5%,0) scale(1.04)}
}

/* 4b — moving grid, injected by motion.js */
.gs-grid{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(72% 72% at 50% 38%,#000 28%,transparent 78%);
          mask-image:radial-gradient(72% 72% at 50% 38%,#000 28%,transparent 78%);
  animation:gs-gridpan 44s linear infinite;
}
@keyframes gs-gridpan{to{background-position:58px 58px}}
.hero .wrap{z-index:3}

/* 4c — hero entrance choreography */
@keyframes gs-up  {from{opacity:0;transform:translateY(var(--gs-dist))}to{opacity:1;transform:none}}
@keyframes gs-in  {from{opacity:0;transform:translateY(38px) scale(.965)}to{opacity:1;transform:none}}
@keyframes gs-img {from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:scale(1)}}
@keyframes gs-left {from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes gs-right{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes gs-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

.hero .eyebrow {animation:gs-up .75s var(--gs-ease) .04s both}
.hero .hero-h  {animation:gs-up .85s var(--gs-ease) .10s both}
.hero .hero-p  {animation:gs-up .85s var(--gs-ease) .20s both}
.hero .hero-btns{animation:gs-up .85s var(--gs-ease) .29s both}
.hero .hero-note{animation:gs-up .85s var(--gs-ease) .37s both}
.hero .dash    {animation:gs-in .95s var(--gs-ease) .24s both}
.hero .eyebrow i{animation:gs-pulse 2.4s ease-in-out infinite}
@keyframes gs-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(15,163,177,.55)}
  55%    {box-shadow:0 0 0 7px rgba(15,163,177,0)}
}
/* page-hero (inner pages) */
.page-hero .crumb{animation:gs-up .7s var(--gs-ease) .02s both}
.page-hero h1    {animation:gs-up .8s var(--gs-ease) .10s both}
.page-hero p     {animation:gs-up .8s var(--gs-ease) .19s both}
.page-hero > .wrap > div{animation:gs-up .8s var(--gs-ease) .27s both}

/* 4d — hero dashboard: floating + animated KPI bars */
.hero .dash{will-change:transform}
.hero .kpi{position:relative;overflow:hidden}
.hero .kpi:after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--teal),#5FD8E4);
  transform-origin:0 50%;transform:scaleX(0);
  animation:gs-bar 1.1s var(--gs-ease) 1s forwards;
}
.hero .kpi:nth-child(2):after{animation-delay:1.14s}
.hero .kpi:nth-child(3):after{animation-delay:1.28s}
@keyframes gs-bar{to{transform:scaleX(1)}}

/* ================================================= 5. SCROLL REVEAL engine */
/* Only armed when JS is present, so a no-JS visitor sees everything. */
html.gs-js [data-rv]{opacity:0;will-change:opacity,transform}
html.gs-js [data-rv].gs-in{
  animation-duration:var(--gs-dur);
  animation-timing-function:var(--gs-ease);
  animation-fill-mode:both;
  animation-delay:var(--gs-delay,0s);
  animation-name:gs-up;
}
html.gs-js [data-rv="img"].gs-in  {animation-name:gs-img;animation-duration:1s}
html.gs-js [data-rv="left"].gs-in {animation-name:gs-left}
html.gs-js [data-rv="right"].gs-in{animation-name:gs-right}
html.gs-js [data-rv="zoom"].gs-in {animation-name:gs-zoom}

/* ============================================= 6. card cursor spotlight */
/* Painted with ::after (not an injected node) so flex/grid children are
   never disturbed. --gs-mx / --gs-my are set by motion.js on mousemove. */
.card-l,.case,.cert,.mod-list li,.numrow>div,.arch-box{position:relative}
.card-l:after,.case:after,.cert:after,
.mod-list li:after,.numrow>div:after,.arch-box:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .4s var(--gs-ease-soft);
  background:radial-gradient(240px circle at var(--gs-mx,50%) var(--gs-my,50%),
             rgba(15,163,177,.13),transparent 62%);
}
.card-l:hover:after,.case:hover:after,.cert:hover:after,
.mod-list li:hover:after,.numrow>div:hover:after,.arch-box:hover:after{opacity:1}
.card-l>*,.case>*,.cert>*,.mod-list li>*,.numrow>div>*,.arch-box>*{position:relative;z-index:1}

/* ============================================= 7. buttons & links polish */
.btn{position:relative;overflow:hidden}
.btn:after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);pointer-events:none;
  transition:left .65s var(--gs-ease);
}
.btn:hover:after{left:150%}
.btn-outline:after{background:linear-gradient(100deg,transparent,rgba(15,163,177,.14),transparent)}
.btn-primary,.btn-ghost{transform:translateY(0)}
.btn-primary:hover,.btn-ghost:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}

.nav-links a.navlink{position:relative}
.nav-links a.navlink:after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1.5px;
  background:var(--teal);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--gs-ease);
}
.nav-links a.navlink:hover:after{transform:scaleX(1)}

/* logo pills: lift + tint on hover, pop-in when revealed */
.logo-pill{transition:transform .3s var(--gs-ease),border-color .3s,box-shadow .3s}
.logo-pill:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 8px 20px rgba(11,43,74,.09)}
.sec-3 .logo-pill:hover{border-color:rgba(95,216,228,.6);box-shadow:0 8px 22px rgba(0,0,0,.22)}

/* images inside cards get a slow breathing zoom on hover */
.case-img img{transition:transform .8s var(--gs-ease)}
.case:hover .case-img img{transform:scale(1.055)}

/* cards: slightly stronger lift now that reveals no longer fight the transition */
.card-l{transition:transform .35s var(--gs-ease),border-color .3s,box-shadow .35s}
.card-l:hover{transform:translateY(-5px)}
.case{transition:transform .35s var(--gs-ease),box-shadow .35s,border-color .3s}
.case:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}

/* ============================================= 8. section accents */
/* anchor targets clear the sticky header */
[id]{scroll-margin-top:88px}

/* thin gradient rule that draws under section heads */
.sec-head:after{
  content:"";display:block;height:2px;width:64px;margin-top:26px;border-radius:2px;
  background:linear-gradient(90deg,var(--teal),rgba(15,163,177,0));
}
html.gs-js .sec-head:after{transform-origin:0 50%;transform:scaleX(0);
  transition:transform .9s var(--gs-ease) .2s}
.sec-head.center:after{margin-left:auto;margin-right:auto;
  background:linear-gradient(90deg,rgba(15,163,177,0),var(--teal),rgba(15,163,177,0))}
.sec-head.gs-in:after{transform:scaleX(1)}
.sec-3 .sec-head:after{background:linear-gradient(90deg,#5FD8E4,rgba(95,216,228,0))}

/* stat band: underline sweeps in once counted */
.stats .stat{position:relative;overflow:hidden}
.stats .stat:after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;
  background:linear-gradient(90deg,transparent,#5FD8E4,transparent);
  transform:translateX(-50%);transition:width .8s var(--gs-ease) .1s;
}
html.gs-js .stats .stat.gs-in:after{width:70%}

/* ============================================= 9. footer */
html.gs-js footer.site .f-col,
html.gs-js footer.site .f-brand{opacity:0;transform:translateY(18px)}
html.gs-js footer.site.gs-in .f-col,
html.gs-js footer.site.gs-in .f-brand{
  opacity:1;transform:none;
  transition:opacity .7s var(--gs-ease),transform .7s var(--gs-ease);
}
html.gs-js footer.site.gs-in .f-col:nth-child(2){transition-delay:.05s}
html.gs-js footer.site.gs-in .f-col:nth-child(3){transition-delay:.1s}
html.gs-js footer.site.gs-in .f-col:nth-child(4){transition-delay:.15s}
html.gs-js footer.site.gs-in .f-col:nth-child(5){transition-delay:.2s}

/* ============================================= 10. video reveal */
video{transition:box-shadow .4s var(--gs-ease)}
video:hover{box-shadow:0 24px 60px rgba(11,43,74,.18)}

/* ============================================= 11. reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;
  }
  html{scroll-behavior:auto}
  html.gs-js [data-rv]{opacity:1!important;transform:none!important}
  .hero:after,.gs-grid{animation:none!important}
  .sec-head:after{transform:scaleX(1)!important}
  footer.site .f-col,footer.site .f-brand{opacity:1!important;transform:none!important}
}

/* ============================================= 12. mobile tuning */
@media(max-width:980px){
  .hero:after{filter:blur(22px)}
  .gs-grid{background-size:46px 46px}
}
@media(max-width:620px){
  /* keep motion cheap on phones */
  .hero:after{animation:none}
  .gs-grid{display:none}
  :root{--gs-dist:18px}
  .sec-head:after{margin-top:20px}
}

/* ============================================= 13. mobile navigation */
/* site.css hides .nav-links under 980px and shows .burger, but nothing
   toggled it. motion.js adds .gs-open (panel) and .gs-exp (sub-menu), and
   mirrors the top-bar CTA into the panel as <li class="gs-cta">. */
/* that mirrored CTA must never show at desktop width — the real one is
   already in the top bar, and .nav-links is a flex row there */
.nav-links li.gs-cta{display:none}

@media(max-width:980px){
  .burger{font-size:20px;line-height:1}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;z-index:99;
    background:#fff;border-bottom:1px solid var(--line);
    padding:10px 28px 22px;gap:0;
    box-shadow:0 22px 44px rgba(11,43,74,.14);
    max-height:calc(100vh - 108px);overflow-y:auto;
  }
  .nav-links.gs-open{display:flex;flex-direction:column;animation:gs-menu .28s var(--gs-ease)}
  @keyframes gs-menu{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .nav-links>li{width:100%}
  .nav-links a.navlink{
    padding:14px 2px;font-size:16.5px;border-radius:0;
    border-bottom:1px solid var(--line);
  }
  .nav-links a.navlink:after{display:none}          /* desktop underline off */
  .nav-links .drop{
    position:static;display:none;min-width:0;border:none;box-shadow:none;
    padding:6px 0 10px 12px;gap:0;
  }
  .nav-links li.gs-exp>.drop{display:grid;grid-template-columns:1fr;
    animation:gs-menu .22s var(--gs-ease)}
  .nav-links li.gs-exp>.drop a{padding:11px 10px;border-bottom:1px solid var(--bg-3)}
  .nav-links .has-m:after{transition:transform .25s var(--gs-ease)}
  .nav-links li.gs-exp>.has-m:after{transform:rotate(225deg) translateY(3px)}
  /* the top-bar CTA is hidden at this width, so JS mirrors it into the panel */
  .nav-links.gs-open li.gs-cta{display:block;width:100%}
  .nav-links li.gs-cta .btn{display:inline-flex;width:100%;justify-content:center;margin-top:18px}
}

/* ============================================= 14. products mega-panel */
/* The Products drop carries a two-level submenu plus the whole system map.
   Anchoring it to the narrow <li> (right:0) pushed half the panel off the
   left edge of the viewport, so the parent <li> is made static (class added
   in the markup) and the panel positions against the sticky <header>, its
   right edge lined up with the .wrap content edge. */
.nav-links li.li-map{position:static}

.drop-map{
  left:auto;
  right:max(28px, calc(50vw - 600px));   /* 600 = half of --max (1200) */
  min-width:0;
  width:min(880px, calc(100vw - 56px));
  grid-template-columns:404px 1fr;gap:18px;padding:18px;
}
.drop-map .drop-list{display:grid;grid-template-columns:1fr;gap:4px;align-content:start}
.drop-map .drop-item{padding:7px 9px;border-radius:10px;transition:background .2s}
.drop-map .drop-item:hover{background:var(--bg-2)}
.drop-map .drop-p{display:block}
.drop-map .drop-p b{display:block;font-size:14px;color:var(--navy);font-weight:650;transition:color .2s}
.drop-map .drop-p:hover b{color:var(--teal-d)}
/* the sub-items are real destinations — industry pages, integrations, results */
.drop-map .drop-subs{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.drop-map .drop-subs a{
  font-size:11.5px;font-weight:500;color:var(--ink-2);
  background:var(--bg-3);border:1px solid transparent;
  padding:3px 10px;border-radius:20px;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.drop-map .drop-subs a:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.drop-map .drop-map-fig{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:12px;display:flex;flex-direction:column;justify-content:center;
}
.drop-map .drop-map-fig img{width:100%;height:auto;display:block}
.drop-map-cap{
  display:block;font-size:11.5px;line-height:1.5;color:var(--ink-3);margin-top:10px;
}

/* ---- click-to-open dropdowns (desktop) --------------------------------
   Hover alone meant keeping the pointer inside a ~90px wide <li>; a click
   leaves the panel open until you dismiss it. */
.nav-links a.has-m{cursor:pointer}
@media(min-width:981px){
  .nav-links li.gs-drop-open > .drop{display:grid;animation:gs-menu .24s var(--gs-ease)}
  .nav-links li.gs-drop-open > a.has-m{background:var(--bg-2);color:var(--navy)}
  .nav-links li.gs-drop-open > a.has-m:after{transform:rotate(225deg) translateY(2px)}
}

@media(max-width:980px){
  .nav-links li.li-map{position:relative}
  .drop-map{width:auto;grid-template-columns:1fr;gap:10px;padding:4px 0 12px}
  .drop-map .drop-map-fig{padding:10px}
}