/* ---------- Text Gradient Utilities ---------- */
.text-gradient {
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glitch-gradient 4s linear infinite;
  }
  .text-aqua-green { background-image: linear-gradient(90deg, #0ff, #00ff9d, #0ff); }
  .text-sky-blue { background-image: linear-gradient(90deg, #5ad1ff, #89f7fe, #5ad1ff); }
  .text-orange { background-image: linear-gradient(90deg, #ff9a3c, #ff6a00, #ff9a3c); }
  .text-yellow { background-image: linear-gradient(90deg, #fff500, #ffd700, #fff500); }
  .text-pale-yellow { background-image: linear-gradient(90deg, #fff9c4, #fff3a0, #fff9c4); }
  .text-purple { background-image: linear-gradient(90deg, #b677ff, #6a00ff, #b677ff); }
  .text-red { background-image: linear-gradient(90deg, #ff5f5f, #ff0000, #ff5f5f); }
  .text-peach-pink { background-image: linear-gradient(90deg, #ffc1a1, #ff9bb5, #ffc1a1); }
  .text-blue-white-gray { background-image: linear-gradient(90deg, #4fa3ff, #ffffff, #a0a7b5); }
  .text-black-purple { background-image: linear-gradient(90deg, #000000, #3b004e, #000000); }
  .text-black { background-image: linear-gradient(90deg, #000000, #333333, #000000); }
  .text-pale-pink { background-image: linear-gradient(90deg, #ffd6e8, #ffb6d9, #ffd6e8); }
  .text-gray { background-image: linear-gradient(90deg, #c1c6d0, #858a94, #c1c6d0); }
  @keyframes glitch-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  h1.text-gradient, h2.text-gradient, h3.text-gradient {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.7), 0 0 4px rgba(0, 0, 0, 0.7);
  }
  
  

  /* ==================== TEXT EFFECTS ==================== */
.text-rainbow {
    background: linear-gradient(90deg, #ff0040, #ff9a00, #fff700, #00ff85, #00c8ff, #a600ff, #ff0040);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-shift 8s linear infinite;
  }
  @keyframes rainbow-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
  
  .text-shakey { display: inline-block; animation: text-shake 0.18s infinite; transform-origin: center; }
  @keyframes text-shake {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-0.5px, 0.5px) rotate(-1deg); }
    50% { transform: translate(0.8px, -0.6px) rotate(1deg); }
    75% { transform: translate(-0.4px, 0.4px) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }
  
  .text-glow {
    color: #fff;
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.6),
      0 0 10px rgba(0, 255, 255, 0.7),
      0 0 18px rgba(0, 180, 255, 0.7);
  }
  
  .text-typewriter {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid var(--accent);
    animation: typewriter 3s steps(30, end) 1, caret-blink 0.8s step-end infinite;
  }
  @keyframes typewriter { from { width: 0; } to { width: 100%; } }
  @keyframes caret-blink { 0%, 100% { border-color: transparent; } 50% { border-color: var(--accent); } }
  
  .text-float { display: inline-block; animation: text-float 3s ease-in-out infinite; }
  @keyframes text-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  
  .text-pulse { display: inline-block; animation: text-pulse 1.4s ease-in-out infinite; }
  @keyframes text-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } }