/* ==========================================================================
   Banner "pódio" do hero — falso 3D por camadas (layering).

   O palco de fundo (bannerprincipal-2.png, com os 3 pódios circulares de
   neon e o logo VRUUMY já desenhados) fica fixo. Cada carro é uma camada
   (.car-item) posicionada de forma absoluta sobre um dos pódios, com sua
   própria combinação de posição/escala/opacidade — ao trocar a classe de
   posição (.pos-left/.pos-center/.pos-right) via JS, o navegador anima a
   transição sozinho ("match & move").
   ========================================================================== */

.vruumy-podium {
	position: relative;
	width: 100%;
	background: var(--vruumy-black);
}

.vruumy-podium__stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	outline: none;

	/* Proporção real de "bannerprincipal-2.png" (1838 x 856). */
	aspect-ratio: 1838 / 856;

	/* Palco de fundo — definido inline (background-image) no template,
	   fixo e nunca trocado pelo carrossel. */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* ==========================================================================
   Carros — camadas posicionadas sobre os pódios
   ========================================================================== */
.vruumy-podium__cars {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.car-item {
	position: absolute;
	aspect-ratio: 3 / 2;
	pointer-events: none;
	transition: all .6s cubic-bezier(.25, 1, .5, 1);
}

.car-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent;
}

/* Pódio central — modelo em destaque: maior, brilho total + glow neon */
.pos-center {
	width: 34%;
	left: 50%;
	top: 76%;
	transform: translate(-50%, -50%) scale(1);
	z-index: 3;
	opacity: 1;
	filter:
		brightness(1)
		drop-shadow(0 24px 45px rgba(0, 0, 0, .55))
		drop-shadow(0 0 45px rgba(0, 178, 255, .35))
		drop-shadow(0 0 75px rgba(255, 45, 142, .18));
}

/* Pódio esquerdo — modelo lateral: menor e mais escuro */
.pos-left {
	width: 20%;
	left: 21%;
	top: 66%;
	transform: translate(-50%, -50%) scale(.65);
	z-index: 2;
	opacity: .6;
	filter: brightness(.5);
}

/* Pódio direito — modelo lateral: menor e mais escuro */
.pos-right {
	width: 20%;
	left: 79%;
	top: 66%;
	transform: translate(-50%, -50%) scale(.65);
	z-index: 2;
	opacity: .6;
	filter: brightness(.5);
}

/* ==========================================================================
   Setas de navegação — sobrepostas às setas já desenhadas na imagem
   ========================================================================== */
.vruumy-podium__arrow {
	position: absolute;
	top: 47%;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(36px, 5vw, 56px);
	height: clamp(36px, 5vw, 56px);
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	color: var(--vruumy-white);
	cursor: pointer;
	transition: color .25s var(--vruumy-ease), border-color .25s var(--vruumy-ease), box-shadow .25s var(--vruumy-ease), background .25s var(--vruumy-ease);
	transform: translateY(-50%);
}
.vruumy-podium__arrow--prev { left: 1%; }
.vruumy-podium__arrow--next { right: 1%; }

/* As setas já existem desenhadas no palco — o ícone do botão fica
   invisível e só aparece (com glow) ao passar o mouse/focar, como reforço
   visual de que a área é clicável. */
.vruumy-podium__arrow .vruumy-icon {
	width: 22px;
	height: 22px;
	opacity: 0;
	transition: opacity .25s var(--vruumy-ease);
}
.vruumy-podium__arrow--prev .vruumy-icon { transform: rotate(180deg); }
.vruumy-podium__arrow:hover,
.vruumy-podium__arrow:focus-visible {
	background: rgba(11, 11, 15, .35);
	border-color: var(--vruumy-border);
	color: var(--vruumy-blue);
	box-shadow: var(--vruumy-glow-blue);
}
.vruumy-podium__arrow--next:hover,
.vruumy-podium__arrow--next:focus-visible {
	color: var(--vruumy-pink);
	box-shadow: var(--vruumy-glow-pink);
}
.vruumy-podium__arrow:hover .vruumy-icon,
.vruumy-podium__arrow:focus-visible .vruumy-icon {
	opacity: 1;
}

/* ==========================================================================
   Indicadores (dots)
   ========================================================================== */
.vruumy-podium__dots {
	position: absolute;
	left: 50%;
	bottom: 3%;
	z-index: 6;
	display: flex;
	gap: .5rem;
	transform: translateX(-50%);
}
.vruumy-podium__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: width .35s var(--vruumy-ease), background .35s var(--vruumy-ease), box-shadow .35s var(--vruumy-ease);
}
.vruumy-podium__dot.is-active {
	width: 26px;
	border-radius: 999px;
	background: var(--vruumy-gradient);
	box-shadow: var(--vruumy-glow-blue);
}

/* ==========================================================================
   Telefones pequenos — setas um pouco menores
   ========================================================================== */
@media (max-width: 480px) {
	.vruumy-podium__arrow {
		width: 44px;
		height: 44px;
	}
	.vruumy-podium__arrow .vruumy-icon { width: 18px; height: 18px; }
}