/* ---------------------------------------------------------------------------
   Motion for the freight-management-software landing page.
   The page's design (freight-management-software.css) is untouched; this file
   only adds movement on top of it. Everything is opt-in: fms-anim.js adds
   .fms-anim to <html> when motion is allowed, so without JS — or with
   prefers-reduced-motion — the page is exactly the static design.
   --------------------------------------------------------------------------- */

/* Scroll reveal: elements marked by the script rise in once their section
   arrives (the section gets .is-in). --d staggers them. */
.fms-anim [data-fx] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.fms-anim .is-in [data-fx], .fms-anim [data-fx].is-in { opacity: 1; transform: none; }

/* Continuous loops pause while their section is off screen. */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* --- hero ------------------------------------------------------------------ */
/* The product shot swings in from a deeper angle, then floats. Uses the
   `translate` property so it composes with the frame's own 3D transform. */
.fms-anim .hero-product { animation: hero-in 1.1s cubic-bezier(.2, .7, .2, 1) .25s both; }
@keyframes hero-in { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
.fms-anim .product-frame { animation: frame-float 7s ease-in-out 1.4s infinite alternate; }
@keyframes frame-float { from { translate: 0 0; } to { translate: 0 -8px; } }
.fms-anim .floating-card { animation: card-in .6s cubic-bezier(.34, 1.56, .64, 1) both, card-float 5s ease-in-out infinite alternate; }
.fms-anim .floating-top { animation-delay: 1s, 1.6s; }
.fms-anim .floating-bottom { animation-delay: 1.3s, 2.4s; }
@keyframes card-in { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes card-float { from { translate: 0 0; } to { translate: 0 -6px; } }
/* the live notification: text swaps, the dot pings */
.fc-text { display: block; min-width: 0; }
.fc-text.is-out { animation: fc-out .28s ease-in forwards; }
.fc-text.is-in { animation: fc-in .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fc-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes fc-in { from { opacity: 0; transform: translateY(8px); } }
.fms-anim .status-dot { animation: dot-ping 1.8s ease-out infinite; }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 #e5501866; } 100% { box-shadow: 0 0 0 10px #e5501800; } }
.fms-anim .ai-mark { transition: background .3s; }
.ai-mark.is-busy { background: #e55018; }

/* --- "One email in": a signal runs across the four steps --------------------- */
.workflow-grid { position: relative; }
/* the progress line along the top, drawn as a pseudo-element so the grid's own
   children (and the design's :last-child / :nth-child rules) are untouched */
.fms-anim .workflow-grid::before { content: ""; position: absolute; z-index: 3; top: -1px; left: 0; height: 3px; width: var(--wf, 0%); background: var(--orange); transition: width .9s cubic-bezier(.6, 0, .2, 1); pointer-events: none; }
.fms-anim .workflow-grid article { transition: background .5s ease; }
.fms-anim .workflow-grid article.is-active { background: #fff6f0; }
.fms-anim .workflow-grid article > span { display: inline-block; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.fms-anim .workflow-grid article.is-active > span { transform: translateX(4px); }
.fms-anim .workflow-grid article:not(:last-child)::after { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .45s; }
.fms-anim .workflow-grid article.is-pass::after { transform: scale(1.25); box-shadow: 0 0 0 6px #ff57002e; }
.operator-note { position: relative; overflow: hidden; }
.fms-anim .operator-note::after {             /* a slow light passing along the bar */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, #ffffff59 50%, transparent 70%);
  transform: translateX(-100%);
  animation: note-shine 5s ease-in-out 1s infinite;
  pointer-events: none;
}
@keyframes note-shine { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }

/* --- the six workflows: a small moving icon in each card ---------------------- */
.cap-ico { display: block; width: auto; height: 44px; aspect-ratio: 64 / 44; margin-top: 30px; overflow: visible; }
.capability-grid article.has-ico h3 { margin-top: 26px; }
@media (min-width: 1101px) {                 /* follows the screen's height, like the rest of the section */
  .cap-ico { height: clamp(28px, 5.5vh, 44px); margin-top: clamp(8px, 2.2vh, 30px); }
  .capability-grid article.has-ico h3 { margin-top: clamp(10px, 2.4vh, 26px); }
}
.cap-ico * { fill: none; stroke: #3a3632; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cap-ico .o { stroke: var(--orange); }
.cap-ico .fo { fill: var(--orange); stroke: none; }
.cap-ico .fw { fill: #fff; }
.cap-ico .soft { stroke: #d8cdc0; }
/* 1 shipment creation: a document slides into a box */
.fms-anim .is-in .ico-doc { animation: ico-doc 3s ease-in-out infinite; }
@keyframes ico-doc { 0%, 15% { transform: translateX(0); opacity: 1; } 55% { transform: translateX(26px) scale(.6); opacity: 0; } 56%, 70% { transform: translateX(0); opacity: 0; } 85%, 100% { opacity: 1; } }
.fms-anim .is-in .ico-box { animation: ico-box 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ico-box { 0%, 50% { transform: none; } 58% { transform: scale(1.12); } 66%, 100% { transform: none; } }
/* 2 container tracking: a dot travels the route */
.fms-anim .is-in .ico-dot { offset-path: path("M6 34 C 18 34, 18 12, 32 12 S 46 30, 58 10"); animation: ico-route 3.4s ease-in-out infinite; }
@keyframes ico-route { from { offset-distance: 0%; } to { offset-distance: 100%; } }
/* 3 exception management: the alert rings */
.fms-anim .is-in .ico-ring { animation: ico-ring 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ico-ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
/* 4 arrival notices: the ship comes in to the berth */
.fms-anim .is-in .ico-ship { animation: ico-ship 4s ease-in-out infinite; }
@keyframes ico-ship { 0% { transform: translateX(-14px); opacity: 0; } 15% { opacity: 1; } 60%, 85% { transform: translateX(6px); opacity: 1; } 100% { transform: translateX(6px); opacity: 0; } }
.fms-anim .is-in .ico-bell { animation: ico-bell 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ico-bell { 0%, 58% { transform: scale(0); } 66% { transform: scale(1.2); } 72%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
/* 5 carrier invoices: lines get itemised, then the total ticks */
.fms-anim .is-in .ico-line { stroke-dasharray: 20; animation: ico-line 3.2s ease-out infinite; }
.fms-anim .is-in .ico-line:nth-of-type(2) { animation-delay: .25s; }
.fms-anim .is-in .ico-line:nth-of-type(3) { animation-delay: .5s; }
@keyframes ico-line { 0% { stroke-dashoffset: 20; } 30%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 20; } }
.fms-anim .is-in .ico-tick { stroke-dasharray: 14; animation: ico-tick 3.2s ease-out infinite; }
@keyframes ico-tick { 0%, 40% { stroke-dashoffset: 14; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 14; } }
/* 6 customer communication: someone is typing a reply */
.fms-anim .is-in .ico-type { animation: ico-type 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.fms-anim .is-in .ico-type:nth-of-type(2) { animation-delay: .15s; }
.fms-anim .is-in .ico-type:nth-of-type(3) { animation-delay: .3s; }
@keyframes ico-type { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.fms-anim .capability-grid article { transition: background .3s; }
.fms-anim .capability-grid article:hover { background: #fff8f2; }

/* --- built for: tags pop in --------------------------------------------------- */
.fms-anim .fit-tags span { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1), background .3s, color .3s; }
.fms-anim .is-in .fit-tags span { opacity: 1; transform: none; }
.fms-anim .fit-tags span:nth-child(2) { transition-delay: .1s; }
.fms-anim .fit-tags span:nth-child(3) { transition-delay: .2s; }
.fms-anim .fit-tags span:nth-child(4) { transition-delay: .3s; }
.fit-tags span:hover { background: #fff; color: var(--orange); }

/* --- port scenes, borrowed from the homepage ------------------------------ */
/* Hero: the waterline along the bottom edge, ships crossing on it (the same
   drawing and timing as the homepage hero). Pure CSS; it sits in the hero's
   bottom padding, so it never runs behind the copy or the product frame. */
.hero { position: relative; }
.hero-sea { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 56px; overflow: hidden; pointer-events: none; }
.hero-sea .wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; animation: wave-drift 26s linear infinite; }
.hero-sea .wave-back { bottom: 6px; animation-duration: 38s; animation-direction: reverse; }
.hero-sea .wave-front { z-index: 2; }
.hero-sea .wave-front path { fill: var(--paper); }      /* blends into the hero's bottom colour */
@keyframes wave-drift { to { transform: translateX(-50%); } }
.hero-sea .ship { position: absolute; z-index: 1; left: 0; bottom: 3px; width: 190px; animation: sail 70s linear -30s infinite; }
.hero-sea .ship svg { display: block; width: 100%; height: auto; animation: bob 5.5s ease-in-out infinite; transform-origin: 50% 90%; }
.hero-sea .ship-far { bottom: 16px; width: 92px; opacity: .42; animation-duration: 140s; animation-direction: reverse; animation-delay: -95s; }
@keyframes sail { from { transform: translateX(-220px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(1.5px) rotate(-.6deg); } }
.hero > .hero-copy, .hero > .hero-product { position: relative; z-index: 1; }

/* "One email in": a freight train carries the email across the four steps,
   on a track along the top of the cards (fms-anim.js moves it). The rail
   behind it turns orange, which is the progress line above. Wide screens
   only: below 1100px the cards wrap and a straight track no longer fits. */
.workflow { position: relative; }
.wf-track { display: none; }
.wf-train { display: none; }
@media (min-width: 1101px) {
  .fms-anim .wf-track {
    position: absolute;
    display: block;
    height: 6px;
    background: repeating-linear-gradient(90deg, #cfc4b8 0 2px, transparent 2px 12px) 0 1px / 100% 4px no-repeat;
    pointer-events: none;
  }
  .fms-anim .wf-train { position: absolute; z-index: 4; display: block; width: 236px; height: 36px; transition: transform 1.1s cubic-bezier(.6, 0, .2, 1), opacity .4s; pointer-events: none; }
  .wf-train svg { display: block; width: 100%; height: 100%; }
  .wf-train .wheel { animation: wf-wheel .5s linear infinite paused; transform-box: fill-box; transform-origin: center; }
  .wf-train.is-moving .wheel { animation-play-state: running; }
  @keyframes wf-wheel { to { transform: rotate(360deg); } }
}

/* "Built for the operation you run" (orange): a ship-to-shore crane loads a
   truck along the foot of the section, drawn in white by fms-scenes.js. */
.fit-section { position: relative; overflow: hidden; padding-bottom: clamp(150px, 27vh, 230px); }
.fit-section > :not(.fit-scene) { position: relative; z-index: 1; }
.fit-scene { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: clamp(150px, 26vh, 220px); overflow: hidden; pointer-events: none; }
.fit-scene .quay { display: block; }

/* "Bring us your hardest email": the closing headline gets the email itself.
   Left, a messy real-world email; its four asks are marked one by one (1-4).
   Right, NavLogic's card ticks off the matching work, then the email is
   stamped handled. The whole timeline is transition delays under .is-play
   (fms-anim.js swaps the case and replays it). Wide desktops only: below
   1200px the centred copy leaves no room beside it. */
.hx { display: none; }
@media (min-width: 1200px) {
  .final-cta { position: relative; overflow: hidden; }
  .final-cta > :not(.hx) { position: relative; z-index: 1; }
  /* the copy stays in the gap between the two cards (each card is 4.5vw from
     the edge, clamp(230px, 19vw, 320px) wide, plus 32px of air) */
  .fms-anim .final-cta > h2, .fms-anim .final-cta > p:not(.eyebrow) { max-width: calc(100vw - 9vw - 2 * clamp(230px, 19vw, 320px) - 64px); text-wrap: balance; }
  .fms-anim .hx { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; text-align: left; }
  .hx-mail, .hx-done { position: absolute; top: 50%; width: clamp(230px, 19vw, 320px); transition: opacity .5s, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .hx-mail { left: 4.5vw; transform: translate(-30px, -50%) rotate(-3deg); opacity: 0; }
  .hx-done { right: 4.5vw; transform: translate(30px, -50%) rotate(2.5deg); opacity: 0; }
  .hx.is-play .hx-mail { transform: translate(0, -50%) rotate(-3deg); opacity: 1; }
  .hx.is-play .hx-done { transform: translate(0, -50%) rotate(2.5deg); opacity: 1; transition-delay: 1.1s; }

  .hx-card { position: relative; padding: clamp(12px, 2vh, 18px); border: 1px solid #e3dbd2; background: #fff; box-shadow: 0 22px 50px #3a261914; font-size: 12px; line-height: 1.5; color: #4e4a48; }
  .hx-stack { position: absolute; inset: 0; border: 1px solid #e3dbd2; background: #fbf8f4; transform: translate(7px, 7px); }
  .hx-stack + .hx-stack { transform: translate(14px, 14px); opacity: .6; z-index: -1; }
  .hx-from { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid #f0ebe5; }
  .hx-from > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #332e2e; color: #fff; font-weight: 700; }
  .hx-from b, .hx-from small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .hx-from b { color: #332e2e; font-size: 12px; }
  .hx-from small, .hx-from time { color: #9a948c; font-size: 10.5px; }
  .hx-subj { margin: 10px 0 6px; color: #332e2e; font-weight: 650; font-size: 12.5px; line-height: 1.35; }
  .hx-subj em { display: inline-grid; place-items: center; min-width: 18px; height: 16px; margin-right: 6px; padding: 0 4px; border-radius: 8px; background: #efe8de; color: #6b655e; font-size: 10px; font-style: normal; vertical-align: 1px; }
  .hx-body { margin: 0; font-size: 12px; }
  .hx-body mark { position: relative; padding: 0 1px; background: linear-gradient(#ff570033, #ff570033) 0 100% / 0 100% no-repeat; color: inherit; transition: background-size .45s ease, color .3s; }
  .hx-body mark b { position: absolute; top: -9px; left: -6px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: #ff5700; color: #fff; font-size: 8px; transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
  .hx.is-play .hx-body mark { background-size: 100% 100%; color: #332e2e; transition-delay: calc(.9s + var(--m) * .45s); }
  .hx.is-play .hx-body mark b { transform: none; transition-delay: calc(.95s + var(--m) * .45s); }
  .hx-tags { display: flex; gap: 6px; margin: 10px 0 0; }
  .hx-tags span { padding: 3px 7px; border: 1px solid #e3dbd2; color: #6b655e; font-size: 10px; }
  .hx-tags .hot { border-color: #f6c4c0; background: #fdeceb; color: #c8392f; font-weight: 600; }
  .hx-stamp { position: absolute; top: 12px; right: 10px; padding: 4px 9px; background: #fff; border: 1.5px solid #2e8a4f; color: #2e8a4f; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-8deg) scale(1.6); opacity: 0; transition: opacity .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
  .hx.is-play .hx-stamp { transform: rotate(-8deg); opacity: 1; transition-delay: 4.6s; }

  .hx-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #f0ebe5; color: #332e2e; }
  .hx-head img { width: 18px; height: 18px; }
  .hx-state { position: relative; margin-left: auto; font-size: 10.5px; font-weight: 600; }
  .hx-state i { font-style: normal; transition: opacity .3s; }
  .hx-state i:first-child { color: #c45f24; }
  .hx-state i:last-child { position: absolute; right: 0; color: #2e8a4f; opacity: 0; }
  .hx.is-play .hx-state i:first-child { opacity: 0; transition-delay: 4.3s; }
  .hx.is-play .hx-state i:last-child { opacity: 1; transition-delay: 4.3s; }
  .hx-done ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
  .hx-done li { display: grid; grid-template-columns: 17px 1fr; gap: 8px; align-items: start; opacity: .35; transition: opacity .35s; }
  .hx-done li b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #efe8de; color: #6b655e; font-size: 9px; transition: background .3s, color .3s; }
  .hx-done li span { font-size: 12px; line-height: 1.4; color: #332e2e; }
  .hx.is-play .hx-done li { opacity: 1; transition-delay: calc(1.6s + var(--m) * .6s); }
  .hx.is-play .hx-done li b { background: #2e8a4f; color: #fff; transition-delay: calc(1.75s + var(--m) * .6s); }
  .hx-foot { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid #f0ebe5; color: #2e8a4f; font-size: 11px; font-weight: 650; opacity: 0; transition: opacity .4s; }
  .hx.is-play .hx-foot { opacity: 1; transition-delay: 4.4s; }
}

@media (max-width: 760px) {
  .hero-sea { height: 46px; }
  .hero-sea .ship { width: 150px; }
  .hero-sea .ship-far { display: none; }
  .fit-scene { height: 120px; }
  .fit-section { padding-bottom: 140px; }
}

/* --- FAQ: answers open and close smoothly (height animated by the script) ---- */
.faq-list details > p { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fms-anim *, .fms-anim *::before, .fms-anim *::after { animation: none !important; transition: none !important; }
  .hero-sea .wave, .hero-sea .ship, .hero-sea .ship svg { animation: none !important; }
  .hero-sea .ship { transform: translateX(58vw); }
  .hero-sea .ship-far { transform: translateX(18vw); }
}