/* ============================================
   PRETpot Text Twirl Effect Widget – Pure Hover
   ============================================ */

.pretpot-text-twirl {
    display: block;
    width: 100%;
    position: relative;
    perspective: 800px;
    perspective-origin: center;
    /* Typography and alignment inherited */
}

.pretpot-text-twirl__inner {
    display: inline-block;
    white-space: nowrap;
}

.pretpot-text-twirl__char {
    display: inline-block;
    transition: transform var(--twirl-duration, 0.6s) cubic-bezier(0.76, 0, 0.24, 1),
                opacity var(--twirl-duration, 0.6s) cubic-bezier(0.76, 0, 0.24, 1),
                color 0.3s ease;
    transform-origin: center bottom;
    will-change: transform, opacity, color;
    transform: rotateX(0deg) translateY(0);
    opacity: 1;
    margin: 0;
    padding: 0;
}

/* Space characters – preserve width */
.pretpot-text-twirl__char.is-space {
    white-space: pre;
}

/* THE TWIRL EFFECT ON HOVER */
.pretpot-text-twirl:hover .pretpot-text-twirl__char {
    transform: var(--twirl-transform, rotateX(360deg) translateY(-2px));
    opacity: var(--twirl-opacity, 0.8);
}

/* Alignment classes (fallback) */
.pretpot-text-twirl--align-left {
    text-align: left;
}
.pretpot-text-twirl--align-center {
    text-align: center;
}
.pretpot-text-twirl--align-right {
    text-align: right;
}