/* The Legacy badge in the hero (src/_includes/partials/logo-svg.njk): the
   original logo cut into parts and traced, so each part can move on its own.

   Intro (only with .intro on <html>, the first load of a visit): the garage
   door rolls up during the first ~1.8s, then the badge assembles itself:
   outline draws in all the way around, tools swing in and cross,
   lettering rises, then the ribbon drops down into the bottom of the badge. Idle: a glint of light sweeps across the badge every 9
   seconds, and the wrench gives a small tightening turn in between. Nothing moves
   with "reduce motion" on. */
.logo { display: block; width: 100%; height: 100%; overflow: visible; }
.logo__glint-bar { transform: translateX(-200px); }

@media (prefers-reduced-motion: no-preference) {
  .logo__wrench, .logo__hammer {
    transform-box: view-box;
    transform-origin: 502px 543px; /* where the tools cross, in the drawing's own units */
  }

  /* Intro */
  .intro .logo__draw { stroke-dasharray: 1 1; animation: lg-draw 1.1s cubic-bezier(.45, 0, .2, 1) 1.05s backwards; }
  .intro .logo__field { animation: lg-fade .6s ease 1.15s backwards; }
  .intro .logo__hammer { animation: lg-swing-right .7s cubic-bezier(.3, 1.45, .5, 1) 1.55s backwards; }
  .intro .logo__title { animation: lg-rise .5s ease-out 1.75s backwards; }
  .intro .logo__subtitle { animation: lg-rise .5s ease-out 1.85s backwards; }
  .logo__unroll { transform-box: fill-box; transform-origin: 50% 0; }
  .intro .logo__unroll { animation: lg-unroll .5s cubic-bezier(.45, 0, .25, 1) 2.05s backwards; }
  .intro .logo__ribbon { animation: lg-drop .55s cubic-bezier(.3, 1.35, .5, 1) 2.05s backwards; }

  /* Idle, plus the wrench's own intro swing */
  .logo__glint-bar { animation: lg-glint 9s ease-in-out 3.2s infinite; }
  .logo__wrench { animation: lg-tighten 9s ease-in-out 7.7s infinite; }
  .intro .logo__wrench {
    animation: lg-swing-left .7s cubic-bezier(.3, 1.45, .5, 1) 1.45s backwards,
               lg-tighten 9s ease-in-out 7.7s infinite;
  }
}

@keyframes lg-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lg-fade { from { opacity: 0; } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes lg-swing-left { from { opacity: 0; transform: rotate(-38deg) scale(.92); } }
@keyframes lg-swing-right { from { opacity: 0; transform: rotate(38deg) scale(.92); } }
@keyframes lg-unroll { from { transform: scaleY(0); } }
@keyframes lg-drop { from { transform: translateY(-34px); } }
/* The band is slanted, so its bottom end trails ~370 units behind its top:
   it has to travel well past the right edge (877) before it's fully off the
   badge, or it parks on the bottom-right corner between sweeps. */
@keyframes lg-glint {
  0% { transform: translateX(-200px); }
  18% { transform: translateX(1500px); }
  100% { transform: translateX(1500px); }
}
@keyframes lg-tighten {
  0%, 10%, 100% { transform: rotate(0); }
  4% { transform: rotate(-7deg); }
  7% { transform: rotate(1.5deg); }
}