/* ============================================================
   Homepage v2 — brighter, warmer, more cinematic match to the
   "Enter the Vault" design image. Mobile-first.
   ============================================================ */

.scs-home {
	color: var(--scs-color-text);
	background-color: var(--scs-color-bg);
	background-image:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212, 175, 55, 0.06), transparent 70%),
		radial-gradient(ellipse 60% 40% at 85% 30%, rgba(240, 206, 106, 0.05), transparent 70%),
		radial-gradient(ellipse 60% 40% at 15% 60%, rgba(212, 175, 55, 0.04), transparent 70%);
}

/* -------------------------- Shared section head -------------------------- */

.scs-section {
	padding: var(--scs-space-5) 0;
	position: relative;
}

@media (min-width: 1024px) {
	.scs-section {
		padding: var(--scs-space-6) 0;
	}
}

.scs-section-head {
	margin-bottom: var(--scs-space-4);
	text-align: center;
}

.scs-section-head__title {
	font-family: var(--scs-font-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 3vw, 2.35rem);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
	display: inline-block;
	padding: 0 var(--scs-space-5);
	position: relative;
	/* Outlined neon-tube treatment matching the category tiles. */
	color: transparent;
	-webkit-text-stroke: 1.2px #ffd84a;
	text-stroke: 1.2px #ffd84a;
	text-shadow:
		0 0 3px  #ffdd55,
		0 0 10px rgba(255, 170, 40, 0.55),
		0 0 20px rgba(255, 120, 0, 0.35);
}

@media (min-width: 1280px) {
	.scs-section-head__title {
		-webkit-text-stroke-width: 1.5px;
		text-stroke-width: 1.5px;
	}
}

.scs-section-head__title::before,
.scs-section-head__title::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 72px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--scs-color-gold) 50%, transparent);
}

.scs-section-head__title::before { right: 100%; margin-right: var(--scs-space-3); }
.scs-section-head__title::after  { left: 100%;  margin-left: var(--scs-space-3); }

/* Reveal-on-scroll base — controlled by IntersectionObserver in home.js. */
.scs-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scs-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.scs-reveal { opacity: 1; transform: none; transition: none; }
}

/* ================================================ HERO
   Full-bleed background image (uploaded via Customizer → Hero Section).
   Falls back to a dark gold gradient when no image is set.
   ================================================ */

.scs-hero {
	position: relative;
	/* Hero locked to a wide cinematic aspect ratio so it matches the
	   natural shape of the hero artwork — image cover + container
	   ratio align, eliminating both edge cropping AND empty side
	   bands. min-height kicks in only on tall narrow viewports. */
	aspect-ratio: 21 / 9;
	min-height: 360px;
	padding: var(--scs-space-5) 0 var(--scs-space-6);
	display: grid;
	place-items: center;
	overflow: hidden;
	background-color: #0A0604;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Default gradient fallback — overridden by inline style when an image is set. */
	background-image:
		radial-gradient(ellipse 60% 40% at 50% 40%, rgba(212, 175, 55, 0.18), transparent 60%),
		radial-gradient(ellipse 100% 60% at 50% 100%, rgba(240, 206, 106, 0.12), transparent 70%),
		linear-gradient(180deg, #100906 0%, #1A1109 50%, #0D0704 100%);
	isolation: isolate;
}

/* On phones a 21:9 hero collapses too thin — switch to a more square
   ratio so the hero stays a proper visual block on small screens. */
@media (max-width: 768px) {
	.scs-hero {
		aspect-ratio: 4 / 3;
		min-height: 320px;
	}
}

/* Optional vignette only at the very bottom so CTAs remain legible —
   most of the hero image shows through unobscured. Off by default,
   themes can opt in via --scs-hero-scrim. */
.scs-hero--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--scs-hero-scrim, linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%));
	z-index: 0;
	pointer-events: none;
}

.scs-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--scs-max-width);
	margin: 0 auto;
	padding: 0 var(--scs-space-3);
	z-index: 2;
}

.scs-hero__content {
	position: relative;
	text-align: center;
	z-index: 3;
	padding: var(--scs-space-3) 0;
}

.scs-hero__title {
	/* Cinzel — classical Trajan-style high-contrast serif with elegant
	   sharp serifs. Already loaded as --scs-font-display. */
	font-family: var(--scs-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 8.5vw, 6rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin: 0 0 var(--scs-space-3);
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: keep-all;
	line-height: 1.1;
	/* Cinematic depth: solid drop shadow + soft warm glow + crisp
	   1px aura — gives the "stamped on stone" feel without leaning
	   on baked-in image text. */
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.45),
		0 4px 18px rgba(0, 0, 0, 0.75),
		0 0 50px rgba(240, 206, 106, 0.28),
		0 0 2px rgba(240, 206, 106, 0.4);
}

/* Tablet — scale down letter-spacing slightly so it stays balanced. */
@media (max-width: 900px) {
	.scs-hero__title {
		font-size: clamp(1.5rem, 7.5vw, 4rem);
		letter-spacing: 0.08em;
	}
}

/* Phone — tighter scale + smaller spacing so the line never overflows
   the viewport (was clipping on 375px screens). */
@media (max-width: 600px) {
	.scs-hero__title {
		font-size: clamp(1.4rem, 7vw, 2.6rem);
		letter-spacing: 0.06em;
		padding: 0 var(--scs-space-3);
	}
}

.scs-hero__tagline {
	font-family: var(--scs-font-sans);
	font-style: normal;
	font-size: clamp(0.95rem, 1.55vw, 1.1rem);
	letter-spacing: 0.04em;
	color: var(--scs-color-text);
	margin: 0 auto var(--scs-space-5);
	max-width: 38ch;
	opacity: 0.92;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.scs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--scs-space-3);
	margin-top: calc(1.6em * 3);
}

.scs-hero__glow {
	position: absolute;
	left: 50%;
	bottom: -30%;
	width: 90%;
	height: 70%;
	transform: translateX(-50%);
	background:
		radial-gradient(ellipse at center, rgba(212, 175, 55, 0.28) 0%, rgba(240, 206, 106, 0.1) 35%, transparent 70%);
	filter: blur(56px);
	z-index: 1;
	pointer-events: none;
}

/* Hide the glow when a background image is set — the image does the mood. */
.scs-hero--has-image .scs-hero__glow { display: none; }

/* ================================================ CATEGORIES */

.scs-categories {
	padding: var(--scs-space-3) 0;
	background: linear-gradient(180deg, var(--scs-color-bg-deep) 0%, var(--scs-color-bg) 100%);
	border-top: 1px solid var(--scs-color-gold-hairline);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
	position: relative;
}

.scs-categories::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(212, 175, 55, 0.04), transparent 70%);
	pointer-events: none;
}

.scs-categories__grid {
	display: grid;
	gap: var(--scs-space-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	position: relative;
	z-index: 1;
}

@media (min-width: 640px) {
	.scs-categories__grid {
		gap: var(--scs-space-4);
	}
}

@media (min-width: 1024px) {
	.scs-categories__grid {
		/* All 4 banners in a single horizontal row on desktop per design. */
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--scs-space-3);
	}
}

/* ============================================================
   Atom-nucleus category tile — 3D deep-black label with a gold
   border is the "nucleus", circled by 3 orbital rings that spin
   continuously. Subtle idle vibration + pulse glow. Hover lifts
   the tile, accelerates orbits, and intensifies the aura.
   ============================================================ */

.scs-category-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 47 / 20;
	padding: clamp(16px, 2.5vw, 28px);
	text-decoration: none;
	border-radius: var(--scs-radius-md);
	background: radial-gradient(ellipse 85% 85% at 50% 50%, #1d1306 0%, #090502 70%, #020101 100%);
	overflow: hidden;
	isolation: isolate;
	min-width: 0;
	transition: transform var(--scs-transition-base), box-shadow var(--scs-transition-base);
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.6),
		inset 0 0 24px rgba(212, 175, 55, 0.08);
}

/* Inner rim removed — tiles now render borderless. */
.scs-category-tile::before { content: none; }

/* Soft radial glow behind nucleus (ambient energy pulse). */
.scs-category-tile::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 230, 60, 0.18) 0%, transparent 70%);
	filter: blur(12px);
	animation: scs-atom-pulse 3.6s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes scs-atom-pulse {
	0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
}

/* Orbital rings — elliptical, different tilts and speeds. */
.scs-category-tile__orbit {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid rgba(255, 220, 60, 0.55);
	border-radius: 50%;
	pointer-events: none;
	box-shadow: 0 0 10px rgba(255, 220, 60, 0.3);
	z-index: 1;
	transform: translate(-50%, -50%);
}

.scs-category-tile__orbit--1 {
	width: 92%;
	height: 30%;
	animation: scs-atom-orbit-1 7s linear infinite !important;
}

.scs-category-tile__orbit--2 {
	width: 58%;
	height: 130%;
	animation: scs-atom-orbit-2 9s linear infinite !important;
	border-color: rgba(255, 230, 60, 0.4);
}

.scs-category-tile__orbit--3 {
	width: 110%;
	height: 62%;
	animation: scs-atom-orbit-3 11s linear infinite !important;
	border-color: rgba(212, 175, 55, 0.32);
}

