/* ============================================================================
   The Freight Broker Toolbox — brand mark (sun + truck) + "by Helios"
   The sun/truck sit STILL by default and come alive on hover: the sun breathes,
   the truck drives, the road streams. Respects prefers-reduced-motion.
   ========================================================================== */
.fbtb-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.fbtb-mark{ height:40px; width:auto; flex:none; overflow:visible; }
.fbtb-word{ height:30px; width:auto; flex:none; }        /* the real logo wordmark (FBTB) */
.fbtb-brand .fbtb-by.by{ color:#FF6B1A!important; font:800 15px/1 'Syne',ui-sans-serif,system-ui,sans-serif!important;
  letter-spacing:-.01em!important; text-transform:none!important; white-space:nowrap; align-self:center; margin-left:-2px;
  transition:filter .2s ease; }
.fbtb-brand:hover .fbtb-by.by{ filter:brightness(1.15); }
.fbtb-txt{ min-width:0; }
.fbtb-brand .fbtb-txt h1{ font-family:'Syne',ui-sans-serif,system-ui,sans-serif!important; font-size:19px!important; line-height:1.06!important;
              font-weight:800!important; letter-spacing:-.03em!important; color:#fff!important; margin:0!important; text-transform:none!important; }
.fbtb-brand .fbtb-txt .by{ color:#FF6B1A!important; font-weight:700!important; font-size:.62em!important; letter-spacing:.02em!important;
              text-transform:none!important; white-space:nowrap; }

/* ---- animations: defined, but paused until the brand is hovered ---- */
.fbtb-glow{ transform-box:view-box; transform-origin:611px 208px; opacity:.32;
            animation:fbtbBreathe 3.4s ease-in-out infinite; animation-play-state:paused; }
.fbtb-rays{ transform-box:view-box; transform-origin:611px 208px;
            animation:fbtbTwinkle 3.4s ease-in-out infinite; animation-play-state:paused; }
.fbtb-arcs{ transform-box:view-box; transform-origin:611px 208px;
            animation:fbtbPulse 3.4s ease-in-out infinite; animation-play-state:paused; }
.fbtb-truck{ transform-box:fill-box; transform-origin:center bottom;
             animation:fbtbDrive .9s ease-in-out infinite; animation-play-state:paused; }
.fbtb-road{ animation:fbtbRoad .7s linear infinite; animation-play-state:paused; }
.fbtb-whoosh{ opacity:0; animation:fbtbWhoosh .9s linear infinite; animation-play-state:paused; }
.fbtb-whoosh.w2{ animation-delay:.3s; }
.fbtb-whoosh.w3{ animation-delay:.6s; }

.fbtb-brand:hover .fbtb-glow,
.fbtb-brand:hover .fbtb-rays,
.fbtb-brand:hover .fbtb-arcs,
.fbtb-brand:hover .fbtb-truck,
.fbtb-brand:hover .fbtb-road,
.fbtb-brand:hover .fbtb-whoosh{ animation-play-state:running; }
.fbtb-brand:hover .fbtb-mark{ filter:drop-shadow(0 0 8px rgba(255,107,26,.5)); }
.fbtb-brand:hover .fbtb-txt .by{ filter:brightness(1.18); }
.fbtb-brand .fbtb-mark, .fbtb-brand .fbtb-txt .by{ transition:filter .2s ease; }

@keyframes fbtbBreathe{ 0%,100%{ opacity:.28; transform:scale(1);} 50%{ opacity:.6; transform:scale(1.12);} }
@keyframes fbtbTwinkle{ 0%,100%{ opacity:.85; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
@keyframes fbtbPulse{ 0%,100%{ opacity:.9;} 50%{ opacity:1;} }
@keyframes fbtbDrive{ 0%{transform:translateY(0) rotate(0);} 25%{transform:translateY(-1.6px) rotate(-.25deg);}
                      50%{transform:translateY(0) rotate(0);} 75%{transform:translateY(-1.1px) rotate(.25deg);}
                      100%{transform:translateY(0) rotate(0);} }
@keyframes fbtbRoad{ from{ stroke-dashoffset:0;} to{ stroke-dashoffset:-60;} }
@keyframes fbtbWhoosh{ 0%{opacity:0; transform:translateX(24px);} 30%{opacity:.9;} 100%{opacity:0; transform:translateX(-40px);} }

@media (prefers-reduced-motion:reduce){
  .fbtb-glow,.fbtb-rays,.fbtb-arcs,.fbtb-truck,.fbtb-road,.fbtb-whoosh{ animation:none!important; }
  .fbtb-glow{ opacity:.4; }
}