/**
 * Glass surfaces, gold accents and ambient light.
 *
 * Three depth levels, each with a fixed opacity/blur/border/shadow recipe so
 * the interface reads as one material rather than a pile of one-off panels.
 *
 * Blur is expensive. Levels 1-3 are for the shell, major panels and modals -
 * repeated content (vehicle cards, list rows) uses .pt-surface, which is a
 * translucent fill with no backdrop-filter at all.
 */

/* ---------------------------------------------------------------------------
   Depth levels
   --------------------------------------------------------------------------- */

.pt-glass-1,
.pt-glass-2,
.pt-glass-3 {
	position: relative;
	border-radius: var(--pt-radius-lg);
	/* Fallback first: browsers without backdrop-filter get an opaque panel. */
	background-color: var(--pt-glass-1-solid);
	border: 1px solid var(--pt-border);
}

.pt-glass-1 {
	background-color: var(--pt-glass-1-solid);
	box-shadow: var(--pt-shadow-sm);
}

.pt-glass-2 {
	background-color: var(--pt-glass-2-solid);
	box-shadow: var(--pt-shadow-md);
}

.pt-glass-3 {
	background-color: var(--pt-glass-3-solid);
	border-color: var(--pt-border-strong);
	box-shadow: var(--pt-shadow-lg);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.pt-glass-1 {
		background-color: var(--pt-glass-1);
		-webkit-backdrop-filter: blur(var(--pt-blur-sm)) saturate(130%);
		backdrop-filter: blur(var(--pt-blur-sm)) saturate(130%);
	}

	.pt-glass-2 {
		background-color: var(--pt-glass-2);
		-webkit-backdrop-filter: blur(var(--pt-blur-md)) saturate(140%);
		backdrop-filter: blur(var(--pt-blur-md)) saturate(140%);
	}

	.pt-glass-3 {
		background-color: var(--pt-glass-3);
		-webkit-backdrop-filter: blur(var(--pt-blur-lg)) saturate(150%);
		backdrop-filter: blur(var(--pt-blur-lg)) saturate(150%);
	}
}

/* The top highlight that makes a panel read as glass rather than as paint. */
.pt-glass-1::before,
.pt-glass-2::before,
.pt-glass-3::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--pt-gradient-surface);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Cheap surface for repeated content
   --------------------------------------------------------------------------- */

.pt-surface {
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
	background-color: var(--pt-glass-1-solid);
	border: 1px solid var(--pt-border);
	border-radius: var(--pt-radius-lg);
	box-shadow: var(--pt-shadow-sm);
}

.pt-surface--raised {
	background-color: var(--pt-glass-2-solid);
	box-shadow: var(--pt-shadow-md);
}

/* ---------------------------------------------------------------------------
   Premium edge: a hairline that warms towards gold, never a gold frame
   --------------------------------------------------------------------------- */

.pt-edge-gold {
	border-color: var(--pt-border-gold-soft);
}

.pt-edge-gold::after {
	content: "";
	position: absolute;
	inset-inline: 12%;
	top: 0;
	height: 1px;
	background: var(--pt-gradient-gold-line);
	pointer-events: none;
}

.pt-selected {
	border-color: var(--pt-border-gold);
	box-shadow: var(--pt-shadow-md), var(--pt-glow-gold);
}

/* ---------------------------------------------------------------------------
   Gold
   --------------------------------------------------------------------------- */

.pt-gold-text {
	color: var(--pt-gold-text);
}

/* Gradient text is decorative; the element keeps a solid colour underneath so
   it stays readable if background-clip is unsupported or forced-colors is on. */
.pt-gold-headline {
	color: var(--pt-gold-text);
	background: var(--pt-gradient-gold);
	-webkit-background-clip: text;
	background-clip: text;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.pt-gold-headline {
		-webkit-text-fill-color: transparent;
	}
}

@media (forced-colors: active) {
	.pt-gold-headline {
		-webkit-text-fill-color: currentColor;
		background: none;
	}
}

.pt-gold-fill {
	background: var(--pt-gradient-gold);
	color: var(--pt-text-on-gold);
	border: 1px solid var(--pt-border-gold);
}

.pt-gold-rule {
	height: 1px;
	border: 0;
	background: var(--pt-gradient-gold-line);
}

/* ---------------------------------------------------------------------------
   Ambient light. Subtle warm glow, never neon.
   --------------------------------------------------------------------------- */

.pt-glow {
	position: relative;
}

.pt-glow::after {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 160%;
	background: radial-gradient(60% 50% at 50% 0%, rgba(214, 179, 106, 0.14), rgba(214, 179, 106, 0) 70%);
	pointer-events: none;
	z-index: -1;
}

.pt-carbon {
	background-image: var(--pt-carbon);
	background-color: var(--pt-bg-panel);
}

/* ---------------------------------------------------------------------------
   Motion. Opacity, transform and filter only - never layout.
   --------------------------------------------------------------------------- */

.pt-lift {
	transition:
		transform var(--pt-duration-base) var(--pt-ease),
		box-shadow var(--pt-duration-base) var(--pt-ease),
		border-color var(--pt-duration-base) var(--pt-ease);
	will-change: transform;
}

.pt-lift:hover,
.pt-lift:focus-within {
	transform: translateY(-3px);
	border-color: var(--pt-border-gold-soft);
	box-shadow: var(--pt-shadow-md);
}

.pt-rise {
	animation: pt-rise var(--pt-duration-slow) var(--pt-ease-spring) both;
}

@keyframes pt-rise {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pt-lift,
	.pt-rise {
		animation: none;
		transition: none;
	}

	.pt-lift:hover,
	.pt-lift:focus-within {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Focus. One visible ring everywhere, gold so it belongs to the system.
   --------------------------------------------------------------------------- */

.pt-glass-1 :focus-visible,
.pt-glass-2 :focus-visible,
.pt-glass-3 :focus-visible,
.pt-surface :focus-visible {
	outline: 2px solid var(--pt-gold-3);
	outline-offset: 2px;
	border-radius: var(--pt-radius-sm);
}