@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

.aafe-marquee-gallery-cta-wrapper {
	width: 100%;
}

.aafe-marquee-gallery-cta-wrapper h1,
.aafe-marquee-gallery-cta-wrapper h2,
.aafe-marquee-gallery-cta-wrapper h3,
.aafe-marquee-gallery-cta-wrapper h4,
.aafe-marquee-gallery-cta-wrapper h5,
.aafe-marquee-gallery-cta-wrapper h6 {
	font-family: 'Sora', sans-serif;
	margin: 0;
}

.aafe-marquee-gallery-cta-wrapper p,
.aafe-marquee-gallery-cta-wrapper span,
.aafe-marquee-gallery-cta-wrapper li,
.aafe-marquee-gallery-cta-wrapper a {
	font-family: 'Inter', sans-serif;
}

.aafe-marquee-gallery-cta {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #000;
}

.aafe-marquee-gallery-cta__gallery-wrap {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px 0;
	z-index: 1;
}

/* Fade overlay at the bottom of the gallery */
.aafe-marquee-gallery-cta__gallery-wrap::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 0%, var(--aafe-fade-color, #000000) 100%);
}

.aafe-marquee-gallery-cta__marquee {
	display: flex;
	gap: 12px;
	user-select: none;
	width: 100%;
}

.aafe-marquee-gallery-cta__track {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
	min-width: 100%;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.aafe-marquee-gallery-cta__marquee--left .aafe-marquee-gallery-cta__track {
	animation-name: aafe-marquee-left;
}

.aafe-marquee-gallery-cta__marquee--right .aafe-marquee-gallery-cta__track {
	animation-name: aafe-marquee-right;
}

@keyframes aafe-marquee-left {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-100% - 12px)); }
}

@keyframes aafe-marquee-right {
	from { transform: translateX(calc(-100% - 12px)); }
	to { transform: translateX(0); }
}

/* AAFE IMPROVEMENT: RTL Support */
[dir="rtl"] .aafe-marquee-gallery-cta__marquee--left .aafe-marquee-gallery-cta__track {
    animation-name: aafe-marquee-left-rtl;
}
[dir="rtl"] .aafe-marquee-gallery-cta__marquee--right .aafe-marquee-gallery-cta__track {
    animation-name: aafe-marquee-right-rtl;
}
@keyframes aafe-marquee-left-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100% + 12px)); }
}
@keyframes aafe-marquee-right-rtl {
    from { transform: translateX(calc(100% + 12px)); }
    to { transform: translateX(0); }
}

.aafe-marquee-gallery-cta__marquee img {
	object-fit: cover;
	max-width: none;
}

/* Content Area */
.aafe-marquee-gallery-cta__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 20px;
	margin: 0;
	margin-top: -20px; /* pull up slightly under fade */
	width: 100%;
}

.aafe-marquee-gallery-cta__desc {
	margin: 0;
	padding: 0;
	width: 100%;
}

.aafe-marquee-gallery-cta__brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.aafe-marquee-gallery-cta__brand-icon {
	display: inline-flex;
}

.aafe-marquee-gallery-cta__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.3s ease;
	cursor: pointer;
}

/* Hover Effects (Global System) */
.aafe-marquee-gallery-cta-wrapper[data-hover="lift"] .aafe-marquee-gallery-cta {
    transition: transform var(--aafe-transition, 300ms) ease, box-shadow var(--aafe-transition, 300ms) ease;
}
.aafe-marquee-gallery-cta-wrapper[data-hover="lift"] .aafe-marquee-gallery-cta:hover,
.aafe-marquee-gallery-cta-wrapper[data-hover="lift"] .aafe-marquee-gallery-cta:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.aafe-marquee-gallery-cta-wrapper[data-hover="glow"] .aafe-marquee-gallery-cta {
    transition: box-shadow var(--aafe-transition, 300ms) ease;
}
.aafe-marquee-gallery-cta-wrapper[data-hover="glow"] .aafe-marquee-gallery-cta:hover,
.aafe-marquee-gallery-cta-wrapper[data-hover="glow"] .aafe-marquee-gallery-cta:focus-within {
    box-shadow: 0 0 0 3px #4F46E5, 0 8px 30px rgba(79,70,229,0.25);
}
.aafe-marquee-gallery-cta-wrapper[data-hover="scale"] .aafe-marquee-gallery-cta {
    transition: transform var(--aafe-transition, 300ms) ease;
}
.aafe-marquee-gallery-cta-wrapper[data-hover="scale"] .aafe-marquee-gallery-cta:hover,
.aafe-marquee-gallery-cta-wrapper[data-hover="scale"] .aafe-marquee-gallery-cta:focus-within {
    transform: scale(var(--aafe-hover-scale, 1.03));
}
.aafe-marquee-gallery-cta-wrapper[data-hover="border-pop"] .aafe-marquee-gallery-cta {
    position: relative;
}
.aafe-marquee-gallery-cta-wrapper[data-hover="border-pop"] .aafe-marquee-gallery-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid currentColor;
    border-radius: inherit;
    opacity: 0;
    transform: scale(1.05);
    transition: all var(--aafe-transition, 300ms) ease;
    pointer-events: none;
    z-index: 5;
}
.aafe-marquee-gallery-cta-wrapper[data-hover="border-pop"] .aafe-marquee-gallery-cta:hover::before,
.aafe-marquee-gallery-cta-wrapper[data-hover="border-pop"] .aafe-marquee-gallery-cta:focus-within::before {
    opacity: 1;
    transform: scale(1);
}
.aafe-marquee-gallery-cta-wrapper[data-hover="shine"] .aafe-marquee-gallery-cta {
    position: relative;
}
.aafe-marquee-gallery-cta-wrapper[data-hover="shine"] .aafe-marquee-gallery-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: left var(--aafe-transition, 300ms) ease;
    z-index: 5;
    pointer-events: none;
}
.aafe-marquee-gallery-cta-wrapper[data-hover="shine"] .aafe-marquee-gallery-cta:hover::before,
.aafe-marquee-gallery-cta-wrapper[data-hover="shine"] .aafe-marquee-gallery-cta:focus-within::before {
    left: 125%;
}
