/* ============================================================
   SIDELINE LEGEND – animated football play (inserted by JS)
   Desktop: sits in the side margin, draws itself when scrolled into view.
   Tablet / phone: floats right inside the text.
   ============================================================ */
.fp-item{position:absolute;z-index:2;will-change:transform}
.fp-layer{position:absolute;top:0;left:0;width:100%;height:0;pointer-events:none}
.fp-layer .fp-item{pointer-events:auto}
.fp-item svg{display:block;width:100%;height:auto;overflow:visible}

/* inline (tablet / phone) */
.fp-item.fp-inline{position:relative;float:right;width:220px;margin:.25rem 0 1rem 1.5rem}
@media (max-width:599px){
  .fp-item.fp-inline{width:170px;max-width:42%;margin:.2rem 0 .75rem 1rem}
}

/* strokes */
.fp g path{fill:none;stroke:#2967b0;stroke-linecap:round;stroke-linejoin:round;stroke-width:23;
  stroke-dasharray:1 1.05;stroke-dashoffset:1}
.fp .o,.fp .head{stroke-width:20}
.fp.is-drawing g path{animation:fp-draw var(--d,.4s) var(--e,cubic-bezier(.45,.05,.4,1)) calc(var(--t,0s) + .45s) both}

/* background blob */
.fp .fp-blob{fill:var(--fp-bg,#e2eef9);transform-box:fill-box;transform-origin:center;transform:scale(0)}
.fp.is-drawing .fp-blob{animation:fp-pop .9s cubic-bezier(.34,1.56,.64,1) both,fp-breathe 14s ease-in-out 1s infinite}

/* after drawing: routes nudge forward now and then; faster on hover */
.fp.is-drawing .route{animation:fp-go 2.6s ease-in-out 5.1s infinite}
.fp.is-drawing .route.r2{animation-delay:5.6s}
.fp.is-done:hover .route{animation:fp-go-hover 1s ease-in-out infinite}
.fp.is-done:hover .route.r2{animation-delay:.18s}

@keyframes fp-draw{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes fp-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes fp-breathe{0%,100%{transform:scale(1) rotate(0)}33%{transform:scale(1.03) rotate(6deg)}66%{transform:scale(.98) rotate(-5deg)}}
@keyframes fp-go{0%,70%,100%{transform:translate(0,0)}80%{transform:translate(var(--gx),var(--gy))}}
@keyframes fp-go-hover{0%,100%{transform:translate(0,0)}45%{transform:translate(calc(var(--gx) * 1.8),calc(var(--gy) * 1.8))}}

@media (prefers-reduced-motion: reduce){
  .fp g path{stroke-dasharray:none;stroke-dashoffset:0;opacity:1;animation:none!important}
  .fp .fp-blob{transform:none;animation:none!important}
  .fp .route{animation:none!important}
}