/**
 * Dataphiles Dynamic Text Widget Styles
 *
 * @package Dataphiles
 * @since 1.0.3
 */

.dataphiles-dynamic-text {
	position: relative;
	overflow: visible;
	/* Add padding to accommodate animation start position */
	padding-top: var(--drop-distance, 50px);
	margin-top: calc(var(--drop-distance, 50px) * -1);
}

.dataphiles-dynamic-text__entry {
	position: relative;
	width: 100%;
}

.dataphiles-dynamic-text__impact-wrapper {
	position: relative;
	display: inline-flex;
	/* Width controlled by text-align on parent */
}

.dataphiles-dynamic-text__impact {
	margin: 0;
	padding: 0;
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: ease-out;
	visibility: visible;
}

.dataphiles-dynamic-text__subline {
	margin: 0;
	padding: 0;
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: ease-out;
	visibility: visible;
	width: 100%;
}

/* Image inside impact element - use inline-block for text-align to work */
.dataphiles-dynamic-text__impact img {
	display: inline-block;
	height: auto;
	max-width: 100%;
}

/* SVG sizing - provide default dimensions (overridden by Elementor width control) */
.dataphiles-dynamic-text__impact img[src$=".svg"] {
	width: 200px;
	height: auto;
}

.dataphiles-dynamic-text__impact svg {
	display: inline-block;
	width: 200px;
	height: auto;
}

/* Object element for SVG (enables embedded JS animations) */
.dataphiles-dynamic-text__impact object {
	display: inline-block;
	width: 200px;
	height: auto;
	max-width: 100%;
	pointer-events: none; /* Allow clicks to pass through to parent if needed */
}

/* Enter from top (drop down) - starts above */
.dataphiles-dynamic-text[data-enter-direction="down"] .dataphiles-dynamic-text__impact,
.dataphiles-dynamic-text[data-enter-direction="down"] .dataphiles-dynamic-text__subline {
	transform: translateY(calc(var(--drop-distance, 50px) * -1));
}

/* Enter from bottom (rise up) - starts below */
.dataphiles-dynamic-text[data-enter-direction="up"] .dataphiles-dynamic-text__impact,
.dataphiles-dynamic-text[data-enter-direction="up"] .dataphiles-dynamic-text__subline {
	transform: translateY(var(--drop-distance, 50px));
}

/* Visible state - centered (higher specificity to override enter direction) */
.dataphiles-dynamic-text .dataphiles-dynamic-text__impact.is-visible,
.dataphiles-dynamic-text .dataphiles-dynamic-text__subline.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Exit down - drops below (higher specificity to override enter direction) */
.dataphiles-dynamic-text .dataphiles-dynamic-text__impact.is-exiting-down,
.dataphiles-dynamic-text .dataphiles-dynamic-text__subline.is-exiting-down {
	opacity: 0;
	transform: translateY(var(--drop-distance, 50px));
}

/* Exit up - rises above (higher specificity to override enter direction) */
.dataphiles-dynamic-text .dataphiles-dynamic-text__impact.is-exiting-up,
.dataphiles-dynamic-text .dataphiles-dynamic-text__subline.is-exiting-up {
	opacity: 0;
	transform: translateY(calc(var(--drop-distance, 50px) * -1));
}

/* Pause animation on hover when enabled */
.dataphiles-dynamic-text.is-paused .dataphiles-dynamic-text__impact,
.dataphiles-dynamic-text.is-paused .dataphiles-dynamic-text__subline {
	transition: none;
}

/* Editor preview - always visible (high specificity to override all animation states) */
.dataphiles-dynamic-text .dataphiles-dynamic-text__entry--editor .dataphiles-dynamic-text__impact--visible,
.dataphiles-dynamic-text .dataphiles-dynamic-text__entry--editor .dataphiles-dynamic-text__subline--visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Editor preview note */
.dataphiles-dynamic-text__preview-note {
	font-size: 12px;
	color: #999;
	margin-top: 10px;
	font-style: italic;
	text-align: center;
}

/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
	.dataphiles-dynamic-text__impact,
	.dataphiles-dynamic-text__subline {
		transition-duration: 0.01ms !important;
	}
}