@keyframes scs-atom-orbit-1 {
	from { transform: translate(-50%, -50%) rotate(-18deg); }
	to   { transform: translate(-50%, -50%) rotate(342deg); }
}
@keyframes scs-atom-orbit-2 {
	from { transform: translate(-50%, -50%) rotate(24deg); }
	to   { transform: translate(-50%, -50%) rotate(-336deg); }
}
@keyframes scs-atom-orbit-3 {
	from { transform: translate(-50%, -50%) rotate(72deg); }
	to   { transform: translate(-50%, -50%) rotate(432deg); }
}

/* Small bright nucleus dot — slowly pulses behind the label. */
.scs-category-tile__nucleus {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff6b4 0%, #ffe600 45%, rgba(255, 230, 60, 0) 80%);
	animation: scs-atom-pulse 2.4s ease-in-out infinite !important;
	pointer-events: none;
	z-index: 2;
}

/* 3D deep-black label with golden border — the atom nucleus core. */
.scs-category-tile__label {
	position: relative;
	z-index: 3;
	font-family: var(--scs-font-display);
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.9rem);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	color: transparent;
	background: linear-gradient(180deg, #120a04 0%, #000000 55%, #0a0604 100%);
	-webkit-background-clip: text;
	        background-clip: text;
	-webkit-text-stroke: 1.5px #ffd84a;
	        text-stroke: 1.5px #ffd84a;
	filter:
		drop-shadow(0 1px 0 #c9a300)
		drop-shadow(0 2px 0 #8a6d00)
		drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8))
		drop-shadow(0 0 10px rgba(255, 230, 60, 0.4));
	animation: scs-atom-vibrate 3.2s ease-in-out infinite;
	padding: 0 2%;
	max-width: 100%;
	word-break: keep-all;
	transition: filter 0.3s ease;
}

@keyframes scs-atom-vibrate {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	20%      { transform: translate(-0.6px, 0.4px) rotate(-0.15deg); }
	40%      { transform: translate(0.5px, -0.5px) rotate(0.12deg); }
	60%      { transform: translate(-0.4px, -0.3px) rotate(-0.08deg); }
	80%      { transform: translate(0.4px, 0.4px) rotate(0.1deg); }
}

/* Hover — rise, intensify glow, accelerate orbits, vibrate harder. */
.scs-category-tile:hover,
.scs-category-tile:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.75),
		0 0 34px rgba(255, 230, 60, 0.45),
		inset 0 0 32px rgba(255, 230, 60, 0.18);
	outline: none;
}

.scs-category-tile:hover .scs-category-tile__orbit--1 {
	animation-duration: 2.2s;
	border-color: rgba(255, 230, 60, 0.9);
}
.scs-category-tile:hover .scs-category-tile__orbit--2 {
	animation-duration: 2.8s;
	border-color: rgba(255, 230, 60, 0.7);
}
.scs-category-tile:hover .scs-category-tile__orbit--3 {
	animation-duration: 3.4s;
	border-color: rgba(255, 230, 60, 0.55);
}

.scs-category-tile:hover .scs-category-tile__label {
	animation-duration: 0.5s;
	filter:
		drop-shadow(0 1px 0 #ffe600)
		drop-shadow(0 2px 0 #c9a300)
		drop-shadow(0 6px 10px rgba(0, 0, 0, 0.85))
		drop-shadow(0 0 16px rgba(255, 230, 60, 0.8));
}

.scs-category-tile:hover .scs-category-tile__nucleus {
	animation-duration: 1.1s;
}

/* Reduced-motion: keep the orbital rings + nucleus pulse running
   (they're the visual identity of the section), only quiet the
   subtle label vibrate so seizures-prone visitors aren't bothered
   by twitchy text. The orbits and pulse use slow easing and don't
   trigger vestibular issues. */
@media (prefers-reduced-motion: reduce) {
	.scs-category-tile__label {
		animation: none;
	}
	.scs-category-tile::after {
		animation: none;
	}
}

/* ================================================ LATEST DROPS */

.scs-drops__stage {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--scs-space-3);
}

.scs-drops__track {
	list-style: none;
	margin: 0;
	padding: var(--scs-space-5) var(--scs-space-2) var(--scs-space-6);
	display: flex;
	gap: var(--scs-space-3);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	align-items: center;
}

.scs-drops__track::-webkit-scrollbar { display: none; }

.scs-drops__item {
	flex: 0 0 78%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

/* On desktop the center card is the featured one — taller + wider — to match
   the design image's "JUST DROPPED" dominant card. */
@media (min-width: 768px) {
	.scs-drops__item { flex: 0 0 28%; }
	.scs-drops__item .scs-drops__card { transform: scale(0.86); opacity: 0.72; transform-origin: center; }

	.scs-drops__item:nth-child(2) { flex: 0 0 42%; }
	.scs-drops__item:nth-child(2) .scs-drops__card { transform: none; opacity: 1; }
	.scs-drops__item:nth-child(2) .scs-drops__frame {
		aspect-ratio: 16 / 10;
		box-shadow:
			0 0 0 1px var(--scs-color-gold),
			0 0 40px rgba(240, 206, 106, 0.25),
			0 24px 48px rgba(0, 0, 0, 0.8);
	}
}

.scs-drops__card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform var(--scs-transition-base), opacity var(--scs-transition-base);
}

.scs-drops__card:hover {
	transform: translateY(-4px) scale(0.88);
	opacity: 1;
}

.scs-drops__item:nth-child(2) .scs-drops__card:hover { transform: translateY(-4px); }

.scs-drops__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--scs-radius-md);
	overflow: hidden;
	background:
		radial-gradient(ellipse 60% 40% at 50% 35%, rgba(240, 206, 106, 0.22), transparent 60%),
		radial-gradient(ellipse 70% 50% at 50% 100%, rgba(212, 175, 55, 0.15), transparent 70%),
		linear-gradient(180deg, #1A110A 0%, #0A0604 100%);
	box-shadow:
		inset 0 0 0 1px var(--scs-color-gold-hairline),
		0 18px 40px rgba(0, 0, 0, 0.65);
}

.scs-drops__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tall card placeholder for side items, horizontal box for center featured. */
.scs-drops__placeholder {
	position: absolute;
	inset: 22% 28%;
	border-radius: 6px;
	background:
		radial-gradient(ellipse at 50% 30%, rgba(240, 206, 106, 0.5), transparent 55%),
		linear-gradient(160deg, #3a2610 0%, #0a0604 55%, #4a3218 100%);
	box-shadow:
		inset 0 0 0 1px var(--scs-color-gold),
		0 12px 28px rgba(0, 0, 0, 0.65);
}

.scs-drops__placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.16) 50%, transparent 60%);
	mix-blend-mode: screen;
}

/* Featured center item gets a wider, box-style placeholder with extra glow. */
@media (min-width: 768px) {
	.scs-drops__item:nth-child(2) .scs-drops__placeholder {
		inset: 16% 22%;
		background:
			radial-gradient(ellipse at 50% 40%, rgba(240, 206, 106, 0.6), transparent 60%),
			radial-gradient(circle at 30% 70%, rgba(220, 80, 40, 0.35), transparent 55%),
			linear-gradient(160deg, #4a3218 0%, #1a0f08 50%, #3a2610 100%);
	}
}

/* Per-tint drop frames use SVG illustrations. Hide the inner placeholder
   shape when an SVG is present — the SVG fills the whole frame. */
.scs-drops__frame--pokemon,
.scs-drops__frame--basketball,
.scs-drops__frame--chrome {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.scs-drops__frame--pokemon    { background-image: url("../images/hero/card-pokemon.svg"); }
.scs-drops__frame--basketball { background-image: url("../images/rare/basketball.svg"); }
.scs-drops__frame--chrome     { background-image: url("../images/hero/card-chrome.svg"); }

.scs-drops__frame--pokemon .scs-drops__placeholder,
.scs-drops__frame--basketball .scs-drops__placeholder,
.scs-drops__frame--chrome .scs-drops__placeholder {
	display: none;
}

.scs-drops__frame--product {
	background:
		radial-gradient(ellipse 60% 40% at 50% 35%, rgba(240, 206, 106, 0.22), transparent 60%),
		linear-gradient(180deg, #1A110A 0%, #0A0604 100%);
}

.scs-drops__badges {
	position: absolute;
	top: var(--scs-space-3);
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 0 var(--scs-space-3);
	gap: var(--scs-space-2);
	z-index: 3;
}

.scs-drops__badge {
	font-family: var(--scs-font-sans);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	background-color: rgba(10, 6, 3, 0.85);
	border: 1px solid var(--scs-color-gold);
	padding: 6px 10px;
	border-radius: 2px;
}

.scs-drops__title {
	font-family: var(--scs-font-sans);
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	color: var(--scs-color-text-muted);
	text-transform: uppercase;
	margin: var(--scs-space-3) 0 0;
	text-align: center;
}

.scs-drops__item:nth-child(2) .scs-drops__title {
	color: var(--scs-color-gold-bright);
	font-size: 0.9rem;
}

.scs-drops__arrow {
	appearance: none;
	background: transparent;
	border: 1px solid var(--scs-color-gold-soft);
	color: var(--scs-color-gold);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color var(--scs-transition-base), color var(--scs-transition-base), box-shadow var(--scs-transition-base);
}

.scs-drops__arrow:hover,
.scs-drops__arrow:focus-visible {
	background-color: var(--scs-color-gold);
	color: #0A0604;
	box-shadow: 0 0 24px rgba(240, 206, 106, 0.35);
}

.scs-drops__arrow svg { width: 18px; height: 18px; }

/* ================================================ RARE PICKS */

.scs-rare__grid {
	display: grid;
	gap: var(--scs-space-3);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.scs-rare__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--scs-space-4);
	}
}

.scs-rare__tile {
	position: relative;
	aspect-ratio: 4 / 3.2;
	border-radius: var(--scs-radius-md);
	overflow: hidden;
	background-color: var(--scs-color-surface);
	box-shadow:
		inset 0 0 0 1px var(--scs-color-gold-hairline),
		0 16px 36px rgba(0, 0, 0, 0.6);
	text-decoration: none;
	color: var(--scs-color-text);
	isolation: isolate;
	transition: transform var(--scs-transition-base), box-shadow var(--scs-transition-base);
}

.scs-rare__tile:hover,
.scs-rare__tile:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px var(--scs-color-gold),
		0 0 32px rgba(240, 206, 106, 0.25),
		0 20px 44px rgba(0, 0, 0, 0.7);
}

