Glitch Type

:root {
      --ink: #050607;
      --acid: #c8ff3d;
      --pink: #ff4d9a;
      --cyan: #3de8ff;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: var(--ink);
      font-family: "Segoe UI", system-ui, sans-serif;
      color: #fff;
      padding: 2rem;
    }

    .wrap {
      max-width: 820px;
      text-align: left;
    }

    .kicker {
      font-size: 0.75rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.4);
      margin-bottom: 1.25rem;
    }

    .title {
      font-size: clamp(2.5rem, 9vw, 5.5rem);
      font-weight: 950;
      letter-spacing: -0.05em;
      line-height: 0.95;
      position: relative;
      min-height: 1.1em;
    }

    .title .typed {
      display: inline;
      border-right: 3px solid var(--acid);
      padding-right: 4px;
      animation: caret 0.8s steps(1) infinite;
    }

    @keyframes caret {
      50% { border-color: transparent; }
    }

    .glitch {
      position: relative;
      display: inline-block;
    }

    .glitch[data-text]::before,
    .glitch[data-text]::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
    }

    .glitch.is-on::before {
      color: var(--cyan);
      opacity: 0.8;
      transform: translate(3px, -1px);
      clip-path: inset(0 0 55% 0);
      animation: g1 0.4s infinite linear alternate-reverse;
    }

    .glitch.is-on::after {
      color: var(--pink);
      opacity: 0.8;
      transform: translate(-3px, 1px);
      clip-path: inset(45% 0 0 0);
      animation: g2 0.35s infinite linear alternate-reverse;
    }

    @keyframes g1 {
      0% { clip-path: inset(20% 0 50% 0); }
      100% { clip-path: inset(60% 0 10% 0); }
    }

    @keyframes g2 {
      0% { clip-path: inset(50% 0 20% 0); }
      100% { clip-path: inset(10% 0 60% 0); }
    }

    .desc {
      margin-top: 1.5rem;
      color: rgba(255, 255, 255, 0.5);
      font-size: 1.1rem;
      max-width: 38ch;
      line-height: 1.65;
    }

    .btn {
      display: inline-flex;
      margin-top: 2rem;
      padding: 1rem 1.8rem;
      border-radius: 999px;
      background: var(--acid);
      color: #06100a;
      font-weight: 850;
      text-decoration: none;
      box-shadow: 0 0 40px rgba(200, 255, 61, 0.3);
      transition: transform 0.2s ease;
    }

    .btn:hover { transform: scale(1.03); }