/* Homepage era cards: original line art per era (no team marks; see colors page policy).
   Drawings are visible without JS. js/era-art.js adds .era-motion so they trace on in view. */
#eras .era{min-height:300px}
#eras .era .art{display:block;height:92px;width:auto;max-width:100%;margin:0 0 14px -4px;overflow:visible;color:rgba(255,255,255,.82)}
#eras .era.buffalo .art{color:#ff9a4a}
#eras .era.sandiego .art{color:#ffc27a}
#eras .era .art .s{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#eras .era .art .t{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.6}
#eras .era .art .dash{fill:none;stroke:currentColor;stroke-width:1.6;stroke-dasharray:2 5;stroke-linecap:round}
#eras .era .art .fill{fill:currentColor}
#eras .era .art .numtxt{font-family:'Saira Condensed';font-weight:800;fill:none;stroke:currentColor;stroke-width:1.3}

/* Lob City ball runs the lob on hover */
#eras .era .art .ball{offset-path:path("M24,84 Q100,-30 166,46");offset-distance:0%;offset-rotate:0deg}
.era.lobcity:hover .art .ball,.era.lobcity:focus-visible .art .ball{animation:lob .9s cubic-bezier(.35,.1,.6,1) forwards}
@keyframes lob{to{offset-distance:100%}}
/* San Diego sails fill on hover */
#eras .era .art .sail{transition:fill .5s ease}
.era.sandiego:hover .art .sail{fill:rgba(255,194,122,.18)}

/* draw-on, only after JS opts in */
.era-motion #eras .era .art .s,.era-motion #eras .era .art .t{stroke-dasharray:1;stroke-dashoffset:1}
.era-motion #eras .eras.go .era .art .s,.era-motion #eras .eras.go .era .art .t{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.era-motion #eras .era .art .dash,.era-motion #eras .era .art .ball,.era-motion #eras .era .art .fill,.era-motion #eras .era .art .numtxt{opacity:0}
.era-motion #eras .eras.go .era .art .dash,.era-motion #eras .eras.go .era .art .ball,.era-motion #eras .eras.go .era .art .fill,.era-motion #eras .eras.go .era .art .numtxt{opacity:1;transition:opacity .5s ease calc(var(--d,0s) + 1s)}
.eras .era:nth-child(1){--d:0s}.eras .era:nth-child(2){--d:.12s}.eras .era:nth-child(3){--d:.24s}
.eras .era:nth-child(4){--d:.36s}.eras .era:nth-child(5){--d:.48s}.eras .era:nth-child(6){--d:.6s}
@media (prefers-reduced-motion:reduce){
  .era-motion #eras .era .art *{stroke-dashoffset:0 !important;opacity:1 !important;transition:none !important}
  .era.lobcity:hover .art .ball{animation:none}
}