.scs-rare__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scs-rare__scene {
	position: absolute;
	inset: 0;
}

/* Rare Picks scenes now use SVG illustrations. */
.scs-rare__scene {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.scs-rare__tile--baseball .scs-rare__scene   { background-image: url("../images/rare/baseball.svg"); }
.scs-rare__tile--basketball .scs-rare__scene { background-image: url("../images/rare/basketball.svg"); }
.scs-rare__tile--pokemon .scs-rare__scene    { background-image: url("../images/rare/charizard.svg"); }

.scs-rare__scene::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
}

.scs-rare__caption {
	position: absolute;
	bottom: var(--scs-space-3);
	left: var(--scs-space-3);
	right: var(--scs-space-3);
	font-family: var(--scs-font-display);
	font-size: 0.95rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	text-align: center;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
	z-index: 2;
}

/* ================================================ WHERE RARITY LIVES */

.scs-rarity {
	text-align: center;
	background:
		radial-gradient(ellipse 50% 60% at 50% 50%, rgba(212, 175, 55, 0.06), transparent 70%),
		transparent;
}

.scs-rarity__lead {
	font-family: var(--scs-font-sans);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	color: var(--scs-color-text);
	max-width: 60ch;
	margin: 0 auto var(--scs-space-5);
	opacity: 0.85;
	letter-spacing: 0.02em;
}

.scs-rarity__cta {
	display: flex;
	justify-content: center;
}

/* ================================================ COMMUNITY */

.scs-community__grid {
	display: grid;
	gap: var(--scs-space-3);
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.scs-community__grid {
		grid-template-columns: 1fr 1.25fr 1fr;
		gap: var(--scs-space-4);
	}
}

.scs-community__collage {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: var(--scs-space-1);
	aspect-ratio: 1 / 1;
	border-radius: var(--scs-radius-md);
	overflow: hidden;
	box-shadow:
		inset 0 0 0 1px var(--scs-color-gold-hairline),
		0 16px 36px rgba(0, 0, 0, 0.6);
	padding: 6px;
	background-color: var(--scs-color-surface-raised);
}

