/* Botões gradiente LA2BR — tom laranja/dourado
   Efeito hover próprio (diferente dos cards): pulso + varredura vertical */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	overflow: hidden;
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 0;
	text-decoration: none;
	user-select: none;
	transition:
		transform .2s ease,
		box-shadow .25s ease,
		letter-spacing .2s ease;
}

.btn:hover {
	letter-spacing: 0.12em;
}
.btn:active { transform: translateY(0) scale(0.98); }

/* Animação contínua enquanto o mouse está em cima — tremer leve */
.btn.is-lit {
	animation: btn-shake 0.55s ease-in-out infinite;
}

@keyframes btn-shake {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	25% { transform: translate(-1px, 0.5px) rotate(-0.35deg); }
	50% { transform: translate(1px, -0.5px) rotate(0.35deg); }
	75% { transform: translate(-0.5px, 0.5px) rotate(-0.2deg); }
}

.btn > span,
.btn {
	z-index: 1;
}

/* ---------- PLAY (principal) ---------- */
.btn-play {
	min-width: 220px;
	padding: 16px 36px;
	font-size: 18px;
	color: #1a0a00;
	background:
		linear-gradient(180deg,
			#ffe7a8 0%,
			#ffd27a 18%,
			#ff9a1f 52%,
			#e07000 100%);
	border-radius: 3px;
	box-shadow:
		0 0 0 1px rgba(255, 230, 160, 0.55) inset,
		0 -2px 0 rgba(120, 40, 0, 0.25) inset,
		0 8px 22px rgba(255, 120, 0, 0.4),
		0 0 36px rgba(255, 150, 40, 0.28);
}

.btn-play:not(.items-tab)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	border-radius: inherit;
	background: linear-gradient(
		120deg,
		transparent 28%,
		rgba(255, 245, 210, 0.12) 44%,
		rgba(255, 255, 255, 0.38) 50%,
		rgba(255, 220, 140, 0.16) 56%,
		transparent 72%
	);
	background-size: 220% 100%;
	animation: card-shine 2.4s ease-in-out infinite;
}

.btn-play:not(.items-tab) .btn-scan {
	opacity: 0.55;
	animation: btn-scan 2.8s ease-in-out infinite;
}

/* linha sob o PLAY */
.btn-play .btn-underlight {
	position: absolute;
	left: 12%;
	right: 12%;
	bottom: -10px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, #ffb347, #ffd27a, #ffb347, transparent);
	box-shadow: 0 0 14px rgba(255, 160, 40, 0.75);
	opacity: 0.85;
	z-index: -1;
	pointer-events: none;
}

.btn-play.is-lit {
	box-shadow:
		0 0 0 1px rgba(255, 240, 180, 0.75) inset,
		0 -2px 0 rgba(120, 40, 0, 0.2) inset,
		0 10px 26px rgba(255, 130, 20, 0.55),
		0 0 0 2px rgba(255, 170, 60, 0.35),
		0 0 22px rgba(255, 140, 30, 0.55);
}

.btn-play-sm {
	min-width: 180px;
	padding: 13px 28px;
	font-size: 15px;
}

.btn-play-sm .btn-underlight {
	bottom: -8px;
	height: 2px;
}

/* ---------- Laranja (FEATURES / ENTER CHAT) ---------- */
.btn-orange {
	padding: 10px 22px;
	font-size: 13px;
	color: #1a0a00;
	border-radius: 2px;
	background:
		linear-gradient(180deg,
			#ffc56a 0%,
			#ff9a1f 45%,
			#e56a00 100%);
	box-shadow:
		0 0 0 1px rgba(255, 220, 150, 0.4) inset,
		0 6px 16px rgba(255, 110, 0, 0.35);
}

.btn-orange.is-lit {
	box-shadow:
		0 0 0 1px rgba(255, 230, 170, 0.65) inset,
		0 8px 18px rgba(255, 120, 0, 0.5),
		0 0 0 2px rgba(255, 160, 50, 0.3),
		0 0 18px rgba(255, 130, 20, 0.45);
}

/* ---------- Outline dourado ---------- */
.btn-outline {
	min-width: 180px;
	padding: 12px 28px;
	font-size: 14px;
	color: #ffe29a;
	background:
		linear-gradient(180deg, rgba(255, 180, 60, 0.12), rgba(255, 120, 0, 0.05));
	border: 1px solid #c9a24a;
	border-radius: 2px;
	box-shadow: 0 0 18px rgba(255, 160, 40, 0.12);
}

.btn-outline.is-lit {
	color: #fff2c8;
	border-color: #ffd27a;
	box-shadow:
		0 0 0 1px rgba(255, 210, 120, 0.25),
		0 0 20px rgba(255, 160, 40, 0.35);
}

/* ---------- Read more ---------- */
.btn-more {
	padding: 8px 14px;
	font-size: 11px;
	color: #f0e6d4;
	letter-spacing: 0.06em;
	border-radius: 2px;
	background:
		linear-gradient(180deg, rgba(70, 55, 40, 0.95), rgba(30, 22, 18, 0.95));
	border: 1px solid rgba(255, 180, 80, 0.22);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.btn-more.is-lit {
	color: #fff;
	border-color: rgba(255, 200, 100, 0.5);
	box-shadow: 0 0 14px rgba(255, 150, 40, 0.3);
}

/* Varredura VERTICAL (diferente do shine diagonal dos cards) */
.btn-scan {
	position: absolute;
	left: 0;
	right: 0;
	top: -40%;
	height: 40%;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(255, 230, 180, 0.2) 45%,
		rgba(255, 200, 120, 0.28) 50%,
		rgba(255, 230, 180, 0.2) 55%,
		transparent 100%
	);
	opacity: 0;
}

.btn.is-lit .btn-scan {
	animation: btn-scan 1.35s ease-in-out infinite;
}

@keyframes btn-scan {
	0% { top: -45%; opacity: 0; }
	15% { opacity: 0.9; }
	50% { top: 55%; opacity: 0.75; }
	85% { opacity: 0.35; }
	100% { top: 120%; opacity: 0; }
}

@keyframes btn-pulse {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(255, 230, 160, 0.55) inset,
			0 8px 22px rgba(255, 120, 0, 0.4),
			0 0 0 2px rgba(255, 170, 60, 0.25),
			0 0 16px rgba(255, 140, 30, 0.35);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(255, 240, 180, 0.7) inset,
			0 10px 26px rgba(255, 130, 20, 0.55),
			0 0 0 3px rgba(255, 170, 60, 0.4),
			0 0 28px rgba(255, 150, 40, 0.55);
	}
}

/* Ripple click — marrom L2 */
.btn-ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: btn-ripple .55s ease-out forwards;
	background: rgba(90, 65, 45, 0.4);
	pointer-events: none;
	z-index: 2;
}

@keyframes btn-ripple {
	to {
		transform: scale(2.6);
		opacity: 0;
	}
}

@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; }
}