/* [av_topbar_ticker] — rotating top-bar message ticker.
   Inherits font-size from `.top-bar__text` (parts/header.css). */

.av-topbar-ticker {
	line-height: 1.4;
}

/* Static (single message, or rotation off): items just flow normally. */
.av-topbar-ticker:not(.is-rotating) .av-topbar-ticker__item:not(.is-active) {
	display: none;
}

/* Rotating: the active message stays in normal flow so it gives the top-bar
   cell its width/height; the others are overlaid on top of it (absolutely
   positioned) and faded/slid in or out. Keeping the active item in flow is
   essential — if every item is absolute, the container collapses to width 0
   and the text is clipped to nothing. */
.av-topbar-ticker.is-rotating {
	position: relative;
	overflow: hidden;
}

.av-topbar-ticker.is-rotating .av-topbar-ticker__item {
	display: block;
	will-change: opacity, transform;
	/* Longer duration + an eased curve (gentle in/out) reads as a smooth,
	   premium crossfade rather than a hard cut. Tune --av-ticker-duration to
	   taste. */
	--av-ticker-duration: 0.8s;
	transition:
		opacity var(--av-ticker-duration) cubic-bezier(0.4, 0, 0.2, 1),
		transform var(--av-ticker-duration) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Non-active items overlay the active one without affecting layout. */
.av-topbar-ticker.is-rotating .av-topbar-ticker__item:not(.is-active) {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
}
.av-topbar-ticker.is-rotating .av-topbar-ticker__item.is-active {
	position: relative;
}

/* --- Fade --- crossfade with a subtle vertical drift so it feels softer
   than a flat opacity swap: incoming eases up from a hair below, outgoing
   eases up and away. */
.av-topbar-ticker--fade.is-rotating .av-topbar-ticker__item {
	opacity: 0;
	transform: translateY(6px);
}
.av-topbar-ticker--fade.is-rotating .av-topbar-ticker__item.is-active {
	opacity: 1;
	transform: translateY(0);
}
.av-topbar-ticker--fade.is-rotating .av-topbar-ticker__item.is-leaving {
	opacity: 0;
	transform: translateY(-6px);
}

/* --- Slide up --- incoming rises from below, outgoing exits upward. */
.av-topbar-ticker--slide.is-rotating .av-topbar-ticker__item {
	opacity: 0;
	transform: translateY(100%);
}
.av-topbar-ticker--slide.is-rotating .av-topbar-ticker__item.is-active {
	opacity: 1;
	transform: translateY(0);
}
.av-topbar-ticker--slide.is-rotating .av-topbar-ticker__item.is-leaving {
	opacity: 0;
	transform: translateY(-100%);
}

/* Respect reduced-motion: no transforms/transitions, just instant swap. */
@media (prefers-reduced-motion: reduce) {
	.av-topbar-ticker.is-rotating .av-topbar-ticker__item {
		transition: none;
		transform: none;
	}
}