/* Rotating Words for WPBakery — front-end styles */

.rwwpb-rotating-heading {
	margin: 0;
}
.rwwpb-align-left { text-align: left; }
.rwwpb-align-center { text-align: center; }
.rwwpb-align-right { text-align: right; }

/* The whole component is a fixed, full-width block — never resized or
   repositioned by JS. Alignment is handled entirely by plain text-align
   (inherited from .rwwpb-align-* on the heading), and wrapping is just
   normal text reflow within that fixed width. This is deliberately the
   simplest possible model: every earlier bug (diagonal drift on swap,
   false-positive wrapping, off-center-then-snap) traced back to trying to
   dynamically resize/reposition the box the word lives in. A box that
   never moves can't have any of those problems. */
.rwwpb-rotating-words {
	display: block;
	position: relative;
	width: 100%;
	--rwwpb-duration: 500ms;
	--rwwpb-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.rwwpb-prefix,
.rwwpb-suffix {
	color: inherit;
}

.rwwpb-verb {
	display: block;
	position: relative;
	width: 100%;
	/* No clipping — words are never smaller than their own text, so
	   nothing is ever cropped mid-animation. */
	overflow: visible;
	perspective: 400px; /* used by the Flip style, harmless otherwise */
}

/* Invisible, in-flow element whose only job is to give .rwwpb-verb a real
   height to lay out around, matching however many lines the current word
   wraps onto. The actual visible word(s) are layered on top of it via
   position: absolute, below. Width is always 100% (fixed, never measured
   or animated) — wrapping is just normal text reflow within that. */
.rwwpb-spacer {
	visibility: hidden;
	display: block;
	width: 100%;
}

.rwwpb-word {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: inherit;
	color: var(--rwwpb-accent, currentColor);
	will-change: transform, opacity;
	transition:
		transform var(--rwwpb-duration) var(--rwwpb-ease),
		opacity var(--rwwpb-duration) var(--rwwpb-ease);
}

/* --- rotating word text styling (any combination) --- */
.rwwpb-word-bold .rwwpb-word   { font-weight: 700; }
.rwwpb-word-italic .rwwpb-word { font-style: italic; }

.rwwpb-word-underline .rwwpb-word {
	text-decoration: underline;
	text-decoration-color: var(--rwwpb-underline-color, currentColor);
}

/* Strikethrough uses its own line (not text-decoration) so it can have a
   color independent of the underline above — text-decoration-color would
   otherwise force both to match if a word has both enabled. */
.rwwpb-word-strikethrough .rwwpb-word::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 0.08em;
	background-color: var(--rwwpb-strike-color, currentColor);
	transform: translateY(-50%);
	pointer-events: none;
}

/* --- typewriter style: JS replaces the verb's contents with a plain
       text node + blinking caret; none of the above transform rules apply --- */

[data-animation="typewriter"] .rwwpb-spacer {
	display: none;
}
[data-animation="typewriter"] .rwwpb-word {
	position: static;
	width: auto;
	transform: none;
	opacity: 1;
}
.rwwpb-caret {
	display: inline-block;
	margin-left: 2px;
	color: var(--rwwpb-accent, currentColor);
	animation: rwwpb-blink 0.9s steps(1) infinite;
}
@keyframes rwwpb-blink {
	50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.rwwpb-word,
	.rwwpb-caret {
		transition: none !important;
		animation: none !important;
	}
}