/* ==========================================================================
   Silver Plate — a PURCHASED theme (shown for credibility, not for sale).
   Built for and licensed to Silver Plate Buyers (silverplatebuyers.com),
   recreated here from Adam's expanded pen build.

   The theme's one material is lit metal, and its one trick is a real light
   source: theme.js eases --lx/--ly (normalized -1..1) after the cursor, and
   every shadow on the page answers to it — the background's hot spot, the
   headline's lit/shaded edges and cast shadow, the flourish and teapot
   drop-shadows, the buttons' bevels and throw, the ribbon's shadow. Nothing
   here hardcodes a light direction; change --lx/--ly and the scene relights.

   Departures from the pen, on purpose:
   - Resting light sits up-left (--lx:-.35 --ly:-.5). The pen rested at dead
     center, which meant a completely flat scene until the mouse moved — and
     forever flat on touch screens.
   - Buttons combine the pen's engraved slab (metal face, stamped-in text)
     with the live site's press behavior (hover scale + shadow collapse
     reads as physically pushing the button in), and the pen's static black
     bevel borders become light-aware inset shadows.
   - Fonts: the client site's Typekit faces (fairwater-deco-serif,
     rosella-solid) are licensed to that domain, so Cinzel Decorative +
     Cinzel stand in via Google Fonts — the live site itself resolves its
     --displayfont to "Cinzel".
   ========================================================================== */

:root {
	--lx: -.35;
	--ly: -.5;
	--steel: #38475B;
	--coal: #242C38;
	--bright: #EEEEEE;
	--silver-text: #D7D5D5;
	--silver-grad: linear-gradient(36deg, rgba(180, 180, 180, 1) 0%, rgba(180, 180, 180, 1) 21%, rgba(255, 255, 255, 1) 24%, rgba(210, 208, 208, 1) 35%, rgba(219, 218, 218, 1) 50%, rgba(186, 186, 186, 1) 52%, rgba(255, 255, 255, 1) 69%, rgba(208, 207, 207, 1) 75%, rgba(180, 180, 180, 1) 78%, rgba(180, 180, 180, 1) 100%);
	--gold-grad: linear-gradient(36deg, rgba(248, 231, 109, 1) 0%, rgba(248, 231, 109, 1) 21%, rgba(255, 254, 148, 1) 24%, rgba(255, 223, 79, 1) 35%, rgba(255, 254, 148, 1) 50%, rgba(255, 223, 79, 1) 52%, rgba(255, 254, 148, 1) 69%, rgba(255, 223, 79, 1) 75%, rgba(248, 231, 109, 1) 78%, rgba(248, 231, 109, 1) 100%);
}

html {
	/* dark base under everything — overscroll/pre-paint must never flash light */
	background: var(--coal);
	overflow-x: hidden;
	overflow-x: clip;
}

body {
	min-height: 100svh;
	margin: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem 5.5rem;
	font-family: "Cinzel", Georgia, "Times New Roman", serif;
	color: var(--silver-text);
	overflow-x: hidden;
	overflow-x: clip;
}

/* The room's light: a fixed backdrop so the hot spot tracks the light, not
   the scroll position, on screens short enough to scroll. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background: radial-gradient(circle at calc(50% + var(--lx) * 30%) calc(50% + var(--ly) * 30%),
			var(--steel) 20%,
			var(--coal) 55%);
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* --- Header — the 3D silver headline IS the page's h1 --- */
.display-wrap {
	position: relative;
	width: fit-content;
	font-family: "Cinzel Decorative", Georgia, "Times New Roman", serif;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1.1;
	filter: brightness(1.2);
	/* 100px is the pen's site value; the vw term keeps the nowrap title
	   inside narrow viewports */
	font-size: min(100px, 8.5vw);
	margin: 0;
	text-shadow:
		/* lit edge, faces the light */
		calc(var(--lx) * 1.5px) calc(var(--ly) * 1.5px) 0 rgba(255, 255, 255, 0.75),
		/* shaded edge, opposite */
		calc(var(--lx) * -1.5px) calc(var(--ly) * -1.5px) 0 rgba(0, 0, 0, 0.35),
		/* soft cast shadow on the wall, falls away from the light */
		calc(var(--lx) * -14px) calc(var(--ly) * -14px) 18px rgba(0, 0, 0, 0.45);
}

