@layer legacy {
.logo--svg {
  height: 50px;

  & svg {
    max-width: 50px;
  }
}

.logo--squared-50 {
  height: 50px;

  & svg {
    max-width: 50px;
  }
}

.logo--emoji {
  font-size: 3rem;
  text-decoration: none;
  display: inline-block;
  width: 72px;
  text-align: center;
}

.body--mobile .logo--emoji {
  width: 50px;
}

@media (hover: hover) {
  @keyframes logo-orbit {
    0%   { transform: rotate(0deg)   scale(1.0);  opacity: 1;    }
    25%  { transform: rotate(90deg)  scale(0.62); opacity: 0.85; }
    50%  { transform: rotate(180deg) scale(0.52); opacity: 0.55; }
    75%  { transform: rotate(270deg) scale(0.62); opacity: 0.85; }
    100% { transform: rotate(360deg) scale(1.0);  opacity: 1;    }
  }

  @keyframes logo-ring {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(-15deg); }
    20%  { transform: rotate(15deg); }
    30%  { transform: rotate(-15deg); }
    40%  { transform: rotate(15deg); }
    50%  { transform: rotate(-10deg); }
    60%  { transform: rotate(10deg); }
    70%  { transform: rotate(-5deg); }
    80%  { transform: rotate(5deg); }
    90%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
  }

  .logo--emoji:focus-visible {
    outline: none;
    border-radius: 0;
  }
}
}