/**
 * Estilos del Bloque Carrusel de Logos
 * 
 * CSS custom puro con animación infinita de scroll horizontal.
 * Los logos se muestran en escala de grises con gradientes de desvanecimiento en los bordes.
 * 
 * @package Vitruve_Custom_Theme
 */

@import '../styles/design-tokens.css';

/**
 * ANIMACIONES DE ENTRADA (estilo Apple)
 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

:root {
	--ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ==========================================
 * CONTENEDOR PRINCIPAL
 * ========================================== */

.vitruve-logos-carousel {
	position: relative;
	padding: var(--space-16) 0;
	overflow: hidden;
}

/* ==========================================
 * TÍTULO
 * ========================================== */

.vitruve-logos-carousel__title {
	color: var(--color-white, #ffffff);
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	margin: 0 auto var(--space-8);
	max-width: var(--container-max-width);
	padding: 0 var(--container-padding);
	/* Animación de entrada */
	opacity: 0;
	transform: translateY(30px);
}

.vitruve-logos-carousel.is-visible .vitruve-logos-carousel__title {
	animation: fadeInUp 1s var(--ease-apple) forwards;
}

@media (min-width: 768px) {
	.vitruve-logos-carousel__title {
		font-size: 1.125rem;
		margin-bottom: var(--space-10);
	}
}

@media (min-width: 1024px) {
	.vitruve-logos-carousel__title {
		font-size: 1.25rem;
		margin-bottom: var(--space-12);
		padding: 0 var(--container-padding-lg);
	}
}

.vitruve-logos-carousel__container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	position: relative;
	/* Animación de entrada */
	opacity: 0;
}

.vitruve-logos-carousel.is-visible .vitruve-logos-carousel__container {
	animation: fadeIn 1.2s var(--ease-apple) 0.3s forwards;
}

@media (min-width: 1024px) {
	.vitruve-logos-carousel__container {
		padding: 0 var(--container-padding-lg);
	}
}

/* ==========================================
 * GRADIENTES DE DESVANECIMIENTO
 * ========================================== */

.vitruve-logos-carousel__container::before,
.vitruve-logos-carousel__container::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 150px;
	z-index: 2;
	pointer-events: none;
}

/* Gradiente izquierdo (logos apareciendo) */
.vitruve-logos-carousel__container::before {
	left: 0;
	background: linear-gradient(
		to right,
		var(--bg-primary, var(--color-neutral-800)) 0%,
		var(--bg-primary, var(--color-neutral-800)) 20%,
		rgba(16, 15, 17, 0) 100%
	);
}

/* Gradiente derecho (logos desapareciendo) */
.vitruve-logos-carousel__container::after {
	right: 0;
	background: linear-gradient(
		to left,
		var(--bg-primary, var(--color-neutral-800)) 0%,
		var(--bg-primary, var(--color-neutral-800)) 20%,
		rgba(16, 15, 17, 0) 100%
	);
}

@media (min-width: 768px) {
	.vitruve-logos-carousel__container::before,
	.vitruve-logos-carousel__container::after {
		width: 200px;
	}
}

/* ==========================================
 * TRACK DE ANIMACIÓN
 * ========================================== */

.vitruve-logos-carousel__track {
	display: flex;
	gap: var(--space-12);
	width: fit-content;
	animation: scroll-left var(--carousel-speed, 20s) linear infinite;
	will-change: transform;
}

@media (min-width: 768px) {
	.vitruve-logos-carousel__track {
		gap: var(--space-16);
	}
}

/* Pausar animación al hover (opcional - comentar si no se quiere) */
.vitruve-logos-carousel__track:hover {
	animation-play-state: paused;
}

@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* ==========================================
 * SETS Y ITEMS
 * ========================================== */

.vitruve-logos-carousel__set {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.vitruve-logos-carousel__set {
		gap: var(--space-16);
	}
}

.vitruve-logos-carousel__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
}

@media (min-width: 768px) {
	.vitruve-logos-carousel__item {
		height: 80px;
	}
}

/* ==========================================
 * IMÁGENES (ESCALA DE GRISES)
 * ========================================== */

.vitruve-logos-carousel__image {
	max-height: 100%;
	width: auto;
	max-width: 150px;
	height: auto;
	object-fit: contain;
	
	/* Efecto escala de grises */
	filter: grayscale(100%) brightness(0.8);
	opacity: 0.7;
	
	/* Transición suave */
	transition: filter var(--transition-base) var(--ease-in-out),
	            opacity var(--transition-base) var(--ease-in-out);
}

@media (min-width: 768px) {
	.vitruve-logos-carousel__image {
		max-width: 200px;
	}
}

/* Hover opcional en imágenes (comentar si no se quiere) */
.vitruve-logos-carousel__image:hover {
	filter: grayscale(80%) brightness(1);
	opacity: 0.9;
}

/* ==========================================
 * VARIANTES DE ALINEACIÓN (WordPress Align)
 * ========================================== */

.vitruve-logos-carousel.alignwide .vitruve-logos-carousel__container {
	max-width: 1400px;
}

.vitruve-logos-carousel.alignfull {
	max-width: 100%;
}

.vitruve-logos-carousel.alignfull .vitruve-logos-carousel__container {
	max-width: 100%;
	padding-left: var(--space-6);
	padding-right: var(--space-6);
}

/* ==========================================
 * ACCESIBILIDAD
 * ========================================== */

/* Reducir movimiento para usuarios con preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce) {
	.vitruve-logos-carousel__track {
		animation: none;
	}
	
	.vitruve-logos-carousel__track {
		flex-wrap: wrap;
		justify-content: center;
	}
	
	.vitruve-logos-carousel__set:last-child {
		display: none;
	}

	.vitruve-logos-carousel__title,
	.vitruve-logos-carousel__container {
		opacity: 1;
		transform: none;
		animation: none;
	}
}