/**
 * HerCircle welcome spin — homepage acquisition wheel styles.
 *
 * Scoped under `.hc-spin-cta` (section root, handed off in Bricks) and
 * `.hc-spin-cta__widget` (the shortcode's wheel widget). Every custom property
 * is prefixed `--hc-` so nothing collides with Automatic CSS tokens. The wheel
 * tokens mirror the member portal exactly so the two wheels are identical.
 */

.hc-spin-cta,
.hc-spin-cta__widget {
	/* ---- Palette: near-black maroon ground, gold accent ---- */
	--hc-bg: #0B0305;
	--hc-surface: #15080B;
	--hc-surface-2: #1E0C11;
	--hc-line: rgba(212, 175, 110, 0.14);
	--hc-line-strong: rgba(212, 175, 110, 0.28);
	--hc-maroon: #4A0E1F;
	--hc-maroon-glow: rgba(120, 20, 42, 0.45);

	--hc-gold: #D4AF6E;
	--hc-gold-1: #F0D496;
	--hc-gold-2: #B8893B;
	--hc-gold-grad: linear-gradient(135deg, var(--hc-gold-1) 0%, var(--hc-gold) 45%, var(--hc-gold-2) 100%);
	--hc-on-gold: #1A0A0E;

	/* Spin wheel face (read by the canvas at draw time). */
	--hc-wheel-a: #3A0A18;
	--hc-wheel-b: #1E0C11;
	--hc-wheel-ink-on-dark: #D4AF6E;
	--hc-wheel-ink-on-light: #2A1418;
	--hc-wheel-line: rgba(212, 175, 110, 0.35);

	--hc-ink: #F4ECE2;
	--hc-ink-dim: rgba(244, 236, 226, 0.62);
	--hc-ink-faint: rgba(244, 236, 226, 0.34);

	--hc-display: "Playfair Display", Georgia, serif;
	--hc-script: "Pinyon Script", "Playfair Display", cursive;
	--hc-body: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

	--hc-radius: 14px;
	--hc-radius-sm: 9px;
}

.hc-spin-cta *,
.hc-spin-cta *::before,
.hc-spin-cta *::after,
.hc-spin-cta__widget *,
.hc-spin-cta__widget *::before,
.hc-spin-cta__widget *::after {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------- *
 * Section shell (the Bricks-handed-off root)
 * --------------------------------------------------------------------- */

.hc-spin-cta {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 85% 15%, var(--hc-maroon-glow) 0%, rgba(120, 20, 42, 0) 55%),
		var(--hc-bg);
	color: var(--hc-ink);
	font-family: var(--hc-body);
	border-radius: var(--hc-radius);
	padding: clamp(28px, 5vw, 64px);
}

.hc-spin-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
}

@media ( min-width: 880px ) {
	.hc-spin-cta__inner {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.hc-spin-cta__eyebrow {
	margin: 0 0 14px;
	font-family: var(--hc-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hc-gold);
}

.hc-spin-cta__heading {
	margin: 0 0 16px;
	font-family: var(--hc-display);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.1;
	color: var(--hc-ink);
}

.hc-spin-cta__text {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.6;
	color: var(--hc-ink-dim);
}

.hc-spin-cta__wheelwrap {
	display: flex;
	justify-content: center;
}

/* --------------------------------------------------------------------- *
 * Wheel widget
 * --------------------------------------------------------------------- */

.hc-spin-cta__widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: var(--hc-body);
	color: var(--hc-ink);
}

.hc-spin-cta__widget .hc-wheel {
	position: relative;
	width: 280px;
	max-width: 100%;
	margin: 4px auto 18px;
}

.hc-spin-cta__widget .hc-wheel__canvas {
	display: block;
	width: 280px;
	height: 280px;
	max-width: 100%;
	border-radius: 50%;
	transform: rotate(0deg);
	will-change: transform;
	box-shadow: 0 0 0 2px var(--hc-line-strong), 0 18px 50px -24px #000;
}

.hc-spin-cta__widget .hc-wheel__pointer {
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-top: 18px solid var(--hc-gold-1);
	z-index: 2;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}

.hc-spin-cta__widget .hc-wheel__msg {
	margin: 14px 0 0;
	min-height: 1.2em;
	font-size: 14px;
	color: var(--hc-ink-dim);
	text-align: center;
}

/* --------------------------------------------------------------------- *
 * Buttons
 * --------------------------------------------------------------------- */

.hc-spin-cta .hc-btn,
.hc-spin-cta__widget .hc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--hc-body);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 160ms ease;
}

