/* Text Gradient Utilities */

/* .text-gradient {
  background: linear-gradient(90deg, var(--grad1), var(--grad2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
} */

.text-gradient {
    background: linear-gradient(90deg, var(--grad1), var(--grad2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    /* helps prevent collapse */
    background-size: 200%;
    /* ensures smoother spread */
    background-position: left;
}

h2.text-gradient,
h3.text-gradient,
h6.text-gradient {
    font-weight: 700;
    /* stronger weight like in Platform */
    letter-spacing: -0.3px;
    /* subtle balance */
}

.text-gradient-blue {
    background: linear-gradient(90deg, #007bff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-purple {
    background: linear-gradient(90deg, #6f42c1, #d63384);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-orange {
    background: linear-gradient(90deg, #fd7e14, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Optional: darker accent gradient */
.text-gradient-dark {
    background: linear-gradient(90deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Teal & Aqua */
.text-gradient-teal {
    background: linear-gradient(90deg, #2dd4bf, #00cfe8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Purple & Magenta */
.text-gradient-magenta {
    background: linear-gradient(90deg, #7c5cff, #d63384);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Pink & Orange */
.text-gradient-pinkorange {
    background: linear-gradient(90deg, #ff69b4, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Neon Green */
.text-gradient-green {
    background: linear-gradient(90deg, #00ff99, #00cc66);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Deep Blue & Indigo */
.text-gradient-indigo {
    background: linear-gradient(90deg, #1e3a8a, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sunset Gradient (Orange → Pink → Purple) */
.text-gradient-sunset {
    background: linear-gradient(90deg, #ff7e5f, #ffb347, #7c5cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Electric Violet & Cyan */
.text-gradient-electric {
    background: linear-gradient(90deg, #8a2be2, #2dd4bf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gold & Yellow for subtle emphasis */
.text-gradient-gold {
    background: linear-gradient(90deg, #ffd700, #ffc107);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Optional subtle dark accent (like your .text-gradient-dark) */
.text-gradient-dark2 {
    background: linear-gradient(90deg, #3b3b3b, #6c6c6c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-animated {
    background: linear-gradient(90deg, #7c5cff, #2dd4bf, #ff69b4, #ffb347);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    background-size: 200%;
    animation: gradientShift 4s infinite alternate;
}

/* Animation Keyframes */
@keyframes gradientShift {
    0% {
        background-position: left;
    }

    100% {
        background-position: right;
    }
}