/* freight-story: shared scroll story for MARKSMAN, XBF and Holding subpages.
   Brand tokens can be overridden per site with the --fs-* custom properties. */
freight-story {
  --fs-accent: var(--accent, #ea5e27);
  --fs-cta-bg: var(--accent, #ea5e27);
  --fs-cta-ink: #111111;
  --fs-ink: #0d0d0f;
  --fs-top: 84px;
  --fs-stage-h: clamp(190px, 34svh, 290px);
  --fs-muted: var(--muted, currentColor);
  --fs-rule: var(--line, currentColor);
  color: var(--text, inherit);
  display: block;
}
freight-story[brand="xbf" i] {
  --fs-accent: #ea5e27;
  --fs-cta-bg: var(--navy, #000D3A);
  --fs-cta-ink: #ffffff;
  --fs-ink: #000D3A;
}
freight-story[brand="holding" i] {
  --fs-accent: var(--accent, #ea5e27);
  --fs-cta-bg: var(--accent, #ea5e27);
  --fs-cta-ink: #111111;
  --fs-ink: #14171c;
}

.fstory {
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(48px, 8vw, 112px) clamp(20px, 4vw, 40px);
}
.fstory__intro { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.fstory__eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fs-muted);
}
.fstory__eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--fs-accent); }
.fstory__title {
  margin: .45em 0 .5em;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}
freight-story:is([brand="marksman" i], [brand="holding" i]) :is(.fstory__title, .fstory__chapter-title, .fstory__caption) {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
}
freight-story[brand="xbf" i] .fstory__title { font-family: 'Orbitron', sans-serif; font-weight: 400; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); }
.fstory :is(.fstory__eyebrow, .fstory__index, .fstory__nav-link, .fstory__cta-link, .fstory__counter) { font-family: 'IBM Plex Mono', monospace; }
freight-story[brand="holding" i] .fstory { padding-inline: 0; }
freight-story[brand="holding" i]:not([variant="contacto"]) .fstory__chapter { min-height: 40svh; }
.fstory__lede { margin: 0; max-width: 40rem; font-size: clamp(1rem, .95rem + .3vw, 1.2rem); line-height: 1.55; color: var(--fs-muted); }
.fstory__cta { margin: 1.5rem 0 0; }
.fstory__cta-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: .75rem 1.4rem;
  border-radius: 0;
  background: var(--fs-cta-bg);
  color: var(--fs-cta-ink);
  font-weight: 700;
  text-decoration: none;
}
.fstory__cta-link::after { content: "→"; margin-left: .6em; transition: transform .2s ease; }
.fstory__cta-link:hover::after { transform: translateX(3px); }
.fstory a:focus-visible { outline: 3px solid var(--fs-accent); outline-offset: 3px; }

/* Stage: brand photograph under a shade, a normalized route and one persistent actor. */
.fstory__stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 10;
  border-radius: 2px;
  background: var(--fs-ink);
  color: #ffffff;
}
.fstory__camera {
  position: absolute;
  inset: -4%;
  transform: translate3d(var(--fs-pan, 0%), 0, 0) scale(var(--fs-camera, 1));
  transform-origin: 60% 50%;
  will-change: transform;
}
.fstory__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.fstory__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .42) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--fs-ink) 55%, transparent), transparent 62%);
}
.fstory__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fstory__track { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-dasharray: .012 .012; }
.fstory__trail {
  fill: none;
  stroke: var(--fs-accent);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--fs-draw, 0));
}
.fstory__counter,
.fstory__caption { position: absolute; left: clamp(16px, 3vw, 28px); margin: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .5); }
.fstory__counter { top: clamp(14px, 2.4vw, 22px); font-size: .85rem; font-weight: 600; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.fstory__caption { top: clamp(38px, 5vw, 52px); font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem); font-weight: 700; line-height: 1; }

