/**
 * Universal Riven Card runtime.
 *
 * Balanced borders, restrained hover glow and
 * variable-driven backgrounds for reliable hover states.
 *
 * @package RivenGaming
 */

.riven-card {
	--riven-card-normal-bg: #111827;
	--riven-card-normal-hover-bg: #172033;

	/* Semantic card tokens */
	--riven-card-bg: var(--riven-card-normal-bg);
	--riven-card-hover-bg: var(--riven-card-normal-hover-bg);

	--riven-card-accent: #3b82f6;
	--riven-card-hover-accent: #60a5fa;
	--riven-card-accent-soft: color-mix(
		in srgb,
		var(--riven-card-accent) 14%,
		transparent
	);
	--riven-card-accent-border: color-mix(
		in srgb,
		var(--riven-card-accent) 28%,
		transparent
	);

	--riven-card-text: #ffffff;
	--riven-card-muted: #8fa8d8;

	--riven-card-overlay: transparent;
	--riven-card-overlay-opacity: 0;
	--riven-card-overlay-hover-opacity: 1;

	--riven-card-ambient-base: #07101f;
	--riven-card-ambient-color: #3b82f6;
	--riven-card-ambient-hover-color: #60a5fa;
	--riven-card-ambient-opacity: .12;
	--riven-card-ambient-hover-opacity: .18;
	--riven-card-ambient-x: 50%;
	--riven-card-ambient-y: 0%;
	--riven-card-ambient-spread: 52%;
	--riven-card-ambient-hover-x: 50%;
	--riven-card-ambient-hover-y: 0%;
	--riven-card-ambient-hover-spread: 58%;

	--riven-card-linear-color-1: #111827;
	--riven-card-linear-color-2: #1d4ed8;
	--riven-card-linear-hover-color-1: #172033;
	--riven-card-linear-hover-color-2: #2563eb;
	--riven-card-linear-angle: 135deg;
	--riven-card-linear-hover-angle: 145deg;
	--riven-card-linear-stop-1: 0%;
	--riven-card-linear-stop-2: 100%;
	--riven-card-linear-hover-stop-1: 0%;
	--riven-card-linear-hover-stop-2: 100%;

	--riven-card-mesh-base: #07101f;
	--riven-card-mesh-color-1: #3b82f6;
	--riven-card-mesh-color-2: #8b5cf6;
	--riven-card-mesh-hover-color-1: #60a5fa;
	--riven-card-mesh-hover-color-2: #a78bfa;
	--riven-card-mesh-opacity-1: .13;
	--riven-card-mesh-opacity-2: .10;
	--riven-card-mesh-hover-opacity-1: .20;
	--riven-card-mesh-hover-opacity-2: .16;
	--riven-card-mesh-x-1: 20%;
	--riven-card-mesh-y-1: 0%;
	--riven-card-mesh-size-1: 58%;
	--riven-card-mesh-x-2: 85%;
	--riven-card-mesh-y-2: 100%;
	--riven-card-mesh-size-2: 62%;

	--riven-card-border: rgba(72, 112, 184, .42);
	--riven-card-hover-border: rgba(88, 142, 235, .58);

	--riven-card-glow: #2d4f86;
	--riven-card-glow-blur: 0px;
	--riven-card-glow-spread: 0px;
	--riven-card-glow-x: 0px;
	--riven-card-glow-y: 0px;
	--riven-card-glow-opacity: .08;

	--riven-card-hover-glow: #5f95ff;
	--riven-card-hover-glow-blur: 12px;
	--riven-card-hover-glow-spread: -4px;
	--riven-card-hover-glow-x: 0px;
	--riven-card-hover-glow-y: 0px;
	--riven-card-hover-glow-opacity: .16;

	--riven-card-glossy-enabled: 0;
	--riven-card-glossy-tint: #ffffff;
	--riven-card-glossy-opacity: .08;

	--riven-card-glass-blur: 14px;
	--riven-card-glass-saturation: 135%;
	--riven-card-glass-brightness: 100%;

	--riven-card-duration: 300ms;
	--riven-card-easing: ease;

	position: relative;
	isolation: isolate;
	box-sizing: border-box;

	background: var(--riven-card-normal-bg);
	border: 1px solid var(--riven-card-border);
	border-radius: 18px;

	box-shadow:
		var(--riven-card-glow-x)
		var(--riven-card-glow-y)
		var(--riven-card-glow-blur)
		var(--riven-card-glow-spread)
		color-mix(
			in srgb,
			var(--riven-card-glow)
			calc(var(--riven-card-glow-opacity) * 100%),
			transparent
		),
		inset 0 0 0 1px
		color-mix(
			in srgb,
			var(--riven-card-border) 22%,
			transparent
		);

	transition:
		background var(--riven-card-duration) var(--riven-card-easing),
		border-color var(--riven-card-duration) var(--riven-card-easing),
		box-shadow var(--riven-card-duration) var(--riven-card-easing),
		backdrop-filter var(--riven-card-duration) var(--riven-card-easing);
}