.display-title {
	position: relative;
	margin: 0;
	font-size: inherit;
	font-weight: 700;
	white-space: nowrap;
	/* dark rim under the silver overlay = depth at the antialiased edges */
	color: #1C222C;
}

/* The silver face: an exact copy of the headline filled with slow-shining
   brushed metal, laid over the dark base glyphs. */
.display-title::after {
	content: attr(data-text);      /* old engines: shine, but AT reads it twice */
	content: attr(data-text) / ""; /* modern engines: same shine, silent to AT */
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(90deg, rgba(200, 200, 200, 1) 0%, rgba(200, 200, 200, 1) 49%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 51%, rgba(200, 200, 200, 1) 52%, rgba(200, 200, 200, 1) 100%);
	background-size: 500% 100%;
	background-position: right;
	animation: shine 20s infinite;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	pointer-events: none;
}

/* --- Flourishes flanking the headline --- */
.flourish {
	position: absolute;
	height: 150%;
	left: 100%;
	top: 0;
	filter:
		drop-shadow(calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0px rgba(255, 255, 255, 0.9)) drop-shadow(calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0px rgba(0, 0, 0, 0.4)) drop-shadow(calc(var(--lx) * -10px) calc(var(--ly) * -10px) 6px rgba(0, 0, 0, 0.4));
}

.flourish--mirror {
	left: auto;
	right: 100%;
	transform: scale(-1, 1);
}

