/**
 * Rotating Text Component Styles
 *
 * @package Imagemakers\Project
 */

/* Base Component Styles - Mobile First */
.rotating-text-component {
	background: #1c2e45;
	padding: calc(var(--block-margin) * 2) 0;
	position: relative;
	text-align: center;
	width: 100%;
}

.simple-page .rotating-text-component {
	left: 50%;
	transform: translateX(-50%);
	width: 100dvw;
}

.rotating-text-component::before {
	background: url('/app/themes/lovekansas/dist/images/love-kansas-texture.webp') top center;
	content: "";
	display: block;
	height: 100%;
	left: 0;
	mix-blend-mode: color-burn;
	position: absolute;
	top: 0;
	width: 100%;
	opacity: 0.6;
}

.rotating-text-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5rem 0.75rem 0;
}

/* Pre-Headline Styles - text-align comes from .rotating-text-component[data-text-alignment] */
.rotating-text-pre-headline {
	color: #969696;
	font-size: .875rem;
	line-height: 1.2em;
	margin: 0;
	text-align: center;
}

/* Main Rotating Text Container - Full Width */
.rotating-text-main {
	position: relative;
	min-height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .5rem 0 1rem 0;
	overflow: hidden;
}

.rotating-text-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Rotating Text Items */
.rotating-text-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	font-size: clamp(1.25rem, 12vw, 2.5rem);
	font-weight: 700;
	line-height: 1.3;
	color: #ffffff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
	white-space: normal;
	word-wrap: break-word;
	hyphens: auto;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rotating-text-item--active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

/* Animation: Fade */
.rotating-text-component[data-animation-style="fade"] .rotating-text-item {
	transform: translateY(0);
}

.rotating-text-component[data-animation-style="fade"] .rotating-text-item--active {
	opacity: 1;
}

/* Animation: Slide Up */
.rotating-text-component[data-animation-style="slide-up"] .rotating-text-item {
	transform: translateY(30px);
}

.rotating-text-component[data-animation-style="slide-up"] .rotating-text-item--active {
	transform: translateY(0);
	opacity: 1;
}

/* Animation: Slide Down */
.rotating-text-component[data-animation-style="slide-down"] .rotating-text-item {
	transform: translateY(-30px);
}

.rotating-text-component[data-animation-style="slide-down"] .rotating-text-item--active {
	transform: translateY(0);
	opacity: 1;
}

/* Text Alignment - applied to component, scroll container, and pre-headline */
.rotating-text-component[data-text-alignment="left"] {
	text-align: left;
}

.rotating-text-component[data-text-alignment="left"] .rotating-text-scroll-container {
	text-align: left;
}

.rotating-text-component[data-text-alignment="left"] .rotating-text-pre-headline {
	text-align: left;
}

.rotating-text-component[data-text-alignment="center"] {
	text-align: center;
}

.rotating-text-component[data-text-alignment="center"] .rotating-text-scroll-container {
	text-align: center;
}

.rotating-text-component[data-text-alignment="center"] .rotating-text-pre-headline {
	text-align: center;
}

.rotating-text-component[data-text-alignment="right"] {
	text-align: right;
}

.rotating-text-component[data-text-alignment="right"] .rotating-text-scroll-container {
	text-align: right;
}

.rotating-text-component[data-text-alignment="right"] .rotating-text-pre-headline {
	text-align: right;
}

/* Scrolling Text Styles */
.rotating-text-scroll-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	opacity: 0;
	transform: translateY(0.75em);
	transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;
}

.rotating-text-scroll-container.is-ready {
	opacity: 1;
	transform: translateY(0);
}

.rotating-text-scroll-wrapper {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-family: var(--font-heading);
	font-size: 3.75rem;
	font-weight: 500;
	line-height: 1.25em;
	white-space: nowrap;
	will-change: transform;
}

.rotating-text-scroll-group {
	display: inline-flex;
	font-size: inherit;
	margin: 0;
	padding: 0 .35em;
	vertical-align: top;
}

.rotating-text-scroll-item,
.rotating-text-scroll-separator {
	display: inline-block;
	font-size: inherit;
	margin: 0;
	vertical-align: top;
}

.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-item {
	padding: 0 .075em;
}

.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-separator {
	padding: 0 0.075em;
}

/* Scrolling Animation - Duration controlled by JavaScript */
.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-wrapper {
	animation-duration: var(--scroll-duration, 20s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* Pause animation initially until JavaScript sets the correct duration */
	/* Play state is controlled by JavaScript to prevent initial jump */
	animation-play-state: paused;
}

/* Continuous Loop - Seamless infinite scrolling */
.rotating-text-component[data-scroll-type="continuous"] .rotating-text-scroll-wrapper {
	animation-name: scroll-text-continuous;
}

@keyframes scroll-text-continuous {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(var(--scroll-distance, -50%));
	}
}

