/* ===========================================================
   RewardRace — Not Found (404)
   Hero-style 404: brand-gradient number, ambient glow,
   floating orbs, sparkles, pulsing eyebrow, full responsive.
   =========================================================== */

.rrew404 {
	font-family: var(--rr-font-sans);
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--rr-bg);
	color: var(--rr-text);
	padding: clamp(4rem, 8vw, 7rem) var(--rr-section-x);
	min-height: clamp(560px, 80vh, 820px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rrew404 *,
.rrew404 *::before,
.rrew404 *::after { box-sizing: border-box; }

/* ----- Dot pattern overlay (opt-in via .is-dots) ----- */
.rrew404.is-dots::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--rr-pattern-dots);
	background-size: var(--rr-pattern-dots-size);
	opacity: .55;
	mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* ----- Ambient glow (opt-in via .is-glow) ----- */
.rrew404.is-glow::before {
	content: "";
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translateX(-50%);
	width: min(900px, 110%);
	height: 520px;
	background: radial-gradient(ellipse at center, rgba(87, 63, 211, .28), transparent 65%);
	filter: blur(70px);
	pointer-events: none;
	z-index: 0;
}
html[data-theme="dark"] .rrew404.is-glow::before {
	background: radial-gradient(ellipse at center, rgba(139, 115, 255, .32), transparent 65%);
}

/* ----- Background orbs ----- */
.rrew404__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}
.rrew404__orb {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(60px);
	will-change: transform, opacity;
}
.rrew404__orb--a {
	top: -120px;
	left: -100px;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(87, 63, 211, .35), transparent 65%);
	animation: rrew404Float 12s ease-in-out infinite;
}
.rrew404__orb--b {
	bottom: -120px;
	right: -80px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(139, 115, 255, .32), transparent 65%);
	animation: rrew404Float 14s ease-in-out infinite reverse;
}
html[data-theme="dark"] .rrew404__orb--a {
	background: radial-gradient(circle, rgba(139, 115, 255, .32), transparent 65%);
}
html[data-theme="dark"] .rrew404__orb--b {
	background: radial-gradient(circle, rgba(168, 148, 255, .26), transparent 65%);
}

@keyframes rrew404Float {
	0%, 100% { transform: translate(0, 0)     scale(1);    opacity: 1; }
	50%      { transform: translate(20px, 18px) scale(1.06); opacity: .78; }
}
@keyframes rrew404Bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}
@keyframes rrew404Pulse {
	0%, 100% { transform: scale(1);    opacity: 1; }
	50%      { transform: scale(1.6);  opacity: .55; }
}
@keyframes rrew404FadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes rrew404SparkleSpin {
	0%, 100% { transform: rotate(0deg)   scale(1);   opacity: .9; }
	50%      { transform: rotate(180deg) scale(1.15); opacity: .55; }
}

/* ----- Inner wrap ----- */
.rrew404__inner {
	position: relative;
	z-index: 1;
	max-width: var(--rr-container-narrow);
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ----- Eyebrow ----- */
.rrew404__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 6px 14px 6px 11px;
	background: transparent;
	border: 1px solid var(--rr-border-strong);
	border-radius: var(--rr-radius-pill);
	font-size: var(--rr-fs-2xs);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-wide);
	text-transform: uppercase;
	color: var(--rr-heading);
	margin-bottom: var(--rr-space-6);
	animation: rrew404FadeUp .7s var(--rr-ease-out) backwards;
}
.rrew404__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rr-brand);
	animation: rrew404Pulse 2s var(--rr-ease-out) infinite;
}