.hc-spin-cta .hc-btn--gold,
.hc-spin-cta__widget .hc-btn--gold {
	background: var(--hc-gold-grad);
	color: var(--hc-on-gold);
}

.hc-spin-cta .hc-btn--gold:hover,
.hc-spin-cta__widget .hc-btn--gold:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px -10px var(--hc-gold-2);
}

.hc-spin-cta__widget .hc-wheel__btn {
	min-width: 160px;
}

.hc-spin-cta__widget .hc-wheel__btn.is-spinning {
	opacity: 0.7;
	cursor: progress;
}

.hc-spin-cta__widget .hc-wheel__btn.is-locked {
	background: transparent;
	border-color: var(--hc-line-strong);
	color: var(--hc-ink-dim);
	cursor: default;
}

.hc-spin-cta__widget .hc-wheel__btn.is-locked:hover {
	transform: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------- *
 * Win modal
 * --------------------------------------------------------------------- */

.hc-spin-cta__widget .hc-spin-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity 220ms ease;
}

/* The native [hidden] attribute must win over the fixed/flex base rule above,
   or the invisible (opacity:0) modal stays laid out across the viewport and
   intercepts every click on the page. */
.hc-spin-cta__widget .hc-spin-modal[hidden] {
	display: none;
}

.hc-spin-cta__widget .hc-spin-modal.is-open {
	opacity: 1;
}

.hc-spin-cta__widget .hc-spin-modal__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 2, 3, 0.74);
	backdrop-filter: blur(2px);
}

.hc-spin-cta__widget .hc-spin-modal__card {
	position: relative;
	width: min(420px, 100%);
	padding: 34px 30px 30px;
	text-align: center;
	background:
		radial-gradient(120% 120% at 50% 0%, var(--hc-maroon-glow) 0%, rgba(120, 20, 42, 0) 60%),
		var(--hc-surface);
	border: 1px solid var(--hc-line-strong);
	border-radius: var(--hc-radius);
	box-shadow: 0 30px 80px -30px #000;
	transform: translateY(8px) scale(0.98);
	transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hc-spin-cta__widget .hc-spin-modal.is-open .hc-spin-modal__card {
	transform: translateY(0) scale(1);
}

.hc-spin-cta__widget .hc-spin-modal__eyebrow {
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hc-gold);
}

/* The star is sized in fixed px, not percentages. As a percentage-sized flex
   item the SVG resolved to zero height on the front end and the star never
   painted. Matches the portal's win-modal burst, which uses px throughout.
   `margin: auto` centres it now the box is block-level rather than inline. */
.hc-spin-cta__widget .hc-spin-modal__burst {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 4px auto 8px;
	color: var(--hc-gold-1);
}

.hc-spin-cta__widget .hc-spin-modal__burst svg {
	display: block;
	width: 40px;
	height: 40px;
}

/* No-win state: the celebration star and the "membership required to claim"
   note are both wrong when nothing was won, so they are removed rather than
   reworded. The remaining copy is swapped in JS. */
.hc-spin-cta__widget .hc-spin-modal.is-nowin .hc-spin-modal__burst,
.hc-spin-cta__widget .hc-spin-modal.is-nowin .hc-spin-modal__note {
	display: none;
}

.hc-spin-cta__widget .hc-spin-modal__title {
	margin: 0 0 10px;
	font-family: var(--hc-display);
	font-weight: 600;
	font-size: clamp(22px, 3.4vw, 30px);
	line-height: 1.15;
	color: var(--hc-ink);
}

.hc-spin-cta__widget .hc-spin-modal__desc {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--hc-ink-dim);
}

.hc-spin-cta__widget .hc-spin-modal__cta {
	width: 100%;
}

.hc-spin-cta__widget .hc-spin-modal__note {
	margin: 14px 0 0;
	font-size: 12px;
	color: var(--hc-ink-faint);
}

/* --------------------------------------------------------------------- *
 * Reduced motion
 * --------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.hc-spin-cta__widget .hc-wheel__canvas {
		transition: none !important;
	}

	.hc-spin-cta__widget .hc-spin-modal,
	.hc-spin-cta__widget .hc-spin-modal__card {
		transition: none !important;
	}
}