/**
 * Packitly Marquee Block Styles
 *
 * GPU-accelerated infinite scrolling marquee banner styles with responsive layout,
 * edge gradient fade masks, rich child items, and Gutenberg editor support.
 *
 * @package Packitly
 * @since 1.0.0
 */

/* ==========================================================================
   1. CSS ANIMATION KEYFRAMES
   ========================================================================== */
@keyframes packitly-marquee-scroll-left {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes packitly-marquee-scroll-right {
	0% {
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes packitly-marquee-scroll-up {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, -100%, 0);
	}
}

@keyframes packitly-marquee-scroll-down {
	0% {
		transform: translate3d(0, -100%, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* ==========================================================================
   2. MARQUEE CONTAINER WRAPPER
   ========================================================================== */
.packitly-marquee-wrapper {
	position: relative;
	overflow: hidden;
	display: flex;
	width: 100%;
	max-width: var(--packitly-marquee-max-width, 100%);
	min-height: var(--packitly-marquee-min-height, auto);
	margin-left: auto;
	margin-right: auto;
	background: var(--packitly-marquee-bg, #111827);
	color: var(--packitly-marquee-color, #ffffff);
	font-size: var(--packitly-marquee-font-size, 15px);
	font-weight: var(--packitly-marquee-font-weight, 500);
	text-transform: var(--packitly-marquee-text-transform, none);
	letter-spacing: var(--packitly-marquee-letter-spacing, 0px);
	line-height: var(--packitly-marquee-line-height, 1.5);
	padding-top: var(--packitly-marquee-padding-top, 14px);
	padding-bottom: var(--packitly-marquee-padding-bottom, 14px);
	padding-left: var(--packitly-marquee-padding-left, 0px);
	padding-right: var(--packitly-marquee-padding-right, 0px);
	border-radius: var(--packitly-marquee-border-radius, 0px);
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

/* Vertical alignments */
.packitly-marquee-wrapper.valign-center {
	align-items: center;
}
.packitly-marquee-wrapper.valign-flex-start {
	align-items: flex-start;
}
.packitly-marquee-wrapper.valign-flex-end {
	align-items: flex-end;
}
.packitly-marquee-wrapper.valign-stretch {
	align-items: stretch;
}

/* Borders */
.packitly-marquee-wrapper.has-border-top {
	border-top: var(--packitly-marquee-border-width, 1px) solid var(--packitly-marquee-border-color, rgba(255, 255, 255, 0.12));
}
.packitly-marquee-wrapper.has-border-bottom {
	border-bottom: var(--packitly-marquee-border-width, 1px) solid var(--packitly-marquee-border-color, rgba(255, 255, 255, 0.12));
}

/* Edge Gradient Fade Mask (Horizontal) */
.packitly-marquee-wrapper.has-edge-fade:not(.direction-up):not(.direction-down) {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--packitly-marquee-fade-width, 60px),
		black calc(100% - var(--packitly-marquee-fade-width, 60px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--packitly-marquee-fade-width, 60px),
		black calc(100% - var(--packitly-marquee-fade-width, 60px)),
		transparent 100%
	);
}

/* Edge Gradient Fade Mask (Vertical) */
.packitly-marquee-wrapper.has-edge-fade.direction-up,
.packitly-marquee-wrapper.has-edge-fade.direction-down {
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black var(--packitly-marquee-fade-width, 60px),
		black calc(100% - var(--packitly-marquee-fade-width, 60px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		black var(--packitly-marquee-fade-width, 60px),
		black calc(100% - var(--packitly-marquee-fade-width, 60px)),
		transparent 100%
	);
}

/* ==========================================================================
   3. MARQUEE INNER TRACK & MOTION
   ========================================================================== */
.packitly-marquee-inner {
	display: flex;
	width: max-content;
	flex-wrap: nowrap;
	align-items: center;
	will-change: transform;
}

/* Vertical track inner */
.packitly-marquee-wrapper.direction-up .packitly-marquee-inner,
.packitly-marquee-wrapper.direction-down .packitly-marquee-inner {
	flex-direction: column;
	width: 100%;
	height: max-content;
}

/* Individual track */
.packitly-marquee-track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--packitly-marquee-gap, 40px);
	padding-right: var(--packitly-marquee-gap, 40px);
	animation-duration: var(--packitly-marquee-speed, 25s);
	animation-timing-function: var(--packitly-marquee-timing, linear);
	animation-iteration-count: infinite;
}

/* Direction animations */
.packitly-marquee-wrapper.direction-left .packitly-marquee-track {
	animation-name: packitly-marquee-scroll-left;
}

.packitly-marquee-wrapper.direction-right .packitly-marquee-track {
	animation-name: packitly-marquee-scroll-right;
}

.packitly-marquee-wrapper.direction-up .packitly-marquee-track {
	flex-direction: column;
	padding-right: 0;
	padding-bottom: var(--packitly-marquee-gap, 40px);
	animation-name: packitly-marquee-scroll-up;
}

.packitly-marquee-wrapper.direction-down .packitly-marquee-track {
	flex-direction: column;
	padding-right: 0;
	padding-bottom: var(--packitly-marquee-gap, 40px);
	animation-name: packitly-marquee-scroll-down;
}

/* Track content wrapper */
.packitly-marquee-content {
	display: flex;
	align-items: center;
	gap: var(--packitly-marquee-gap, 40px);
	white-space: nowrap;
}

.packitly-marquee-wrapper.direction-up .packitly-marquee-content,
.packitly-marquee-wrapper.direction-down .packitly-marquee-content {
	flex-direction: column;
	white-space: normal;
	text-align: center;
}

/* Pause on hover */
.packitly-marquee-wrapper.has-pause-on-hover:hover .packitly-marquee-track,
.packitly-marquee-wrapper.is-paused .packitly-marquee-track {
	animation-play-state: paused !important;
}

/* Reverse on hover */
.packitly-marquee-wrapper.has-reverse-on-hover:hover .packitly-marquee-track {
	animation-direction: reverse !important;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.packitly-marquee-wrapper.respect-reduced-motion .packitly-marquee-track {
		animation: none !important;
	}
}

/* ==========================================================================
   4. MARQUEE ITEMS & INNER BLOCKS
   ========================================================================== */
.packitly-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}

.packitly-marquee-item.is-link {
	cursor: pointer;
}

.packitly-marquee-item.is-link:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.packitly-marquee-item.has-bg-pill {
	padding: 6px 14px;
	border-radius: 9999px;
}

/* Item Badge */
.packitly-marquee-item-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 9999px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	flex-shrink: 0;
}

/* Item Icon */
.packitly-marquee-item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--packitly-marquee-accent, #10b981);
	flex-shrink: 0;
	line-height: 1;
}

.packitly-marquee-item-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.packitly-marquee-item-icon.is-custom-img img {
	height: 22px;
	width: auto;
	display: block;
	object-fit: contain;
}

/* Item Text */
.packitly-marquee-item-text {
	display: inline-block;
	color: inherit;
	font-weight: inherit;
}

/* Separator between items */
.packitly-marquee-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--packitly-marquee-separator-color, #10b981);
	font-size: var(--packitly-marquee-separator-size, 14px);
	line-height: 1;
	user-select: none;
	flex-shrink: 0;
	opacity: 0.8;
}

/* Direct Inner Blocks Styling inside Marquee */
.packitly-marquee-content > * {
	flex-shrink: 0;
	margin: 0 !important;
}

.packitly-marquee-content p,
.packitly-marquee-content h1,
.packitly-marquee-content h2,
.packitly-marquee-content h3,
.packitly-marquee-content h4,
.packitly-marquee-content h5,
.packitly-marquee-content h6 {
	margin: 0 !important;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	white-space: nowrap;
}

/* Images & Logos inside Marquee */
.packitly-marquee-content .wp-block-image,
.packitly-marquee-content figure {
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
}

.packitly-marquee-content .wp-block-image img,
.packitly-marquee-track img {
	max-height: 48px;
	width: auto;
	max-width: none;
	display: block;
	object-fit: contain;
	transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.packitly-marquee-content .wp-block-image:hover img {
	opacity: 1;
	transform: scale(1.05);
}

/* Buttons inside Marquee */
.packitly-marquee-content .wp-block-buttons {
	margin: 0 !important;
	flex-wrap: nowrap;
}

.packitly-marquee-content .wp-block-button__link {
	font-size: 13px;
	padding: 6px 14px;
	white-space: nowrap;
}

/* ==========================================================================
   5. PLAY / PAUSE ACCESSIBLE CONTROL BUTTON
   ========================================================================== */
.packitly-marquee-control-btn {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: rgba(17, 24, 39, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: #ffffff;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.15s ease;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.packitly-marquee-control-btn:hover {
	background: rgba(17, 24, 39, 0.95);
	transform: scale(1.08);
}

.packitly-marquee-control-btn:focus-visible {
	outline: 2px solid #10b981;
	outline-offset: 2px;
}

.packitly-marquee-control-btn.pos-top-right {
	top: 8px;
	right: 12px;
}
.packitly-marquee-control-btn.pos-bottom-right {
	bottom: 8px;
	right: 12px;
}
.packitly-marquee-control-btn.pos-top-left {
	top: 8px;
	left: 12px;
}
.packitly-marquee-control-btn.pos-bottom-left {
	bottom: 8px;
	left: 12px;
}

/* ==========================================================================
   6. GUTENBERG BLOCK EDITOR STYLES
   ========================================================================== */
.packitly-marquee-editor {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: var(--packitly-marquee-border-radius, 8px);
	overflow: visible !important;
	user-select: auto !important;
	-webkit-user-select: auto !important;
}

.packitly-marquee-editor.is-selected,
.packitly-marquee-editor.has-child-selected {
	border-color: #3b82f6 !important;
}

/* Editor Top Info Bar */
.packitly-marquee-editor-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 14px;
	background: rgba(15, 23, 42, 0.85);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	border-top-left-radius: inherit;
	border-top-right-radius: inherit;
	font-size: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #94a3b8;
}

.packitly-marquee-editor-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #ffffff;
	font-weight: 600;
	font-size: 13px;
}

.packitly-marquee-editor-meta {
	display: flex;
	align-items: center;
	gap: 6px;
}

.packitly-meta-pill {
	display: inline-block;
	background: rgba(255, 255, 255, 0.08);
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	color: #e2e8f0;
}

.packitly-marquee-editor-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Editor Canvas Track */
.packitly-marquee-editor-canvas-track {
	display: flex;
	align-items: center;
	width: 100%;
	padding: var(--packitly-marquee-padding-top, 14px) var(--packitly-marquee-padding-left, 16px) var(--packitly-marquee-padding-bottom, 14px) var(--packitly-marquee-padding-right, 16px);
	overflow-x: auto;
	box-sizing: border-box;
}

.packitly-marquee-editor-canvas-track .block-editor-block-list__layout {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: var(--packitly-marquee-gap, 30px) !important;
	width: max-content !important;
	min-width: 100% !important;
}

/* Live Animation in Editor */
.packitly-marquee-editor.is-animating-in-editor .packitly-marquee-editor-canvas-track .block-editor-block-list__layout {
	animation-duration: var(--packitly-marquee-speed, 25s);
	animation-timing-function: var(--packitly-marquee-timing, linear);
	animation-iteration-count: infinite;
}

.packitly-marquee-editor.is-animating-in-editor.direction-left .packitly-marquee-editor-canvas-track .block-editor-block-list__layout {
	animation-name: packitly-marquee-scroll-left;
}

.packitly-marquee-editor.is-animating-in-editor.direction-right .packitly-marquee-editor-canvas-track .block-editor-block-list__layout {
	animation-name: packitly-marquee-scroll-right;
}

/* Static in Editor */
.packitly-marquee-editor.is-static-in-editor .packitly-marquee-editor-canvas-track .block-editor-block-list__layout {
	animation: none !important;
}

/* Child Block in Editor */
.packitly-marquee-item-editor {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px;
	border-radius: 6px;
	border: 1px solid transparent;
	transition: border-color 0.15s ease;
	cursor: pointer;
}

.packitly-marquee-item-editor:hover {
	border-color: rgba(255, 255, 255, 0.25);
}

.packitly-marquee-item-editor.is-selected {
	border-color: #3b82f6 !important;
	background: rgba(59, 130, 246, 0.1) !important;
}

.packitly-marquee-item-editor .packitly-marquee-item-text {
	min-width: 60px;
	outline: none;
}