/**
 * Site-wide motion system (TASK-MOTION-001). Plain CSS, loaded directly (not part of the
 * Tailwind build) so it applies uniformly regardless of which page's utility classes are
 * JIT-compiled. Covers: page-load entrance, scroll-triggered reveals, anchor-scroll offset
 * for the sticky header, a top loading bar on navigation, and tactile hover/press feedback
 * on buttons and cards. Every animated rule is gated behind prefers-reduced-motion.
 */

/* Anchor-scroll offset so in-page #links don't land underneath the sticky 80px header. */
[id] {
  scroll-margin-top: 6rem;
}

/* -------------------------------------------------------------------------------------
 * Primary nav: a gradient underline that fills in on hover/active (base layout is
 * unconditional; the fill animation itself is reduced-motion gated below).
 * ------------------------------------------------------------------------------------- */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #006194, #00855d);
  transform: scaleX(0);
  transform-origin: left;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* Dropdown items: left accent bar on hover, replacing a flat background-only hover. */
.dropdown-item {
  position: relative;
  border-left: 2px solid transparent;
}
.dropdown-item:hover {
  background-color: #eff4ff;
  border-left-color: #006194;
}

/* -------------------------------------------------------------------------------------
 * Preloader base layout (unconditional — present whether or not motion is reduced, so
 * it always occupies the full screen until JS marks it done; only the exit choreography
 * and spinner rotation are animated, and only under prefers-reduced-motion: no-preference).
 * ------------------------------------------------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#preloader-bars::before,
#preloader-bars::after {
  content: "";
  position: fixed;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to right, #006194, #00855d);
}
#preloader-bars::before { top: 0; }
#preloader-bars::after { bottom: 0; }
#preloader-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloader-logo {
  width: 88px;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 2;
}
#preloader-ring {
  position: absolute;
  width: 128px;
  height: 128px;
  border-radius: 9999px;
  border: 3px solid transparent;
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}

/* Done state: hide the preloader entirely once the page has actually finished loading. */
#preloader.isdone {
  visibility: hidden;
  pointer-events: none;
}
/* Repeat page loads within the same browser session skip the show entirely — see the
   inline script right after #preloader in header.php — so no delayed/animated exit here. */
#preloader.no-transition,
#preloader.no-transition #preloader-center,
#preloader.no-transition #preloader-bars::before,
#preloader.no-transition #preloader-bars::after {
  transition: none !important;
}

/* -------------------------------------------------------------------------------------
 * Trust-strip marquee: a continuous auto-scrolling row (TASK-MOTION-003) so a handful of
 * industry/sector tags never awkwardly wrap or orphan onto their own line at in-between
 * viewport widths. The markup repeats the item list twice (second copy aria-hidden) for a
 * seamless loop; base layout here is unconditional, the actual animation is reduced-motion
 * gated below.
 * ------------------------------------------------------------------------------------- */
.marquee-wrap {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
}
.marquee-group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------------------
 * Reduced-motion users: everything below renders in its final state, no animation at all.
 * --------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-wrap {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee-track {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .marquee-group[aria-hidden="true"] {
    display: none;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .motion-page-enter,
  .motion-page-enter > * {
    animation: none !important;
  }
  #page-progress {
    display: none !important;
  }
  #preloader {
    transition: none !important;
  }
  #preloader-ring {
    animation: none !important;
  }
  #preloader.isdone {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {

  /* -------------------------------------------------------------------------------------
   * Primary nav underline fill + dropdown accent transitions (base layout is unconditional).
   * ------------------------------------------------------------------------------------- */
  .nav-link::after {
    transition: transform 0.25s ease;
  }
  .dropdown-item {
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  /* -------------------------------------------------------------------------------------
   * Trust-strip marquee animation (base layout is unconditional, above).
   * ------------------------------------------------------------------------------------- */
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee-track {
    animation: marquee-scroll 24s linear infinite;
  }
  .marquee-wrap:hover .marquee-track {
    animation-play-state: paused;
  }

  /* -------------------------------------------------------------------------------------
   * Preloader choreography: a slow continuous spin while loading, then on .isdone the
   * center mark scales/blurs/fades out and the top/bottom bars collapse away.
   * ------------------------------------------------------------------------------------- */
  @keyframes preloader-spin {
    to { transform: rotate(360deg); }
  }
  #preloader-ring {
    animation: preloader-spin 1.1s linear infinite;
  }
  #preloader-bars::before,
  #preloader-bars::after,
  #preloader-center {
    transition: all 0.45s cubic-bezier(0.19, 1, 0.22, 1);
  }
  #preloader.isdone {
    transition: visibility 0s linear 0.45s;
  }
  #preloader.isdone #preloader-center {
    opacity: 0;
    transform: scale(1.4);
    filter: blur(2px);
  }
  #preloader.isdone #preloader-bars::before,
  #preloader.isdone #preloader-bars::after {
    height: 0;
  }

  /* -------------------------------------------------------------------------------------
   * Page-load entrance: the main content fades/lifts in once on first paint.
   * ------------------------------------------------------------------------------------- */
  @keyframes motion-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .motion-page-enter {
    animation: motion-fade-up 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  /* -------------------------------------------------------------------------------------
   * Scroll reveal: elements marked data-reveal start hidden/offset and animate in once
   * they cross into the viewport (motion.js toggles .is-visible via IntersectionObserver).
   * data-reveal-group children get a staggered delay from their --reveal-index.
   * ------------------------------------------------------------------------------------- */
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--reveal-index, 0) * 70ms);
  }
  [data-reveal="fade"] {
    transform: none;
  }
  [data-reveal="scale"] {
    transform: scale(0.96);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  /* -------------------------------------------------------------------------------------
   * Tactile feedback: buttons/cards respond to hover and touch press.
   * -------------------------------------------------------------------------------------- */
  .btn-primary,
  .btn-secondary {
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  }
  .btn-primary:active,
  .btn-secondary:active {
    transform: scale(0.97);
  }
  .card {
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .card:hover {
    transform: translateY(-3px);
  }

  /* -------------------------------------------------------------------------------------
   * Top loading progress bar, shown briefly while navigating to a new page (motion.js).
   * -------------------------------------------------------------------------------------- */
  #page-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #006194, #00855d);
    z-index: 9999;
    transition: width 0.4s ease, opacity 0.3s ease 0.2s;
    opacity: 0;
    pointer-events: none;
  }
  #page-progress.is-active {
    opacity: 1;
  }
}