/* Continuous Loop - First run: center to left; then reappear from right, scroll to left; repeat */
.rotating-text-component[data-scroll-type="continuous-loop"]:not([data-continuous-loop-phase="loop"]) .rotating-text-scroll-wrapper {
	animation-name: scroll-text-continuous-loop-first;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@keyframes scroll-text-continuous-loop-first {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

.rotating-text-component[data-scroll-type="continuous-loop"][data-continuous-loop-phase="loop"] .rotating-text-scroll-wrapper {
	animation-name: scroll-text-continuous-loop;
	animation-duration: var(--scroll-duration-loop, 40s);
	animation-iteration-count: infinite;
}

@keyframes scroll-text-continuous-loop {
	0% {
		transform: translateX(var(--scroll-loop-start, 100%)) translateY(0);
	}
	100% {
		transform: translateX(-100%) translateY(0);
	}
}

/* Restart - Scroll to end then restart */
.rotating-text-component[data-scroll-type="restart"] .rotating-text-scroll-wrapper {
	animation-name: scroll-text-restart-mobile;
	animation-iteration-count: infinite;
}

@keyframes scroll-text-restart {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(var(--scroll-distance, -100%));
	}
}

@keyframes scroll-text-restart-mobile {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* Tablet Styles (481px and up) */
@media (min-width: 481px) {
	.rotating-text-inner {
		padding: 2rem 1rem 0;
	}

	.rotating-text-main {
		min-height: 3rem;
		padding: 0 0 1.5rem;
	}

	.rotating-text-item {
		font-size: clamp(1.5rem, 10vw, 3rem);
	}

	.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-wrapper {
		/* Keep scrolling animation on tablet */
		display: inline-flex;
		white-space: nowrap;
	}

	.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-separator {
		display: inline-block;
		padding: 0 0.75rem;
		font-size: clamp(1.5rem, 8vw, 3rem);
	}

	.rotating-text-component[data-animation-style="scroll"] .rotating-text-main {
		min-height: 2.5rem;
	}
}

/* Desktop Styles */
@media (min-width: 768px) {
	.rotating-text-inner {
		padding: 3rem 1.5rem 0;
	}

	.rotating-text-pre-headline {
		font-size: 1rem;
	}

	.rotating-text-main {
		min-height: 4rem;
		padding: 0 0 2rem;
	}

	.rotating-text-item {
		font-size: clamp(2rem, 8vw, 5rem);
		line-height: 1.2;
		white-space: nowrap;
		word-wrap: normal;
		hyphens: none;
	}

	.rotating-text-scroll-wrapper {
		font-size: 3.75rem;
	}

	.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-item {
		display: inline-block;
		font-size: inherit;
	}

	.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-separator {
		font-size: inherit;
	}

	.rotating-text-component[data-animation-style="scroll"] .rotating-text-main {
		min-height: auto;
	}

	.rotating-text-component[data-scroll-type="restart"] .rotating-text-scroll-wrapper {
		animation-name: scroll-text-restart;
	}
}

/* Admin/Editor Styles - Ensure restart uses -100% */
.editor-styles-wrapper .rotating-text-component[data-scroll-type="restart"] .rotating-text-scroll-wrapper,
.block-editor .rotating-text-component[data-scroll-type="restart"] .rotating-text-scroll-wrapper {
	animation-name: scroll-text-restart-admin;
}

@keyframes scroll-text-restart-admin {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.rotating-text-item {
		transition: opacity 0.3s ease-in-out;
		transform: none !important;
	}

	.rotating-text-component[data-animation-style="slide-up"] .rotating-text-item,
	.rotating-text-component[data-animation-style="slide-down"] .rotating-text-item {
		transform: none !important;
	}

	.rotating-text-component[data-animation-style="scroll"] .rotating-text-scroll-wrapper {
		animation: none !important;
	}
}

/* Preview Mode Styles */
.rotating-text-component--preview {
	background-color: #f5f5f5;
	border: 2px dashed #ccc;
}

/* Focus Styles for Accessibility */
.rotating-text-main:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
	border-radius: 4px;
}

@media (width >= 640px) {
	.rotating-text-scroll-wrapper {
		font-size: 5.5rem;
	}
}

@media (width >= 768px) {
	.rotating-text-scroll-wrapper {
		font-size: 7.25rem;
	}
}

@media (width >= 1024px) {
	.rotating-text-inner {
		margin: 0 auto -1rem;
	}

	.rotating-text-pre-headline {
		font-size: 1.125rem;
	}

	.rotating-text-scroll-wrapper {
		font-size: 9rem;
	}
}

@media (width >= 1200px) {
	.rotating-text-scroll-wrapper {
		font-size: 10.75rem;
	}
}

@media (width >= 1536px) {
	.rotating-text-inner {
		margin: 0 auto -1.5rem;
	}

	.rotating-text-scroll-wrapper {
		font-size: 12.5rem;
	}
}