/**
 * Rivalries — sim racing aesthetic with carbon fiber texture, tier glow,
 * shimmer animations, and premium dark design.
 * @see Issue #170
 *
 * Uses design tokens from tokens.css:
 *   --ne-surface, --ne-elevated, --ne-border, --ne-border-s
 *   --ne-text, --ne-text-muted, --ne-text-subtle
 *   --ne-yellow (#FFB800), --ne-red (#FF4F4F), --ne-accent (#8B7FE8)
 *   --ne-radius-sm, --ne-radius-md
 *
 * Custom tier colors (not in tokens — kept as explicit values):
 *   Competidores: #3b82f6  (blue, readable on dark surfaces)
 *   Rivales:      --ne-yellow
 *   Nemesis:      --ne-red
 *   Gold leader:  --ne-yellow
 */

/* ─── Keyframes ────────────────────────────────────────────────────── */

@keyframes rivalry-glow-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

@keyframes score-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes leader-pulse {
	0%, 100% { box-shadow: 0 0 0 2px var(--ne-yellow); }
	50% { box-shadow: 0 0 8px 3px var(--ne-yellow); }
}


/* ─── Hero ──────────────────────────────────────────────────────────── */

.ne-rivalry-hero {
	position: relative;
	padding: 4rem 2rem 3rem;
	text-align: center;
	overflow: hidden;
}

.ne-rivalry-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ne-rivalry-hero__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 30, 0.9));
}

.ne-rivalry-hero__content {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.ne-rivalry-hero__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ne-yellow);
	margin-bottom: 0.5rem;
}

.ne-rivalry-hero__title {
	font-size: 2rem;
	font-weight: 800;
	color: var(--ne-text);
	margin: 0 0 0.75rem;
	line-height: 1.2;
}

.ne-rivalry-hero__subtitle {
	font-size: 0.95rem;
	color: var(--ne-text-muted);
	line-height: 1.6;
	margin: 0;
}


/* ─── Grid Layout ───────────────────────────────────────────────────── */

.ne-rivalry-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}

.ne-rivalry-grid--profile {
	grid-template-columns: 1fr;
}


/* ─── Card — Base ──────────────────────────────────────────────────── */

.ne-rivalry-card {
	position: relative;
	background-color: var(--ne-surface);
	/* Carbon fiber texture — CSS only */
	background-image:
		linear-gradient(135deg, rgba(255,255,255,0.02) 25%, transparent 25%),
		linear-gradient(225deg, rgba(255,255,255,0.02) 25%, transparent 25%),
		linear-gradient(315deg, rgba(255,255,255,0.02) 25%, transparent 25%),
		linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%);
	background-size: 4px 4px;
	border: 1px solid var(--ne-border);
	border-left: 3px solid var(--ne-border-s);
	border-radius: var(--ne-radius-md);
	padding: 1rem 1.25rem;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.ne-rivalry-card:hover {
	transform: translateY(-2px);
	border-color: var(--ne-border-s);
	background-color: var(--ne-elevated);
}


/* ─── Card — Tier Glow ─────────────────────────────────────────────── */

/* Competidores: blue */
.ne-rivalry-card--competidores {
	border-left-color: #3b82f6;
	box-shadow:
		-2px 0 8px -2px rgba(59, 130, 246, 0.3),
		0 0 12px -4px rgba(59, 130, 246, 0.15);
}

.ne-rivalry-card--competidores:hover {
	box-shadow:
		-3px 0 14px -2px rgba(59, 130, 246, 0.45),
		0 2px 20px -4px rgba(59, 130, 246, 0.2);
}

/* Rivales: amber */
.ne-rivalry-card--rivales {
	border-left-color: var(--ne-yellow);
	box-shadow:
		-2px 0 10px -2px rgba(255, 184, 0, 0.35),
		0 0 14px -4px rgba(255, 184, 0, 0.15);
}

.ne-rivalry-card--rivales:hover {
	box-shadow:
		-3px 0 16px -2px rgba(255, 184, 0, 0.5),
		0 2px 22px -4px rgba(255, 184, 0, 0.25);
}

/* Nemesis: red — strongest glow */
.ne-rivalry-card--nemesis {
	border-left-color: var(--ne-red);
	box-shadow:
		-3px 0 12px -2px rgba(255, 79, 79, 0.4),
		0 0 16px -4px rgba(255, 79, 79, 0.2);
}

