/* Demonic Project — Weapon Paints skin selector */

@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap");

:root {
	--dp-bg-0: #06060a;
	--dp-bg-1: #0e0e14;
	--dp-bg-2: #16161f;
	--dp-surface: rgba(22, 22, 31, 0.72);
	--dp-border: rgba(220, 38, 38, 0.35);
	--dp-border-hover: rgba(220, 38, 38, 0.65);
	--dp-accent: #dc2626;
	--dp-accent-soft: #ef4444;
	--dp-accent-glow: rgba(220, 38, 38, 0.45);
	--dp-purple: #7c3aed;
	--dp-text: #f4f4f5;
	--dp-muted: #a1a1aa;
	--dp-radius: 12px;
	--dp-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
	--dp-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.dp-body {
	margin: 0;
	min-height: 100vh;
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--dp-text);
	background-color: var(--dp-bg-0);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% -20%, rgba(220, 38, 38, 0.18), transparent),
		radial-gradient(ellipse 60% 40% at 100% 100%, rgba(124, 58, 237, 0.12), transparent),
		linear-gradient(180deg, var(--dp-bg-0) 0%, var(--dp-bg-1) 50%, var(--dp-bg-0) 100%);
	background-attachment: fixed;
	animation: dp-bg-pulse 12s ease-in-out infinite alternate;
}

@keyframes dp-bg-pulse {
	0% {
		background-color: var(--dp-bg-0);
	}
	100% {
		background-color: #08080e;
	}
}

/* Site header bar */
.dp-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	padding: 0.85rem 1.5rem;
	background: rgba(6, 6, 10, 0.85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--dp-border);
	animation: dp-slide-down 0.6s ease-out;
}

