/* Glitch label styles */
.kicker{
  color:rgba(255,255,255,.76);
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  display:flex;
  gap:8px;
  align-items:baseline;
  width:max-content;
  user-select:none;
}

.kicker .glitchWrap{
  position:relative;
  display:inline-block;
  padding:2px 2px;
  margin:-2px -2px;
  cursor:default;
}

.glitchWord{
  position:relative;
  display:inline-block;
  color:rgba(255,255,255,.72);
  text-shadow:none;
  font-weight:inherit;
  font-style:inherit;
  transition:color .15s ease;
}

.glitchWord::before,
.glitchWord::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}

.glitchWord::before{ transform:translate(-1px, 0); }
.glitchWord::after{ transform:translate(1px, 0); }

.glitchWrap.is-glitching .glitchWord{
  animation:glitchJitter 420ms steps(2,end) infinite;
  color:rgba(255,255,255,.72);
  text-shadow:none;
}

.glitchWrap.is-glitching .glitchWord::before,
.glitchWrap.is-glitching .glitchWord::after{
  opacity:1;
  animation:glitchSlices 420ms steps(2,end) infinite;
}

.glitchWrap.is-glitching .glitchWord::before{
  text-shadow:-2px 0 rgba(0,255,160,.85);
  clip-path:inset(0 0 55% 0);
}

.glitchWrap.is-glitching .glitchWord::after{
  text-shadow:2px 0 rgba(160,120,255,.85);
  clip-path:inset(45% 0 0 0);
}

.glitchWrap.is-glitching::after{
  content:"";
  position:absolute;
  left:-6px;
  right:-6px;
  top:55%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,255,160,.55), rgba(160,120,255,.55), transparent);
  opacity:.7;
  filter:blur(.2px);
  animation:scan 420ms linear infinite;
  pointer-events:none;
}

@keyframes glitchJitter{
  0%   { transform:translate(0,0) skewX(0deg); }
  15%  { transform:translate(-1px, 0) skewX(-6deg); }
  30%  { transform:translate(1px, -1px) skewX(6deg); }
  45%  { transform:translate(-1px, 1px) skewX(-3deg); }
  60%  { transform:translate(1px, 0) skewX(3deg); }
  75%  { transform:translate(-1px, -1px) skewX(-6deg); }
  100% { transform:translate(0,0) skewX(0deg); }
}

@keyframes glitchSlices{
  0%   { transform:translate(-1px,0); filter:blur(0px); }
  20%  { transform:translate(2px,-1px); filter:blur(.2px); }
  40%  { transform:translate(-2px,1px); filter:blur(.1px); }
  60%  { transform:translate(1px,0); filter:blur(.25px); }
  80%  { transform:translate(-1px,-1px); filter:blur(.15px); }
  100% { transform:translate(0,0); filter:blur(0px); }
}

@keyframes scan{
  0%   { transform:translateY(-2px); opacity:.15; }
  50%  { transform:translateY(2px);  opacity:.65; }
  100% { transform:translateY(-2px); opacity:.15; }
}

@media (prefers-reduced-motion: reduce){
  .glitchWrap.is-glitching .glitchWord,
  .glitchWrap.is-glitching .glitchWord::before,
  .glitchWrap.is-glitching .glitchWord::after,
  .glitchWrap.is-glitching::after{
    animation:none !important;
  }
}
