/* =====================================================================
   SECTION NAV: pages with a jump nav that merges into the navbar
   Used by pages/solutions.html and pages/use-cases.html, which load
   it after styles.css and add .sv-page to <body>. js/section-nav.js
   builds the navbar links and the liquid layer and drives the effects.
   ===================================================================== */

/* Section nav in the navbar (desktop, 992px+): liquid merge.
   .sv-goo is a fixed layer that draws the jump nav and the liquid neck
   as shapes through an SVG "goo" filter (blur + alpha threshold), so
   nearby shapes join like liquid. The navbar keeps its own glass panel;
   the layer has the navbar cut out of it. js/section-nav.js:
   - grows a drip from each bar once they are 100px apart; the drips
     join into a neck that widens as the gap closes
   - when they touch, draws the jump nav up into the navbar
     (.sections-merged): its links fade, the main menu, language
     switcher and "Get in Touch" fade out, the section links fly up as cards
   - plays it in reverse when scrolling back up
   The logo icon stays (the wordmark hides on scroll) and scrolls to the top. */
.sv-page .nav-sections,
.sv-page .sv-goo { display: none; }
.sv-page .sv-goo-defs { position: absolute; width: 0; height: 0; }
.sv-page .jump-link.is-active { color: var(--blue); border-color: var(--blue); }

@media (min-width: 992px) {
  /* Height is set by the script to just below the shapes, so the
     filter only works on the top band of the screen */
  .sv-page .sv-goo {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    overflow: hidden;
    z-index: 899;
    pointer-events: none;
    filter: drop-shadow(0 2px 12px rgba(24, 117, 204, .08));
  }
  .sv-page .sv-goo-shapes {
    position: absolute;
    inset: 0;
    filter: url(#sv-goo-filter);
  }
  .sv-page .sv-goo-shapes span {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 12px;
  }

  /* The navbar keeps its own glass panel (as on the homepage): the
     script cuts the navbar's shape out of the layer (clip-path), so the
     liquid only shows below it, and the drop disappears into the glass.
     The jump nav keeps its own style until it comes near the navbar,
     when the script adds .sv-jump-liquid and the layer draws it. */
  .sv-page.sv-jump-liquid .jump-nav {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .sv-page #navbar .nav-inner { position: relative; }

  .sv-page .nav-sections {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4.5rem;
    right: .75rem;
    display: flex;
    align-items: center;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s .4s;
  }
  .sv-page .nav-sections::-webkit-scrollbar { display: none; }
  /* Centered when the links fit; when they overflow, they start at the
     left edge and scroll (justify-content: center would cut off the start) */
  .sv-page .nav-sections li:first-child { margin-left: auto; }
  .sv-page .nav-sections li:last-child { margin-right: auto; }
  /* Links fly up as cards, with the motion of the homepage's
     Dynamics 365 cards (.d3-card in css/enhancements.css): 40px from
     below, spring overshoot, .9s, staggered .09s. Each rises as a white
     card (::before) that fades back to a plain link once it lands. */
  .sv-page .nav-sections li {
    position: relative;
    isolation: isolate;   /* keeps the card (::before) behind the link text */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .18s ease, transform .25s ease;
  }
  .sv-page .nav-sections li::before {
    content: '';
    position: absolute;
    inset: 3px 0;
    z-index: -1;
    border: 1px solid #D9E6F5;
    border-radius: var(--r-pill);
    background: #fff;
    box-shadow: 0 6px 18px rgba(2, 8, 23, .16);
    pointer-events: none;
  }
  .sv-page.sections-merged .nav-sections {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s;
  }
  .sv-page.sections-merged .nav-sections li {
    opacity: 1;
    transform: none;
    transition:
      transform .9s cubic-bezier(.34, 1.56, .64, 1) calc(.25s + var(--i, 0) * .09s),
      opacity .5s ease calc(.25s + var(--i, 0) * .09s);
  }
  .sv-page.sections-merged .nav-sections li::before {
    animation: navCardSettle .5s ease calc(1s + var(--i, 0) * .09s) forwards;
  }
  @keyframes navCardSettle {
    to { opacity: 0; }
  }

  .sv-page #navbar .nav-menu,
  .sv-page #navbar .lang-switch,
  .sv-page #navbar .nav-portal,
  .sv-page #navbar .nav-cta-desktop {
    transition: opacity .3s ease .3s, transform .4s ease .3s, visibility 0s;
  }
  .sv-page.sections-merged #navbar .nav-menu,
  .sv-page.sections-merged #navbar .lang-switch,
  .sv-page.sections-merged #navbar .nav-portal,
  .sv-page.sections-merged #navbar .nav-cta-desktop {
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .3s ease, visibility 0s .3s;
  }

  /* Jump nav links: out fast while absorbed, back in as the drop lands */
  .sv-page .jump-nav-inner {
    transition: opacity .25s ease .3s, transform .35s ease .3s, visibility 0s;
  }
  .sv-page.sections-merged .jump-nav-inner {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity .15s ease, transform .3s ease, visibility 0s .3s;
  }
  .sv-page.sections-merged .jump-nav { pointer-events: none; }
}

