/* GradientText — animated linear-gradient background-clip:text effect, CSS @keyframes driven. */
.gradient-text {
    display: inline-block;
    position: relative;
    background-image: linear-gradient(var(--gt-angle, 90deg), var(--gt-gradient));
    background-size: var(--gt-bg-size, 300% 300%);
    background-position: var(--gt-offset-x, 0px) 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    will-change: background-position;
    animation: gradient-text-flow var(--gt-duration, 4s) linear infinite;
}

.gradient-text.gt-pause-hover:hover {
    animation-play-state: paused;
}

@keyframes gradient-text-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Word-split gradient text: each word is a window into ONE shared gradient sized to the
   full phrase. --gt-offset-x (its pixel offset within the phrase, set by blur-text.js)
   keeps all words visually part of the same continuous sweep instead of animating in
   isolation. --gt-bg-size and the keyframe positions are pixel-based here, not %. */
.gradient-text.gt-word-segment {
    background-size: var(--gt-phrase-width, 100%) 100%;
    animation-name: gradient-text-flow-px;
}

@keyframes gradient-text-flow-px {
    0% { background-position: var(--gt-offset-x, 0px) 50%; }
    100% { background-position: calc(var(--gt-offset-x, 0px) - var(--gt-phrase-width, 0px)) 50%; }
}

/* Optional animated gradient border, synced to the same palette/speed via CSS vars. */
.gradient-text--bordered {
    padding: 0.35em 0.7em;
    border-radius: 0.5em;
}
.gradient-text--bordered::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0.5em;
    padding: 2px;
    background-image: linear-gradient(var(--gt-angle, 90deg), var(--gt-gradient));
    background-size: var(--gt-bg-size, 300% 300%);
    background-position: 0% 50%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: gradient-text-flow var(--gt-duration, 4s) linear infinite;
    pointer-events: none;
}
.gradient-text--bordered.gt-pause-hover:hover::before {
    animation-play-state: paused;
}

/* Preset size classes */
.gradient-text--sm { font-size: 18px; }
.gradient-text--md { font-size: 32px; }
.gradient-text--lg { font-size: 48px; }
.gradient-text--xl { font-size: 64px; }
.gradient-text--2xl { font-size: 80px; }