/* =====================================================================
 * Spin to Win — Thank-You page (page-thank-you-spin.php)
 *
 * A celebratory, on-brand landing for prize winners: congratulations hero +
 * gift badge + confetti, a 3-step "how to claim" band, the full available-puppy
 * grid (styled by the shop archive CSS), and a "come redeem" locations block.
 * Brand orange #F26322 / #d14d16; type inherits the theme (Poppins). Motion is
 * gated on prefers-reduced-motion.
 * ===================================================================== */

:root {
	--spin-ty-orange: #F26322;
	--spin-ty-orange-dark: #d14d16;
	--spin-ty-ink: #14110f;
	--spin-ty-muted: #5b6470;
	--spin-ty-cream: #faf3ef;
	--spin-ty-line: #efe2da;
}

/* ----------------------------------------------------------------- HERO */
body.page .page-hero.spin-ty-hero {
	padding: 3.5rem 0 2.75rem;
	margin-bottom: 0;
	text-align: center;
	background:
		radial-gradient(120% 90% at 50% -10%, #fff6f0 0%, rgba(255, 246, 240, 0) 60%),
		linear-gradient(180deg, #fffdfc 0%, var(--spin-ty-cream) 100%);
	border-bottom: 1px solid var(--spin-ty-line);
}

.spin-ty-hero__glow {
	position: absolute;
	top: -28%;
	left: 50%;
	width: min(760px, 96%);
	height: 340px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(242, 99, 34, 0.16) 0%, rgba(242, 99, 34, 0) 70%);
	pointer-events: none;
}

/* Confetti — a scatter of festive chips across the top, gently floating. */
.spin-ty-hero__confetti {
	position: absolute;
	top: 20px;
	left: 50%;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	transform: translateX(-50%);
	background: var(--spin-ty-orange);
	opacity: 0.85;
	pointer-events: none;
	box-shadow:
		-260px 8px 0 #ffb703, -210px 44px 0 #06d6a0, -170px 14px 0 #ef476f,
		-120px 52px 0 #F26322, -70px 6px 0 #118ab2, -24px 40px 0 #ffd166,
		36px 10px 0 #ef476f, 84px 48px 0 #06d6a0, 134px 16px 0 #ffb703,
		188px 50px 0 #F26322, 240px 12px 0 #118ab2, 280px 44px 0 #ffd166;
}

.spin-ty-hero__inner {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

/* Gift badge */
.spin-ty-hero__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	margin-bottom: 1.1rem;
	border-radius: 50%;
	color: #fff;
	font-size: 2.35rem;
	background: linear-gradient(135deg, var(--spin-ty-orange) 0%, var(--spin-ty-orange-dark) 100%);
	box-shadow: 0 14px 30px -10px rgba(242, 99, 34, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}

.spin-ty-hero__badge::after {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	border: 2px solid rgba(242, 99, 34, 0.35);
}

body.page .page-hero.spin-ty-hero .page-hero__kicker {
	justify-content: center;
	color: var(--spin-ty-orange-dark);
}

body.page .page-hero.spin-ty-hero .page-hero__title {
	font-size: clamp(2.05rem, 5vw, 3.25rem) !important;
	letter-spacing: -0.03em;
	color: var(--spin-ty-ink) !important;
	margin: 0 auto 0.85rem !important;
	max-width: 16ch;
}

body.page .page-hero.spin-ty-hero .page-hero__lede {
	margin: 0 auto;
	max-width: 60ch;
	color: var(--spin-ty-muted);
}

.spin-ty-hero__cta {
	margin-top: 1.5rem;
}

.spin-ty-hero__cta .btn {
	border-radius: 999px;
	padding-inline: 1.6rem;
	font-weight: 700;
	box-shadow: 0 10px 24px -12px rgba(242, 99, 34, 0.7);
}

/* --------------------------------------------------------------- STEPS */
.spin-ty-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 920px;
	margin: 2.5rem auto 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.spin-ty-steps__item {
	position: relative;
	padding: 1.6rem 1.25rem 1.35rem;
	background: #fff;
	border: 1px solid var(--spin-ty-line);
	border-radius: 16px;
	box-shadow: 0 10px 26px -20px rgba(20, 17, 15, 0.5);
	text-align: center;
}

.spin-ty-steps__num {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--spin-ty-ink);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
}

.spin-ty-steps__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0.35rem auto 0.85rem;
	border-radius: 14px;
	font-size: 1.5rem;
	color: var(--spin-ty-orange);
	background: linear-gradient(135deg, #fff1e9 0%, #ffe6d7 100%);
}

.spin-ty-steps__title {
	font-size: 1.06rem;
	font-weight: 800;
	color: var(--spin-ty-ink);
	margin: 0 0 0.3rem;
}

.spin-ty-steps__text {
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--spin-ty-muted);
	margin: 0;
}