.sv-page .nav-section-link {
  display: block;
  padding: .5rem .6rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 600;
  color: var(--txt-head);
  white-space: nowrap;
  transition: color .18s, background-color .18s;
}
.sv-page .nav-section-link:hover,
.sv-page .nav-section-link.is-active { color: var(--blue); background: var(--bg-blue); }

/* Stacked sections (desktop), like the homepage "What we do the best":
   each section pins under the navbar (sticky) and stays fully visible
   while the next one slides up over it as a card.
   --stick-top (js/section-nav.js) pins sections taller than the screen
   once their bottom is in view, so nothing is cut off. */
.sv-page .section-wave + .sv-stack { margin-top: -1px; }
.sv-page .sv-stack + .section-wave {
  margin-top: -50px;
  position: relative;
  z-index: 2;
  --wave-from: transparent;
  background: transparent;
  overflow: visible;
}
@media (min-width: 992px) {
  /* "hidden" (styles.css) makes body a scroll container, which stops
     sticky from working; "clip" hides overflow without that (same fix
     as the homepage, css/enhancements.css) */
  body.sv-page { overflow-x: clip; }

  .sv-page .sv-stack > .section {
    position: sticky;
    top: var(--stick-top, 70px);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -18px 40px rgba(11, 30, 63, .07);
    /* Each card fills the screen under the navbar, like the homepage
       "What we do the best" blocks, so the next one always covers it fully;
       the content sits in the middle of the card */
    min-height: calc(100dvh - 70px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Last card: nothing stacks over it, so it keeps its natural height */
  .sv-page .sv-stack > .section:last-child { min-height: 0; }
  /* .section is transparent in styles.css (only .section-alt has a
     background); a card must be opaque to cover the pinned one beneath */
  .sv-page .sv-stack > .section:not(.section-alt):not(.section-dark) { background: var(--bg); }
  .sv-page .sv-stack > .section:first-child {
    border-radius: 0;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sv-page .nav-sections,
  .sv-page .nav-sections li,
  .sv-page #navbar .nav-menu,
  .sv-page #navbar .lang-switch,
  .sv-page #navbar .nav-portal,
  .sv-page #navbar .nav-cta-desktop,
  .sv-page .jump-nav-inner { transition: none !important; }
  .sv-page .nav-sections li::before { display: none; }
}

/*: : : PHONES AND TABLETS: the jump nav is edge to edge and scrolls sideways: : : (js/section-nav.js keeps the active link fully visible, centred in the bar) */
@media (max-width: 991px) {
  .sv-page .jump-nav-inner {
    max-width: none;
    padding-left: .5rem;
    padding-right: .5rem;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .sv-page .jump-link { flex: none; }
}

/*: : : EDGE LINE (Solutions: js/edge-reveal.js): : : */
.edge-line {
  position: relative;
  z-index: 5;
  height: 0;
  pointer-events: none;
}
.edge-line__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #1875CC 22%, #00C2C7 50%, #3ECC6A 78%, transparent 100%);
}
.edge-line__glow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 28px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 194, 199, .22), rgba(24, 117, 204, 0) 70%);
}