/* ============================================================
 * Marquee Bar — Animated Moving Bar
 * No forced margin/padding anywhere: all spacing & background are
 * controlled from the Elementor panel (Style + Advanced tabs).
 * ============================================================ */

.obm-wrapper {
	width: 100%;
	line-height: 0; /* kill inline whitespace gaps between units */
	font-size: 0;   /* kill whitespace between inline-flex units */
}

/* restore readable line-height/font inside */
.obm-wrapper .obm-item-text,
.obm-wrapper .obm-emoji,
.obm-wrapper .obm-sep {
	line-height: 1;
}

.obm-bar {
	overflow: hidden;
	width: 100%;
	position: relative;
	line-height: normal;
}

/* ============================================================
 * FULL BLEED — Remove theme (Astra) spacing + go edge-to-edge.
 * The exact edge-to-edge breakout and spacing reset are applied by
 * JS (measured from the real layout), which is far more reliable
 * than guessing with 100vw. This class only marks the element.
 * ============================================================ */
.obm-fullbleed {
	position: relative;
	box-sizing: border-box;
}

/* The scrolling track holds N identical groups (added by JS) for a
   seamless loop. JS measures one group's exact pixel width and sets
   --obm-shift to it, so the loop never shows blank space or rounding gaps. */
.obm-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	--obm-shift: 50%;
	animation-name: obm-scroll-left;
	animation-duration: 25s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.obm-dir-right {
	animation-name: obm-scroll-right;
}

.obm-group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-shrink: 0;
	padding: 0;
}

/* Each unit = one item + its separator. Uniform right margin (set by the
   Spacing control) makes the loop seam identical to internal spacing. */
.obm-unit {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	margin-right: 32px; /* default; overridden by the Spacing control */
}

.obm-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: #FFFFFF;
}

.obm-item-text {
	display: inline-block;
	color: #FFFFFF;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
}

.obm-emoji {
	display: inline-block;
	line-height: 1;
	font-size: 18px;
}

.obm-sep {
	display: inline-flex;
	align-items: center;
	color: #FFE08A;
	line-height: 1;
	margin-left: 32px; /* space between item text and the separator;
	                       follows the item gap via the Spacing control */
}

/* ---------- Pause on hover ---------- */
.obm-pause-hover:hover {
	animation-play-state: paused;
}

/* ---------- Edge fade ---------- */
.obm-fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

/* ============================================================
 * SCROLL KEYFRAMES
 * Translate by exactly ONE group width (--obm-shift, set in px by JS).
 * Because the track holds multiple identical groups laid end to end,
 * shifting by one group's width loops perfectly with zero blank space.
 * ============================================================ */
@keyframes obm-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--obm-shift))); }
}

@keyframes obm-scroll-right {
	from { transform: translateX(calc(-1 * var(--obm-shift))); }
	to   { transform: translateX(0); }
}

/* ============================================================
 * ITEM / EMOJI / SEPARATOR ANIMATIONS
 * Applied per element so they spin/bounce while the bar scrolls.
 * ============================================================ */

/* none = no animation */
.obm-anim-none { animation: none; }

/* Spin */
.obm-anim-spin {
	animation-name: obm-spin;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes obm-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* Bounce */
.obm-anim-bounce {
	animation-name: obm-bounce;
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes obm-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-22%); }
}

/* Pulse */
.obm-anim-pulse {
	animation-name: obm-pulse;
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes obm-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}

/* Wiggle */
.obm-anim-wiggle {
	animation-name: obm-wiggle;
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes obm-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(-12deg); }
	75%      { transform: rotate(12deg); }
}

/* Float */
.obm-anim-float {
	animation-name: obm-float;
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes obm-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-18%); }
}

/* Glow */
.obm-anim-glow {
	animation-name: obm-glow;
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes obm-glow {
	0%, 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); opacity: 1; }
	50%      { text-shadow: 0 0 14px rgba(255, 255, 255, 0.85); opacity: 0.92; }
}

/* ---------- Accessibility: respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.obm-track,
	.obm-anim-spin,
	.obm-anim-bounce,
	.obm-anim-pulse,
	.obm-anim-wiggle,
	.obm-anim-float,
	.obm-anim-glow {
		animation: none !important;
	}
}