/* Waypoints. Each carries a small effect that names its chapter visually. */
.fstory__marker {
  position: absolute;
  left: var(--fs-mx);
  top: var(--fs-my);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  background: var(--fs-ink);
  transform: translate(-50%, -50%);
  transition: background-color .3s ease, transform .3s ease;
}
.fstory__marker[data-fstory-state="past"],
.fstory__marker[data-fstory-state="active"] { background: var(--fs-accent); border-color: var(--fs-accent); }
.fstory__marker[data-fstory-state="active"] { transform: translate(-50%, -50%) scale(1.3); }
.fstory__marker-label {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  padding: .2em .65em;
  border-radius: 2px;
  background: rgba(0, 0, 0, .6);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: .78;
  transform: translateX(-50%);
}
.fstory__marker[data-align="start"] .fstory__marker-label { left: -6px; transform: none; }
.fstory__marker[data-align="end"] .fstory__marker-label { left: auto; right: -6px; transform: none; }
.fstory__marker[data-fstory-state="active"] .fstory__marker-label { opacity: 1; background: var(--fs-ink); box-shadow: inset 0 0 0 1px var(--fs-accent); }
.fstory__marker::before,
.fstory__marker::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s ease, transform .35s ease; }
.fstory__marker::before { inset: -11px; border: 1.5px solid var(--fs-accent); border-radius: 50%; transform: scale(.6); }
.fstory__marker:is([data-fstory-state="active"], [data-fstory-state="past"])::before { opacity: 1; transform: scale(1); }
.fstory__marker[data-fstory-state="past"]::before { opacity: .45; }
.fstory__marker[data-fx="loop"]::before { border-style: dashed; inset: -16px; }
.fstory__marker[data-fx="loop"][data-fstory-state="active"]::before { animation: fstory-spin 6s linear infinite; }
.fstory__marker[data-fx="alert"][data-fstory-state="active"]::before,
.fstory__marker[data-fx="pulse"][data-fstory-state="active"]::before { border-color: #ffd166; animation: fstory-pulse 1.6s ease-out infinite; }
.fstory__marker:is([data-fx="stamp"], [data-fx="shield"], [data-fx="inbox"])::before { border-radius: 6px; transform: rotate(-8deg) scale(.6); }
.fstory__marker:is([data-fx="stamp"], [data-fx="shield"], [data-fx="inbox"]):is([data-fstory-state="active"], [data-fstory-state="past"])::before { transform: rotate(-8deg) scale(1); }
.fstory__marker[data-fx="stamp"]::before { border: 3px double var(--fs-accent); }
/* check: tick drawn with two borders */
.fstory__marker:is([data-fx="check"], [data-fx="stamp"])::after {
  left: 50%;
  top: -26px;
  width: 7px;
  height: 13px;
  border: solid var(--fs-accent);
  border-width: 0 3px 3px 0;
  transform: translateX(-50%) rotate(45deg) scale(.4);
}
.fstory__marker:is([data-fx="check"], [data-fx="stamp"]):is([data-fstory-state="active"], [data-fstory-state="past"])::after { opacity: 1; transform: translateX(-50%) rotate(45deg) scale(1); }
/* bid: three offers of different height */
.fstory__marker[data-fx="bid"]::after {
  left: 50%;
  bottom: calc(100% + 14px);
  width: 26px;
  height: 22px;
  background:
    linear-gradient(var(--fs-accent), var(--fs-accent)) 0 100% / 6px 55% no-repeat,
    linear-gradient(#ffffff, #ffffff) 50% 100% / 6px 100% no-repeat,
    linear-gradient(var(--fs-accent), var(--fs-accent)) 100% 100% / 6px 75% no-repeat;
  transform: translateX(-50%) scaleY(.2);
  transform-origin: bottom;
}
.fstory__marker[data-fx="bid"]:is([data-fstory-state="active"], [data-fstory-state="past"])::after { opacity: 1; transform: translateX(-50%) scaleY(1); }
/* split: one decision, two branches */
.fstory__marker[data-fx="split"]::after {
  left: 100%;
  top: 50%;
  width: 34px;
  height: 26px;
  border: 2px dashed rgba(255, 255, 255, .8);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  transform: translate(4px, -50%) scaleX(.2);
  transform-origin: left;
}
.fstory__marker[data-fx="split"]:is([data-fstory-state="active"], [data-fstory-state="past"])::after { opacity: 1; transform: translate(4px, -50%) scaleX(1); }
/* dispatch / next: the actor is about to leave */
.fstory__marker:is([data-fx="dispatch"], [data-fx="next"], [data-fx="lane"])::after {
  left: calc(100% + 8px);
  top: 50%;
  width: 10px;
  height: 10px;
  border: solid #ffffff;
  border-width: 3px 3px 0 0;
  transform: translate(-6px, -50%) rotate(45deg);
}
.fstory__marker:is([data-fx="dispatch"], [data-fx="next"], [data-fx="lane"])[data-fstory-state="active"]::after { opacity: 1; transform: translate(0, -50%) rotate(45deg); }

/* The persistent actor: shape changes per brand, never per chapter. */
.fstory__actor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 38px;
  height: 14px;
  border-radius: 4px;
  background: var(--fs-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fs-accent) 30%, transparent), 0 6px 18px rgba(0, 0, 0, .45);
  transform: translate3d(var(--fs-x, 0px), var(--fs-y, 0px), 0) translate(-50%, -50%);
  transition: transform .14s linear;
  will-change: transform;
}
freight-story[brand="xbf" i] .fstory__actor { width: 22px; height: 22px; border-radius: 7px; border: 3px solid #ffffff; background: var(--fs-cta-bg); }
freight-story[brand="holding" i] .fstory__actor {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: translate3d(var(--fs-x, 0px), var(--fs-y, 0px), 0) translate(-50%, -50%) rotate(45deg);
}

/* Semantic copy: always readable, independent of the stage. */
.fstory__nav-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.fstory__nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--fs-rule);
  border-radius: 0;
  color: inherit;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
}
.fstory__nav-link[aria-current="step"] { border-color: var(--fs-accent); box-shadow: inset 0 -3px 0 var(--fs-accent); }
.fstory__chapters { margin: 0; padding: 0; list-style: none; }
.fstory__chapter {
  padding: 1.5rem 0 1.5rem 1.25rem;
  border-left: 3px solid var(--fs-rule);
  scroll-margin-top: calc(var(--fs-top) + 24px);
  transition: border-color .3s ease;
}
.fstory__chapter[data-fstory-state="active"] { border-left-color: var(--fs-accent); }
.fstory__index { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--fs-muted); }
.fstory__chapter-title { margin: .35em 0 .45em; font-size: clamp(1.25rem, 1.1rem + .8vw, 1.75rem); line-height: 1.15; }
.fstory__text { margin: 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.6; }
.fstory__points { display: grid; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.fstory__point { display: flex; gap: .6rem; align-items: baseline; line-height: 1.45; }
.fstory__point::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--fs-accent); transform: translateY(-1px); }