.riven-card:hover {
	border-color: var(--riven-card-hover-border);

	box-shadow:
		var(--riven-card-hover-glow-x)
		var(--riven-card-hover-glow-y)
		var(--riven-card-hover-glow-blur)
		var(--riven-card-hover-glow-spread)
		color-mix(
			in srgb,
			var(--riven-card-hover-glow)
			calc(var(--riven-card-hover-glow-opacity) * 100%),
			transparent
		),
		inset 0 0 0 1px
		color-mix(
			in srgb,
			var(--riven-card-hover-border) 30%,
			transparent
		);
}


.riven-card::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	opacity: calc(
		var(--riven-card-glossy-enabled)
		* var(--riven-card-glossy-opacity)
	);
	background: var(--riven-card-glossy-tint);
	transition: opacity var(--riven-card-duration) var(--riven-card-easing);
}

.riven-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0;
	background: transparent;

	transition:
		opacity var(--riven-card-duration) var(--riven-card-easing),
		background var(--riven-card-duration) var(--riven-card-easing);
}

/* Flat: Normal */
.riven-card-style-mode-flat.riven-card-flat-preset-normal .riven-card {
	background: var(--riven-card-normal-bg);
}

.riven-card-style-mode-flat.riven-card-flat-preset-normal .riven-card:hover {
	background: var(--riven-card-normal-hover-bg);
}

/* Flat: Ambient */
.riven-card-style-mode-flat.riven-card-flat-preset-ambient .riven-card {
	background:
		radial-gradient(
			at var(--riven-card-ambient-x) var(--riven-card-ambient-y),
			color-mix(
				in srgb,
				var(--riven-card-ambient-color)
				calc(var(--riven-card-ambient-opacity) * 100%),
				transparent
			),
			transparent var(--riven-card-ambient-spread)
		),
		var(--riven-card-ambient-base);
}

.riven-card-style-mode-flat.riven-card-flat-preset-ambient .riven-card:hover {
	background:
		radial-gradient(
			at var(--riven-card-ambient-hover-x) var(--riven-card-ambient-hover-y),
			color-mix(
				in srgb,
				var(--riven-card-ambient-hover-color)
				calc(var(--riven-card-ambient-hover-opacity) * 100%),
				transparent
			),
			transparent var(--riven-card-ambient-hover-spread)
		),
		var(--riven-card-ambient-base);
}

/* Flat: Linear */
.riven-card-style-mode-flat.riven-card-flat-preset-linear .riven-card {
	background:
		linear-gradient(
			var(--riven-card-linear-angle),
			var(--riven-card-linear-color-1) var(--riven-card-linear-stop-1),
			var(--riven-card-linear-color-2) var(--riven-card-linear-stop-2)
		);
}

