/* ==========================================================
   Cartoon trailer "road" band (Home page only)
   Self-contained add-on: does not modify any existing rules.
   ========================================================== */
.trailer-road{position:relative;z-index:1;height:118px;margin-top:-50px;background:var(--cream);overflow:hidden;pointer-events:none}
.trailer-road::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rose)}
.trailer-rig{position:absolute;bottom:0;left:max(22px,calc(50% - 560px));width:350px;line-height:0}
.trailer-rig svg{display:block;width:100%;height:auto;overflow:visible}
.trailer-road.is-driving .trailer-rig{left:0;will-change:transform}

/* little touches while it's rolling */
.trailer-road .ct-puff{opacity:0;transform-box:fill-box;transform-origin:center}
.trailer-road .ct-trailer-body,.trailer-road .ct-truck-body{transform-box:view-box}
.trailer-road.is-moving .ct-trailer-body{animation:ct-bounce .42s ease-in-out infinite}
.trailer-road.is-moving .ct-truck-body{animation:ct-bounce .42s ease-in-out -.21s infinite}
.trailer-road.is-forward .ct-puff{animation:ct-puff 1.2s ease-out infinite}
.trailer-road.is-forward .ct-puff-2{animation-delay:-.3s}
.trailer-road.is-forward .ct-puff-3{animation-delay:-.6s}
.trailer-road.is-forward .ct-puff-4{animation-delay:-.9s}
@keyframes ct-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes ct-puff{0%{opacity:0;transform:translate(16px,6px) scale(.5)}25%{opacity:.95}100%{opacity:0;transform:translate(-12px,-10px) scale(1.15)}}

@media (max-width:760px){
  .trailer-road{height:78px;margin-top:-34px}
  .trailer-rig{width:204px}
}
@media (prefers-reduced-motion:reduce){
  .trailer-road .trailer-rig{left:max(22px,calc(50% - 560px));transform:none!important}
  .trailer-road .ct-trailer-body,.trailer-road .ct-truck-body,.trailer-road .ct-puff{animation:none!important}
  .trailer-road .ct-puff{opacity:0}
}

/* ---- Bubble + paw-print trail (particles are built by trailer-road.js) ----
   Sized in em: the rig is always 22em wide, so the whole trail scales with it.
   Lives inside the clipped band, so it can never overlap page text or photos. */
.trailer-rig{font-size:calc(350px / 22)}
.trailer-rig svg{position:relative;z-index:1}
.trailer-road .ct-puffs{display:none}
.tr-trail{position:absolute;z-index:0;bottom:0;right:calc(100% - 3.6em);width:62em;height:7.4em;
  opacity:0;transition:opacity 1.5s ease-out}
.trailer-road.is-trailing .tr-trail{opacity:1;transition-duration:.25s}
.tr-p{position:absolute;right:0;bottom:var(--y0);width:var(--s);height:var(--s);opacity:0;
  animation:tr-float var(--dur) linear var(--del) infinite,tr-fade var(--dur) linear var(--del) infinite;animation-play-state:paused;will-change:transform,opacity}
.trailer-road.in-view .tr-p{animation-play-state:running}
.tr-p i{display:block;width:100%;height:100%;border-radius:50%}
.tr-bubble i{
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.98) 0 9%,rgba(255,255,255,0) 20%),
    radial-gradient(circle at 68% 76%,rgba(255,255,255,.55) 0 5%,rgba(255,255,255,0) 11%),
    radial-gradient(circle at 50% 50%,rgba(255,240,244,.12) 0 52%,rgba(236,160,188,.38) 70%,rgba(213,153,134,.78) 100%);
  box-shadow:inset 0 0 0 .075em rgba(201,128,112,.7),0 .06em .18em rgba(190,123,102,.12)}
.tr-paw i{border-radius:0;background:var(--c);transform:rotate(var(--rot));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.2' rx='6' ry='5.2'/%3E%3Cellipse cx='4.6' cy='9.6' rx='2.4' ry='2.9' transform='rotate(-18 4.6 9.6)'/%3E%3Cellipse cx='9.2' cy='5.4' rx='2.4' ry='3' transform='rotate(-6 9.2 5.4)'/%3E%3Cellipse cx='14.8' cy='5.4' rx='2.4' ry='3' transform='rotate(6 14.8 5.4)'/%3E%3Cellipse cx='19.4' cy='9.6' rx='2.4' ry='2.9' transform='rotate(18 19.4 9.6)'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.2' rx='6' ry='5.2'/%3E%3Cellipse cx='4.6' cy='9.6' rx='2.4' ry='2.9' transform='rotate(-18 4.6 9.6)'/%3E%3Cellipse cx='9.2' cy='5.4' rx='2.4' ry='3' transform='rotate(-6 9.2 5.4)'/%3E%3Cellipse cx='14.8' cy='5.4' rx='2.4' ry='3' transform='rotate(6 14.8 5.4)'/%3E%3Cellipse cx='19.4' cy='9.6' rx='2.4' ry='2.9' transform='rotate(18 19.4 9.6)'/%3E%3C/svg%3E") center/contain no-repeat}
.tr-bubble i{animation:tr-wobble var(--wob) ease-in-out var(--del) infinite alternate;animation-play-state:inherit}
@keyframes tr-float{
  0%  {transform:translate3d(calc(var(--x0) * -1),0,0) scale(.35);animation-timing-function:ease-out}
  8%  {transform:translate3d(calc((var(--x0) + 1.2em) * -1),calc(var(--dy) * -.12),0) scale(.95);animation-timing-function:cubic-bezier(.4,0,.8,.8)}
  100%{transform:translate3d(calc((var(--x0) + var(--dx)) * -1),calc(var(--dy) * -1),0) scale(1.08)}}
@keyframes tr-fade{0%{opacity:0}7%{opacity:var(--o)}62%{opacity:calc(var(--o) * .78)}100%{opacity:0}}
@keyframes tr-wobble{from{transform:translate(-.14em,.06em)}to{transform:translate(.14em,-.06em)}}
@media (max-width:760px){
  .trailer-rig{font-size:calc(204px / 22)}
  .tr-trail{height:8.4em}
}
@media (prefers-reduced-motion:reduce){
  .tr-trail{display:none!important}
}