.dp-site-header__inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.dp-site-header__brand {
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dp-text);
	text-decoration: none;
	background: linear-gradient(135deg, var(--dp-accent-soft), var(--dp-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.dp-site-header__tag {
	font-size: 0.75rem;
	color: var(--dp-muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@keyframes dp-slide-down {
	from {
		opacity: 0;
		transform: translateY(-12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Hero / login strip (replaces plain bg-primary) */
.dp-hero,
.bg-primary.dp-hero {
	padding: 1.5rem 1.75rem;
	margin: 1rem auto 0;
	max-width: 1400px;
	border-radius: var(--dp-radius);
	border: 1px solid var(--dp-border);
	background: linear-gradient(135deg, rgba(220, 38, 38, 0.15), rgba(124, 58, 237, 0.1)) !important;
	background-color: transparent !important;
	box-shadow: var(--dp-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	animation: dp-fade-in 0.55s ease-out;
}

.dp-hero h2 {
	margin: 0;
	font-family: "Rajdhani", sans-serif;
	font-weight: 600;
	font-size: clamp(1.1rem, 2.5vw, 1.45rem);
	letter-spacing: 0.02em;
	color: var(--dp-text);
}

.dp-hero .btn-danger {
	border: none;
	background: linear-gradient(135deg, #b91c1c, var(--dp-accent));
	transition: transform var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-hero .btn-danger:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px var(--dp-accent-glow);
}

@keyframes dp-fade-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Weapon grid */
.card-group.mt-2,
.dp-weapon-grid {
	max-width: 1400px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 0.75rem 2rem;
}

.card-group .col-sm-2 {
	animation: dp-card-in 0.5s ease-out backwards;
}

.card-group .col-sm-2:nth-child(1) { animation-delay: 0.05s; }
.card-group .col-sm-2:nth-child(2) { animation-delay: 0.08s; }
.card-group .col-sm-2:nth-child(3) { animation-delay: 0.11s; }
.card-group .col-sm-2:nth-child(4) { animation-delay: 0.14s; }
.card-group .col-sm-2:nth-child(5) { animation-delay: 0.17s; }
.card-group .col-sm-2:nth-child(6) { animation-delay: 0.2s; }
.card-group .col-sm-2:nth-child(7) { animation-delay: 0.23s; }
.card-group .col-sm-2:nth-child(8) { animation-delay: 0.26s; }
.card-group .col-sm-2:nth-child(9) { animation-delay: 0.29s; }
.card-group .col-sm-2:nth-child(10) { animation-delay: 0.32s; }
.card-group .col-sm-2:nth-child(n+11) { animation-delay: 0.35s; }

@keyframes dp-card-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* Weapon cards */
.card-group .card {
	height: 100%;
	border-radius: var(--dp-radius) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: var(--dp-surface) !important;
	backdrop-filter: blur(8px);
	transition:
		transform var(--dp-transition),
		border-color var(--dp-transition),
		box-shadow var(--dp-transition);
	overflow: hidden;
}

.card-group .card.border-primary {
	border-color: var(--dp-border) !important;
	box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.card-group .card:hover {
	transform: translateY(-6px);
	border-color: var(--dp-border-hover) !important;
	box-shadow:
		var(--dp-shadow),
		0 0 24px var(--dp-accent-glow);
}

.card-group .card-header {
	background: rgba(220, 38, 38, 0.08) !important;
	border-bottom: 1px solid var(--dp-border) !important;
	padding: 0.65rem 0.5rem;
}

.card-group .card-body {
	padding: 1rem 0.75rem;
}

.card-group .card-footer {
	background: rgba(0, 0, 0, 0.25) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding: 0.85rem;
}

.card-title.item-name,
.item-name {
	font-family: "Rajdhani", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	text-align: center;
	color: var(--dp-text);
	margin: 0.25rem 0;
}

.card-title.item-name h6,
h6.card-title.item-name {
	font-size: 0.75rem;
	color: var(--dp-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.skin-image {
	margin: 0.5rem auto;
	display: block;
	width: 58%;
	max-width: 140px;
	height: auto;
	filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
	transition: transform var(--dp-transition), filter var(--dp-transition);
}

.card-group .card:hover .skin-image {
	transform: scale(1.06);
	filter: drop-shadow(0 10px 20px rgba(220, 38, 38, 0.25));
}

/* Forms & selects */
.card-group .form-control,
.card-group .form-select,
.dp-hero .form-control {
	background: var(--dp-bg-2) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: var(--dp-text) !important;
	border-radius: 8px;
	transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.card-group .form-control:focus,
.card-group .form-select:focus {
	border-color: var(--dp-accent) !important;
	box-shadow: 0 0 0 3px var(--dp-accent-glow) !important;
}

.card-group .btn-primary {
	background: linear-gradient(135deg, var(--dp-accent), #991b1b) !important;
	border: none !important;
	font-weight: 600;
	letter-spacing: 0.03em;
	transition: transform var(--dp-transition), box-shadow var(--dp-transition);
}

.card-group .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px var(--dp-accent-glow);
}

/* Modals */
.modal-content {
	background: var(--dp-bg-2) !important;
	border: 1px solid var(--dp-border);
	border-radius: var(--dp-radius);
	color: var(--dp-text);
	animation: dp-modal-in 0.35s ease-out;
}

@keyframes dp-modal-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(-8px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.modal-header {
	border-bottom-color: var(--dp-border) !important;
}

.modal-footer {
	border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.modal .btn-secondary {
	background: var(--dp-bg-1);
	border-color: rgba(255, 255, 255, 0.15);
	color: var(--dp-text);
}

.modal .btn-danger {
	background: linear-gradient(135deg, var(--dp-accent), #991b1b);
	border: none;
}

/* Footer */
.dp-footer.container {
	max-width: 1400px;
	animation: dp-fade-in 0.7s ease-out 0.2s backwards;
}

.dp-footer footer {
	border-top-color: var(--dp-border) !important;
}

.dp-footer .text-body-secondary {
	color: var(--dp-muted) !important;
	font-size: 0.9rem;
}

.dp-footer a {
	color: var(--dp-accent-soft);
	text-decoration: none;
	transition: color var(--dp-transition);
}

.dp-footer a:hover {
	color: var(--dp-text);
}

/* Steam login button area */
.dp-hero #loginButton,
.dp-hero img {
	transition: transform var(--dp-transition);
}

.dp-hero #loginButton:hover,
.dp-hero a:hover img {
	transform: scale(1.03);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (max-width: 576px) {
	.dp-site-header__inner {
		flex-direction: column;
		text-align: center;
	}

	.skin-image {
		width: 70%;
	}
}