/* WordFlow Frontend Styles */
.wordflow {
	display: inline;
	line-height: 1.4;
	font-size: clamp(16px, 5vw, 48px);
}

.wordflow-fixed,
.wordflow-suffix {
	display: inline;
}

.wordflow-rotating {
	display: inline-block;
	position: relative;
	overflow: hidden;
	vertical-align: bottom;
	min-width: 1em;
	min-height: 1.2em;
}

.wordflow-word {
	display: inline-block;
	white-space: nowrap;
	transition: all 0.4s ease;
}

/* Strong mobile overrides */
@media (max-width: 768px) {
	.wordflow {
		font-size: clamp(18px, 6vw, 36px) !important;
		line-height: 1.3;
	}
	.wordflow-rotating {
		min-height: 1.1em;
	}
}

@media (max-width: 480px) {
	.wordflow {
		font-size: clamp(16px, 7vw, 28px) !important;
		line-height: 1.25;
	}
	.wordflow-word {
		white-space: normal;
		word-break: break-word;
	}
}

/* Effect: Rotate (default - fade + slight slide) */
.wordflow-word.effect-rotate {
	animation: fw-rotate 0.5s ease;
}

@keyframes fw-rotate {
	0% { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Wipe Right to Left */
.wordflow-word.effect-wipe-rtl {
	animation: fw-wipe-rtl 0.6s ease;
	clip-path: inset(0 0 0 0);
}

@keyframes fw-wipe-rtl {
	0% { clip-path: inset(0 100% 0 0); opacity: 0.3; }
	100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Wipe Left to Right */
.wordflow-word.effect-wipe-ltr {
	animation: fw-wipe-ltr 0.6s ease;
}

@keyframes fw-wipe-ltr {
	0% { clip-path: inset(0 0 0 100%); opacity: 0.3; }
	100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Zoom */
.wordflow-word.effect-zoom {
	animation: fw-zoom 0.5s ease;
}

@keyframes fw-zoom {
	0% { transform: scale(0.3); opacity: 0; }
	60% { transform: scale(1.1); }
	100% { transform: scale(1); opacity: 1; }
}

/* Explode */
.wordflow-word.effect-explode {
	animation: fw-explode 0.6s ease;
}

@keyframes fw-explode {
	0% { transform: scale(0); opacity: 0; filter: blur(4px); }
	50% { transform: scale(1.3); opacity: 0.8; filter: blur(0); }
	100% { transform: scale(1); opacity: 1; }
}

/* Shake */
.wordflow-word.effect-shake {
	animation: fw-shake 0.5s ease;
}

@keyframes fw-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-8px); }
	40% { transform: translateX(8px); }
	60% { transform: translateX(-5px); }
	80% { transform: translateX(5px); }
}

/* Fade */
.wordflow-word.effect-fade {
	animation: fw-fade 0.5s ease;
}

@keyframes fw-fade {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* Bounce */
.wordflow-word.effect-bounce {
	animation: fw-bounce 0.6s ease;
}

@keyframes fw-bounce {
	0% { transform: translateY(-20px); opacity: 0; }
	50% { transform: translateY(5px); }
	100% { transform: translateY(0); opacity: 1; }
}

/* Flip */
.wordflow-word.effect-flip {
	animation: fw-flip 0.6s ease;
	transform-style: preserve-3d;
}

@keyframes fw-flip {
	0% { transform: rotateX(90deg); opacity: 0; }
	100% { transform: rotateX(0); opacity: 1; }
}

/* Slide Up */
.wordflow-word.effect-slide-up {
	animation: fw-slide-up 0.5s ease;
}

@keyframes fw-slide-up {
	0% { transform: translateY(100%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* Slide Down */
.wordflow-word.effect-slide-down {
	animation: fw-slide-down 0.5s ease;
}

@keyframes fw-slide-down {
	0% { transform: translateY(-100%); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

/* Typewriter */
.wordflow-word.effect-typewriter {
	animation: fw-typewriter 0.8s steps(20, end);
	overflow: hidden;
	white-space: nowrap;
	border-right: 2px solid currentColor;
}

@keyframes fw-typewriter {
	0% { width: 0; opacity: 0; }
	100% { width: 100%; opacity: 1; }
}

/* Blur In */
.wordflow-word.effect-blur-in {
	animation: fw-blur-in 0.6s ease;
}

@keyframes fw-blur-in {
	0% { filter: blur(12px); opacity: 0; transform: scale(1.1); }
	100% { filter: blur(0); opacity: 1; transform: scale(1); }
}

/* Scale + Rotate */
.wordflow-word.effect-scale-rotate {
	animation: fw-scale-rotate 0.6s ease;
}

@keyframes fw-scale-rotate {
	0% { transform: scale(0.2) rotate(-30deg); opacity: 0; }
	100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Elastic */
.wordflow-word.effect-elastic {
	animation: fw-elastic 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes fw-elastic {
	0% { transform: scale(0.3); opacity: 0; }
	50% { transform: scale(1.15); }
	100% { transform: scale(1); opacity: 1; }
}

/* Glitch */
.wordflow-word.effect-glitch {
	animation: fw-glitch 0.4s linear;
}

@keyframes fw-glitch {
	0% { transform: translate(0); }
	20% { transform: translate(-3px, 2px); }
	40% { transform: translate(3px, -2px); }
	60% { transform: translate(-2px, -1px); }
	80% { transform: translate(2px, 1px); }
	100% { transform: translate(0); opacity: 1; }
}

/* Exit animations can be added via JS class swapping if needed */
.wordflow-word.exiting {
	opacity: 0;
	transform: translateY(-10px);
}