/* ==========================================================
   PELEGOT — Component Library (pel- prefix)
   ========================================================== */

/* --- Buttons --- */
.pel-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.6rem 1.5rem;
	font-size: var(--text-sm);
	font-weight: 600;
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
	line-height: 1.4;
	white-space: nowrap;
}

.pel-btn--primary { background: var(--color-primary); color: #fff; }
.pel-btn--primary:hover { background: var(--color-primary-hover); color: #fff; box-shadow: var(--shadow-glow); }

.pel-btn--outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.pel-btn--outline:hover { background: var(--color-primary); color: #fff; }

.pel-btn--ghost { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-default); }
.pel-btn--ghost:hover { border-color: var(--color-text-secondary); color: var(--color-text-primary); }

.pel-btn--fire { background: var(--gradient-fire); color: #fff; border: none; }
.pel-btn--fire:hover { box-shadow: 0 0 25px rgba(255, 45, 59, 0.4); transform: translateY(-1px); color: #fff; }

.pel-btn--lg { padding: 0.85rem 2.25rem; font-size: var(--text-base); }
.pel-btn--sm { padding: 0.4rem 1rem; font-size: var(--text-xs); }
.pel-btn--block { width: 100%; }

/* --- Cards --- */
.pel-card {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.pel-card:hover { border-color: var(--color-border-hover); }

.pel-card--glass {
	background: var(--glass-bg);
	backdrop-filter: var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border: var(--glass-border);
}

.pel-card--interactive:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 45, 59, 0.3);
	box-shadow: var(--shadow-md);
}

.pel-card__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-text-primary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--space-3);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border-default);
}

.pel-card__body {
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
	line-height: 1.6;
}

.pel-card__link {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	font-weight: 600;
	text-align: center;
	color: var(--color-text-accent);
}
.pel-card__link:hover { color: var(--color-primary-hover); }

/* --- Badges --- */
.pel-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.15rem 0.6rem;
	border-radius: var(--radius-full);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.pel-badge--online { background: rgba(46, 204, 113, 0.15); color: var(--color-success); }
.pel-badge--offline { background: rgba(255, 68, 68, 0.15); color: var(--color-danger); }
.pel-badge--primary { background: var(--color-primary-muted); color: var(--color-primary); }
.pel-badge--gold { background: rgba(255, 215, 0, 0.15); color: var(--color-accent-gold); }

/* --- Stat Numbers --- */
.pel-stat { text-align: center; }
.pel-stat__number {
	font-family: var(--font-stat);
	font-size: var(--text-3xl);
	color: var(--color-text-primary);
	line-height: 1;
	letter-spacing: 0.02em;
}
.pel-stat__label {
	font-family: var(--font-body);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: var(--space-1);
}

/* --- Status Dot --- */
.pel-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.pel-dot--online { background: var(--color-success); box-shadow: 0 0 6px rgba(46, 204, 113, 0.5); }
.pel-dot--offline { background: var(--color-danger); }
.pel-dot--pulse { animation: pel-pulse 2s ease-in-out infinite; }

@keyframes pel-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

/* --- Section Title --- */
.pel-section-title {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--color-text-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-8);
	position: relative;
	display: inline-block;
}
.pel-section-title::after {
	content: '';
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--color-primary);
	border-radius: var(--radius-full);
}

/* --- Scroll Reveal --- */
.pel-reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.pel-reveal.pel-revealed {
	opacity: 1;
	transform: translateY(0);
}
.pel-reveal--delay-1 { transition-delay: 0.1s; }
.pel-reveal--delay-2 { transition-delay: 0.2s; }
.pel-reveal--delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
	.pel-reveal { opacity: 1; transform: none; transition: none; }
}