/* =========================================
   GLITCH VARIANTS
   Usage: add class to h1.glitch alongside
   e.g. <h1 class="glitch glitch--streak">
   ========================================= */

/* -- Purple / Pink (static) -- */
h1.glitch--purple::before {
  color: #bf5fff;
  opacity: 0.8;
}

h1.glitch--purple::after {
  color: #ff4daa;
  opacity: 0.8;
}

/* -- White / Grey (static) -- */
h1.glitch--mono::before {
  color: #fff;
  opacity: 0.5;
}

h1.glitch--mono::after {
  color: #666;
  opacity: 0.6;
}

/* -- Light grey / Dark grey (static) -- */
h1.glitch--grey::before {
  color: #aaa;
  opacity: 0.55;
}

h1.glitch--grey::after {
  color: #444;
  opacity: 0.65;
}

/* -- Gradient cycling (hue-rotate on gradient text) --
h1.glitch--gradient {
  background: linear-gradient(to right, #0ff, #f0f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: hue-cycle 10s linear infinite;
}

h1.glitch--gradient::before,
h1.glitch--gradient::after {
  display: none;
}

@keyframes hue-cycle {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}
-- */

/* -- Streak: cyan/magenta lines cycling hues through white text -- */
h1.glitch--streak {
  color: var(--white);
}

h1.glitch--streak::before {
  color: #0ff;
  clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
  transform: none;
  opacity: 1;
  animation: glitch-1 3.5s infinite linear, hue-cycle-a 8s linear infinite;
}

h1.glitch--streak::after {
  color: #f0f;
  clip-path: polygon(0 57%, 100% 57%, 100% 77%, 0 77%);
  transform: none;
  opacity: 1;
  animation: glitch-2 3.5s infinite linear, hue-cycle-b 8s linear infinite;
}

@keyframes hue-cycle-a {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

@keyframes hue-cycle-b {
  from { filter: hue-rotate(180deg); }
  to   { filter: hue-rotate(540deg); }
}

/* -- Streak: purple/pink static lines through white text -- */
h1.glitch--streak-pp {
  color: var(--white);
}

h1.glitch--streak-pp::before {
  color: #bf5fff;
  clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
  transform: none;
  opacity: 1;
  animation: glitch-1 3.5s infinite linear;
}

h1.glitch--streak-pp::after {
  color: #ff4daa;
  clip-path: polygon(0 57%, 100% 57%, 100% 77%, 0 77%);
  transform: none;
  opacity: 1;
  animation: glitch-2 3.5s infinite linear;
}