/* Framheim site motion. Everything is visible at rest; motion only plays where the viewer allows it. */
.fcp-scan{position:relative;align-self:center;width:100%;max-width:560px}
@media (prefers-reduced-motion:no-preference){
  /* map scan on load */
  @property --scan{syntax:'<percentage>';inherits:false;initial-value:100%}
  .fcp-scan>svg{-webkit-mask-image:linear-gradient(to bottom,#000 var(--scan),transparent calc(var(--scan) + 2%));mask-image:linear-gradient(to bottom,#000 var(--scan),transparent calc(var(--scan) + 2%));animation:fcpScan 1.2s cubic-bezier(.45,0,.25,1) .15s both}
  .fcp-scan::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#D9480F;opacity:0;animation:fcpScanLine 1.2s cubic-bezier(.45,0,.25,1) .15s both;pointer-events:none}
  @keyframes fcpScan{from{--scan:0%}to{--scan:100%}}
  @keyframes fcpScanLine{0%{top:0;opacity:1}92%{top:100%;opacity:1}100%{top:100%;opacity:0}}
  .fcp-map .fcp-city circle,.fcp-map .fcp-city path{transform-box:fill-box;transform-origin:center;animation:fcpLock .5s 1.3s both}
  .fcp-map .fcp-city text{animation:fcpFade .4s 1.6s both}
  @keyframes fcpLock{from{opacity:0;transform:scale(2)}to{opacity:1;transform:none}}
  @keyframes fcpFade{from{opacity:0}to{opacity:1}}

  /* network lines draw in */
  .fcp-line.armed{border-left-color:transparent}
  .fcp-line.armed::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:#0B2545;transform-origin:top;transform:scaleY(0);transition:transform .9s cubic-bezier(.45,0,.25,1)}
  .fcp-line.armed>li::before{opacity:0;transform:scale(.3);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.3,1.4)}
  .fcp-line.armed.go::after{transform:scaleY(1)}
  .fcp-line.armed.go>li::before{opacity:1;transform:none}
  .fcp-line.armed.go>li:nth-child(1)::before{transition-delay:.15s}
  .fcp-line.armed.go>li:nth-child(2)::before{transition-delay:.35s}
  .fcp-line.armed.go>li:nth-child(3)::before{transition-delay:.55s}
  .fcp-line.armed.go>li:nth-child(4)::before{transition-delay:.75s}
  .fcp-line.armed.go>li:nth-child(5)::before{transition-delay:.95s}

  /* polar route traced */
  .fcp-route .step{opacity:0;transition:opacity .4s ease}
  .fcp-route.go .step{opacity:1}
}
