/* fiTTogo — logo intro animation, confined to the header's logo slot.
   Truck faces left throughout. It starts on the left, backs up (reverse,
   moving rightward) the full distance to the trailer's hitch, connects, then
   drives forward (moving leftward) pulling the trailer to center and
   continuing off-screen left. One genuine direction reversal at the coupling
   point, matching how backing up a trailer actually works.
   Default state (no JS, or a repeat visit this session) is simply the static
   parked logo — the animation is progressive enhancement on top of that.
   Scaled 1.35x from the original size (Brad: "a bit larger"). */

.brand-stage {
  position: relative;
  display: inline-block;
  width: 297px;
  height: 44px;
  overflow: hidden;
  vertical-align: middle;
}

.brand-trailer,
.brand-truck,
.brand-flash {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}

.brand-trailer { width: 121.5px; }
.brand-stage .brand-trailer img { display: block; width: 100%; height: auto; }

.brand-truck { width: 104px; opacity: 0; }
.brand-stage .brand-truck img { display: block; width: 100%; height: auto; }

/* ---- Wheels: a small circular crop of each image's own wheel art, precisely
   aligned over the real (static) wheel beneath it, that rotates independently
   — the classic "masked overlay" trick for spinning a wheel on a flat image.
   Centers/radii re-measured via flood-fill of the connected ring shape
   (avoids the internal hub gaps and the separate ground-shadow decoration
   that threw off the original eyeballed estimates — that's what caused the
   reported wobble/red-bleed). Source pixel centers/radii:
   truck.png (400x134, current file) front wheel (52,94) r28, rear (301,93) r29;
   logo.png (657x220) left "o" (379,118.5) r46, right "o" (570.5,118.5) r46. ---- */
.wheel {
  position: absolute;
  border-radius: 50%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.wheel--trailer-l {
  width: 17px; height: 17px;
  top: 13.41px; left: 61.59px;
  background-image: url('../img/logo.png');
  background-size: 121.5px 40.68px;
  background-position: -61.59px -13.41px;
}
.wheel--trailer-r {
  width: 17px; height: 17px;
  top: 13.41px; left: 97px;
  background-image: url('../img/logo.png');
  background-size: 121.5px 40.68px;
  background-position: -97px -13.41px;
}
.wheel--truck-f {
  width: 14.6px; height: 14.6px;
  top: 17.14px; left: 6.22px;
  background-image: url('../img/truck.png');
  background-size: 104px 34.84px;
  background-position: -6.22px -17.14px;
}
.wheel--truck-r {
  width: 15.1px; height: 15.1px;
  top: 16.63px; left: 70.71px;
  background-image: url('../img/truck.png');
  background-size: 104px 34.84px;
  background-position: -70.71px -16.63px;
}

.taillight-glow {
  position: absolute;
  left: 93%;
  top: 38%;
  width: 9.5px;
  height: 9.5px;
  margin: -4.75px 0 0 -4.75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,69,58,0.95), rgba(255,69,58,0) 72%);
  opacity: 0;
  pointer-events: none;
}

.brand-flash {
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #2F5233;
  box-shadow: 0 0 0 0 rgba(47,82,51,0.5);
  opacity: 0;
  pointer-events: none;
}

/* ---- Animate variant: JS opts in on first visit this session ---- */
.brand-stage--animate .brand-trailer {
  animation: brand-trailer-move 6s cubic-bezier(.4,0,.2,1) forwards;
}
.brand-stage--animate .brand-truck {
  animation: brand-truck-move 6s cubic-bezier(.4,0,.2,1) forwards;
}
.brand-stage--animate .taillight-glow {
  animation: brand-taillight-glow 6s steps(1) forwards;
}
.brand-stage--animate .brand-flash {
  animation: brand-flash 6s ease forwards;
}
.brand-stage--animate .wheel--truck-f,
.brand-stage--animate .wheel--truck-r {
  animation: wheel-truck-spin 6s cubic-bezier(.4,0,.2,1) forwards;
}
.brand-stage--animate .wheel--trailer-l,
.brand-stage--animate .wheel--trailer-r {
  animation: wheel-trailer-spin 6s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes brand-trailer-move {
  0%, 50%   { transform: translate(175.5px, -50%); }
  80%       { transform: translate(0, -50%); }
  85%       { transform: translate(0, calc(-50% - 3px)) scale(1.015); }
  91%       { transform: translate(0, calc(-50% + 1.5px)) scale(0.998); }
  100%      { transform: translate(0, -50%) scale(1); }
}

/* ---- Truck: backs up the whole way from the left (reverse), connects, then
   drives forward (pulling) back past center and off-screen left ---- */
@keyframes brand-truck-move {
  0%        { opacity: 1; transform: translate(-121.5px, -50%); }
  44%       { transform: translate(71.6px, -50%); }
  50%       { transform: translate(71.6px, -50%); }
  80%       { transform: translate(-104px, -50%); }
  92%       { transform: translate(-243px, -50%); }
  100%      { opacity: 1; transform: translate(-243px, -50%); }
}

/* Reverse-light blink through the whole backing approach (0-44%) */
@keyframes brand-taillight-glow {
  0%, 6%    { opacity: 0; }
  7%, 13%   { opacity: 1; }
  14%, 20%  { opacity: 0; }
  21%, 27%  { opacity: 1; }
  28%, 34%  { opacity: 0; }
  35%, 41%  { opacity: 1; }
  42%, 100% { opacity: 0; }
}

/* Wheels roll clockwise while backing right (0-44%), pause through the
   connect hold, then roll counter-clockwise while towing left (50-92%) —
   matching the translation direction at each phase. */
@keyframes wheel-truck-spin {
  0%    { transform: rotate(0deg); }
  44%   { transform: rotate(1080deg); }
  50%   { transform: rotate(1080deg); }
  80%   { transform: rotate(0deg); }
  92%   { transform: rotate(-360deg); }
  100%  { transform: rotate(-360deg); }
}

@keyframes wheel-trailer-spin {
  0%, 50% { transform: rotate(0deg); }
  80%     { transform: rotate(-1080deg); }
  100%    { transform: rotate(-1080deg); }
}

@keyframes brand-flash {
  0%, 42%   { opacity: 0; transform: translate(175.5px, -50%) scale(0.6); box-shadow: 0 0 0 0 rgba(47,82,51,0.5); }
  44%       { opacity: 1; transform: translate(175.5px, -50%) scale(1.3); box-shadow: 0 0 0 8px rgba(47,82,51,0); }
  50%       { opacity: 0; transform: translate(175.5px, -50%) scale(1); box-shadow: 0 0 0 0 rgba(47,82,51,0); }
  100%      { opacity: 0; transform: translate(175.5px, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-stage--animate .brand-trailer,
  .brand-stage--animate .brand-truck,
  .brand-stage--animate .taillight-glow,
  .brand-stage--animate .brand-flash,
  .brand-stage--animate .wheel--truck-f,
  .brand-stage--animate .wheel--truck-r,
  .brand-stage--animate .wheel--trailer-l,
  .brand-stage--animate .wheel--trailer-r {
    animation: none !important;
  }
}