/* Freight and Funds — a restrained motion system.
   No element is hidden unless motion.js has installed its observer. */
:root {
  --ff-motion-ease: cubic-bezier(.2,.7,.25,1);
  --ff-motion-accent: var(--rust, #3F50CE);
  --ff-reveal-distance: 22px;
}
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .28s; animation-timing-function: ease-out; }
::view-transition-old(root) { animation: ff-page-out .16s ease-out both; }
::view-transition-new(root) { animation: ff-page-in .28s var(--ff-motion-ease) both; }
@keyframes ff-page-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ff-page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.ff-reading-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 150;
  pointer-events: none; overflow: hidden; contain: strict;
}
.ff-reading-progress > span {
  display: block; width: 100%; height: 100%; background: var(--ff-motion-accent);
  transform: scaleX(0); transform-origin: 0 50%;
}
.ff-article-progress { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line, #c5cbd2); }
.ff-article-meter { height: 2px; background: color-mix(in srgb, var(--ink, #20324B) 12%, transparent); overflow: hidden; }
.ff-article-meter > span { display: block; width: 100%; height: 100%; background: var(--ff-motion-accent); transform: scaleX(0); transform-origin: left; }
.ff-reading-caption { display: block; margin-top: 8px; font: 9px var(--mono, monospace); letter-spacing: .06em; color: var(--muted, #6c7786); }
.article-toc a.is-reading { color: var(--ff-motion-accent); }
.article-toc a[href^="#"] { transition: color .18s ease, padding-left .22s var(--ff-motion-ease); }
.article-toc a.is-reading { padding-left: 6px; }

.motion-ready [data-reveal] {
  opacity: 1; transform: none;
  transition: opacity .62s var(--ff-motion-ease), transform .72s var(--ff-motion-ease), clip-path .72s var(--ff-motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, var(--ff-reveal-distance), 0);
}
.motion-ready [data-reveal="row"] { --ff-reveal-distance: 10px; transition-duration: .45s, .52s, .52s; }
.motion-ready [data-reveal="heading"] { --ff-reveal-distance: 15px; }
.motion-ready [data-reveal="crate"] { transform-origin: center top; }
.motion-ready [data-reveal="crate"]:not(.is-revealed) {
  transform: perspective(1000px) translate3d(0, 26px, 0) rotateX(5deg);
  clip-path: inset(0 0 4% 0);
}
.motion-ready [data-reveal="crate"].is-revealed { clip-path: inset(0); }
.motion-ready [data-reveal="stencil"],
.motion-ready [data-reveal="stencil"]:not(.is-revealed) { opacity: 1; transform: none; }
.motion-ready [data-reveal]:focus-within { opacity: 1; transform: none; clip-path: none; transition-delay: 0ms; }
.page-theme-glossary { --ff-reveal-distance: 9px; }
.page-theme-article, .page-theme-methodology, .page-theme-policy, .page-theme-legal { --ff-reveal-distance: 13px; }
.page-theme-projects, .page-theme-project { --ff-reveal-distance: 28px; }
.page-theme-calculator, .page-theme-data { --ff-reveal-distance: 14px; }

.ff-word-clip {
  display: inline-block; overflow: clip; vertical-align: top;
  padding-bottom: .12em; margin-bottom: -.12em;
  max-width: 100%;
}
.ff-title-word { display: inline-block; }
.hero h1 .ff-word-clip, .hero h1 .ff-title-word,
.page-hero h1 .ff-word-clip, .page-hero h1 .ff-title-word {
  color: inherit; font: inherit; letter-spacing: inherit;
}
.motion-ready .ff-title-reveal .ff-title-word {
  animation: ff-title-rise .60s var(--ff-motion-ease) var(--word-delay, 0ms) both;
}
.ff-title-reveal:focus-within .ff-title-word { animation: none; }
@keyframes ff-title-rise {
  from { transform: translate3d(0, 105%, 0); opacity: .5; }
  to { transform: none; opacity: 1; }
}
.ff-stencil { position: relative; }
@supports (background-clip: text) {
  .motion-ready .ff-stencil {
    background-image: linear-gradient(90deg, var(--ff-motion-accent), var(--ff-motion-accent)), linear-gradient(90deg, var(--stencil-base, var(--muted, #6c7786)), var(--stencil-base, var(--muted, #6c7786)));
    background-repeat: no-repeat; background-size: 0% 100%, 100% 100%;
    background-clip: text; -webkit-background-clip: text; color: transparent;
    transition: background-size .95s var(--ff-motion-ease);
  }
  .motion-ready .is-revealed .ff-stencil,
  .motion-ready .ff-stencil.is-revealed { background-size: 100% 100%, 100% 100%; }
}

/* A small pointer-driven response, confined to the existing clipped image. */
@media (hover: hover) and (pointer: fine) {
  .motion-ready .ff-parallax-card .ff-parallax-media {
    transition: transform .65s var(--ff-motion-ease);
    transform-origin: center;
  }
  .motion-ready .ff-parallax-card.ff-pointer-active .ff-parallax-media {
    transform: translate3d(var(--ff-image-x, 0px), var(--ff-image-y, 0px), 0) scale(1.035);
  }
  :where(.btn, .text-link) .arrow,
  :where(.btn, .text-link) > span[aria-hidden="true"] {
    display: inline-block; transition: transform .25s var(--ff-motion-ease);
  }
  :where(.btn, .text-link):hover .arrow,
  :where(.btn, .text-link):hover > span[aria-hidden="true"] {
    transform: translate3d(3px, -2px, 0);
  }
}
.term-timeline { position: relative; }
.ff-timeline-draw::after {
  content: ""; position: absolute; top: -2px; left: 0; width: 100%; height: 2px;
  background: var(--ff-motion-accent); transform-origin: left;
  animation: ff-line-across .85s var(--ff-motion-ease) both; pointer-events: none;
}
@keyframes ff-line-across { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ff-line-down { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.motion-ready .map-route { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.motion-ready #fx-chart .line { stroke-linecap: round; stroke-linejoin: round; }

/* Shared SVG motifs: real paths draw through JS; subtle loops stay CSS-owned. */
.motion-ready .scene-float {
  transform-box: fill-box; transform-origin: center;
  animation: ff-scene-float 6.8s ease-in-out infinite;
}
.motion-ready .scene-spin-slow {
  transform-box: fill-box; transform-origin: center;
  animation: ff-scene-spin 72s linear infinite;
}
.motion-ready .ff-scene-in-view .scene-load,
.motion-ready .ff-scene-in-view.scene-load {
  transform-box: fill-box; transform-origin: center;
  animation: ff-scene-load .8s var(--ff-motion-ease) var(--scene-delay, 0ms) both;
}
.motion-ready .ff-scene-in-view .scene-step,
.motion-ready .ff-scene-in-view.scene-step {
  animation: ff-scene-step .65s var(--ff-motion-ease) var(--scene-delay, 0ms) both;
}
.motion-ready .scene-trace { stroke-linecap: round; }
@keyframes ff-scene-float {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes ff-scene-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes ff-scene-load {
  from { opacity: .3; translate: 0 15px; scale: .965; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes ff-scene-step {
  from { opacity: .4; translate: -12px 0; }
  to { opacity: 1; translate: 0 0; }
}
/* Topic loops are schematic cues, never live financial signals. Every motif
   uses data-motion-loop so the shared pause and viewport observer own it. */
.motion-ready .editorial-scene.ff-scene-in-view .scene-loop {
  transform-box: fill-box; transform-origin: center;
  animation-duration: var(--loop-duration, 5.6s);
  animation-delay: var(--loop-delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.motion-ready .scene-loop-editorial-scan { animation-name: ff-editorial-scan; }
.motion-ready .scene-loop-route-pulse,
.motion-ready .scene-loop-project-flow,
.motion-ready .scene-loop-editorial-link { animation-name: ff-route-pulse; animation-timing-function: linear !important; }
.motion-ready .scene-loop-cost-layer { animation-name: ff-cost-layer; }
.motion-ready .scene-loop-cost-marker { animation-name: ff-cost-marker; }
.motion-ready .scene-loop-compare-scan { animation-name: ff-compare-scan; }
.motion-ready .scene-loop-term-document { animation-name: ff-term-document; }
.motion-ready .scene-loop-term-check { animation-name: ff-term-check; }
.motion-ready .scene-loop-fx-sweep { animation-name: ff-fx-sweep; }
.motion-ready .scene-loop-fx-probe { animation-name: ff-fx-probe; animation-timing-function: linear !important; }
.motion-ready .scene-loop-glossary-glyph { animation-name: ff-glossary-glyph; }
.motion-ready .scene-loop-glossary-tag { animation-name: ff-glossary-tag; }
.motion-ready .scene-loop-glossary-index { animation-name: ff-glossary-index; }
.motion-ready .scene-loop-project-file { animation-name: ff-project-file; }
.motion-ready .scene-loop-checklist-check { animation-name: ff-checklist-check; stroke-dasharray: 100; }
.motion-ready .scene-loop-checklist-pass { animation-name: ff-checklist-pass; }
.motion-ready .scene-loop-faq-question { animation-name: ff-faq-question; }
.motion-ready .scene-loop-faq-answer { animation-name: ff-faq-answer; }
.motion-ready .scene-loop-faq-dot { animation-name: ff-faq-dot; }
.motion-ready .scene-loop-editorial-step { animation-name: ff-editorial-step; }
@keyframes ff-editorial-scan {
  0% { translate: 0 0; opacity: 0; }
  12% { opacity: 1; }
  80% { translate: 0 142px; opacity: 1; }
  93%,100% { translate: 0 142px; opacity: 0; }
}
@keyframes ff-route-pulse {
  0% { stroke-dashoffset: 100; opacity: 0; }
  12%,85% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ff-cost-layer {
  0%,12%,76%,100% { translate: 0 0; }
  31%,47% { translate: 14px -21px; }
  61% { translate: 0 0; }
}
@keyframes ff-cost-marker {
  0%,9% { translate: 0 0; opacity: 0; }
  13%,20% { translate: 0 0; opacity: 1; }
  31%,39% { translate: 0 59px; }
  49%,57% { translate: 0 118px; }
  68%,83% { translate: 0 177px; opacity: 1; }
  94%,100% { translate: 0 177px; opacity: 0; }
}
@keyframes ff-compare-scan {
  0% { translate: 0 0; opacity: 0; }
  15% { opacity: .9; }
  80% { translate: 0 119px; opacity: .9; }
  94%,100% { translate: 0 119px; opacity: 0; }
}
@keyframes ff-term-document {
  0%,8% { translate: 0 0; opacity: 0; }
  20% { opacity: 1; }
  72% { translate: 0 132px; opacity: 1; }
  88%,100% { translate: 0 132px; opacity: 0; }
}
@keyframes ff-term-check {
  0%,70%,100% { scale: 1; opacity: .55; }
  10%,24% { scale: 2.1; opacity: 1; }
  35%,55% { scale: 1; opacity: 1; }
}
@keyframes ff-fx-sweep {
  0% { translate: 0 0; opacity: 0; }
  10%,84% { opacity: .8; }
  100% { translate: 273px 0; opacity: 0; }
}
@keyframes ff-fx-probe {
  0% { stroke-dashoffset: 100; opacity: 0; }
  7%,93% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ff-glossary-glyph {
  0%,72%,100% { opacity: .6; translate: 0 0; scale: 1; }
  12%,34% { opacity: 1; translate: 0 -9px; scale: 1.06; }
  48% { opacity: .85; translate: 0 0; scale: 1; }
}
@keyframes ff-glossary-tag {
  0%,72%,100% { opacity: .6; translate: 0 0; }
  12%,34% { opacity: 1; translate: 14px 0; }
  48% { opacity: .85; translate: 0 0; }
}
@keyframes ff-glossary-index {
  0%,12% { translate: 0 0; opacity: 1; }
  20%,30% { translate: 0 47px; }
  39%,49% { translate: 0 94px; }
  58%,68% { translate: 0 141px; }
  77%,88% { translate: 0 188px; opacity: 1; }
  95%,100% { translate: 0 188px; opacity: 0; }
}
@keyframes ff-project-file {
  0%,65%,100% { translate: 0 0; }
  16%,34% { translate: 12px -23px; }
  47% { translate: 0 0; }
}
@keyframes ff-checklist-check {
  0%,9% { stroke-dashoffset: 100; opacity: .3; }
  23%,74% { stroke-dashoffset: 0; opacity: 1; }
  91%,100% { stroke-dashoffset: 100; opacity: .3; }
}
@keyframes ff-checklist-pass {
  0%,8% { translate: 0 0; opacity: 0; }
  15% { opacity: 1; }
  82% { translate: 0 175px; opacity: 1; }
  94%,100% { translate: 0 175px; opacity: 0; }
}
@keyframes ff-faq-question {
  0%,67%,100% { translate: 0 0; scale: 1; opacity: .8; }
  15%,34% { translate: 0 -12px; scale: 1.045; opacity: 1; }
  47% { translate: 0 0; scale: 1; opacity: 1; }
}
@keyframes ff-faq-answer {
  0%,67%,100% { translate: 12px 5px; opacity: .65; }
  15%,40% { translate: 0 -7px; opacity: 1; }
  52% { translate: 0 0; opacity: 1; }
}
@keyframes ff-faq-dot {
  0%,70%,100% { opacity: .25; translate: 0 0; }
  28%,40% { opacity: 1; translate: 0 -3.5px; }
}
@keyframes ff-editorial-step {
  0%,65%,100% { scale: 1; opacity: .6; }
  14%,32% { scale: 1.9; opacity: 1; }
  44% { scale: 1; opacity: 1; }
}
.ff-motion-scene.motion-offscreen :is(.scene-float, .scene-spin-slow, .scene-load, .scene-step, [data-motion-loop]),
.ff-motion-scene.motion-offscreen:is(.scene-float, .scene-spin-slow, .scene-load, .scene-step, [data-motion-loop]),
.motion-document-hidden :is(.scene-float, .scene-spin-slow, .scene-load, .scene-step, [data-motion-loop]) {
  animation-play-state: paused !important;
}
#motion-toggle {
  color: inherit; background: transparent; border: 0;
  padding: 4px 0; font: inherit; text-decoration: underline; text-underline-offset: 4px;
}
#motion-toggle:disabled { cursor: default; opacity: .65; text-decoration-style: dotted; }

.motion-paused [data-reveal],
.motion-paused [data-reveal]:not(.is-revealed) {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
  transition: none !important;
}
.motion-paused .ff-title-word {
  animation: none !important; transform: none !important; opacity: 1 !important;
}
.motion-paused :is(.scene-float, .scene-spin-slow, .scene-load, .scene-step, [data-motion-loop]) {
  animation: none !important; translate: none !important; scale: none !important; opacity: 1 !important; rotate: none !important;
}
.motion-paused [data-loop-static="hide"] { opacity: 0 !important; }
.motion-paused .scene-loop-checklist-check { stroke-dashoffset: 0 !important; }
.motion-paused .ff-timeline-draw::after { animation: none !important; transform: none !important; }
.motion-paused .ff-stencil { background-size: 100% 100%, 100% 100%; transition: none !important; }
.motion-paused .ff-parallax-media,
.motion-paused .ff-parallax-card.ff-pointer-active .ff-parallax-media { transform: none !important; transition: none !important; }
.motion-paused .btn:hover, .motion-paused .text-link:hover .arrow,
.motion-paused .text-link:hover > span[aria-hidden="true"],
.motion-paused .btn:hover > span[aria-hidden="true"] { transform: none !important; }
.motion-is-paused::view-transition-group(root),
.motion-is-paused::view-transition-old(root),
.motion-is-paused::view-transition-new(root) { animation: none !important; }
@media (max-width: 760px) {
  .ff-article-progress { max-width: 250px; margin-top: 13px; padding-top: 12px; }
  .ff-timeline-draw::after {
    top: 0; left: -2px; width: 2px; height: 100%; transform-origin: top;
    animation-name: ff-line-down;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    animation-iteration-count: 1 !important; transition-duration: .001ms !important;
    transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
  .motion-ready [data-reveal],
  .motion-ready [data-reveal]:not(.is-revealed) {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .ff-title-word {
    animation: none !important; transform: none !important; opacity: 1 !important;
  }
  .scene-load, .scene-step, .scene-float, .scene-spin-slow, [data-motion-loop] {
    animation: none !important; translate: none !important; scale: none !important; opacity: 1 !important; rotate: none !important;
  }
  [data-loop-static="hide"] { opacity: 0 !important; }
  .scene-loop-checklist-check { stroke-dashoffset: 0 !important; }
  .ff-parallax-media, .ff-parallax-card.ff-pointer-active .ff-parallax-media,
  .btn:hover, .text-link:hover .arrow, .btn:hover .arrow { transform: none !important; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) {
    animation: none !important;
  }
}
@media print {
  .ff-reading-progress, .ff-article-progress, #motion-toggle { display: none !important; }
  [data-reveal], .motion-ready [data-reveal]:not(.is-revealed) {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    animation: none !important; transition: none !important;
  }
  .ff-title-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .scene-load, .scene-step, [data-motion-loop] { opacity: 1 !important; translate: none !important; scale: none !important; animation: none !important; }
  [data-loop-static="hide"] { opacity: 0 !important; }
  .scene-loop-checklist-check { stroke-dashoffset: 0 !important; }
  .ff-stencil { color: var(--ink, #20324B) !important; background: none !important; }
}