.cls-1 { fill: url(#linear-gradient); }
.cls-1, .cls-2, .cls-3, .cls-4 { stroke-width: 0px; }
.cls-2 { fill: url(#linear-gradient-2); }
.cls-3 { fill: url(#linear-gradient-3); }
.cls-4 { fill: url(#linear-gradient-4); }

/* --- Teapot line art pinned to the bottom corners, like the client site's
   hero. The right one is the same asset mirrored; its shadow offsets are
   pre-flipped in x so the mirror lands the shadow back on the light's side. */
.teapot {
	position: fixed;
	bottom: 0;
	left: 0;
	width: min(34vw, 430px);
	height: auto;
	z-index: -1;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	filter: drop-shadow(calc(var(--lx) * -6px) calc(var(--ly) * -6px) 6px rgba(0, 0, 0, 0.5));
}

.teapot--mirror {
	left: auto;
	right: 0;
	transform: scale(-1, 1);
	filter: drop-shadow(calc(var(--lx) * 6px) calc(var(--ly) * -6px) 6px rgba(0, 0, 0, 0.5));
}

/* --- Purchased ribbon: the availability badge of the sold-theme kit --- */
.purchased-banner {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	width: 260px;
	padding: 8px 0 10px;
	text-align: center;
	transform: translate(28%, 55%) rotate(45deg);
	transform-origin: center;
	font-family: "Cinzel", Georgia, serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 18px;
	color: rgba(0, 0, 0, 0.45);
	text-shadow: -1px -1px 0 rgba(255, 231, 97, 0.4), 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: var(--gold-grad);
	background-size: 650% 100%;
	background-position: bottom;
	animation: shine 15s infinite;
	border-top: 3px solid rgba(0, 0, 0, 0.3);
	border-bottom: 3px solid rgba(0, 0, 0, 0.3);
	box-shadow: calc(var(--lx) * -6px) calc(var(--ly) * -6px) 12px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

/* --- Theme-kit: badge, plaque card, tags, buttons --- */
.badge {
	margin: 0 0 1rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(215, 213, 213, .8);
	border: 1px solid rgba(215, 213, 213, .35);
	border-radius: 999px;
	padding: .35rem 1rem;
	background: rgba(0, 0, 0, .25);
}

/* Description card: a dark plaque in a thin silver rim — the client site's
   gold-rim-around-a-panel pattern (.card_wrap.goldback), struck in silver. */
.theme_card {
	max-width: 640px;
	margin: 2.25rem 0 1.75rem;
	padding: 3px;
	border-radius: 14px;
	background: var(--silver-grad);
	background-size: 650% 100%;
	background-position: bottom;
	animation: shine 15s infinite;
	box-shadow: calc(var(--lx) * -10px) calc(var(--ly) * -10px) 18px rgba(0, 0, 0, 0.45);
}

.theme_card_inner {
	border-radius: 11px;
	padding: 1.5rem 1.75rem;
	background: linear-gradient(180deg, #313D4E, var(--coal));
}

/* body copy in a plain serif, like the client site's paragraphs */
.theme_card_inner p {
	margin: 0 0 1em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.05rem;
	line-height: 1.6;
}

.theme_card_inner p:last-of-type {
	margin-bottom: 0;
}

.theme_tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	padding: 0;
	margin: 1.25rem 0 0;
}

.theme_tags li {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .3rem .8rem;
	border-radius: 999px;
	color: rgba(215, 213, 213, .85);
	border: 1px solid rgba(215, 213, 213, .35);
	background: rgba(0, 0, 0, .25);
}

/* --- Buttons: engraved metal slabs under the same light --------------------
   Face + slow shine from the pen; press-in hover from the live site; bevel
   and cast shadow computed from --lx/--ly instead of static borders, so the
   buttons sit in the same light as everything else. */
.theme_actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
}

.btn-metal {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 6px;
	background: var(--silver-grad);
	background-size: 650% 100%;
	background-position: bottom;
	animation: shine 15s infinite;
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(0, 0, 0, .45);
	/* engraved text: highlight on the wall of the groove facing away from
	   the light, occlusion on the near wall */
	text-shadow:
		calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, .7),
		calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(0, 0, 0, .25);
	/* light-aware bevel (lit edge toward the light, shaded edge away) +
	   cast shadow falling away from the light */
	box-shadow:
		inset calc(var(--lx) * -2px) calc(var(--ly) * -2px) 0 rgba(255, 255, 255, .65),
		inset calc(var(--lx) * 2px) calc(var(--ly) * 2px) 0 rgba(0, 0, 0, .35),
		calc(var(--lx) * -8px) calc(var(--ly) * -8px) 14px rgba(0, 0, 0, .5);
	transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

.btn-metal--gold {
	background: var(--gold-grad);
	background-size: 650% 100%;
	background-position: bottom;
	text-shadow:
		calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 231, 97, .5),
		calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(0, 0, 0, .25);
}

/* the press: shadows collapse toward the face and the slab shrinks a hair,
   so the button reads as physically pushed in */
.btn-metal:hover,
.btn-metal:active {
	transform: scale(.98);
	box-shadow:
		inset calc(var(--lx) * -1px) calc(var(--ly) * -1px) 0 rgba(255, 255, 255, .65),
		inset calc(var(--lx) * 1px) calc(var(--ly) * 1px) 0 rgba(0, 0, 0, .35),
		calc(var(--lx) * -3px) calc(var(--ly) * -3px) 6px rgba(0, 0, 0, .5);
}

.btn-metal:focus-visible {
	outline: 2px solid #FFFE94;
	outline-offset: 3px;
}

/* --- "See it live" — the purchased-theme link to the client site, kept
   quiet at the bottom of the viewport --- */
.see_live {
	position: fixed;
	bottom: max(1.1rem, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	white-space: nowrap;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(215, 213, 213, .7);
	text-decoration: none;
	border-bottom: 1px solid rgba(215, 213, 213, .3);
	padding-bottom: 3px;
	transition: color .2s ease-in-out, border-color .2s ease-in-out;
}

.see_live:hover,
.see_live:focus-visible {
	color: var(--bright);
	border-color: rgba(255, 254, 148, .8);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- The shine: one keyframe set, four consumers (headline overlay,
   ribbon, card rim, buttons) at staggered durations --- */
@keyframes shine {
	0% { background-position: right; }
	30% { background-position: 20%; }
	50% { background-position: 30%; }
	60% { background-position: 60%; }
	70% { background-position: 50%; }
	85% { background-position: 30%; }
	100% { background-position: right; }
}

@media (prefers-reduced-motion: reduce) {

	.display-title::after,
	.purchased-banner,
	.theme_card,
	.btn-metal {
		animation: none;
	}
}

@media (max-width: 700px) {
	.display-wrap {
		letter-spacing: .05em;
	}

	.teapot {
		width: 45vw;
		opacity: .9;
	}

	.purchased-banner {
		width: 200px;
		font-size: 14px;
		padding: 6px 0 8px;
	}

	.theme_card_inner {
		padding: 1.25rem;
	}
}