.ne-rivalry-card--nemesis:hover {
	box-shadow:
		-4px 0 20px -2px rgba(255, 79, 79, 0.55),
		0 2px 28px -4px rgba(255, 79, 79, 0.3);
}


/* ─── Header ────────────────────────────────────────────────────────── */

.ne-rivalry-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.ne-rivalry-card__tier {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 3px 10px;
	border-radius: var(--ne-radius-sm);
	color: #fff;
	/* Frosted glass effect */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.ne-rivalry-card__tier--competidores {
	background: rgba(59, 130, 246, 0.15);
	border: 1px solid rgba(59, 130, 246, 0.25);
	color: #3b82f6;
}

.ne-rivalry-card__tier--rivales {
	background: rgba(255, 184, 0, 0.1);
	border: 1px solid rgba(255, 184, 0, 0.2);
	color: var(--ne-yellow);
}

.ne-rivalry-card__tier--nemesis {
	background: rgba(255, 79, 79, 0.1);
	border: 1px solid rgba(255, 79, 79, 0.2);
	color: var(--ne-red);
}

.ne-rivalry-card__score {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--ne-text-muted);
	font-variant-numeric: tabular-nums;
}


/* ─── Score Bar — Shimmer Animation ────────────────────────────────── */

.ne-rivalry-card__score-bar {
	height: 5px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 3px;
	margin-bottom: 1rem;
	overflow: hidden;
}

.ne-rivalry-card__score-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.5s ease;
	position: relative;
}

/* Tier-colored fill with shimmer gradient overlay */
.ne-rivalry-card--competidores .ne-rivalry-card__score-fill {
	background:
		linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%),
		#3b82f6;
	background-size: 200% 100%, 100% 100%;
}

.ne-rivalry-card--rivales .ne-rivalry-card__score-fill {
	background:
		linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%),
		var(--ne-yellow);
	background-size: 200% 100%, 100% 100%;
}

.ne-rivalry-card--nemesis .ne-rivalry-card__score-fill {
	background:
		linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%),
		var(--ne-red);
	background-size: 200% 100%, 100% 100%;
}


/* ─── Drivers Row ───────────────────────────────────────────────────── */

.ne-rivalry-card__drivers {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ne-rivalry-card__driver {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
	padding: 0.5rem 0.25rem;
	border-radius: var(--ne-radius-md);
	border-left: 2px solid transparent;
	transition: border-color 0.2s ease;
}

.ne-rivalry-card__driver--leader {
	border-left-color: var(--ne-yellow);
}


/* ─── Avatars — Tier Ring + Leader Pulse ────────────────────────────── */

.ne-rivalry-card__avatar {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--ne-border-s);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Tier-colored ring on avatars */
.ne-rivalry-card--competidores .ne-rivalry-card__avatar {
	border-color: rgba(59, 130, 246, 0.5);
}

.ne-rivalry-card--rivales .ne-rivalry-card__avatar {
	border-color: rgba(255, 184, 0, 0.5);
}

.ne-rivalry-card--nemesis .ne-rivalry-card__avatar {
	border-color: rgba(255, 79, 79, 0.5);
}

/* Leader avatar: gold ring */
.ne-rivalry-card__driver--leader .ne-rivalry-card__avatar {
	border-color: var(--ne-yellow);
}

.ne-rivalry-card__name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ne-text);
	text-decoration: none;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ne-rivalry-card__name:hover {
	color: var(--ne-accent);
}

.ne-rivalry-card__wins {
	font-size: 0.7rem;
	color: var(--ne-text-subtle);
}


/* ─── VS / Center Column ────────────────────────────────────────────── */

.ne-rivalry-card__vs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	min-width: 80px;
}

.ne-rivalry-card__vs-icon {
	font-size: 1.2rem;
	line-height: 1;
	filter: grayscale(0.3);
	transition: filter 0.3s ease, text-shadow 0.3s ease;
}

