/* Cards — seleção em fila + brilho no hover
   Elevação com top (sem transform na arte = sem perder nitidez) */

.news-grid.is-selecting .news-card:not(.is-hot),
.features-grid.is-selecting .feature-box:not(.is-hot) {
	opacity: 0.72;
}

.news-card,
.feature-box {
	/* hitbox fixa — não sobe */
	position: relative;
	z-index: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
	transition: opacity .35s ease;
	/* folga em cima pra elevação não clipar / não perder hover */
	padding-top: 8px;
	margin-top: -8px;
}

.news-card.is-hot,
.feature-box.is-hot {
	opacity: 1;
	z-index: 2;
}

.card-face {
	position: relative;
	top: 0;
	height: 100%;
	min-height: inherit;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background-color: #120a1c;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: var(--shadow);
	transition:
		top .35s cubic-bezier(.22, 1, .36, 1),
		box-shadow .35s ease,
		border-color .35s ease;
}

.feature-box .card-face {
	background-color: #100818;
}

.news-card.is-hot .card-face,
.feature-box.is-hot .card-face {
	top: -6px;
	border-color: rgba(255, 180, 80, 0.45);
	box-shadow:
		0 0 0 1px rgba(255, 170, 60, 0.35),
		0 12px 28px rgba(0, 0, 0, 0.55),
		0 0 28px rgba(255, 140, 40, 0.28),
		0 0 60px rgba(255, 120, 20, 0.12);
}

/* brilho em camada por cima — não aplica filter na imagem */
.news-card.is-hot .card-face::after,
.feature-box.is-hot .card-face::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	background: linear-gradient(
		120deg,
		transparent 30%,
		rgba(255, 200, 120, 0.1) 48%,
		rgba(255, 220, 160, 0.16) 50%,
		rgba(255, 200, 120, 0.1) 52%,
		transparent 70%
	);
	background-size: 220% 100%;
	animation: card-shine 1.6s ease-in-out infinite;
}

@keyframes card-shine {
	0% { background-position: 120% 0; opacity: 0.2; }
	50% { background-position: -20% 0; opacity: 0.85; }
	100% { background-position: 120% 0; opacity: 0.2; }
}