/* Faixa lateral com imagens que se movem horizontalmente (uma ao lado da outra) */
#media .side-strip {
	position: fixed;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 260px;
	height: 120px;
	overflow: visible;
	z-index: 80;
	pointer-events: none; /* não bloqueia cliques da página */
	display: flex;
	align-items: center;
	justify-content: center;
}

#media .side-strip .marquee {
	display: flex;
	gap: 12px;
	align-items: center;
	white-space: nowrap;
}

/* imagens com mesmo tamanho sem distorcer */
#media .side-strip img {
	width: 110px;
	height: 80px;
	object-fit: cover; /* mantém qualidade e corta o excesso */
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.25);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* animação: cada imagem desliza da direita para a esquerda e some pela lateral */
@keyframes slide-across {
	0%   { transform: translateX(120vw); opacity: 0; }
	8%   { opacity: 1; }
	88%  { opacity: 1; }
	100% { transform: translateX(-120vw); opacity: 0; }
}

#media .side-strip .marquee img {
	animation: slide-across 10s linear infinite;
}

/* atrasos escalonados para que as imagens saiam uma após a outra */
#media .side-strip .marquee img:nth-child(1) { animation-delay: 0s; }
#media .side-strip .marquee img:nth-child(2) { animation-delay: 2.2s; }
#media .side-strip .marquee img:nth-child(3) { animation-delay: 4.4s; }
#media .side-strip .marquee img:nth-child(4) { animation-delay: 6.6s; }
#media .side-strip .marquee img:nth-child(5) { animation-delay: 8.8s; }
#media .side-strip .marquee img:nth-child(6) { animation-delay: 11s; }

/* em telas pequenas a faixa vira linha fixa no rodapé e mantém imagens lado a lado */
@media (max-width: 900px) {
	#media .side-strip {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 8px;
		top: auto;
		transform: none;
		width: 100%;
		height: 96px;
		pointer-events: auto;
		background: rgba(0,0,0,0.04);
		padding: 6px 12px;
		justify-content: flex-start;
	}
	#media .side-strip .marquee { overflow-x: auto; padding-bottom: 4px; }
	#media .side-strip img { width: 96px; height: 64px; }
}

/* ===== CARROSSEL PRINCIPAL AUTOMÁTICO ===== */
/* ===== MARQUEE CONTÍNUO DE MÍDIAS ===== */
.media-marquee {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	position: relative;
	padding: 0;
	box-sizing: border-box;
}

.media-marquee .marquee-track {
	display: flex;
	gap: 10px;
	align-items: center;
	white-space: nowrap;
}

.media-marquee .marquee-track img {
	width: 260px;
	height: 160px;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.28);
	display: inline-block;
}

/* animação contínua: move -50% (conteúdo duplicado garante fluxo sem salto) */
.media-marquee .marquee-track {
	animation: marquee-slide 30s linear infinite;
}

@keyframes marquee-slide {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* Quando o usuário passar o mouse, pausar animação */
/* .media-marquee:hover .marquee-track { animation-play-state: paused; } */

@media (max-width: 900px) {
	.media-marquee .marquee-track img { width: 180px; height: 120px; }
}

/* Hover: aumentar imagem ao passar o cursor — agora cria clone fixo */
/* .media-marquee .marquee-track img {
	transition: transform 260ms cubic-bezier(.2,.9,.2,1), box-shadow 260ms;
	will-change: transform;
} */

/* estilos para o clone de pré-visualização */
.media-preview {
	position: fixed !important;
	border-radius: 10px;
	box-shadow: 0 30px 80px rgba(0,0,0,0.6);
	object-fit: cover;
	z-index: 100000 !important;
	transition: all 220ms cubic-bezier(.2,.9,.2,1)
}


/* Title gradient for midia section */
#midia h2 {
	font-weight: 900;
	font-size: clamp(22px, 4.2vw, 36px);
	background: linear-gradient(90deg, #ff7a18, #ff0066 30%, #7f00ff 60%, #00d4ff 90%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: marquee-title 6s linear infinite;
}

@keyframes marquee-title {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}