/* ============================================================================
   FDWD marketing-site animations — shared, drop-in, additive.
   One file, deployed identically to all three sites. fdwd-animations.js sets
   html[data-fdwd-site="ams|fms|tpl"], which selects the palette block below.

   Honors the constraints that matter for these sites:
   - transform / opacity ONLY (compositor-friendly) — never layout on scroll, so
     it will not regress the mobile LCP the perf audit flagged. Nothing here
     blocks or delays the hero paint.
   - gated on html.motion-ready (JS sets it) — a no-JS load is fully static.
   - fully neutralized under prefers-reduced-motion (info is preserved).
   - palette is per-site and contrast-checked (light accents get dark text).
   ============================================================================ */

/* ---- per-site palette (selected by html[data-fdwd-site]) ------------------ */
:root {
  --anim-fill-a:#f5b73a; --anim-fill-b:#1c4a6d; --anim-rail:rgba(16,33,48,.16);
  --anim-badge-bg:#f5b73a; --anim-badge-ink:#102130;
  --anim-chip-bg:#1c4a6d; --anim-chip-ink:#ffffff;
  --anim-pill-bg:#102130; --anim-pill-ink:#ffffff;
  --anim-bar:#f5b73a; --anim-bar-track:rgba(16,33,48,.12);
}
:root[data-fdwd-site="tpl"]{           /* Florida's 3PL — charcoal + hi-vis yellow */
  --anim-fill-a:#fcf204; --anim-fill-b:#fbd25c; --anim-rail:rgba(30,27,31,.16);
  --anim-badge-bg:#fcf204; --anim-badge-ink:#1e1b1f;
  --anim-chip-bg:#1e1b1f; --anim-chip-ink:#fcf204;
  --anim-pill-bg:#1e1b1f; --anim-pill-ink:#fcf204;
  --anim-bar:#fcf204; --anim-bar-track:rgba(30,27,31,.12);
}
:root[data-fdwd-site="ams"]{           /* Affordable Moving & Storage — navy + gold */
  --anim-fill-a:#f5b73a; --anim-fill-b:#1c4a6d; --anim-rail:rgba(16,33,48,.16);
  --anim-badge-bg:#f5b73a; --anim-badge-ink:#102130;
  --anim-chip-bg:#1c4a6d; --anim-chip-ink:#ffffff;
  --anim-pill-bg:#102130; --anim-pill-ink:#ffffff;
  --anim-bar:#f5b73a; --anim-bar-track:rgba(16,33,48,.12);
}
:root[data-fdwd-site="fms"]{           /* Florida's Moving & Storage — terracotta + teal */
  --anim-fill-a:#8b4a2f; --anim-fill-b:#1b5a67; --anim-rail:rgba(23,34,53,.16);
  --anim-badge-bg:#8b4a2f; --anim-badge-ink:#ffffff;
  --anim-chip-bg:#1b5a67; --anim-chip-ink:#ffffff;
  --anim-pill-bg:#8b4a2f; --anim-pill-ink:#ffffff;
  --anim-bar:#8b4a2f; --anim-bar-track:rgba(23,34,53,.12);
}

/* ---- 1) scroll-progress bar ----------------------------------------------- */
.fdwd-scroll-progress{
  position:fixed; inset:0 0 auto 0; height:4px; z-index:1200; pointer-events:none;
  background:var(--anim-bar-track);
}
.fdwd-scroll-progress__fill{
  height:100%; background:var(--anim-bar);
  transform-origin:left center; transform:scaleX(var(--scroll,0));
}
.fdwd-scroll-progress__ticks{       /* static segment gaps -> reads like a meter */
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 26px, var(--anim-bar-track) 26px 29px);
}

/* ---- 2) journey line ------------------------------------------------------ */
/* Once JS is ready, hide the host's faint static line; we draw our own rail
   anchored to the station-badge centers (robust to font-load reflow). */
.motion-ready .story-path-board > .story-path-line{ display:none; }

/* lift the whole step above the traveler so the chip docks BEHIND each badge
   (number stays readable); each step already makes its own stacking context. */
.motion-ready .story-path-board .story-path-step{ position:relative; z-index:2; }

.story-path-rail,
.story-path-progress{
  position:absolute; left:var(--rail-x,3.05rem); top:var(--rail-top,2.25rem);
  height:var(--track,0px); width:3px; border-radius:999px;
  transform:translateX(-50%); z-index:0; pointer-events:none;
}
.story-path-rail{ background:var(--anim-rail); }
.story-path-progress{
  background:linear-gradient(180deg, var(--anim-fill-a), var(--anim-fill-b));
  transform:translateX(-50%) scaleY(var(--journey,0)); transform-origin:top center;
}

.story-path-traveler{
  position:absolute; left:var(--rail-x,3.05rem); top:var(--rail-top,2.25rem);
  display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  background:var(--anim-chip-bg); color:var(--anim-chip-ink);
  box-shadow:0 8px 20px rgba(13,34,53,.30);
  transform:translate(-50%,-50%) translateY(calc(var(--journey,0) * var(--track,0px)));
  z-index:1; pointer-events:none;
}
.story-path-traveler svg{ width:1rem; height:1rem; display:block; }

