/* Glitch effects shared by the overlay panels (subgoal.html, songvote.html), in the
   same style as shoutout.html: RGB split, sliced jitter, CRT switch-off.
   Add a class to replay it: gfx-in (appear), gfx-out (disappear),
   gfx-burst (a quick glitch while on screen), gfx-num (a number changing). */
:root { --gfx-a: #ff2a6d; --gfx-b: #05d9e8; }

.gfx-in { animation: gfx-in .85s steps(1) both; }
@keyframes gfx-in {
  0% { opacity: 0; transform: translateX(-40px) skewX(-16deg); clip-path: inset(46% 0 46% 0); filter: drop-shadow(-8px 0 var(--gfx-a)) drop-shadow(8px 0 var(--gfx-b)); }
  12% { opacity: 1; transform: translateX(18px) skewX(8deg); clip-path: inset(8% 0 68% 0); }
  24% { transform: translateX(-10px); clip-path: inset(58% 0 10% 0); filter: drop-shadow(6px 0 var(--gfx-a)) drop-shadow(-6px 0 var(--gfx-b)) hue-rotate(90deg); }
  36% { transform: translateX(6px) skewX(-3deg); clip-path: inset(0 0 42% 0); }
  48% { transform: none; clip-path: inset(28% 0 0 0); filter: drop-shadow(-4px 0 var(--gfx-a)) drop-shadow(4px 0 var(--gfx-b)); }
  60% { transform: translateX(-3px); clip-path: inset(0); filter: brightness(1.6) saturate(1.8); }
  72%, 100% { opacity: 1; transform: none; clip-path: inset(0); filter: none; }
}

.gfx-out { animation: gfx-out .6s cubic-bezier(.7, 0, .9, .4) forwards; }
@keyframes gfx-out {
  0% { opacity: 1; transform: none; filter: none; }
  18% { transform: translateX(8px) skewX(10deg); filter: drop-shadow(-6px 0 var(--gfx-a)) drop-shadow(6px 0 var(--gfx-b)); }
  30% { transform: translateX(-6px); clip-path: inset(20% 0 30% 0); }
  50% { transform: scale(1.02, .08); clip-path: inset(0); filter: brightness(3) hue-rotate(40deg); }
  78% { transform: scale(.4, .02); filter: brightness(5); opacity: .9; }
  100% { transform: scale(0, .01); opacity: 0; }
}

.gfx-burst { animation: gfx-burst .4s steps(2) 1; }
@keyframes gfx-burst {
  0% { transform: translateX(-6px) skewX(-5deg); clip-path: inset(14% 0 0 0); filter: drop-shadow(-5px 0 var(--gfx-a)) drop-shadow(5px 0 var(--gfx-b)); }
  50% { transform: translateX(4px); clip-path: inset(0 0 22% 0); filter: hue-rotate(70deg); }
  100% { transform: none; clip-path: none; filter: none; }
}

.gfx-num { display: inline-block; animation: gfx-num .65s steps(2) 1; }
@keyframes gfx-num {
  0% { transform: translateX(-5px) skewX(-12deg); text-shadow: -4px 0 var(--gfx-a), 4px 0 var(--gfx-b); clip-path: inset(0 0 50% 0); }
  33% { transform: translateX(4px); text-shadow: 3px 0 var(--gfx-a), -3px 0 var(--gfx-b); clip-path: inset(40% 0 0 0); }
  66% { transform: translateX(-2px); text-shadow: -2px 0 var(--gfx-a), 2px 0 var(--gfx-b); clip-path: inset(0 0 25% 0); }
  100% { transform: none; clip-path: none; }
}