/* Layouts are chosen by the script from viewport and header height. */
freight-story[data-fstory-layout="split"] .fstory__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
freight-story[data-fstory-layout="split"] .fstory__copy { grid-column: 1; grid-row: 1; }
freight-story[data-fstory-layout="split"] .fstory__stage {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--fs-top) + 16px);
  aspect-ratio: auto;
  height: min(calc(100svh - var(--fs-top) - 48px), 680px);
}
freight-story[data-fstory-layout="split"] .fstory__chapter { display: flex; flex-direction: column; justify-content: center; min-height: 62svh; }
freight-story[data-fstory-layout="split"] .fstory__chapter:last-child { min-height: 48svh; }

freight-story[data-fstory-layout="compact"] .fstory__stage {
  position: sticky;
  top: var(--fs-top);
  z-index: 1;
  aspect-ratio: auto;
  height: var(--fs-stage-h);
  border-radius: 2px;
  box-shadow: 0 -12px 0 var(--bg, #efefef);
}
freight-story[data-fstory-layout="compact"] .fstory__nav { margin-top: 1rem; }
freight-story[data-fstory-layout="compact"] .fstory__chapter { min-height: 52svh; scroll-margin-top: calc(var(--fs-top) + var(--fs-stage-h) + 16px); }
freight-story[data-fstory-layout="compact"] .fstory__caption { font-size: 1.35rem; }
freight-story:not([data-fstory-layout="split"]) .fstory__marker-label { display: none; }
freight-story:not([data-fstory-layout="split"]) .fstory__marker[data-fstory-state="active"] .fstory__marker-label { display: block; }

freight-story[data-fstory-layout="flow"] .fstory__stage { margin-bottom: 1.25rem; }
.fstory--brief { padding-block: clamp(32px, 5vw, 64px); }
.fstory--brief .fstory__stage { aspect-ratio: 21 / 8; max-height: 260px; }
.fstory--brief .fstory__nav { display: none; }
@media (min-width: 901px) {
  .fstory--brief .fstory__chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}

@keyframes fstory-spin { to { transform: rotate(360deg); } }
@keyframes fstory-pulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  freight-story *,
  freight-story *::before,
  freight-story *::after { transition: none !important; animation: none !important; }
  .fstory__camera { transform: none; }
}

freight-story[data-fstory-visible="false"] .fstory__marker::before { animation-play-state: paused; }