/* TR pixel logo — 8-bit sprite with bevel, hard magenta drop shadow and reactive states */
.trlogo{--lg:#7f37e3;--lg-flash:#ffffff;--sz:44px;
  display:inline-flex;align-items:center;gap:12px;flex:none;padding:0;margin:0;background:none;border:0;color:inherit;font:inherit;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.trlogo svg{display:block;width:var(--sz);height:auto;aspect-ratio:18/16;overflow:visible;flex:none;
  filter:drop-shadow(calc(var(--sz)/18) calc(var(--sz)/18) 0 #ff4fd8) drop-shadow(calc(var(--sz)/18) calc(var(--sz)/18) 0 #0b0820);
  transition:transform .12s steps(2),filter .12s steps(2)}
.trlogo rect{transform-box:fill-box;transform-origin:center;transition:transform .45s steps(5),fill .15s steps(2)}
.trlogo .md{fill:var(--lg)}
.trlogo .hi{fill:color-mix(in srgb,var(--lg) 55%,#fff)}
.trlogo .lo{fill:color-mix(in srgb,var(--lg) 60%,#0b0820)}

/* idle: a stage-light glint sweeps across the pixels every few seconds */
.trlogo rect{animation:trl-glint 5s steps(1) infinite;animation-delay:calc(var(--c) * 45ms + var(--r) * 20ms + 1.2s)}
@keyframes trl-glint{0%{fill:#fff}3%{fill:color-mix(in srgb,var(--lg) 40%,#fff)}6%{}}

/* hover / focus: pixels hop in a wave and the shadow switches to cyan */
.trlogo:hover rect,.trlogo:focus-visible rect{animation:trl-hop .5s steps(2) infinite;animation-delay:calc(var(--c) * 35ms)}
@keyframes trl-hop{50%{transform:translateY(-.5px)}}
.trlogo:hover svg,.trlogo:focus-visible svg{filter:drop-shadow(calc(var(--sz)/18) calc(var(--sz)/18) 0 #3ff0ff) drop-shadow(calc(var(--sz)/18) calc(var(--sz)/18) 0 #0b0820);transform:translateY(-2px)}
.trlogo:focus-visible{outline:3px solid #ffc23d;outline-offset:4px}
.trlogo:active svg{transform:translateY(2px);filter:drop-shadow(0 0 0 #ff4fd8)}

/* one-shot reactions, triggered from script */
.trlogo.boom rect{animation:none;transform:translate(var(--dx),var(--dy)) scale(.6);transition:transform .14s steps(2)}
.trlogo.bump svg{transform:translateY(-2px)}
.trlogo.recoil svg{transform:translateY(3px) scaleY(.92)}
.trlogo.flash rect{fill:var(--lg-flash);transition:none}
.trlogo.strobe rect{animation:trl-strobe .1s steps(1) infinite}
@keyframes trl-strobe{50%{fill:#fff}}
.trlogo.glitch svg{animation:trl-glitch .9s steps(1)}
@keyframes trl-glitch{
  0%{transform:translate(3px,0);filter:drop-shadow(-3px 0 0 #ff2a3a) drop-shadow(3px 0 0 #3ff0ff)}
  15%{transform:translate(-3px,1px) skewX(-12deg)}
  30%{transform:translate(2px,-1px);opacity:.4}
  45%{transform:none;opacity:1}
  60%{transform:translate(-2px,0) skewX(10deg);filter:drop-shadow(3px 0 0 #ff2a3a) drop-shadow(-3px 0 0 #3ff0ff)}
  75%{opacity:.5}
  100%{transform:none;opacity:1}}
.trlogo.rise rect{animation:trl-rise .9s steps(6) both;animation-delay:calc((15 - var(--r)) * 30ms)}
@keyframes trl-rise{0%{transform:translateY(6px);opacity:0}60%{opacity:1}100%{transform:none}}
.trlogo.down svg{filter:grayscale(1) brightness(.6) drop-shadow(calc(var(--sz)/18) calc(var(--sz)/18) 0 #3a3270);transform:rotate(-6deg) translateY(2px)}
.trlogo.down rect{animation:none}
.trlogo.paused rect{animation:trl-blink 1s steps(2) infinite}
@keyframes trl-blink{50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
  .trlogo rect,.trlogo svg{animation:none!important;transition:none!important}
  .trlogo:hover svg{transform:none}
}