/**
 * Logo RR — efeito 3D / flutuante: barra mobile (.topbar), sidebar (desktop) e login.
 */

@keyframes rr-logo-float {
	0%,
	100% {
		transform: translateY(0) rotateX(4deg);
	}
	50% {
		transform: translateY(-5px) rotateX(5deg);
	}
}

/* ----- Top bar (header logado, visível em ≤900px) ----- */
.topbar.site-header .brand {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	flex: 1;
	min-width: 0;
	order: 2;
	perspective: 900px;
	transform-style: preserve-3d;
	cursor: default;
}

.topbar.site-header .brand-logo,
.topbar.site-header .brand .mobile-top-logo,
.topbar.site-header .brand .brand-logo {
	display: block;
	max-width: 100%;
	width: clamp(200px, 42vw, 320px);
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	transform: translateY(0) rotateX(4deg);
	transform-origin: center center;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease,
		filter 0.4s ease;
	box-shadow:
		0 3px 0 rgba(6, 12, 24, 0.55),
		0 16px 32px rgba(0, 0, 0, 0.42),
		0 28px 56px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	filter: drop-shadow(0 14px 28px rgba(14, 165, 233, 0.22));
}

@media (hover: hover) and (pointer: fine) {
	.topbar.site-header .brand:hover .brand-logo,
	.topbar.site-header .brand:hover .mobile-top-logo,
	.topbar.site-header .brand:hover .brand-logo {
		transform: translateY(-4px) rotateX(5deg) scale(1.02);
		box-shadow:
			0 4px 0 rgba(6, 12, 24, 0.58),
			0 18px 36px rgba(0, 0, 0, 0.45),
			0 30px 52px rgba(14, 165, 233, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.18);
		filter: drop-shadow(0 16px 32px rgba(56, 189, 248, 0.28));
	}
}

/* ----- Sidebar (logo no desktop e em qualquer largura) ----- */
aside.sidebar {
	perspective: 900px;
}

aside.sidebar > img.logo {
	display: block;
	margin: 8px auto 20px auto;
	max-width: 100%;
	width: clamp(150px, 72%, 220px);
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	transform: translateY(0) rotateX(4deg);
	transform-origin: center center;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease,
		filter 0.4s ease;
	box-shadow:
		0 3px 0 rgba(6, 12, 24, 0.55),
		0 14px 28px rgba(0, 0, 0, 0.4),
		0 24px 48px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
	filter: drop-shadow(0 12px 24px rgba(14, 165, 233, 0.2));
}

aside.sidebar:hover > img.logo {
	transform: translateY(-5px) rotateX(5deg) scale(1.02);
	box-shadow:
		0 4px 0 rgba(6, 12, 24, 0.58),
		0 18px 36px rgba(0, 0, 0, 0.45),
		0 30px 52px rgba(14, 165, 233, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.16);
	filter: drop-shadow(0 16px 32px rgba(56, 189, 248, 0.28));
}

/* ----- Login ----- */
.login-page .brand {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12px;
	perspective: 900px;
	transform-style: preserve-3d;
}

.login-page .brand .logo {
	display: block;
	max-width: 100%;
	width: clamp(200px, 62vw, 300px);
	height: auto;
	object-fit: contain;
	border-radius: 12px;
	transform: translateY(0) rotateX(4deg);
	transform-origin: center center;
	transition:
		transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.4s ease,
		filter 0.4s ease;
	box-shadow:
		0 3px 0 rgba(6, 12, 24, 0.55),
		0 16px 32px rgba(0, 0, 0, 0.42),
		0 28px 56px rgba(0, 0, 0, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);
	filter: drop-shadow(0 14px 28px rgba(14, 165, 233, 0.22));
}

.login-page .brand:hover .logo {
	transform: translateY(-6px) rotateX(6deg) scale(1.03);
	box-shadow:
		0 5px 0 rgba(6, 12, 24, 0.6),
		0 22px 44px rgba(0, 0, 0, 0.48),
		0 36px 64px rgba(14, 165, 233, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
	filter: drop-shadow(0 20px 40px rgba(56, 189, 248, 0.3));
}

/* Animação suave (respeita redução de movimento) */
@media (prefers-reduced-motion: no-preference) {
	aside.sidebar > img.logo {
		animation: rr-logo-float 4.5s ease-in-out infinite;
	}

	aside.sidebar:hover > img.logo {
		animation: none;
	}

	.login-page .brand .logo {
		animation: rr-logo-float 4.5s ease-in-out infinite;
	}

	.login-page .brand:hover .logo {
		animation: none;
	}
}

/* Mobile header: pulsação de novo (Sair/Voltar seguem ok: .brand com pointer-events: none no app-header) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
	.topbar.site-header .brand .brand-logo,
	.topbar.site-header .brand .mobile-top-logo,
	.topbar.site-header .brand-logo {
		animation: rr-logo-float 4.5s ease-in-out infinite;
	}
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
	.topbar.site-header .brand:hover .brand-logo,
	.topbar.site-header .brand:hover .mobile-top-logo,
	.topbar.site-header .brand:hover .brand-logo {
		animation: none;
	}
}