/* Collage tiles — SVG collector portraits. */
.scs-community__tile {
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	background-color: #0a0604;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.scs-community__tile--1 { background-image: url("../images/community/collector-1.svg"); }
.scs-community__tile--2 { background-image: url("../images/community/collector-2.svg"); }
.scs-community__tile--3 { background-image: url("../images/community/collector-3.svg"); }
.scs-community__tile--4 { background-image: url("../images/community/collector-4.svg"); }

/* Shop showcase — SVG shop interior. */
.scs-community__showcase {
	border-radius: var(--scs-radius-md);
	overflow: hidden;
	aspect-ratio: 16 / 10;
	box-shadow:
		inset 0 0 0 1px var(--scs-color-gold-hairline),
		0 16px 36px rgba(0, 0, 0, 0.6);
	background-color: #0a0604;
	background-image: url("../images/community/shop.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.scs-community__shelf { display: none; }
.scs-community__showcase::after { display: none; }

/* Map — more realistic street grid + gold pin */
.scs-community__map {
	display: flex;
	flex-direction: column;
	gap: var(--scs-space-3);
}

.scs-community__map-canvas {
	flex: 1 1 auto;
	min-height: 240px;
	border-radius: var(--scs-radius-md);
	overflow: hidden;
	position: relative;
	box-shadow:
		inset 0 0 0 1px var(--scs-color-gold-hairline),
		0 16px 36px rgba(0, 0, 0, 0.6);
	background-color: #e6e0d0;
	background-image:
		/* main roads */
		linear-gradient(92deg, transparent 48%, #f5f0df 48%, #f5f0df 52%, transparent 52%),
		linear-gradient(18deg, transparent 28%, #f5f0df 28%, #f5f0df 31%, transparent 31%),
		/* grid streets */
		repeating-linear-gradient(0deg, transparent 0 34px, rgba(160, 150, 130, 0.35) 34px 35px),
		repeating-linear-gradient(90deg, transparent 0 34px, rgba(160, 150, 130, 0.35) 34px 35px),
		/* green park */
		radial-gradient(ellipse 22% 28% at 22% 72%, #cfd8b5, transparent 70%),
		/* base */
		linear-gradient(180deg, #dfd8c6 0%, #c9c2af 100%);
}

.scs-community__pin {
	position: absolute;
	top: 45%;
	left: 55%;
	width: 28px;
	height: 28px;
	transform: translate(-50%, -100%);
	background:
		radial-gradient(circle at 50% 38%, var(--scs-color-gold-bright) 0%, var(--scs-color-gold) 55%, #4a3218 100%);
	border-radius: 50% 50% 50% 0;
	transform-origin: bottom;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.scs-community__pin::after {
	content: "";
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #0A0604;
	box-shadow: inset 0 0 0 2px var(--scs-color-gold-bright);
}

.scs-community__map-cta {
	align-self: stretch;
	justify-content: center;
}

/* ================================================ OWN THE RARE */

.scs-own {
	padding: var(--scs-space-8) 0;
	background:
		radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212, 175, 55, 0.14), transparent 65%),
		radial-gradient(ellipse 100% 30% at 50% 100%, rgba(240, 206, 106, 0.08), transparent 70%),
		linear-gradient(180deg, #0D0704 0%, #1A1109 100%);
	border-top: 1px solid var(--scs-color-gold-hairline);
}

.scs-own__inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--scs-space-4);
}

.scs-own__title {
	font-family: var(--scs-font-display);
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 3rem);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0;
	/* Outlined neon-tube treatment matching category tiles + section heads. */
	color: transparent;
	-webkit-text-stroke: 1.4px #ffd84a;
	text-stroke: 1.4px #ffd84a;
	text-shadow:
		0 0 4px  #ffdd55,
		0 0 12px rgba(255, 170, 40, 0.55),
		0 0 24px rgba(255, 120, 0, 0.35);
}

@media (min-width: 1280px) {
	.scs-own__title {
		-webkit-text-stroke-width: 1.8px;
		text-stroke-width: 1.8px;
	}
}

.scs-own__cta {
	padding: 14px 44px;
}

/* ============================================================
   Auto-scrolling carousel — shared by Latest Drops + Rare Picks.
   Seamless marquee: track contains duplicated items, translates
   from 0% to -50% over duration, then loops without a jump.
   Pauses on hover, direction reversible, shine sweep on cards.
   ============================================================ */

.scs-carousel {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: var(--scs-space-3) 0;
	mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

.scs-carousel__track {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	gap: var(--scs-space-4);
	width: max-content !important;
	min-width: max-content;
	will-change: transform;
	animation: scs-carousel-scroll 40s linear infinite !important;
}

.scs-carousel[data-scs-carousel-reverse] .scs-carousel__track {
	animation-direction: reverse !important;
}

.scs-carousel:hover .scs-carousel__track {
	animation-play-state: paused !important;
}

@keyframes scs-carousel-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.scs-carousel__item {
	flex: 0 0 auto;
	width: clamp(200px, 22vw, 280px);
	text-decoration: none;
	color: inherit;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.scs-carousel__item:hover {
	transform: translateY(-6px) scale(1.03);
}

.scs-carousel__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--scs-radius-md);
	background: linear-gradient(180deg, #1a1109 0%, #090502 100%);
	box-shadow:
		0 10px 30px rgba(0, 0, 0, 0.65),
		inset 0 0 0 1px var(--scs-color-gold-hairline);
	transition: box-shadow 0.4s;
}

.scs-carousel__item:hover .scs-carousel__frame {
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.8),
		0 0 40px rgba(255, 220, 60, 0.3),
		inset 0 0 0 1px var(--scs-color-gold);
}

.scs-carousel__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scs-carousel__item:hover .scs-carousel__frame img {
	transform: scale(1.08);
}

.scs-carousel__placeholder {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 70% at 50% 50%, rgba(212, 175, 55, 0.15), transparent 70%),
		linear-gradient(180deg, #1a1109 0%, #090502 100%);
}

.scs-carousel__shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 230, 60, 0.15) 48%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 230, 60, 0.15) 52%, transparent 65%);
	background-size: 250% 100%;
	background-position: 200% 0;
	opacity: 0;
	transition: opacity 0.3s, background-position 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scs-carousel__item:hover .scs-carousel__shine {
	opacity: 1;
	background-position: -50% 0;
}

.scs-carousel__meta {
	padding: var(--scs-space-3) var(--scs-space-2) 0;
	text-align: center;
}

.scs-carousel__title {
	font-family: var(--scs-font-display);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--scs-color-text);
	letter-spacing: 0.04em;
	margin: 0 0 4px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scs-carousel__price {
	font-family: var(--scs-font-sans);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--scs-color-gold-bright);
	margin: 0;
	letter-spacing: 0.03em;
}

.scs-drops__empty {
	text-align: center;
	color: var(--scs-color-text-muted);
	font-style: italic;
	padding: var(--scs-space-5) var(--scs-space-3);
}

/* The Drops + Rare carousels are intentionally exempt from
   prefers-reduced-motion since the client requires continuous
   auto-scrolling for live product showcase. */

/* ============================================================
   Collectors Community — 3-col: blog posts, social feed, map.
   ============================================================ */

.scs-community__grid {
	display: grid;
	gap: var(--scs-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.scs-community__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.scs-community__col {
	background:
		radial-gradient(ellipse 60% 50% at 50% 0%, rgba(212, 175, 55, 0.06), transparent 70%),
		linear-gradient(180deg, var(--scs-color-surface) 0%, var(--scs-color-bg-deep) 100%);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-md);
	padding: var(--scs-space-4);
	min-height: 460px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.scs-community__heading {
	font-family: var(--scs-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #FFFFFF;
	margin: 0 0 var(--scs-space-3);
	padding-bottom: var(--scs-space-2);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
}

.scs-community__heading svg {
	vertical-align: -3px;
	margin-right: 6px;
	color: var(--scs-color-gold);
}

.scs-community__posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--scs-space-3);
}

.scs-community__post {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	align-items: start;
}

.scs-community__post-thumb {
	width: 80px;
	height: 80px;
	border-radius: var(--scs-radius-sm);
	overflow: hidden;
	background: var(--scs-color-bg-warm);
	flex-shrink: 0;
}

.scs-community__post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.scs-community__post-body { min-width: 0; }

.scs-community__post-title {
	margin: 0 0 4px;
	font-family: var(--scs-font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1.35;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scs-community__post-title:hover { color: var(--scs-color-gold-bright); }

.scs-community__post-meta {
	font-size: 0.76rem;
	color: var(--scs-color-text-muted);
	letter-spacing: 0.04em;
}

.scs-community__social {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.scs-community__social-tile {
	aspect-ratio: 1;
	border-radius: var(--scs-radius-sm);
	background:
		linear-gradient(135deg, rgba(255, 220, 60, 0.08), rgba(212, 175, 55, 0.02)),
		radial-gradient(ellipse at center, var(--scs-color-surface-raised), var(--scs-color-bg-warm));
	border: 1px solid var(--scs-color-gold-hairline);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--scs-color-gold);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: transform 0.3s, border-color 0.3s;
	text-align: center;
	padding: 8px 6px;
	gap: 6px;
	overflow: hidden;
	min-width: 0;
}

.scs-community__social-tile span {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scs-community__social-tile svg { width: 24px; height: 24px; }

.scs-community__social-tile:hover {
	transform: translateY(-3px);
	border-color: var(--scs-color-gold);
	color: var(--scs-color-gold-bright);
}

.scs-community__social-handle {
	margin-top: var(--scs-space-3);
	padding-top: var(--scs-space-3);
	border-top: 1px solid var(--scs-color-gold-hairline);
	text-align: center;
	color: var(--scs-color-text-muted);
	font-size: 0.82rem;
}

.scs-community__social-handle a {
	color: var(--scs-color-gold);
	text-decoration: none;
}

.scs-community__social-handle a:hover { color: var(--scs-color-gold-bright); }

.scs-community__map {
	flex: 1 1 auto;
	min-height: 280px;
	border: 0;
	border-radius: var(--scs-radius-sm);
	filter: grayscale(25%) brightness(0.92) contrast(1.08);
}

.scs-community__address {
	margin: var(--scs-space-3) 0 0;
	font-size: 0.82rem;
	color: var(--scs-color-text-muted);
	text-align: center;
	line-height: 1.5;
}

/* ============================================================
   Own the Rare — scroll-triggered cinematic reveal.
   ============================================================ */

.scs-own {
	position: relative;
	overflow: hidden;
}

.scs-own::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255, 220, 60, 0.08), transparent 70%);
	opacity: 0;
	transition: opacity 1.6s ease;
	pointer-events: none;
}

.scs-own.is-visible::before { opacity: 1; }

.scs-own .scs-section-head__title {
	color: #FFFFFF;
	font-size: clamp(2rem, 5vw, 4rem);
	letter-spacing: 0.08em;
	position: relative;
	display: inline-block;
}

.scs-own__letter {
	display: inline-block;
	opacity: 0;
	transform: translateY(40px) scale(0.6) rotate(-8deg);
	filter: blur(10px);
	transition:
		opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		filter 0.6s ease,
		text-shadow 0.6s ease;
	text-shadow: 0 0 0 transparent;
}

.scs-own.is-visible .scs-own__letter {
	opacity: 1;
	transform: translateY(0) scale(1) rotate(0);
	filter: blur(0);
	text-shadow:
		0 0 12px rgba(255, 220, 60, 0.7),
		0 0 28px rgba(255, 220, 60, 0.35);
}

.scs-own__letter--space { width: 0.35em; }

/* Keep all letters of a single word together so "RARE" never breaks
   mid-word on narrow phones. Spaces between words are still
   breakable (they live outside the word wrapper as a regular
   inline span), so the headline still wraps gracefully when needed. */
.scs-own__word {
	display: inline-block;
	white-space: nowrap;
}

.scs-own__body,
.scs-own__cta {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s 0.6s ease, transform 0.8s 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scs-own.is-visible .scs-own__body,
.scs-own.is-visible .scs-own__cta {
	opacity: 1;
	transform: none;
}

.scs-own .scs-section-head__title::after {
	content: "";
	position: absolute;
	left: -20%;
	top: 0;
	width: 40%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 220, 60, 0.4) 50%, transparent 100%);
	transform: skewX(-20deg);
	opacity: 0;
	pointer-events: none;
}

.scs-own.is-visible .scs-section-head__title::after {
	animation: scs-own-sweep 1.8s 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes scs-own-sweep {
	0%   { left: -20%; opacity: 0; }
	30%  { opacity: 1; }
	100% { left: 120%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.scs-own__letter {
		opacity: 1;
		transform: none;
		filter: none;
	}
	.scs-own__body, .scs-own__cta { opacity: 1; transform: none; }
}

/* ============================================================
   Universal white headings per design brief — overrides prior
   neon-tube outlined treatment with solid white + subtle glow.
   ============================================================ */

.scs-home h1,
.scs-home h2,
.scs-home h3,
.scs-home h4,
.scs-home .scs-section-head__title,
.scs-home .scs-hero__title,
.scs-home .scs-hero__tagline,
.scs-home .scs-community__heading,
.scs-home .scs-community__post-title {
	color: #FFFFFF !important;
	-webkit-text-stroke: 0 !important;
	text-stroke: 0 !important;
}

.scs-home .scs-section-head__title {
	text-shadow:
		0 0 8px rgba(255, 255, 255, 0.25),
		0 0 20px rgba(255, 220, 60, 0.28) !important;
}

.scs-home .scs-hero__title {
	text-shadow:
		0 2px 12px rgba(0, 0, 0, 0.8),
		0 0 30px rgba(255, 255, 255, 0.18) !important;
}

/* ============================================================
   Trust / Promise band — 5-across icon row, full bleed
   ============================================================ */

.scs-trust {
	background:
		linear-gradient(180deg, rgba(0,0,0,0.35), transparent),
		linear-gradient(90deg, rgba(212,175,55,0.06), rgba(212,175,55,0.02) 50%, rgba(212,175,55,0.06));
	border-top: 1px solid var(--scs-color-gold-hairline);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
	padding: var(--scs-space-3) 0;
	position: relative;
	overflow: hidden;
}

.scs-trust__row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--scs-space-3);
	align-items: center;
}

@media (min-width: 720px) {
	.scs-trust__row { grid-template-columns: repeat(3, 1fr); }
}

.scs-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--scs-color-text);
	font-family: var(--scs-font-sans);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	justify-content: center;
	min-width: 0;
}

.scs-trust__item svg {
	color: var(--scs-color-gold);
	flex-shrink: 0;
}

.scs-trust__item strong {
	display: block;
	color: #FFFFFF;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.scs-trust__item small {
	display: block;
	color: var(--scs-color-text-muted);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
}