.riven-card-style-mode-flat.riven-card-flat-preset-linear .riven-card:hover {
	background:
		linear-gradient(
			var(--riven-card-linear-hover-angle),
			var(--riven-card-linear-hover-color-1) var(--riven-card-linear-hover-stop-1),
			var(--riven-card-linear-hover-color-2) var(--riven-card-linear-hover-stop-2)
		);
}

/* Flat: Mesh */
.riven-card-style-mode-flat.riven-card-flat-preset-mesh .riven-card {
	background:
		radial-gradient(
			circle at var(--riven-card-mesh-x-1) var(--riven-card-mesh-y-1),
			color-mix(
				in srgb,
				var(--riven-card-mesh-color-1)
				calc(var(--riven-card-mesh-opacity-1) * 100%),
				transparent
			),
			transparent var(--riven-card-mesh-size-1)
		),
		radial-gradient(
			circle at var(--riven-card-mesh-x-2) var(--riven-card-mesh-y-2),
			color-mix(
				in srgb,
				var(--riven-card-mesh-color-2)
				calc(var(--riven-card-mesh-opacity-2) * 100%),
				transparent
			),
			transparent var(--riven-card-mesh-size-2)
		),
		var(--riven-card-mesh-base);
}

.riven-card-style-mode-flat.riven-card-flat-preset-mesh .riven-card:hover {
	background:
		radial-gradient(
			circle at var(--riven-card-mesh-x-1) var(--riven-card-mesh-y-1),
			color-mix(
				in srgb,
				var(--riven-card-mesh-hover-color-1)
				calc(var(--riven-card-mesh-hover-opacity-1) * 100%),
				transparent
			),
			transparent var(--riven-card-mesh-size-1)
		),
		radial-gradient(
			circle at var(--riven-card-mesh-x-2) var(--riven-card-mesh-y-2),
			color-mix(
				in srgb,
				var(--riven-card-mesh-hover-color-2)
				calc(var(--riven-card-mesh-hover-opacity-2) * 100%),
				transparent
			),
			transparent var(--riven-card-mesh-size-2)
		),
		var(--riven-card-mesh-base);
}

/* Dynamic palette: Deep */
.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card[data-riven-color="1"],
.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card:nth-child(6n+1) {
	--riven-card-normal-bg:
		radial-gradient(at 50% 0%, rgba(59, 130, 246, .11), transparent 52%),
		#081225;
	--riven-card-normal-hover-bg:
		radial-gradient(at 50% 0%, rgba(59, 130, 246, .18), transparent 58%),
		#081225;
	--riven-card-border: rgba(33,75,145,.52);
	--riven-card-hover-border: rgba(55,103,196,.68);
	--riven-card-glow: #3b82f6;
	--riven-card-hover-glow: #3b82f6;
	--riven-card-accent: #3b82f6;
	--riven-card-hover-accent: #60a5fa;
	--riven-card-accent-soft: color-mix(
		in srgb,
		var(--riven-card-accent) 14%,
		transparent
	);
	--riven-card-accent-border: color-mix(
		in srgb,
		var(--riven-card-accent) 28%,
		transparent
	);
	--riven-card-text: #ffffff;
	--riven-card-muted: #8fb7ff;
}

.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card[data-riven-color="2"],
.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card:nth-child(6n+2) {
	--riven-card-normal-bg:
		radial-gradient(at 50% 0%, rgba(16, 185, 129, .11), transparent 52%),
		#041912;
	--riven-card-normal-hover-bg:
		radial-gradient(at 50% 0%, rgba(16, 185, 129, .18), transparent 58%),
		#041912;
	--riven-card-border: rgba(11,109,80,.52);
	--riven-card-hover-border: rgba(21,157,115,.68);
	--riven-card-glow: #10b981;
	--riven-card-hover-glow: #10b981;
	--riven-card-accent: #10b981;
	--riven-card-hover-accent: #34d399;
	--riven-card-accent-soft: color-mix(
		in srgb,
		var(--riven-card-accent) 14%,
		transparent
	);
	--riven-card-accent-border: color-mix(
		in srgb,
		var(--riven-card-accent) 28%,
		transparent
	);
	--riven-card-text: #ffffff;
	--riven-card-muted: #82d9bb;
}