/* ----- Big 404 number + ghost layer ----- */
.rrew404__bignum-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--rr-space-6);
	line-height: .9;
}
.rrew404__bignum {
	position: relative;
	font-size: clamp(7rem, 22vw, 16rem);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.04em;
	background: var(--rr-brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	z-index: 1;
	animation:
		rrew404FadeUp .9s var(--rr-ease-out) .08s backwards,
		rrew404Bob 6s ease-in-out 1s infinite;
}
.rrew404__bignum--ghost {
	position: absolute;
	inset: 0;
	z-index: 0;
	filter: blur(40px);
	opacity: .35;
	animation: none;
	pointer-events: none;
}

/* ----- Sparkles (positioned around the number) ----- */
.rrew404__sparkle {
	position: absolute;
	width: 28px;
	height: 28px;
	color: var(--rr-brand);
	pointer-events: none;
	z-index: 2;
	opacity: .85;
	filter: drop-shadow(0 4px 16px rgba(87, 63, 211, .35));
}
html[data-theme="dark"] .rrew404__sparkle {
	color: var(--rr-brand-light);
	filter: drop-shadow(0 4px 16px rgba(139, 115, 255, .45));
}
.rrew404__sparkle--1 {
	top: -6%;
	left: -4%;
	width: 36px;
	height: 36px;
	animation: rrew404SparkleSpin 6s ease-in-out infinite;
}
.rrew404__sparkle--2 {
	top: 12%;
	right: -6%;
	width: 22px;
	height: 22px;
	animation: rrew404SparkleSpin 5s ease-in-out .8s infinite reverse;
}
.rrew404__sparkle--3 {
	bottom: 4%;
	left: 18%;
	width: 18px;
	height: 18px;
	animation: rrew404SparkleSpin 7s ease-in-out .4s infinite;
}

/* ----- Title ----- */
.rrew404__title {
	font-size: clamp(1.875rem, 1rem + 2.6vw, 3rem);
	font-weight: 800;
	letter-spacing: -.022em;
	line-height: var(--rr-lh-snug);
	margin: 0 0 var(--rr-space-5);
	color: var(--rr-heading);
	text-wrap: balance;
	max-width: 22ch;
	animation: rrew404FadeUp .8s var(--rr-ease-out) .14s backwards;
}
.rrew404__title-lead   { color: inherit; }
.rrew404__title-accent {
	color: var(--rr-brand);
	font-weight: 800;
	margin-left: .35em;
}

/* ----- Description ----- */
.rrew404__desc {
	font-size: var(--rr-fs-lg);
	line-height: var(--rr-lh-relaxed);
	color: var(--rr-muted);
	margin: 0 auto var(--rr-space-10);
	max-width: 56ch;
	animation: rrew404FadeUp .8s var(--rr-ease-out) .2s backwards;
}

/* ----- Actions ----- */
.rrew404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rr-space-3);
	animation: rrew404FadeUp .8s var(--rr-ease-out) .26s backwards;
}

.rrew404__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--rr-space-2);
	padding: 14px 24px;
	border-radius: var(--rr-radius-pill);
	font-size: var(--rr-fs-md);
	font-weight: 700;
	letter-spacing: var(--rr-tracking-snug);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	line-height: 1;
	transition:
		transform var(--rr-dur-fast) var(--rr-ease-out),
		box-shadow var(--rr-dur-fast) var(--rr-ease-out),
		background-color var(--rr-dur-fast) var(--rr-ease-out),
		color var(--rr-dur-fast) var(--rr-ease-out),
		border-color var(--rr-dur-fast) var(--rr-ease-out);
}

.rrew404__btn--primary {
	background: var(--rr-brand-gradient);
	color: #FFFFFF;
	box-shadow: var(--rr-shadow-brand-md);
}
.rrew404__btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--rr-shadow-brand-lg);
	color: #FFFFFF;
}

.rrew404__btn--secondary {
	background: transparent;
	color: var(--rr-heading);
	border-color: var(--rr-border-strong);
}
.rrew404__btn--secondary:hover {
	background: var(--rr-surface);
	border-color: var(--rr-ink);
	transform: translateY(-2px);
}
html[data-theme="dark"] .rrew404__btn--secondary:hover {
	background: var(--rr-surface-2);
	border-color: var(--rr-brand-light);
}

.rrew404__arrow {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	transition: transform var(--rr-dur-fast) var(--rr-ease-out);
}
.rrew404__btn--primary:hover .rrew404__arrow {
	transform: translateX(-3px);
}
.rrew404__btn--secondary:hover .rrew404__arrow {
	transform: translateX(3px);
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 768px) {
	.rrew404 {
		padding: clamp(3rem, 10vw, 5rem) var(--rr-space-5);
		min-height: auto;
	}
	.rrew404__bignum { font-size: clamp(5rem, 32vw, 10rem); }
	.rrew404__desc   { font-size: var(--rr-fs-md); }

	.rrew404__orb--a { width: 240px; height: 240px; top: -80px;    left: -80px; }
	.rrew404__orb--b { width: 240px; height: 240px; bottom: -80px; right: -60px; }

	.rrew404__sparkle--1 { width: 26px; height: 26px; }
	.rrew404__sparkle--2 { width: 18px; height: 18px; }
	.rrew404__sparkle--3 { width: 14px; height: 14px; }

	.rrew404__actions { width: 100%; }
	.rrew404__btn {
		flex: 1 1 100%;
		justify-content: center;
		padding: 13px 20px;
	}
}

@media (max-width: 420px) {
	.rrew404__sparkle--3 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rrew404.is-glow::before,
	.rrew404__bignum,
	.rrew404__orb,
	.rrew404__sparkle,
	.rrew404__dot,
	.rrew404__eyebrow,
	.rrew404__title,
	.rrew404__desc,
	.rrew404__actions {
		animation: none !important;
	}
}