/* ============================================================
   Shop By chips — horizontal filter row under categories
   ============================================================ */

.scs-chips {
	padding: var(--scs-space-3) 0 var(--scs-space-4);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
}

.scs-chips__label {
	margin: 0 0 10px;
	font-family: var(--scs-font-display);
	font-size: 0.78rem;
	color: var(--scs-color-text-muted);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
}

.scs-chips__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.scs-chip {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border: 1px solid var(--scs-color-gold-soft);
	border-radius: 999px;
	color: var(--scs-color-text);
	font-family: var(--scs-font-sans);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s, border-color 0.25s, transform 0.25s, color 0.25s;
}

.scs-chip:hover {
	background-color: var(--scs-color-gold);
	border-color: var(--scs-color-gold-bright);
	color: #0A0604;
	transform: translateY(-2px);
}

.scs-chip__sep {
	color: var(--scs-color-gold-hairline);
	padding: 0 4px;
	align-self: center;
	user-select: none;
}

/* ============================================================
   Recently Sold ticker — single-row marquee above carousels
   ============================================================ */

.scs-ticker {
	background:
		linear-gradient(90deg, rgba(212,175,55,0.08), rgba(0,0,0,0) 50%, rgba(212,175,55,0.08)),
		var(--scs-color-bg-deep);
	border-top: 1px solid var(--scs-color-gold-hairline);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
	padding: 10px 0;
	overflow: hidden;
}

.scs-ticker__inner {
	max-width: var(--scs-max-width);
	margin: 0 auto;
	padding: 0 var(--scs-space-3);
	display: flex;
	align-items: center;
	gap: var(--scs-space-3);
}

.scs-ticker__label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--scs-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	padding: 4px 10px;
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: 999px;
	background-color: var(--scs-color-bg-deep);
	position: relative;
	z-index: 2;
}

/* Clipping wrapper around the scrolling track. Ensures items never
   visually slide into the label's area. */
.scs-ticker__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	position: relative;
}

.scs-ticker__dot {
	width: 7px;
	height: 7px;
	background-color: #F0CE6A;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(240,206,106,0.85);
	animation: scs-ticker-pulse 1.6s ease-in-out infinite;
}

@keyframes scs-ticker-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(1.35); }
}

.scs-ticker__track {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	gap: var(--scs-space-4);
	width: max-content !important;
	min-width: max-content;
	will-change: transform;
	animation: scs-ticker-scroll 25s linear infinite !important;
}

.scs-ticker:hover .scs-ticker__track { animation-play-state: paused !important; }

@keyframes scs-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

.scs-ticker__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--scs-font-sans);
	font-size: 0.8rem;
	color: var(--scs-color-text);
	white-space: nowrap;
}

.scs-ticker__name { color: #FFFFFF; font-weight: 500; }
.scs-ticker__sep  { color: var(--scs-color-gold); }
.scs-ticker__city { color: var(--scs-color-text-muted); }
.scs-ticker__ago  { color: var(--scs-color-text-dim); font-size: 0.72rem; letter-spacing: 0.05em; }

/* The ticker marquee is intentionally exempt from prefers-reduced-motion
   since the client requires continuous live-sales scrolling. */

/* ============================================================
   Carousel "View all →" link
   ============================================================ */

.scs-carousel__viewall-wrap {
	text-align: right;
	margin: 0 0 var(--scs-space-2);
	padding: 0 var(--scs-space-3);
}

.scs-carousel__viewall {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--scs-font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	text-decoration: none;
	transition: gap 0.25s, color 0.25s;
}

.scs-carousel__viewall:hover {
	gap: 10px;
	color: #FFFFFF;
}

/* ============================================================
   Card flip showcase — copy on left, big flipping card on right
   ============================================================ */

.scs-showcase__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--scs-space-5);
	align-items: center;
}

@media (min-width: 900px) {
	.scs-showcase__grid { grid-template-columns: 1fr 1fr; gap: var(--scs-space-7); }
}

.scs-showcase__copy {
	display: flex;
	flex-direction: column;
	gap: var(--scs-space-3);
	align-items: flex-start;
}

.scs-showcase__eyebrow {
	font-family: var(--scs-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--scs-color-gold);
	padding: 4px 14px;
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: 999px;
	background: rgba(0,0,0,0.35);
}

.scs-showcase__title {
	font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important;
	text-align: left !important;
	padding: 0 !important;
	letter-spacing: 0.04em !important;
}

.scs-showcase__title::before,
.scs-showcase__title::after { display: none !important; }

.scs-showcase__body {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--scs-color-text-muted);
	max-width: 48ch;
	margin: 0;
}

.scs-showcase__card {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	display: block;
	text-decoration: none;
}

.scs-showcase__card .scs-card-tile__image {
	aspect-ratio: 3/4;
	border-radius: var(--scs-radius-md);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,0.75), 0 0 60px rgba(255,220,60,0.25);
	border: 1px solid var(--scs-color-gold-soft);
}

/* Showcase flip — base 3D-flip rules scoped to the showcase so the
   homepage doesn't need to load shop.css. Mirrors the carousel pattern
   further down in this file. */
.scs-showcase__card.scs-card-tile--flip .scs-card-tile__image {
	perspective: 1000px;
	position: relative;
	background-color: var(--scs-color-surface);
}

.scs-showcase__card .scs-card-flip {
	position: absolute;
	inset: 0;
	display: block;
	transform-style: preserve-3d;
}

.scs-showcase__card .scs-card-flip__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.scs-showcase__card .scs-card-flip__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	background-color: var(--scs-color-surface);
}

.scs-showcase__card .scs-card-flip__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.scs-showcase__card .scs-card-flip__face--back {
	transform: rotateY(180deg);
}

@media (hover: hover) {
	.scs-showcase__card.scs-card-tile--flip:hover .scs-card-flip__inner {
		transform: rotateY(180deg);
	}
}

.scs-showcase__card.scs-card-tile--flip.is-flipped .scs-card-flip__inner {
	transform: rotateY(180deg);
}

.scs-showcase__card .scs-card-flip__hint {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.68);
	color: var(--scs-color-gold-bright);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: none;
	opacity: 0.85;
	transition: opacity 0.25s, transform 0.25s;
	z-index: 3;
	border: 1px solid var(--scs-color-gold-hairline);
}

@media (hover: hover) {
	.scs-showcase__card.scs-card-tile--flip:hover .scs-card-flip__hint {
		opacity: 0;
		transform: translateY(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.scs-showcase__card .scs-card-flip__inner { transition: none; }
}

/* ============================================================
   Brand partners / graders — centered, muted, hover lifts
   ============================================================ */

.scs-partners {
	padding: var(--scs-space-4) 0;
	border-top: 1px solid var(--scs-color-gold-hairline);
	border-bottom: 1px solid var(--scs-color-gold-hairline);
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,0.04), transparent 70%),
		var(--scs-color-bg-deep);
}

.scs-partners__eyebrow {
	text-align: center;
	font-family: var(--scs-font-sans);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--scs-color-text-muted);
	margin: 0 0 var(--scs-space-3);
}

.scs-partners__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--scs-space-4);
	max-width: 960px;
	margin: 0 auto;
}

.scs-partners__logo {
	font-family: "Cinzel", serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.22em;
	color: var(--scs-color-text-muted);
	padding: 10px 18px;
	border: 1px solid transparent;
	border-radius: 4px;
	text-transform: uppercase;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s, transform 0.3s;
	opacity: 0.72;
}

.scs-partners__logo:hover {
	color: var(--scs-color-gold-bright);
	border-color: var(--scs-color-gold-hairline);
	background-color: rgba(212,175,55,0.05);
	opacity: 1;
	transform: translateY(-2px);
}

/* ============================================================
   Upcoming Drops — 4 cards with date tile + countdown
   ============================================================ */

.scs-upcoming__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--scs-space-3);
}

@media (min-width: 640px) {
	.scs-upcoming__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.scs-upcoming__grid { grid-template-columns: repeat(4, 1fr); }
}

.scs-upcoming__card {
	position: relative;
	padding: var(--scs-space-4) var(--scs-space-3) var(--scs-space-3);
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,0.08), transparent 70%),
		linear-gradient(180deg, var(--scs-color-surface) 0%, var(--scs-color-bg-deep) 100%);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-md);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.scs-upcoming__card:hover {
	transform: translateY(-3px);
	border-color: var(--scs-color-gold);
	box-shadow: 0 14px 32px rgba(0,0,0,0.55), 0 0 24px rgba(255,220,60,0.2);
}

.scs-upcoming__tag {
	position: absolute;
	top: 10px;
	right: 10px;
	font-family: var(--scs-font-sans);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	padding: 3px 8px;
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: 3px;
	background: rgba(0,0,0,0.45);
}

.scs-upcoming__date {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	padding: 8px 14px;
	background: linear-gradient(180deg, var(--scs-color-bg-warm), var(--scs-color-surface));
	border: 1px solid var(--scs-color-gold-soft);
	border-radius: var(--scs-radius-sm);
	width: fit-content;
	margin-bottom: 6px;
}

.scs-upcoming__month {
	font-family: var(--scs-font-display);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
}