.story-path-step .story-path-number{
  transition:background-color .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.story-path-step.is-active .story-path-number{
  background:var(--anim-badge-bg); color:var(--anim-badge-ink);
  transform:scale(1.07); box-shadow:0 16px 34px rgba(13,34,53,.28);
}
.story-path-state{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.45rem;
  padding:.16rem .6rem; font:700 .68rem/1 "IBM Plex Sans","Roboto",sans-serif;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--anim-pill-ink); background:var(--anim-pill-bg); border-radius:999px;
  opacity:0; transform:translateY(5px); transition:opacity .35s ease, transform .35s ease;
}
.story-path-step.is-active .story-path-state{ opacity:1; transform:none; }

/* ---- 3) step-card hover lift (desktop) ------------------------------------ */
@media (hover:hover) and (pointer:fine){
  .motion-ready .story-path-board .story-path-step{ transition:transform .3s ease, z-index 0s; }
  .motion-ready .story-path-board .story-path-step:hover{ transform:translateY(-4px); }
}

/* ---- 4) magnetic primary CTA (JS adds .fdwd-magnetic; desktop only) ------- */
@media (hover:hover) and (pointer:fine){
  .fdwd-magnetic{
    transition:transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
    transform:translate(var(--mag-x,0px), var(--mag-y,0px)); will-change:transform;
  }
}

/* ---- 5) confirmation checkmark (drawn on the thank-you surface) ----------- */
.fdwd-check{ display:grid; place-items:center; margin:0 auto .75rem; }
.fdwd-check__icon{ width:84px; height:84px; }
.fdwd-check__circle{
  fill:none; stroke:var(--anim-fill-a); stroke-width:4;
  stroke-dasharray:295; stroke-dashoffset:295;
  animation:fdwd-check-circle .55s ease forwards;
}
.fdwd-check__mark{
  fill:none; stroke:var(--anim-chip-bg); stroke-width:5;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:70; stroke-dashoffset:70;
  animation:fdwd-check-mark .4s .5s ease forwards;
}
@keyframes fdwd-check-circle{ to{ stroke-dashoffset:0; } }
@keyframes fdwd-check-mark { to{ stroke-dashoffset:0; } }

/* ---- 6) card hover-lift (desktop) — generalizes to the sites' card classes */
@media (hover:hover) and (pointer:fine){
  .info-card, .service-card-rich, .detail-card-rich, .city-card, .timeline-card{
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .info-card:hover, .service-card-rich:hover, .detail-card-rich:hover,
  .city-card:hover, .timeline-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(13,34,53,.13);
  }
}

/* ---- 7) animated link underline (content text links) --------------------- */
.text-link{ position:relative; }
.text-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:currentColor; border-radius:2px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
}
.text-link:hover::after,
.text-link:focus-visible::after{ transform:scaleX(1); }

/* ---- 8) header gains depth once scrolled (only when it actually sticks) --- */
.fdwd-stickyhead{ transition: box-shadow .3s ease, background-color .3s ease; }
.fdwd-stickyhead.fdwd-scrolled{ box-shadow:0 10px 30px rgba(13,34,53,.14); }

/* ---- 9) "drives across" road divider (inner pages, above the footer) ------ */
.fdwd-road{
  position:relative; height:92px; margin:1.25rem 0 0;
  overflow:hidden; display:flex; align-items:center;
}
.fdwd-road__line{
  position:absolute; left:0; right:0; top:50%; height:3px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--anim-rail) 0 18px, transparent 18px 36px);
}
.fdwd-road__veh{
  position:relative; z-index:1; width:64px; height:auto; color:var(--anim-chip-bg);
  transform:translateX(-92px); will-change:transform;
  filter:drop-shadow(0 6px 10px rgba(13,34,53,.18));
}
.fdwd-road.is-go .fdwd-road__veh{
  transform:translateX(var(--road-dist,70vw));
  transition:transform 2.4s cubic-bezier(.42,0,.30,1);
}

/* ---- accessibility: respect reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce){
  .fdwd-scroll-progress{ display:none; }
  .story-path-traveler{ display:none; }
  .story-path-progress{ transform:translateX(-50%) scaleY(1); }
  .story-path-step .story-path-number,
  .story-path-step.is-active .story-path-number{ transition:none; }
  .story-path-state{ opacity:1; transform:none; transition:none; }
  .motion-ready .story-path-board .story-path-step{ transition:none; }
  .fdwd-magnetic{ transition:none; transform:none; }
  .fdwd-check__circle, .fdwd-check__mark{ animation:none; stroke-dashoffset:0; }
  .info-card, .service-card-rich, .detail-card-rich, .city-card, .timeline-card{ transition:none; }
  .text-link::after{ transition:none; }
  .fdwd-stickyhead{ transition:none; }
  .fdwd-road{ display:none; }   /* JS also skips injecting it under reduced motion */
}