/* -------------------------------------------------------- SECTION HEADS */
.spin-ty-section-head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2rem;
}

.spin-ty-section-title {
	font-size: clamp(1.6rem, 3.4vw, 2.15rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--spin-ty-ink);
	margin: 0 0 0.5rem;
}

.spin-ty-section-sub {
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--spin-ty-muted);
	margin: 0;
}

/* ------------------------------------------------------------- PUPPIES */
.spin-ty-puppies {
	padding: 3rem 0 1rem;
}

/* ------------------------------------------------------- VISIT / REDEEM */
.spin-ty-visit {
	padding: 2.5rem 0 3.5rem;
	background: linear-gradient(180deg, #fff 0%, var(--spin-ty-cream) 100%);
	border-top: 1px solid var(--spin-ty-line);
}

.spin-ty-locations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	max-width: 960px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.spin-ty-locations--single {
	max-width: 460px;
}

.spin-ty-loc {
	padding: 1.5rem 1.35rem;
	background: #fff;
	border: 1px solid var(--spin-ty-line);
	border-radius: 16px;
	box-shadow: 0 12px 30px -22px rgba(20, 17, 15, 0.55);
}

.spin-ty-loc__name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.12rem;
	font-weight: 800;
	color: var(--spin-ty-ink);
	margin: 0 0 0.85rem;
}

.spin-ty-loc__pin {
	color: var(--spin-ty-orange);
	font-size: 1.05rem;
}

.spin-ty-loc__row {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--spin-ty-muted);
	margin: 0 0 0.6rem;
}

.spin-ty-loc__row .bi {
	color: var(--spin-ty-orange);
	margin-top: 0.15rem;
	flex: 0 0 auto;
}

.spin-ty-loc__row a {
	color: inherit;
	text-decoration: none;
}

.spin-ty-loc__row a:hover {
	color: var(--spin-ty-orange-dark);
}

.spin-ty-loc__hours {
	align-items: flex-start;
}

.spin-ty-loc__dir {
	margin-top: 0.4rem;
	border-radius: 999px;
	font-weight: 700;
}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width: 767.98px) {
	body.page .page-hero.spin-ty-hero {
		padding: 2.5rem 0 2rem;
	}

	.spin-ty-steps {
		grid-template-columns: 1fr;
		gap: 1.35rem;
		margin-top: 2rem;
	}

	.spin-ty-puppies {
		padding-top: 2.25rem;
	}
}

/* --------------------------------------------------------------- MOTION */
@media (prefers-reduced-motion: no-preference) {
	.spin-ty-hero__badge {
		animation: spin-ty-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}

	.spin-ty-hero__badge::after {
		animation: spin-ty-ring 2.4s ease-out infinite;
	}

	.spin-ty-hero__confetti {
		animation: spin-ty-float 6s ease-in-out infinite;
	}

	.spin-ty-hero__kicker,
	.spin-ty-hero__title,
	.spin-ty-hero__lede,
	.spin-ty-hero__cta {
		opacity: 0;
		animation: spin-ty-rise 0.6s ease-out forwards;
	}

	.spin-ty-hero__kicker { animation-delay: 0.1s; }
	.spin-ty-hero__title  { animation-delay: 0.2s; }
	.spin-ty-hero__lede   { animation-delay: 0.32s; }
	.spin-ty-hero__cta    { animation-delay: 0.44s; }

	.spin-ty-steps__item {
		opacity: 0;
		animation: spin-ty-rise 0.55s ease-out forwards;
		animation-delay: calc(0.55s + var(--i, 0) * 0.12s);
	}
}

@keyframes spin-ty-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin-ty-pop {
	0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
	100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes spin-ty-ring {
	0%   { transform: scale(1); opacity: 0.8; }
	70%  { transform: scale(1.35); opacity: 0; }
	100% { transform: scale(1.35); opacity: 0; }
}

@keyframes spin-ty-float {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(7px); }
}