.guridi-logo{display:block;width:100%;max-width:477px;height:auto;overflow:visible;cursor:pointer}
.guridi-logo .gl-l,.guridi-logo .gl-bolt,.guridi-logo .gl-cloud{transform-box:fill-box}
.guridi-logo .gl-l{transform-origin:50% 100%}
.guridi-logo .gl-l:first-child{transform-origin:50% 77%} /* la g rebota sobre la línea base, no sobre su cola */
.guridi-logo .gl-bolt{transform-origin:50% 50%}
.guridi-logo .gl-cloud{transform-origin:50% 80%}

.guridi-logo.is-playing .gl-l{animation:gl-plop .9s cubic-bezier(.3,.7,.4,1) calc(var(--i)*70ms) both}
.guridi-logo.is-playing .gl-bolt{animation:gl-zap .8s ease-out .55s both}
.guridi-logo.is-playing .gl-cloud{animation:gl-puff .85s ease-out .7s both}

@keyframes gl-plop{
  0%  {transform:translateY(-55%) scale(.2,.2);opacity:0}
  18% {transform:translateY(-35%) scale(.75,1.3);opacity:1}
  36% {transform:translateY(0)    scale(1.35,.6)}
  52% {transform:translateY(-12%) scale(.88,1.14)}
  68% {transform:translateY(0)    scale(1.1,.9)}
  82% {transform:translateY(-2%)  scale(.97,1.03)}
  100%{transform:none}
}
@keyframes gl-zap{
  0%  {transform:translateY(-120%) rotate(-30deg) scale(.3);opacity:0}
  35% {transform:translateY(8%) rotate(14deg) scale(1.25);opacity:1}
  50% {transform:rotate(-10deg) scale(.9)}
  62% {transform:rotate(7deg) scale(1.08)}
  74% {transform:rotate(-4deg) scale(.98)}
  86% {transform:rotate(2deg)}
  100%{transform:none}
}
@keyframes gl-puff{
  0%  {transform:scale(0);opacity:0}
  30% {transform:scale(1.3,1.15);opacity:1}
  45% {transform:scale(.85,.95)}
  60% {transform:scale(1.1,1.04)}
  75% {transform:scale(.96,.99)}
  100%{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .guridi-logo.is-playing .gl-l,.guridi-logo.is-playing .gl-bolt,.guridi-logo.is-playing .gl-cloud{animation:none}
}