/* =======================================================
   GRADIENT TEXT UTILITIES - Trinity College
   Modular standalone gradient styles for headings & labels
========================================================== */

/* Base gradient class */
.text-gradient {
    background: linear-gradient(90deg, var(--grad1), var(--grad2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    background-size: 220%;
    background-position: left;
    transition: background-position .4s ease;
}
.text-gradient:hover {
    background-position: right;
}

/* Weight & Typography enhancements */
h2.text-gradient,
h3.text-gradient,
h4.text-gradient,
h5.text-gradient {
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* ----------------------------
   PREDEFINED COLOR PALETTES
---------------------------- */

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

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

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

/* Deep Blue → Cyan-dark */
.text-gradient-dark {
    background: linear-gradient(90deg, #0d6efd, #0dcaf0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

/* Pink → Orange Sunset */
.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;
}

.text-gradient-green-dark {
    background: linear-gradient(90deg, #006644, #00cc66);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-green-neon {
    background: linear-gradient(90deg, #003f2e, #00ff77);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


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

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

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

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

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

/* Animated Multicolor */
.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: 300%;
    animation: gradientShift 5s infinite alternate ease-in-out;
}

@keyframes gradientShift {
    0% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}