.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card[data-riven-color="3"],
.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card:nth-child(6n+3) {
	--riven-card-normal-bg:
		radial-gradient(at 50% 0%, rgba(236, 64, 122, .11), transparent 52%),
		#220914;
	--riven-card-normal-hover-bg:
		radial-gradient(at 50% 0%, rgba(236, 64, 122, .18), transparent 58%),
		#220914;
	--riven-card-border: rgba(159,29,75,.52);
	--riven-card-hover-border: rgba(214,54,110,.68);
	--riven-card-glow: #ec407a;
	--riven-card-hover-glow: #ec407a;
	--riven-card-accent: #ec407a;
	--riven-card-hover-accent: #f472a2;
	--riven-card-accent-soft: color-mix(
		in srgb,
		var(--riven-card-accent) 14%,
		transparent
	);
	--riven-card-accent-border: color-mix(
		in srgb,
		var(--riven-card-accent) 28%,
		transparent
	);
	--riven-card-text: #ffffff;
	--riven-card-muted: #f1a2bd;
}

.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card[data-riven-color="4"],
.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card:nth-child(6n+4) {
	--riven-card-normal-bg:
		radial-gradient(at 50% 0%, rgba(139, 92, 246, .11), transparent 52%),
		#150c2c;
	--riven-card-normal-hover-bg:
		radial-gradient(at 50% 0%, rgba(139, 92, 246, .18), transparent 58%),
		#150c2c;
	--riven-card-border: rgba(91,59,179,.52);
	--riven-card-hover-border: rgba(127,90,223,.68);
	--riven-card-glow: #8b5cf6;
	--riven-card-hover-glow: #8b5cf6;
	--riven-card-accent: #8b5cf6;
	--riven-card-hover-accent: #a78bfa;
	--riven-card-accent-soft: color-mix(
		in srgb,
		var(--riven-card-accent) 14%,
		transparent
	);
	--riven-card-accent-border: color-mix(
		in srgb,
		var(--riven-card-accent) 28%,
		transparent
	);
	--riven-card-text: #ffffff;
	--riven-card-muted: #bca8f5;
}

.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card[data-riven-color="5"],
.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card:nth-child(6n+5) {
	--riven-card-normal-bg:
		radial-gradient(at 50% 0%, rgba(6, 182, 212, .11), transparent 52%),
		#041a20;
	--riven-card-normal-hover-bg:
		radial-gradient(at 50% 0%, rgba(6, 182, 212, .18), transparent 58%),
		#041a20;
	--riven-card-border: rgba(11,108,133,.52);
	--riven-card-hover-border: rgba(18,152,184,.68);
	--riven-card-glow: #06b6d4;
	--riven-card-hover-glow: #06b6d4;
	--riven-card-accent: #06b6d4;
	--riven-card-hover-accent: #22d3ee;
	--riven-card-accent-soft: color-mix(
		in srgb,
		var(--riven-card-accent) 14%,
		transparent
	);
	--riven-card-accent-border: color-mix(
		in srgb,
		var(--riven-card-accent) 28%,
		transparent
	);
	--riven-card-text: #ffffff;
	--riven-card-muted: #86d8e6;
}

.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card[data-riven-color="6"],
.riven-card-style-mode-dynamic.riven-card-palette-deep
.riven-card:nth-child(6n+6) {
	--riven-card-normal-bg:
		radial-gradient(at 50% 0%, rgba(249, 115, 22, .11), transparent 52%),
		#241006;
	--riven-card-normal-hover-bg:
		radial-gradient(at 50% 0%, rgba(249, 115, 22, .18), transparent 58%),
		#241006;
	--riven-card-border: rgba(156,72,24,.52);
	--riven-card-hover-border: rgba(206,111,50,.68);
	--riven-card-glow: #f97316;
	--riven-card-hover-glow: #f97316;
	--riven-card-accent: #f97316;
	--riven-card-hover-accent: #fb923c;
	--riven-card-accent-soft: color-mix(
		in srgb,
		var(--riven-card-accent) 14%,
		transparent
	);
	--riven-card-accent-border: color-mix(
		in srgb,
		var(--riven-card-accent) 28%,
		transparent
	);
	--riven-card-text: #ffffff;
	--riven-card-muted: #f6b07a;
}

