:root {
  --flag-femboy: linear-gradient(125deg, 
  rgba(213, 96, 169) 0%, rgba(213, 96, 169) 14%, 
  rgba(229, 175, 206) 14%, rgba(229, 175, 206) 28%, 
  rgba(255, 255, 255) 28%, rgba(255, 255, 255) 43%, 
  rgba(86, 207, 248) 43%, rgba(86, 207, 248) 57%, 
  rgba(255, 255, 255) 57%, rgba(255, 255, 255) 71%, 
  rgba(229, 175, 206) 71%, rgba(229, 175, 206) 85%, 
  rgba(213, 96, 169) 85%, rgba(213, 96, 169) 100%);

  --flag-trans: linear-gradient(125deg, 
  rgba(91, 207, 251) 0%, rgba(91, 207, 251) 20%, 
  rgba(245, 169, 184) 20%, rgba(245, 169, 184) 40%, 
  rgba(255, 255, 255) 40%, rgba(255, 255, 255) 60%, 
  rgba(245, 169, 184) 60%, rgba(245, 169, 184) 80%, 
  rgba(91, 207, 251) 80%, rgba(91, 207, 251) 100%);

  --flag-burbger: linear-gradient(125deg, 
  rgba(237, 158, 103) 0%, rgba(237, 158, 103) 20%,
  rgba(73, 135, 1) 20%, rgba(73, 135, 1) 40%,
  rgba(253, 28, 19) 40%, rgba(253, 28, 19) 60%,
  rgba(125, 56, 41) 60%, rgba(125, 56, 41) 80%,
  rgba(243, 162, 106) 80%, rgba(243, 162, 106) 100%);
}




text-femboy {
  background: var(--flag-femboy);
  
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

a:hover * text-femboy {text-shadow: inherit;}
a:hover text-femboy {text-shadow: inherit;}

text-trans {
  background: var(--flag-trans);

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

a:hover * text-trans {text-shadow: inherit;}
a:hover text-trans {text-shadow: inherit;}

text-burbger {
  background: var(--flag-burbger);

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

a:hover * text-burbger {text-shadow: inherit;}
a:hover text-burbger {text-shadow: inherit;}


text-glitchy {
  position: relative;
  display: inline-block;

  background: var(--flag-femboy);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;

  white-space: nowrap;

  animation: 
    flag-cycle 6s steps(1) infinite,
    glitch-passive 1s linear infinite;
}

text-glitchy::before,
text-glitchy::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  line-height: inherit;
  font: inherit;

  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;

  pointer-events: none;
  overflow: hidden;
}

text-glitchy::before {
  animation:
    glitch-slice 6s infinite,
    -glitch-top 0.9s steps(2, end) infinite;

  -filter: drop-shadow(-2px 0 red);

  clip-path: polygon(0 0, 100% 0, 100% 43%, 0 43%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 43%, 0 43%);
}
text-glitchy::after {
  animation: 
    glitch-slice 6s infinite reverse,
    -glitch-bottom 1.5s linear infinite;

  -filter: drop-shadow(2px 0 cyan);

  clip-path: polygon(0 57%, 100% 57%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 57%, 100% 57%, 100% 100%, 0 100%);
}

@keyframes flag-cycle {
  0%, 30%   { background: var(--flag-femboy); -webkit-background-clip: text; background-clip: text;}
  33%, 63%  { background: var(--flag-trans); -webkit-background-clip: text; background-clip: text;}
  66%, 96%  { background: var(--flag-burbger); -webkit-background-clip: text; background-clip: text;}
  100%      { background: var(--flag-femboy); -webkit-background-clip: text; background-clip: text;}
}

@keyframes glitch-slice {
  /* idle */
  0%, 30%, 33%, 63%, 66%, 96%, 100% {
    clip-path: inset(0 0 0 0);
    transform: none;
    opacity: 0;
  }

  /* burst 1 */
  30.5% {
    clip-path: inset(0 0 60% 0);
    transform: translate(-6px, 4px) skewX(-10deg);
    opacity: 1;
  }
  31% {
    clip-path: inset(40% 0 0 0);
    transform: translate(6px, -4px) skewX(10deg);
  }

  /* micro glitch */
  31.5% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(-4px, 2px) skewX(-6deg);
  }

  /* burst 2 */
  63.5% {
    clip-path: inset(10% 0 50% 0);
    transform: translate(4px, -6px) skewX(8deg);
    opacity: 1;
  }
  64% {
    clip-path: inset(50% 0 10% 0);
    transform: translate(-4px, 6px) skewX(-8deg);
  }

  /* extra flicker */
  64.5% {
    clip-path: inset(30% 0 30% 0);
    transform: translate(2px, -2px) skewX(5deg);
  }

  /* burst 3 */
  96.5% {
    clip-path: inset(0 0 70% 0);
    transform: translate(-6px, 2px) skewX(-12deg);
    opacity: 1;
  }
  97% {
    clip-path: inset(60% 0 0 0);
    transform: translate(8px, -2px) skewX(12deg);
  }
}

@keyframes glitch-passive{
  2%,64%{ transform: translate(1px,0) skew(0deg); }
  4%,60%{ transform: translate(-1px,0) skew(0deg); }
  62%{ transform: translate(0,0) skew(15deg); }
}

@keyframes glitch-top{
  2%,64%{ transform: translate(2px,-2px); opacity: 1;}
  4%,60%{ transform: translate(-2px,2px); opacity: 1;}
  62%{ transform: translate(13px,-1px) skew(-13deg); opacity: 1; }
}

@keyframes glitch-bottom{
  2%,64%{ transform: translate(-2px,0); opacity: 1;}
  4%,60%{ transform: translate(-2px,0); opacity: 1;}
  62%{ transform: translate(-22px,5px) skew(21deg); opacity: 1;}
}