.scs-upcoming__day {
	font-family: var(--scs-font-display);
	font-size: 1.8rem;
	font-weight: 700;
	color: #FFFFFF;
	margin-top: 2px;
}

.scs-upcoming__title {
	margin: 0;
	font-family: var(--scs-font-display);
	font-size: 1.05rem;
	font-weight: 500;
	color: #FFFFFF !important;
	line-height: 1.3;
	letter-spacing: 0.02em;
	-webkit-text-stroke: 0 !important;
}

.scs-upcoming__note {
	margin: 0;
	font-size: 0.82rem;
	color: var(--scs-color-text-muted);
}

.scs-upcoming__countdown {
	margin: auto 0 0;
	padding-top: 10px;
	border-top: 1px dashed var(--scs-color-gold-hairline);
	font-family: var(--scs-font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--scs-color-gold-bright);
	letter-spacing: 0.06em;
}

/* ============================================================
   Testimonials — 3-column review cards with stars
   ============================================================ */

/* ============================================================
   Testimonials horizontal slider — track scrolls left/right via
   the prev/next buttons that sit at the extreme edges. Cards
   have a fixed flex-basis so multiple are visible at once on
   wider screens, with native CSS scroll-snap so each click
   lands on a card boundary.
   ============================================================ */

.scs-testimonials__slider {
	position: relative;
	padding: 0 56px;   /* space reserved on left/right for the nav buttons */
}

.scs-testimonials__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--scs-space-3);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	padding-bottom: 4px;             /* room for inset shadow without clip */
}

/* Hide the native horizontal scrollbar — navigation is via the buttons. */
.scs-testimonials__track::-webkit-scrollbar {
	display: none;
}

.scs-testimonials__card {
	margin: 0;
	padding: var(--scs-space-4);
	background:
		radial-gradient(ellipse at top left, rgba(212,175,55,0.05), transparent 70%),
		linear-gradient(180deg, var(--scs-color-surface) 0%, var(--scs-color-bg-deep) 100%);
	border: 1px solid var(--scs-color-gold-hairline);
	border-radius: var(--scs-radius-md);
	display: flex;
	flex-direction: column;
	gap: var(--scs-space-3);
	position: relative;
	/* Fixed slide width so cards stack horizontally inside the track.
	   Mobile shows ~1 card, tablet ~2, desktop ~3. */
	flex: 0 0 100%;
	max-width: 100%;
	scroll-snap-align: start;
}

@media (min-width: 640px) {
	.scs-testimonials__card {
		flex: 0 0 calc(50% - var(--scs-space-3) / 2);
		max-width: calc(50% - var(--scs-space-3) / 2);
	}
}

@media (min-width: 1024px) {
	.scs-testimonials__card {
		flex: 0 0 calc(33.333% - var(--scs-space-3) * 2 / 3);
		max-width: calc(33.333% - var(--scs-space-3) * 2 / 3);
	}
}

/* Prev / next navigation buttons — gold-bordered circular buttons
   at the extreme left and right of the slider. Vertically centred. */
.scs-testimonials__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--scs-color-gold-hairline);
	background: linear-gradient(180deg, rgba(20, 16, 10, 0.92) 0%, rgba(11, 7, 4, 0.92) 100%);
	color: var(--scs-color-gold-bright, #f0ce6a);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.25s, border-color 0.25s, transform 0.25s, opacity 0.25s, box-shadow 0.25s;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
}

.scs-testimonials__nav:hover {
	border-color: var(--scs-color-gold-bright);
	background: linear-gradient(180deg, rgba(40, 28, 12, 0.95) 0%, rgba(20, 14, 6, 0.95) 100%);
	box-shadow: 0 10px 28px rgba(212, 175, 55, 0.22), 0 0 0 1px rgba(240, 206, 106, 0.4);
}

.scs-testimonials__nav:focus-visible {
	outline: 2px solid var(--scs-color-gold-bright);
	outline-offset: 3px;
}

.scs-testimonials__nav:active {
	transform: translateY(-50%) scale(0.94);
}

.scs-testimonials__nav[disabled],
.scs-testimonials__nav[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.scs-testimonials__nav--prev {
	left: 0;
}

.scs-testimonials__nav--next {
	right: 0;
}

/* On small screens shrink slider padding so the track has more room
   and buttons sit closer to the edges. */
@media (max-width: 600px) {
	.scs-testimonials__slider {
		padding: 0 44px;
	}
	.scs-testimonials__nav {
		width: 36px;
		height: 36px;
	}
}

.scs-testimonials__card::before {
	content: "\201C";
	position: absolute;
	top: 8px;
	left: 16px;
	font-family: "Cinzel", serif;
	font-size: 4rem;
	color: var(--scs-color-gold-hairline);
	line-height: 1;
	pointer-events: none;
}

.scs-testimonials__stars {
	color: var(--scs-color-gold-bright);
	font-size: 1rem;
	letter-spacing: 0.12em;
	position: relative;
	z-index: 1;
}

.scs-testimonials__stars span {
	color: var(--scs-color-gold-hairline);
}

.scs-testimonials__quote {
	margin: 0;
	font-family: var(--scs-font-serif);
	font-style: italic;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--scs-color-text);
	position: relative;
	z-index: 1;
}

.scs-testimonials__cite {
	font-style: normal;
	font-size: 0.82rem;
	color: var(--scs-color-text-muted);
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
	padding-top: var(--scs-space-2);
	border-top: 1px solid var(--scs-color-gold-hairline);
}

.scs-testimonials__cite strong {
	color: #FFFFFF;
	font-weight: 600;
	font-family: var(--scs-font-sans);
	letter-spacing: 0.06em;
}

/* ============================================================
   Newsletter — 2-col panel with copy + inline form
   ============================================================ */

.scs-newsletter {
	padding: var(--scs-space-5) 0;
}

.scs-newsletter__panel {
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,0.12), transparent 70%),
		linear-gradient(180deg, var(--scs-color-surface-raised) 0%, var(--scs-color-bg-deep) 100%);
	border: 1px solid var(--scs-color-gold-soft);
	border-radius: var(--scs-radius-lg);
	padding: var(--scs-space-5) var(--scs-space-4);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--scs-space-4);
	align-items: center;
	box-shadow: 0 18px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,220,60,0.1);
}

@media (min-width: 900px) {
	.scs-newsletter__panel { grid-template-columns: 1fr 1fr; padding: var(--scs-space-5) var(--scs-space-6); }
}

.scs-newsletter__copy { display: flex; flex-direction: column; gap: 10px; }

.scs-newsletter__eyebrow {
	font-family: var(--scs-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--scs-color-gold-bright);
	align-self: flex-start;
}

.scs-newsletter__title {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem) !important;
	text-align: left !important;
	padding: 0 !important;
	margin: 0 !important;
}

.scs-newsletter__title::before,
.scs-newsletter__title::after { display: none !important; }

.scs-newsletter__body {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--scs-color-text-muted);
	max-width: 42ch;
}

.scs-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.scs-newsletter__form input[type="email"] {
	flex: 1 1 260px;
	min-width: 0;
	padding: 14px 18px;
	background: rgba(0,0,0,0.55);
	border: 1px solid var(--scs-color-gold-soft);
	border-radius: var(--scs-radius-sm);
	color: #FFFFFF;
	font-family: var(--scs-font-sans);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	transition: border-color 0.25s, background-color 0.25s;
}

.scs-newsletter__form input[type="email"]:focus {
	outline: none;
	border-color: var(--scs-color-gold-bright);
	background-color: rgba(0,0,0,0.75);
}

.scs-newsletter__form input[type="email"]::placeholder {
	color: var(--scs-color-text-dim);
}

.scs-newsletter__form .scs-button {
	flex: 0 0 auto;
	padding: 14px 28px;
}

.scs-newsletter__fine {
	flex: 1 1 100%;
	margin: 6px 0 0;
	font-size: 0.74rem;
	color: var(--scs-color-text-muted);
	letter-spacing: 0.03em;
}

/* Newsletter post-submit notices — shown after the handler redirects
   back with ?scs_nl=ok|err. Sits in the copy column above the form. */
.scs-newsletter__notice {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: var(--scs-radius-sm);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
}

.scs-newsletter__notice--ok {
	color: var(--scs-color-gold-bright);
	background: rgba(212, 175, 55, 0.08);
	border-color: var(--scs-color-gold-soft);
}

.scs-newsletter__notice--err {
	color: #ffb4b4;
	background: rgba(180, 60, 60, 0.12);
	border-color: rgba(220, 80, 80, 0.45);
}

/* ============================================================
   Hero image slider — 4 full-bleed images that swap randomly
   every ~6s. The incoming slide gets one of 6 high-end entrance
   animations; outgoing simply fades. Pause on hover.
   ============================================================ */

.scs-hero--slider {
	background-image: none !important;
}

.scs-hero__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	background-color: #050302;
}

.scs-hero__slide {
	position: absolute;
	inset: 0;
	/* cover fills the entire hero container — no empty space on any
	   side. Hero section height is locked to a wide cinematic aspect
	   ratio (set on .scs-hero) so it matches the natural shape of
	   the hero artwork and minimal cropping happens at edges. */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #050302;
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform, filter, clip-path;
	z-index: 0;
}

