/* Frontend Ticker CSS */

.incube-ticker-wrapper {
	overflow: hidden;
	width: 100%;
	position: relative;
	box-sizing: border-box;
    /* Speed and Direction can be passed as variables from inline style */
    --ticker-speed: 20s;
    --ticker-direction: row; 
    display: flex;
    align-items: center;
}

.incube-ticker-track {
	display: flex;
    flex-direction: var(--ticker-direction);
	align-items: center;
    width: max-content;
    animation: scrollHorizontal var(--ticker-speed) linear infinite;
}

.incube-ticker-vertical .incube-ticker-track {
    animation: scrollVertical var(--ticker-speed) linear infinite;
    /* For vertical, track height should be max-content and wrapper needs a specific height to scroll */
    height: max-content; 
    flex-direction: column;
}
.incube-ticker-vertical {
    height: 400px; /* Default vertical height, could be a setting */
    align-items: flex-start;
}

.incube-ticker-group {
    display: flex;
    flex-direction: var(--ticker-direction);
    align-items: center;
    justify-content: center;
}

/* Individual item */
.incube-ticker-item {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Logos should be equal size based on their container or explicit properties */
.incube-client-logo-img {
	max-width: 150px;
	height: auto;
	object-fit: contain;
    /* Optional: grayscale transition on hover for a premium feel */
    filter: grayscale(100%);
    opacity: 0.8;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.incube-ticker-item:hover .incube-client-logo-img {
    filter: grayscale(0%);
    opacity: 1;
}

.incube-ticker-text {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    background: #f4f4f4;
    padding: 20px 40px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Pause animation on hover */
.incube-ticker-wrapper:hover .incube-ticker-track {
	animation-play-state: paused;
}

/* Animations */
@keyframes scrollHorizontal {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes scrollVertical {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-50%);
	}
}

/* Enter Animations */
.incube-animate-fade-in {
    animation: fadeIn 1.5s ease-out forwards;
}

.incube-animate-zoom-in {
    animation: zoomIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { 
        opacity: 0;
        transform: scale(0.9);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .incube-client-logo-img {
        max-width: 100px;
    }
    .incube-ticker-text {
        font-size: 1rem;
        padding: 15px 30px;
    }
}

@media screen and (max-width: 480px) {
    .incube-client-logo-img {
        max-width: 80px;
    }
}