/* Let's Go Video logo: speed dots + frame with a play button cut out (img/logo.svg is the same mark, flat).
   In the menu it races in whenever the menu comes into view (js/logo.js adds .lg-in) */
.logo svg.lg-mark, .top .logo svg.lg-mark{width:auto; height:26px; aspect-ratio:176 / 76; overflow:visible}
.lg-mark .lg-d, .lg-mark .lg-body{fill:currentColor; transition:fill .35s ease}
.lg-mark .lg-tri{fill:#000}
.lg-mark .lg-d, .lg-mark .lg-body, .lg-mark .lg-tri{transform-box:fill-box}
.lg-mark .lg-body{transform-origin:0 50%}
.lg-mark .lg-d{transform-origin:100% 50%}
.lg-mark .lg-tri{transform-origin:40% 50%}

/* entrance: the frame shoots in from the left and brakes with a skid, the dots trail in as speed lines, then the play button pops open */
.logo.lg-in .lg-body{animation:lg-body .9s cubic-bezier(.2,.9,.25,1) var(--lg-delay,0s) both}
.logo.lg-in .lg-d{animation:lg-dot .8s cubic-bezier(.2,.9,.25,1) calc(var(--lg-delay,0s) + .1s + var(--i) * 70ms) both}
.logo.lg-in .lg-tri{animation:lg-tri .6s cubic-bezier(.3,1.6,.5,1) calc(var(--lg-delay,0s) + .5s) both}
@keyframes lg-body{
  0%{transform:translateX(-60px) scaleX(.5) skewX(-18deg); opacity:0}
  35%{opacity:1}
  60%{transform:translateX(6px) scaleX(1.07) skewX(8deg)}
  80%{transform:translateX(-2px) scaleX(.98) skewX(-2deg)}
  100%{transform:none}
}
@keyframes lg-dot{
  0%{transform:translateX(-90px) scaleX(2.6); opacity:0}
  40%{opacity:1}
  65%{transform:translateX(5px) scaleX(.8)}
  82%{transform:translateX(-1.5px) scaleX(1.06)}
  100%{transform:none}
}
@keyframes lg-tri{
  0%{transform:scale(0) rotate(-140deg)}
  100%{transform:none}
}

/* hover (js/logo.js adds .lg-zoom): a short burst of speed */
.logo.lg-zoom .lg-d{animation:lg-zoom .5s cubic-bezier(.3,.7,.3,1) calc(var(--i) * 50ms) both}
.logo.lg-zoom .lg-tri{animation:lg-nudge .5s cubic-bezier(.3,1.6,.5,1) .1s both}
@keyframes lg-zoom{40%{transform:translateX(-10px) scaleX(1.6)}}
@keyframes lg-nudge{40%{transform:translateX(5px) scale(1.12)}}

@media (prefers-reduced-motion: reduce){
  .logo.lg-in .lg-body, .logo.lg-in .lg-d, .logo.lg-in .lg-tri, .logo.lg-zoom .lg-d, .logo.lg-zoom .lg-tri{animation:none}
}