.scs-hero__slide.is-active {
	opacity: 1;
	z-index: 1;
}

/* Outgoing slide stays fully visible underneath the incoming slide
   while incoming animates in. JS removes is-active after 1.7s — at
   that point the slide reverts to opacity: 0 instantly. No more
   "both transparent at once" gap that looked like a blank frame. */
.scs-hero__slide.is-leaving {
	opacity: 1;
	z-index: 1;
}

.scs-hero__slide.is-active.scs-hero__slide--fx-iris,
.scs-hero__slide.is-active.scs-hero__slide--fx-kenburns,
.scs-hero__slide.is-active.scs-hero__slide--fx-zoomblur,
.scs-hero__slide.is-active.scs-hero__slide--fx-prism,
.scs-hero__slide.is-active.scs-hero__slide--fx-glitch,
.scs-hero__slide.is-active.scs-hero__slide--fx-wipe,
.scs-hero__slide.is-active.scs-hero__slide--fx-shatter,
.scs-hero__slide.is-active.scs-hero__slide--fx-flare {
	z-index: 2; /* incoming sits on top while it animates in */
}

/* A subtle vignette so overlay text stays legible across any image. */
.scs-hero__vignette {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 85% 60% at 50% 45%, transparent 20%, rgba(0,0,0,0.35) 100%),
		linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
	pointer-events: none;
}

/* ============================================================
   Per-slide overlay text — "TCG MULTIVERSE" shown on every
   slide except the first (initial-load) image. Visibility is
   driven entirely by CSS via a sibling selector that watches
   which slide currently carries .is-active. The slider JS
   already moves .is-active between slides as the cycler runs,
   so this needs no JS changes.
   ============================================================ */
.scs-hero__overlay-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease-out, color 0.6s ease-out;
}

