.mg-brand__mark {
  font-family: "Press Start 2P", "Silkscreen", ui-monospace, monospace;
  font-size: clamp(15px, 1.7vw, 18px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-font-smoothing: none;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  padding: 18px 16px;
  line-height: 1;
}
.mg-brand__mark-inner {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  filter: drop-shadow(0 0 8px rgba(240, 170, 28, 0.55))
          drop-shadow(0 0 16px rgba(240, 170, 28, 0.22));
  transition: filter 220ms ease;
}
.mg-brand__letter {
  display: inline-block;
  color: #F5F1E6;
  text-shadow: 0 0 5px rgba(var(--letter-c), 0.45);
  transition: text-shadow 200ms ease, color 200ms ease, filter 220ms ease;
  animation: mg-brand-pop 7.3s ease-in-out infinite;
  animation-delay: calc(var(--mg-brand-i, 0) * 0.11s);
  will-change: transform, color;
}
.mg-brand__lg {
  display: inline-block;
  transition: transform 220ms cubic-bezier(.22, 1.2, .36, 1);
  will-change: transform;
}
.mg-brand__letter:nth-child(4n+1) { --letter-c: 240, 170, 28; }   
.mg-brand__letter:nth-child(4n+2) { --letter-c:  34, 232, 240; }  
.mg-brand__letter:nth-child(4n+3) { --letter-c: 255,  42, 142; }  
.mg-brand__letter:nth-child(4n+4) { --letter-c: 157, 232,  48; }  

@keyframes mg-brand-pop {
  0%   { transform: translateY(0) scale(1);
         color: #F5F1E6;
         text-shadow: 0 0 5px rgba(var(--letter-c), 0.45); }
  3.5% { transform: translateY(-2px) scale(1.28);
         color: rgb(var(--letter-c));
         text-shadow: 0 0 12px rgba(var(--letter-c), 0.95),
                      0 0 24px rgba(var(--letter-c), 0.45); }
  8.5% { transform: translateY(0) scale(1);
         color: #F5F1E6;
         text-shadow: 0 0 5px rgba(var(--letter-c), 0.45); }
  100% { transform: translateY(0) scale(1);
         color: #F5F1E6;
         text-shadow: 0 0 5px rgba(var(--letter-c), 0.45); }
}
.mg-brand__space { display: inline-block; width: 0.32em; }
.mg-brand__letter:hover .mg-brand__lg { transform: translateY(-3px) scale(1.18) rotate(-3deg); }
.mg-brand__mark:hover .mg-brand__letter { animation-play-state: paused; }
.mg-brand__letter:hover {
  color: rgb(var(--letter-c)) !important;
  text-shadow: 0 0 12px rgba(var(--letter-c), 0.98),
               0 0 24px rgba(var(--letter-c), 0.5) !important;
}
.mg-brand__mark:hover .mg-brand__mark-inner {
  filter: drop-shadow(0 0 14px rgba(240, 170, 28, 0.85))
          drop-shadow(0 0 26px rgba(240, 170, 28, 0.4));
}

@media (prefers-reduced-motion: reduce) {
  .mg-brand__letter { animation: none; }
}