/* =========================================================
   Gerador de Botões e Cards — estilos do frontend
   ========================================================= */

.bcg-el {
	box-sizing: border-box;
	line-height: 1.4;
	text-decoration: none;
	cursor: default;
	transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease, color .25s ease, opacity .25s ease;
	-webkit-font-smoothing: antialiased;
	will-change: transform;
	position: relative;
	vertical-align: middle;
}

.bcg-button {
	cursor: pointer;
}

.bcg-card .bcg-card-content {
	font-weight: 400;
	opacity: .92;
}

.bcg-card .bcg-card-content p {
	margin: 0 0 .6em;
}

.bcg-card .bcg-card-content p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   Efeitos ao passar o mouse (hover)
   --------------------------------------------------------- */
.bcg-hover-grow:hover     { transform: scale(1.06); }
.bcg-hover-shrink:hover   { transform: scale(0.94); }
.bcg-hover-lift:hover     { transform: translateY(-6px); }
.bcg-hover-brighten:hover { filter: brightness(1.15); }

.bcg-hover-glow:hover {
	box-shadow: 0 0 18px var(--bcg-glow-color, #6366f1),
	            0 0 36px var(--bcg-glow-color, #6366f1);
}

.bcg-hover-invert:hover {
	filter: invert(1) hue-rotate(180deg);
}

/* Reflexo de luz que cruza o elemento */
.bcg-hover-shine {
	overflow: hidden;
}
.bcg-hover-shine::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 80%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
	transform: skewX(-20deg);
	transition: left .6s ease;
	pointer-events: none;
}
.bcg-hover-shine:hover::after {
	left: 130%;
}

/* ---------------------------------------------------------
   Animações de entrada
   --------------------------------------------------------- */
.bcg-entrance {
	opacity: 0;
}
.bcg-entrance.bcg-animated {
	opacity: 1;
	animation-duration: .7s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(.22,1,.36,1);
}

.bcg-in-fade.bcg-animated        { animation-name: bcgFade; }
.bcg-in-slide-up.bcg-animated    { animation-name: bcgSlideUp; }
.bcg-in-slide-down.bcg-animated  { animation-name: bcgSlideDown; }
.bcg-in-slide-left.bcg-animated  { animation-name: bcgSlideLeft; }
.bcg-in-slide-right.bcg-animated { animation-name: bcgSlideRight; }
.bcg-in-zoom.bcg-animated        { animation-name: bcgZoom; }

@keyframes bcgFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes bcgSlideUp {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes bcgSlideDown {
	from { opacity: 0; transform: translateY(-36px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes bcgSlideLeft {
	from { opacity: 0; transform: translateX(36px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes bcgSlideRight {
	from { opacity: 0; transform: translateX(-36px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes bcgZoom {
	from { opacity: 0; transform: scale(.8); }
	to   { opacity: 1; transform: scale(1); }
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
	.bcg-entrance { opacity: 1; }
	.bcg-entrance.bcg-animated { animation: none; }
	.bcg-el { transition: none; }
}

/* ---------------------------------------------------------
   Efeitos de borda
   --------------------------------------------------------- */

/* Contorno em degradê (estático ou circulando), desenhado por pseudo-elemento.
   A propriedade --bcg-bangle é animada para criar o movimento. */
@property --bcg-bangle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.bcg-border-grad::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--bcg-bw, 2px));
	border-radius: inherit;
	padding: var(--bcg-bw, 2px);
	background: conic-gradient(
		from var(--bcg-bangle, 0deg),
		var(--bcg-bcol1, #6366f1),
		var(--bcg-bcol2, #ec4899),
		var(--bcg-bcol1, #6366f1)
	);
	/* Recorta para mostrar apenas o "anel" da borda. */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}

.bcg-border-grad-rotate::before {
	animation: bcgBorderSpin var(--bcg-bspeed, 4s) linear infinite;
}

@keyframes bcgBorderSpin {
	to { --bcg-bangle: 360deg; }
}

/* Brilho de borda pulsando (movimento). O brilho estático já vem no box-shadow inline. */
.bcg-border-glow-pulse {
	animation: bcgBorderPulse var(--bcg-bspeed, 3s) ease-in-out infinite;
}

@keyframes bcgBorderPulse {
	0%, 100% { box-shadow: 0 0 calc(var(--bcg-bglow, 16px) * 0.35) var(--bcg-bglow-color, #6366f1); }
	50%      { box-shadow: 0 0 var(--bcg-bglow, 16px) var(--bcg-bglow-color, #6366f1); }
}

@media ( prefers-reduced-motion: reduce ) {
	.bcg-border-grad-rotate::before,
	.bcg-border-glow-pulse {
		animation: none;
	}
}

/* ---------------------------------------------------------
   Ícones
   --------------------------------------------------------- */
.bcg-has-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
}
.bcg-el .dashicons {
	font-size: 1.2em;
	width: 1.2em;
	height: 1.2em;
	line-height: 1;
}
.bcg-el .bcg-icon-svg {
	width: 1.2em;
	height: 1.2em;
	flex: 0 0 auto;
	vertical-align: middle;
}

/* ---------------------------------------------------------
   Degradê de borda: variação linear e sentido anti-horário
   --------------------------------------------------------- */
.bcg-border-grad-linear::before {
	background: linear-gradient(
		var(--bcg-bangle, 0deg),
		var(--bcg-bcol1, #6366f1),
		var(--bcg-bcol2, #ec4899),
		var(--bcg-bcol1, #6366f1)
	);
}
.bcg-border-grad-ccw::before {
	animation-direction: reverse;
}