/* hype.js: the engagement keys. Rainbow without violet (site rule): red, orange, yellow, lime, cyan, blue, pink. */
.hype { position: relative; isolation: isolate; overflow: visible !important; clip-path: none !important; }
.hype-rim { position: absolute; inset: -3px; z-index: 2; padding: 2px; pointer-events: none;
  background: linear-gradient(90deg, #ff453a, #ff9f0a, #ffe900, #64ff00, #00eadb, #008cff, #ff49cf, #ff453a) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 5px rgba(255, 73, 207, 0.6)) drop-shadow(0 0 8px rgba(0, 234, 219, 0.5));
  animation: hype-rim 2.4s linear infinite; }
.hype-shine { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  background: linear-gradient(100deg, transparent 0 42%, rgba(255, 255, 255, 0.6) 46%, rgba(255, 255, 255, 0.16) 52%, transparent 56%) -160% 0 / 250% 100% no-repeat;
  animation: hype-shine 4.6s steps(14) infinite; }
/* on the white keys the shine is a cyan/pink streak, so it shows */
.hud-key .hype-shine, .hype.hud-btn-p .hype-shine { background-image: linear-gradient(100deg, transparent 0 42%, rgba(0, 234, 219, 0.45) 46%, rgba(255, 73, 207, 0.3) 52%, transparent 56%); }
.hype:hover .hype-rim, .hype:focus-visible .hype-rim { animation-duration: 0.9s; inset: -4px; padding: 3px; }
@keyframes hype-rim { to { background-position: 200% 0; } }
@keyframes hype-shine { 0%, 64% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
/* the rare RGB jolt on the label (the Plush Pets / District glitch) */
@keyframes hype-jolt {
  0%, 89%, 100% { translate: 0 0; text-shadow: none; }
  90% { translate: -2px 0; text-shadow: -2px 0 #00eadb, 2px 0 #ff49cf; }
  91% { translate: 2px 0; text-shadow: 2px 0 #00eadb, -2px 0 #ff49cf; }
  92% { translate: -1px 0; text-shadow: -1px 0 #00eadb, 1px 0 #ff49cf; }
  93% { translate: 0 0; text-shadow: none; }
}
.hype:not(.hype-quiet) { animation: hype-jolt 6s steps(1) infinite; }
/* keys that already pulse keep their own animation, plus the jolt */
body.hudskin .product-btn.hype { animation: product-glow 2.4s ease-in-out infinite, hype-jolt 6s steps(1) infinite; }
body.hudskin.ui4 .share-main.hype, body.hudskin .share-main.hype { animation: share-shine 2s ease-in-out infinite, hype-jolt 6s steps(1) infinite; }
body:not(.picking) .crt-btn.x.hype { animation: cta 1.6s ease-in-out infinite, hype-jolt 6s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .hype-rim, .hype-shine { animation: none; }
  .hype, body.hudskin .product-btn.hype, body.hudskin .share-main.hype, body:not(.picking) .crt-btn.x.hype { animation: none; }
}