/* Tier-colored VS glow */
.ne-rivalry-card--competidores .ne-rivalry-card__vs-icon {
	text-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

.ne-rivalry-card--rivales .ne-rivalry-card__vs-icon {
	text-shadow: 0 0 6px rgba(255, 184, 0, 0.5);
}

.ne-rivalry-card--nemesis .ne-rivalry-card__vs-icon {
	text-shadow: 0 0 8px rgba(255, 79, 79, 0.6);
}

.ne-rivalry-card:hover .ne-rivalry-card__vs-icon {
	filter: grayscale(0);
}

/* H2H Meter — taller, rounded, gradient */
.ne-rivalry-card__meter {
	display: flex;
	width: 100%;
	height: 8px;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
}

.ne-rivalry-card__meter-d1 {
	background: linear-gradient(90deg, #3b82f6, #60a5fa);
	border-radius: 4px 0 0 4px;
	transition: width 0.3s ease;
}

.ne-rivalry-card__meter-d2 {
	background: linear-gradient(90deg, #ef4444, var(--ne-red));
	border-radius: 0 4px 4px 0;
	transition: width 0.3s ease;
}

.ne-rivalry-card__record {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ne-text-muted);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.05em;
}


/* ─── Footer ────────────────────────────────────────────────────────── */

.ne-rivalry-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--ne-border);
}

.ne-rivalry-card__shared {
	font-size: 0.7rem;
	color: var(--ne-text-subtle);
}

.ne-rivalry-card__link {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ne-accent);
	text-decoration: none;
}

.ne-rivalry-card__link:hover {
	text-decoration: underline;
}


/* ─── Empty & Login States ──────────────────────────────────────────── */

.ne-rivalry-empty {
	text-align: center;
	padding: 3rem 1rem;
}

.ne-rivalry-login {
	text-align: center;
	padding: 2rem;
}

.ne-rivalry-footer {
	padding: 1rem 0;
}


/* ─── Admin Tools ───────────────────────────────────────────────────── */

.ne-rivalry-admin-tools {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}


/* ─── Event Rivalries Section ──────────────────────────────────────── */

.ne-event-rivalries {
	margin-top: 2rem;
}

.ne-event-rivalries .ne-rivalry-grid {
	grid-template-columns: 1fr;
}


/* ─── Animations (motion-safe only) ────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	/* Glow pulse on nemesis cards */
	.ne-rivalry-card--nemesis {
		animation: rivalry-glow-pulse 3s ease-in-out infinite;
	}

	/* Score bar shimmer sweep */
	.ne-rivalry-card__score-fill {
		animation: score-shimmer 4s ease-in-out infinite;
	}

	/* Leader avatar pulse */
	.ne-rivalry-card__driver--leader .ne-rivalry-card__avatar {
		animation: leader-pulse 2.5s ease-in-out infinite;
	}
}


/* ─── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.ne-rivalry-grid {
		grid-template-columns: 1fr;
	}

	.ne-rivalry-hero__title {
		font-size: 1.5rem;
	}

	.ne-rivalry-hero {
		padding: 3rem 1.25rem 2rem;
	}
}

@media (max-width: 480px) {
	/* Reduce animations on small screens to save battery */
	.ne-rivalry-card {
		background-image: none;
	}

	.ne-rivalry-card__drivers {
		flex-direction: column;
		gap: 0.5rem;
	}

	.ne-rivalry-card__driver {
		flex-direction: row;
		gap: 0.5rem;
		text-align: left;
		align-items: center;
		padding: 0.35rem 0.5rem;
		border-left: none;
		border-bottom: 2px solid transparent;
	}

	.ne-rivalry-card__driver--leader {
		border-bottom-color: var(--ne-yellow);
	}

	.ne-rivalry-card__vs {
		width: 100%;
		min-width: unset;
		flex-direction: row;
		gap: 0.75rem;
	}

	.ne-rivalry-card__vs-icon {
		font-size: 1rem;
	}

	.ne-rivalry-card__meter {
		flex: 1;
	}

	.ne-rivalry-card__avatar {
		width: 40px;
		height: 40px;
	}

	.ne-rivalry-card__name {
		max-width: 100px;
	}

	.ne-rivalry-card__footer {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}

	/* Disable expensive animations on mobile */
	.ne-rivalry-card--nemesis {
		animation: none;
	}

	.ne-rivalry-card__score-fill {
		animation: none;
	}

	.ne-rivalry-card__driver--leader .ne-rivalry-card__avatar {
		animation: none;
	}

	/* Reduce glow intensity on mobile */
	.ne-rivalry-card--competidores,
	.ne-rivalry-card--rivales,
	.ne-rivalry-card--nemesis {
		box-shadow: none;
	}
}