/* ===== Stack / Glitch Title ===== */
.stack span {
  font-weight: 700;
  grid-row: 1;
  grid-column: 1;
  font-size: 4rem;
  --stack-height: calc(100% / var(--stacks) - 1px);
  --inverse-index: calc(var(--stacks) - 1 - var(--index));
  --clip-top: calc(var(--stack-height) * var(--index));
  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
  animation:
    stack 340ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms),
    glitch 2s ease 2s infinite alternate-reverse;
}
.stack span:nth-child(odd) { --glitch-translate: 8px; }
.stack span:nth-child(even){ --glitch-translate: -8px; }

@keyframes stack {
  0% { opacity: 0; transform: translateX(-50%); text-shadow: -2px 3px 0 red, 2px -3px 0 blue; }
  60%{ opacity: .5; transform: translateX(50%); }
  80%{ opacity: 1; transform: none; text-shadow: 2px -3px 0 red, -2px 3px 0 blue; }
  100%{ text-shadow: none; }
}
@keyframes glitch {
  0%  { text-shadow: -2px 3px 0 red, 2px -3px 0 blue; transform: translate(var(--glitch-translate)); }
  2%  { text-shadow:  2px -3px 0 red, -2px 3px 0 blue; }
  4%,100% { text-shadow: none; transform: none; }
}


/* ===== Glitch Button ===== */
.glitch, button::after {
    width: 100%;
    height: 30px;
    color: #fff;
    letter-spacing: 3px;
    line-height: 10px;
    background: linear-gradient(45deg, transparent 5%, #FF013C 5%);
    border: 0;
    outline: transparent;
    box-shadow: 6px 0 0 #00E6F6;
    position: relative;
  }
  
  .glitch::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    content: 'd#####0011001';
    position: absolute; inset: 0;
    background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #FF013C 5%);
    text-shadow: -3px -3px 0 #F8F005, 3px 3px 0 #00E6F6;
    clip-path: var(--slice-0);
  }
  .glitch:hover::after { animation: glitch 1s steps(2, end); }
  
  @keyframes glitch {
    0%  { clip-path: var(--slice-1); transform: translate(-20px,-10px); }
    10% { clip-path: var(--slice-3); transform: translate(10px,10px); }
    20% { clip-path: var(--slice-1); transform: translate(-10px,10px); }
    30% { clip-path: var(--slice-3); transform: translate(0,5px); }
    40% { clip-path: var(--slice-2); transform: translate(-5px,0); }
    50% { clip-path: var(--slice-3); transform: translate(5px,0); }
    60% { clip-path: var(--slice-4); transform: translate(5px,10px); }
    70% { clip-path: var(--slice-2); transform: translate(-10px,10px); }
    80% { clip-path: var(--slice-5); transform: translate(20px,-10px); }
    90% { clip-path: var(--slice-1); transform: translate(-10px,0); }
    100%{ clip-path: var(--slice-1); transform: translate(0); }
  }