/* logo hop: the TV in the logo squashes, hops, tilts, lands with a squish and settles when you point at it (any .logo that contains the TV <svg>) */
.logo svg { transform-origin: 50% 92%; overflow: visible; }
.logo:hover svg, .logo:focus-visible svg, .logo.hop svg { animation: tvHop .78s cubic-bezier(.3, .7, .4, 1) both; }
.logo svg use { transition: filter .2s; }
.logo:hover svg use, .logo.hop svg use { filter: drop-shadow(0 0 6px rgba(255, 176, 64, .45)); }
@keyframes tvHop {
  0%   { transform: translateY(0)    scale(1, 1)      rotate(0); }
  14%  { transform: translateY(0)    scale(1.14, .84) rotate(0); }
  38%  { transform: translateY(-30%) scale(.9, 1.12)  rotate(-6deg); }
  52%  { transform: translateY(-34%) scale(.96, 1.04) rotate(3deg); }
  66%  { transform: translateY(0)    scale(1.16, .82) rotate(0); }
  78%  { transform: translateY(0)    scale(.95, 1.06) rotate(0); }
  89%  { transform: translateY(0)    scale(1.03, .97) rotate(0); }
  100% { transform: translateY(0)    scale(1, 1)      rotate(0); } }
@media (prefers-reduced-motion: reduce) { .logo:hover svg, .logo:focus-visible svg, .logo.hop svg { animation: none; } }