/* Radial Showcase Widget — all selectors scoped with .rsw */

.rsw {
	--rsw-accent: #E69445;
	--rsw-accent-2: #F0BC6D;
	--rsw-cream: #f5f0e8;
	--rsw-ink: #0a0a0f;
	--rsw-size: 540px;
	--rsw-gap: 64px;
	--rsw-thumb: 17.8%;
	--rsw-gradient: linear-gradient(135deg, var(--rsw-accent), var(--rsw-accent-2), var(--rsw-accent));
	--rsw-ease: cubic-bezier(0.65, 0, 0.35, 1);

	position: relative;
	padding: 80px 24px;
	overflow: hidden;
	background-color: var(--rsw-ink);
	color: var(--rsw-cream);
	box-sizing: border-box;
}

.rsw *,
.rsw *::before,
.rsw *::after {
	box-sizing: border-box;
}

/* ── Ambient backgrounds ── */
.rsw__ambient {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(55, 45, 85, 0.35) 0%, transparent 60%);
	pointer-events: none;
}

.rsw__glow {
	position: absolute;
	top: -5rem;
	left: 50%;
	transform: translateX(-50%);
	height: 700px;
	width: 700px;
	max-width: 100%;
	border-radius: 50%;
	opacity: 0.2;
	filter: blur(64px);
	background: var(--rsw-gradient);
	pointer-events: none;
}

/* ── Layout ── */
.rsw__container {
	position: relative;
	max-width: 80rem;
	margin: 0 auto;
}

.rsw__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rsw-gap);
	align-items: center;
}

.rsw__slider-wrap { order: 1; }
.rsw__info        { order: 2; }

@media (min-width: 1024px) {
	.rsw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rsw__info        { order: 1; }
	.rsw__slider-wrap { order: 2; }
	.rsw--img-left .rsw__info        { order: 2; }
	.rsw--img-left .rsw__slider-wrap { order: 1; }
}

/* ── Info ── */
.rsw__info-item {
	display: none;
	text-align: left;
}

.rsw__info-item.is-active {
	display: block;
	animation: rsw-fade-up 0.6s ease-out both;
}

.rsw__sub {
	display: block;
	margin: 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	color: var(--rsw-accent);
}

.rsw__heading {
	margin: 16px 0 0;
	font-weight: 400;
	line-height: 1.05;
	color: var(--rsw-cream);
}

.rsw--sub-below .rsw__heading { margin-top: 0; }
.rsw--sub-below .rsw__sub     { margin-top: 20px; }

.rsw__desc {
	margin-top: 20px;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(245, 240, 232, 0.7);
}

.rsw__desc p { margin: 0 0 1em; }
.rsw__desc p:last-child { margin-bottom: 0; }

.rsw__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	padding: 16px 28px;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	text-decoration: none;
	color: var(--rsw-ink);
	background-image: var(--rsw-gradient);
	border-radius: 9999px;
	border: 0 solid transparent;
	cursor: pointer;
	transition: box-shadow 0.3s, color 0.3s, background 0.3s;
}

.rsw__btn:hover {
	box-shadow: 0 0 40px color-mix(in srgb, var(--rsw-accent) 25%, transparent);
}

.rsw__btn svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	transition: transform 0.3s;
}

.rsw__btn:hover svg { transform: translate(2px, -2px); }

/* ── Slider ── */
.rsw__slider-wrap {
	display: flex;
	justify-content: center;
}

.rsw__slider {
	position: relative;
	width: var(--rsw-size);
	max-width: 100%;
	aspect-ratio: 1 / 1;
}

/* Rings */
.rsw__ring-outer {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--rsw-accent) 25%, transparent);
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		color-mix(in srgb, var(--rsw-accent) 15%, transparent) 90deg,
		transparent 180deg,
		color-mix(in srgb, var(--rsw-accent) 15%, transparent) 270deg,
		transparent 360deg
	);
	animation: rsw-spin 30s linear infinite;
}

.rsw__ring-mid {
	position: absolute;
	inset: 4.44%;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--rsw-accent) 18%, transparent);
}

.rsw__ring-inner {
	position: absolute;
	inset: 8.89%;
	border-radius: 50%;
	border: 1px solid rgba(245, 240, 232, 0.05);
}

/* Centre image */
.rsw__center {
	position: absolute;
	inset: 18%;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rsw-accent) 45%, transparent),
		0 0 40px color-mix(in srgb, var(--rsw-accent) 25%, transparent);
}

.rsw__center-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.1);
	transition: opacity 1s ease-out, transform 1s ease-out;
	will-change: opacity, transform;
}

.rsw__center-img.is-active {
	opacity: 1;
	transform: scale(1);
}

.rsw__center-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 15, 0.45), transparent 60%);
	pointer-events: none;
}

/* Orbit + thumbnails */
.rsw__orbit {
	position: absolute;
	inset: 0;
	transition: transform 1200ms var(--rsw-ease);
}

.rsw__thumb {
	position: absolute;
	width: var(--rsw-thumb);
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	transform: translate(-50%, -50%);
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.rsw__thumb-rot {
	position: relative;
	transition: transform 1200ms var(--rsw-ease);
}

.rsw__thumb-circle {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(245, 240, 232, 0.2);
	transition: border-color 0.5s, transform 0.5s, box-shadow 0.5s;
}

.rsw__thumb-circle img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rsw__thumb-overlay {
	position: absolute;
	inset: 0;
	background: rgba(10, 10, 15, 0.4);
	transition: background 0.3s, opacity 0.3s;
	pointer-events: none;
}

.rsw__thumb.is-active .rsw__thumb-circle {
	border-color: var(--rsw-accent);
	transform: scale(1.25);
	box-shadow: 0 0 40px color-mix(in srgb, var(--rsw-accent) 25%, transparent);
}

.rsw__thumb.is-active .rsw__thumb-overlay { opacity: 0; }

.rsw__thumb:not(.is-active):hover .rsw__thumb-circle {
	border-color: color-mix(in srgb, var(--rsw-accent) 60%, transparent);
	transform: scale(1.1);
}

.rsw__thumb:not(.is-active):hover .rsw__thumb-overlay { background: rgba(10, 10, 15, 0.1); }

.rsw__thumb:focus-visible .rsw__thumb-circle {
	outline: 2px solid var(--rsw-accent);
	outline-offset: 3px;
}

.rsw__thumb-dot {
	position: absolute;
	bottom: -0.55rem;
	left: 50%;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	border-radius: 50%;
	background: var(--rsw-accent);
	opacity: 0;
}

.rsw__thumb.is-active .rsw__thumb-dot {
	opacity: 1;
	animation: rsw-pulse 2s ease-in-out infinite;
}

/* Dial ticks */
.rsw__dial {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.rsw__dial-mark {
	position: absolute;
	width: 1px;
	height: 6px;
	background: rgba(245, 240, 232, 0.15);
}

/* ── Animations ── */
@keyframes rsw-spin { to { transform: rotate(360deg); } }

@keyframes rsw-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

@keyframes rsw-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 639px) {
	.rsw { padding: 64px 16px; }
	.rsw__grid { gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.rsw__ring-outer,
	.rsw__thumb.is-active .rsw__thumb-dot,
	.rsw__info-item.is-active { animation: none; }
	.rsw__orbit,
	.rsw__thumb-rot { transition-duration: 0.01ms; }
}