/* ==========================================
   ROTATING TEXT EFFECT
   ========================================== */

.text-rotate {
    display: inline-flex;
    flex-wrap: wrap;
    white-space: pre-wrap;
    position: relative;
    vertical-align: bottom;
    /* Optional width if you want to prevent layout jumps on word changing */
}

.text-rotate-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-rotate-word {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    /* Hide characters before they spring up */
}

.text-rotate-lines {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.text-rotate-element {
    display: inline-block;
    /* Initial state matching typical framer motion initial={y: "100%", opacity: 0} */
    transform: translateY(100%);
    opacity: 0;
    white-space: pre;
}

/* 
 * The JavaScript will apply these classes dynamically 
 * to handle the enter/exit animations.
 */
.text-rotate-element.is-entering {
    /* Spring-like transition equivalent */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.6s ease;
    transform: translateY(0);
    opacity: 1;
}

.text-rotate-element.is-exiting {
    /* Fast exit going upwards */
    transition: transform 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53),
        opacity 0.4s ease;
    transform: translateY(-120%);
    opacity: 0;
}

.text-rotate-space {
    white-space: pre;
    display: inline-block;
}

/* Gradient text application specifically for the hero title if used there */
.hero-title .text-rotate {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-flex;
}