.scs-hero__overlay-text > span {
	font-family: var(--scs-font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 7vw, 5rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.1;
	padding: 0 var(--scs-space-3);
	/* Default colour — overridden per active slide below. Fallback white
	   is used in the unlikely case a 6th+ slide is added without a colour
	   rule, so the text never disappears. */
	color: #FFFFFF;
	transition: color 0.5s ease-out, text-shadow 0.5s ease-out;
	/* Subtle universal shadow for legibility regardless of slide colour.
	   Per-slide rules below add a chromatic glow that matches each
	   image's mood. */
	text-shadow:
		0 2px 0 rgba(0, 0, 0, 0.6),
		0 3px 8px rgba(0, 0, 0, 0.7),
		0 0 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Per-slide overlay text colour — cycles with the slider so the
   title doesn't read as a flat white label on every slide. The
   colours are tuned for the original hero artwork; if the client
   uploads new banner images via Customize → Hero Slider Images,
   the colours will still cycle by slot position (1, 2, 3, ...)
   even though the chromatic match is no longer guaranteed. To
   re-tune for new images, edit the four colour values below.

   Slot 1 (:first-child) is intentionally excluded — its overlay
   is permanently hidden (initial-load slide).
   ============================================================ */

/* Slot 2 — warm gold (originally tuned for cathedral / golden light). */
.scs-hero__slide:nth-child(2).is-active ~ .scs-hero__overlay-text > span,
.scs-hero__slide:nth-child(2).is-leaving ~ .scs-hero__overlay-text > span {
	color: #F5D78E;
	text-shadow:
		0 2px 0 rgba(48, 24, 8, 0.7),
		0 3px 10px rgba(0, 0, 0, 0.75),
		0 0 32px rgba(245, 215, 142, 0.5);
}

/* Slot 3 — icy cosmic (originally tuned for galactic nebula). */
.scs-hero__slide:nth-child(3).is-active ~ .scs-hero__overlay-text > span,
.scs-hero__slide:nth-child(3).is-leaving ~ .scs-hero__overlay-text > span {
	color: #E8F4FF;
	text-shadow:
		0 2px 0 rgba(0, 0, 20, 0.7),
		0 3px 10px rgba(0, 0, 0, 0.8),
		0 0 36px rgba(150, 200, 255, 0.55);
}

/* Slot 4 — deep espresso on cream halo (originally tuned for bright
   golden marble — the inverted palette stops white text disappearing
   into a high-key image). */
.scs-hero__slide:nth-child(4).is-active ~ .scs-hero__overlay-text > span,
.scs-hero__slide:nth-child(4).is-leaving ~ .scs-hero__overlay-text > span {
	color: #1F1108;
	text-shadow:
		0 1px 0 rgba(255, 245, 220, 0.55),
		0 2px 6px rgba(255, 230, 180, 0.45),
		0 0 28px rgba(212, 175, 55, 0.35);
}

/* Slot 5 — mint neon (originally tuned for cyber / robotic teal). */
.scs-hero__slide:nth-child(5).is-active ~ .scs-hero__overlay-text > span,
.scs-hero__slide:nth-child(5).is-leaving ~ .scs-hero__overlay-text > span {
	color: #5EEAD4;
	text-shadow:
		0 2px 0 rgba(0, 20, 30, 0.75),
		0 3px 10px rgba(0, 0, 0, 0.8),
		0 0 36px rgba(94, 234, 212, 0.55);
}

/* Slots 6–8 (extra capacity in Customizer) — cycle through the same
   palette so the rotation continues even when admin adds more slides
   beyond the original five. */
.scs-hero__slide:nth-child(6).is-active ~ .scs-hero__overlay-text > span,
.scs-hero__slide:nth-child(6).is-leaving ~ .scs-hero__overlay-text > span {
	color: #F5D78E;
	text-shadow:
		0 2px 0 rgba(48, 24, 8, 0.7),
		0 3px 10px rgba(0, 0, 0, 0.75),
		0 0 32px rgba(245, 215, 142, 0.5);
}

.scs-hero__slide:nth-child(7).is-active ~ .scs-hero__overlay-text > span,
.scs-hero__slide:nth-child(7).is-leaving ~ .scs-hero__overlay-text > span {
	color: #E8F4FF;
	text-shadow:
		0 2px 0 rgba(0, 0, 20, 0.7),
		0 3px 10px rgba(0, 0, 0, 0.8),
		0 0 36px rgba(150, 200, 255, 0.55);
}

.scs-hero__slide:nth-child(8).is-active ~ .scs-hero__overlay-text > span,
.scs-hero__slide:nth-child(8).is-leaving ~ .scs-hero__overlay-text > span {
	color: #5EEAD4;
	text-shadow:
		0 2px 0 rgba(0, 20, 30, 0.75),
		0 3px 10px rgba(0, 0, 0, 0.8),
		0 0 36px rgba(94, 234, 212, 0.55);
}

/* Show overlay only when a non-first slide is active OR leaving.
   Including .is-leaving keeps the text visible during the cross-
   fade out, so it doesn't pop away before the image does. The
   first slide (DOM index 0 = :first-child) keeps the overlay
   permanently hidden — that's the slide that loads on entry. */
.scs-hero__slide:not(:first-child).is-active ~ .scs-hero__overlay-text,
.scs-hero__slide:not(:first-child).is-leaving ~ .scs-hero__overlay-text {
	opacity: 1;
}

/* ============================================================
   Active slider effect — single top→bottom slide-down on every
   transition. Incoming slide drops in from above, outgoing
   slide rolls down out the bottom (see the .is-leaving rule a
   little further down). The 8 legacy fancy effects (iris,
   kenburns, zoomblur, prism, glitch, wipe, shatter, flare) are
   kept below as documented dead code in case the look ever
   needs to be reverted — the JS effect picker no longer
   selects them.
   ============================================================ */

/* Slidedown — incoming slide drops in from above the viewport. */
.scs-hero__slide--fx-slidedown {
	animation: scs-hero-slidedown 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes scs-hero-slidedown {
	from { opacity: 1; transform: translateY(-100%); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Outgoing slide rolls down out the bottom of the frame. The
   default .is-leaving rule earlier in this file holds opacity at 1
   and z-index at 1 — adding this animation here makes the outgoing
   slide actually move out instead of just sitting until the JS
   strip-cleanup runs at 1700ms. */
.scs-hero__slide.is-leaving {
	animation: scs-hero-slideout-down 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes scs-hero-slideout-down {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 1; transform: translateY(100%); }
}

/* ============================================================
   Legacy entrance effects — preserved for easy revert. The JS
   no longer references these (EFFECTS = ['slidedown']) so they
   never run. Keep until we're sure the slidedown look is final.
   ============================================================ */

/* 1) Iris — clip-path circle expanding from the center. */
.scs-hero__slide--fx-iris {
	animation: scs-hero-iris 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes scs-hero-iris {
	from { clip-path: circle(0% at 50% 50%); opacity: 1; filter: saturate(1.4) brightness(1.1); }
	to   { clip-path: circle(140% at 50% 50%); opacity: 1; filter: none; }
}

/* 2) Ken Burns — slow zoom + pan with gentle brightness swell. */
.scs-hero__slide--fx-kenburns {
	animation: scs-hero-kenburns 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes scs-hero-kenburns {
	from { opacity: 0; transform: scale(1.18) translate(-2%, 2%); filter: brightness(0.7); }
	to   { opacity: 1; transform: scale(1.04) translate(0, 0); filter: brightness(1); }
}

/* 3) Zoom-blur — dolly-in with lens blur softening out. */
.scs-hero__slide--fx-zoomblur {
	animation: scs-hero-zoomblur 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes scs-hero-zoomblur {
	from { opacity: 0; transform: scale(1.35); filter: blur(22px) saturate(1.6); }
	to   { opacity: 1; transform: scale(1); filter: blur(0) saturate(1); }
}

/* 4) Prism — hue-rotate sweep with chromatic layering. */
.scs-hero__slide--fx-prism {
	animation: scs-hero-prism 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes scs-hero-prism {
	0%   { opacity: 0; filter: hue-rotate(-60deg) saturate(2) contrast(1.4); transform: scale(1.1); }
	50%  { opacity: 1; filter: hue-rotate(30deg) saturate(1.4); }
	100% { opacity: 1; filter: hue-rotate(0) saturate(1); transform: scale(1); }
}

/* 5) Glitch sweep — rapid RGB offset + horizontal chunks. */
.scs-hero__slide--fx-glitch {
	animation: scs-hero-glitch 1.1s steps(12, end) both;
}
@keyframes scs-hero-glitch {
	0%   { opacity: 0; clip-path: inset(45% 0 45% 0); transform: translateX(-8px); filter: hue-rotate(120deg) saturate(1.8); }
	10%  { opacity: 1; clip-path: inset(10% 0 70% 0); transform: translateX(6px); filter: hue-rotate(-60deg); }
	20%  { clip-path: inset(70% 0 10% 0); transform: translateX(-4px); }
	30%  { clip-path: inset(20% 0 50% 0); transform: translateX(3px); filter: hue-rotate(0); }
	45%  { clip-path: inset(0 0 55% 0); transform: translateX(-2px); }
	60%  { clip-path: inset(30% 0 0 0); transform: translateX(2px); }
	75%  { clip-path: inset(0 0 10% 0); transform: translateX(0); }
	100% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 1; filter: none; }
}

/* 6) Diagonal wipe — top-left → bottom-right polygon reveal. */
.scs-hero__slide--fx-wipe {
	animation: scs-hero-wipe 1.3s cubic-bezier(0.65, 0.05, 0.25, 1) both;
}
@keyframes scs-hero-wipe {
	from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; transform: scale(1.06); filter: saturate(1.5); }
	60%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: scale(1); filter: saturate(1); opacity: 1; }
}

/* 7) Shatter bands — 3 horizontal bands slide in from alternating sides. */
.scs-hero__slide--fx-shatter {
	animation: scs-hero-shatter-mask 1.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	position: absolute;
	inset: 0;
}
@keyframes scs-hero-shatter-mask {
	0%   { opacity: 0; transform: scale(1.12); filter: blur(12px) saturate(1.6); clip-path: polygon(0 0, 100% 0, 100% 8%, 0 8%, 0 33%, 100% 33%, 100% 42%, 0 42%, 0 66%, 100% 66%, 100% 74%, 0 74%, 0 100%, 100% 100%, 100% 100%, 0 100%); }
	100% { opacity: 1; transform: scale(1); filter: blur(0) saturate(1); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 100%, 0 100%); }
}

/* 8) Lens flare — radial highlight sweeps across with gold tint. */
.scs-hero__slide--fx-flare {
	animation: scs-hero-flare 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	position: relative;
}
.scs-hero__slide--fx-flare::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 30% 80% at -20% 50%, rgba(255, 230, 60, 0.65), transparent 70%);
	animation: scs-hero-flare-sweep 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	pointer-events: none;
}
@keyframes scs-hero-flare {
	from { opacity: 0; transform: scale(1.04); filter: brightness(0.8) saturate(1.5); }
	to   { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
}
@keyframes scs-hero-flare-sweep {
	from { transform: translateX(-20%); opacity: 0; }
	50%  { opacity: 1; }
	to   { transform: translateX(140%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.scs-hero__slide,
	.scs-hero__slide.is-leaving,
	.scs-hero__slide--fx-slidedown,
	.scs-hero__slide--fx-iris,
	.scs-hero__slide--fx-kenburns,
	.scs-hero__slide--fx-zoomblur,
	.scs-hero__slide--fx-prism,
	.scs-hero__slide--fx-glitch,
	.scs-hero__slide--fx-wipe,
	.scs-hero__slide--fx-shatter,
	.scs-hero__slide--fx-flare {
		animation: none !important;
	}
}

/* ============================================================
   Full-bleed override for the Drops + Rare carousels — they
   break out of the page's max-width container and span the
   entire viewport edge-to-edge. Body overflow-x guards against
   horizontal scrollbars from 100vw including scrollbar width.
   ============================================================ */

body.scs-body { overflow-x: hidden; }

.scs-carousel--drops,
.scs-carousel--rare {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	margin-left: -50vw;
}

/* ============================================================
   Carousel card flip — Latest Drops + Rare Picks now flip on
   hover to reveal the back of each card. Reuses the .scs-card-flip
   wrapper from the shop tile so animation is consistent.
   ============================================================ */

.scs-carousel__item.scs-card-tile--flip .scs-carousel__frame {
	perspective: 1000px;
	background-color: var(--scs-color-surface);
	overflow: hidden;
}

.scs-carousel__item.scs-card-tile--flip .scs-card-flip {
	position: absolute;
	inset: 0;
	display: block;
	transform-style: preserve-3d;
}

.scs-carousel__item.scs-card-tile--flip .scs-card-flip__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.scs-carousel__item.scs-card-tile--flip .scs-card-flip__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	background-color: var(--scs-color-surface);
}

.scs-carousel__item.scs-card-tile--flip .scs-card-flip__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.scs-carousel__item.scs-card-tile--flip .scs-card-flip__face--back {
	transform: rotateY(180deg);
}

@media (hover: hover) {
	.scs-carousel__item.scs-card-tile--flip:hover .scs-card-flip__inner {
		transform: rotateY(180deg);
	}
}

/* Touch / tap-flip support — the existing main.js handler already
   adds .is-flipped on tap of any .scs-card-tile--flip image area. */
.scs-carousel__item.scs-card-tile--flip.is-flipped .scs-card-flip__inner {
	transform: rotateY(180deg);
}

/* ============================================================
   Collectors Meet — vertical auto-scrolling marquee of upcoming
   events. Cards drift upward continuously, pause on hover.
   ============================================================ */

.scs-meets-marquee {
	position: relative;
	/* Fill the remaining column height — never force the column
	   taller. min-height: 0 lets flex shrink the marquee viewport
	   to match the height of sibling columns. */
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.scs-meets-marquee__track {
	display: flex;
	flex-direction: column;
	gap: 12px;
	will-change: transform;
	animation: scs-meets-scroll 28s linear infinite;
}

.scs-meets-marquee:hover .scs-meets-marquee__track,
.scs-meets-marquee:focus-within .scs-meets-marquee__track {
	animation-play-state: paused;
}

@keyframes scs-meets-scroll {
	0%   { transform: translateY(0); }
	100% { transform: translateY(-50%); }
}

.scs-meet-card {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	transition: transform 0.25s;
}

.scs-meet-card:hover {
	transform: translateX(2px);
}

.scs-meet-card__image {
	position: relative;
	width: 80px;
	height: 80px;
	background-color: var(--scs-color-bg-warm);
	background-size: 70%;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: var(--scs-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.scs-meet-card__badge {
	position: absolute;
	top: 4px;
	left: 4px;
	padding: 2px 6px;
	background: var(--scs-color-gold);
	color: #0A0604;
	font-family: var(--scs-font-sans);
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 2px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.scs-meet-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.scs-meet-card__title {
	margin: 0;
	font-family: var(--scs-font-sans);
	font-size: 0.92rem;
	font-weight: 600;
	color: #FFFFFF;
	line-height: 1.35;
	letter-spacing: 0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.scs-meet-card__meta {
	margin: 0;
	font-family: var(--scs-font-sans);
	font-size: 0.76rem;
	color: var(--scs-color-text-muted);
	letter-spacing: 0.04em;
}

/* Light themes — use solid surface bg instead of dark gradient. */
[data-theme="vintage-card"] .scs-meet-card,
[data-theme="courtside"] .scs-meet-card,
[data-theme="coliseum"] .scs-meet-card,
[data-theme="pitch-white"] .scs-meet-card,
[data-theme="mono-press"] .scs-meet-card,
[data-theme="bauhaus"] .scs-meet-card,
[data-theme="sakura"] .scs-meet-card,
[data-theme="dusty-attic"] .scs-meet-card {
	background: var(--scs-color-surface);
}

[data-theme="vintage-card"] .scs-meet-card__title,
[data-theme="courtside"] .scs-meet-card__title,
[data-theme="coliseum"] .scs-meet-card__title,
[data-theme="pitch-white"] .scs-meet-card__title,
[data-theme="mono-press"] .scs-meet-card__title,
[data-theme="bauhaus"] .scs-meet-card__title,
[data-theme="sakura"] .scs-meet-card__title,
[data-theme="dusty-attic"] .scs-meet-card__title {
	color: var(--scs-color-text);
}