/* Dynamic rendering */
.riven-card-style-mode-dynamic .riven-card {
	--riven-card-bg: var(--riven-card-normal-bg);
	--riven-card-hover-bg: var(--riven-card-normal-hover-bg);

	background: var(--riven-card-bg);
	border-color: var(--riven-card-border);
}

.riven-card-style-mode-dynamic .riven-card:hover {
	background: var(--riven-card-hover-bg);
	border-color: var(--riven-card-hover-border);
}

/*==================================================
#
# Utilities
#
==================================================*/

/* Text */
.riven-use-title {
	color: var(--riven-card-text);
}

.riven-use-accent {
	color: var(--riven-card-accent);
}

.riven-use-muted {
	color: var(--riven-card-muted);
}

/* Background */
.riven-use-bg {
	background: var(--riven-card-bg);
}

.riven-use-hover-bg:hover {
	background: var(--riven-card-hover-bg);
}

.riven-use-accent-bg {
	background: var(--riven-card-accent-soft);
}

/* Border */
.riven-use-border {
	border-color: var(--riven-card-border);
}

.riven-use-hover-border:hover {
	border-color: var(--riven-card-hover-border);
}

.riven-use-accent-border {
	border-color: var(--riven-card-accent-border);
}

/* Accent hover */
.riven-use-hover-accent:hover {
	color: var(--riven-card-hover-accent);
}

/* Glow */
.riven-use-glow {
	box-shadow:
		var(--riven-card-glow-x)
		var(--riven-card-glow-y)
		var(--riven-card-glow-blur)
		var(--riven-card-glow-spread)
		color-mix(
			in srgb,
			var(--riven-card-glow)
			calc(var(--riven-card-glow-opacity) * 100%),
			transparent
		);
}

.riven-use-hover-glow:hover {
	box-shadow:
		var(--riven-card-hover-glow-x)
		var(--riven-card-hover-glow-y)
		var(--riven-card-hover-glow-blur)
		var(--riven-card-hover-glow-spread)
		color-mix(
			in srgb,
			var(--riven-card-hover-glow)
			calc(var(--riven-card-hover-glow-opacity) * 100%),
			transparent
		);
}

/* Glass */
.riven-use-glass {
	backdrop-filter:
		blur(var(--riven-card-glass-blur))
		saturate(var(--riven-card-glass-saturation))
		brightness(var(--riven-card-glass-brightness));

	-webkit-backdrop-filter:
		blur(var(--riven-card-glass-blur))
		saturate(var(--riven-card-glass-saturation))
		brightness(var(--riven-card-glass-brightness));

	background:
		color-mix(
			in srgb,
			var(--riven-card-bg) 82%,
			white
		);

	border-color:
		color-mix(
			in srgb,
			var(--riven-card-border) 70%,
			white
		);
}

/* Overlay */
.riven-use-overlay {
	position: relative;
}

.riven-use-overlay::before {
	content: '';

	position: absolute;
	inset: 0;
	z-index: 0;

	pointer-events: none;
	border-radius: inherit;

	opacity: var(--riven-card-overlay-opacity);
	background: var(--riven-card-overlay);

	transition:
		opacity
		var(--riven-card-duration)
		var(--riven-card-easing);
}

.riven-use-overlay:hover::before {
	opacity: var(--riven-card-overlay-hover-opacity);
}


.riven-card > * {
	position: relative;
	z-index: 2;
}

.riven-card > .riven-card__overlay {
	z-index: 1;
}