/* CP Member Gate — tokens from Antigravity home/index.html */

:root {
	--cp-mg-ink: #ffffff;
	--cp-mg-ink-soft: rgba(255, 245, 250, 0.88);
	--cp-mg-ink-mute: rgba(255, 255, 255, 0.7);
	--cp-mg-rose: #a67d89;
	--cp-mg-glass-a: rgba(255, 255, 255, 0.16);
	--cp-mg-glass-b: rgba(190, 150, 170, 0.18);
	--cp-mg-glass-c: rgba(90, 60, 80, 0.3);
	--cp-mg-veil: rgba(0, 0, 0, 0.28);
	--cp-mg-display: "F1", "HuayingMincho T", "Noto Serif TC", serif;
	--cp-mg-latin: "F1", "Cinzel", Palatino, serif;
	--cp-mg-body: "F1", "PingFang TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
	--cp-mg-radius: 28px;
}

html.cp-member-gate-html,
html.cp-member-gate-html *,
html.cp-member-gate-html *::before,
html.cp-member-gate-html *::after {
	box-sizing: border-box;
}

html.cp-member-gate-html {
	min-height: 100%;
	margin: 0;
	padding: 0;
	background-color: #120814;
}

html.cp-member-gate-html body.cp-member-gate {
	min-height: 100vh;
	min-height: 100svh;
	min-height: 100dvh;
	margin: 0;
	padding:
		max(16px, env(safe-area-inset-top, 0px))
		max(14px, env(safe-area-inset-right, 0px))
		max(16px, env(safe-area-inset-bottom, 0px))
		max(14px, env(safe-area-inset-left, 0px));
	background: #120814;
	font-family: var(--cp-mg-body);
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	color: var(--cp-mg-ink);
}

/* Fixed layer instead of background-attachment:fixed — works on iOS + PC. */
.cp-mg-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: #120814;
	background-image: var(--cp-mg-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

body.cp-member-gate::before {
	content: "";
	position: fixed;
	inset: 0;
	background: var(--cp-mg-veil);
	z-index: 0;
	pointer-events: none;
}

.cp-mg-stardust {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.cp-mg-glass {
	position: relative;
	z-index: 1;
	width: min(465px, 100%);
	max-width: 465px;
	background: linear-gradient(145deg, var(--cp-mg-glass-a) 0%, var(--cp-mg-glass-b) 40%, var(--cp-mg-glass-c) 100%);
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	border-radius: var(--cp-mg-radius);
	border: 1px solid rgba(255, 255, 255, 0.38);
	box-shadow:
		0 0 22px rgba(255, 220, 240, 0.22),
		0 0 45px rgba(180, 130, 190, 0.18),
		0 25px 50px rgba(0, 0, 0, 0.45),
		inset 0 1px 2px rgba(255, 255, 255, 0.45),
		inset 0 0 18px rgba(255, 255, 255, 0.08);
	padding: 30px 24px 26px;
	text-align: center;
	color: var(--cp-mg-ink);
	margin-block: auto;
	opacity: 0;
	transform: translateY(14px);
	animation: cpMgFadeIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

.cp-mg-bg,
.cp-mg-stardust,
body.cp-member-gate::before {
	opacity: 0;
	animation: cpMgFadeSoft 1s ease-out forwards;
}

@keyframes cpMgFadeIn {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cpMgFadeSoft {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.cp-mg-title-cn {
	font-family: var(--cp-mg-display);
	font-size: clamp(1.12rem, 0.6vw + 1.05rem, 1.42rem);
	font-weight: 400;
	letter-spacing: 0.18em;
	color: var(--cp-mg-ink);
	text-shadow: 0 0 16px rgba(255, 240, 250, 0.35), 0 2px 10px rgba(0, 0, 0, 0.4);
	margin: 0 0 3px;
}

.cp-mg-title-en {
	font-family: var(--cp-mg-latin);
	font-size: clamp(0.72rem, 0.2vw + 0.7rem, 0.84rem);
	letter-spacing: 1.6px;
	color: var(--cp-mg-ink-soft);
	margin: 0 0 20px;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.cp-mg-badge-title {
	font-family: var(--cp-mg-display);
	font-size: clamp(1.18rem, 0.7vw + 1.1rem, 1.5rem);
	font-weight: 400;
	letter-spacing: 0.22em;
	color: var(--cp-mg-ink);
	text-shadow: 0 0 18px rgba(255, 240, 250, 0.4), 0 2px 12px rgba(0, 0, 0, 0.4);
	margin: 0 0 3px;
}

.cp-mg-badge-sub {
	font-family: var(--cp-mg-latin);
	font-size: 0.74rem;
	letter-spacing: 5.5px;
	color: rgba(255, 240, 250, 0.82);
	margin: 0 0 16px;
	font-weight: 500;
}

.cp-mg-desc {
	font-family: var(--cp-mg-body);
	font-size: 0.82rem;
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.92);
	max-width: 400px;
	margin: 0 auto 18px;
	letter-spacing: 0.5px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	font-weight: 400;
}

.cp-mg-desc .cp-mg-en {
	font-size: 0.78rem;
	color: rgba(255, 245, 250, 0.86);
}

.cp-mg-card {
	width: 94%;
	max-width: min(343px, 94%);
	margin: 0 auto 18px;
	border-radius: 14px;
	overflow: hidden;
	box-shadow:
		0 10px 25px rgba(0, 0, 0, 0.45),
		0 0 15px rgba(150, 100, 200, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.cp-mg-card img {
	width: 100%;
	height: auto;
	display: block;
}

.cp-mg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 36px;
	background: rgba(166, 125, 137, 0.48);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.48);
	border-radius: 30px;
	color: #ffffff;
	font-family: var(--cp-mg-body);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 2.5px;
	text-decoration: none;
	cursor: pointer;
	animation: cpMgPulse 4.5s ease-in-out 1s infinite;
	margin-bottom: 18px;
}

.cp-mg-btn:hover,
.cp-mg-btn:focus-visible {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.85);
}

.cp-mg-btn:focus-visible {
	outline: 2px solid rgba(255, 240, 250, 0.9);
	outline-offset: 3px;
}

@keyframes cpMgPulse {
	0%,
	100% {
		box-shadow:
			0 4px 15px rgba(0, 0, 0, 0.25),
			0 0 10px rgba(255, 220, 235, 0.15),
			inset 0 1px 2px rgba(255, 255, 255, 0.4);
		border-color: rgba(255, 255, 255, 0.42);
	}
	50% {
		box-shadow:
			0 4px 18px rgba(0, 0, 0, 0.3),
			0 0 22px rgba(255, 220, 240, 0.4),
			inset 0 1px 2px rgba(255, 255, 255, 0.65);
		border-color: rgba(255, 255, 255, 0.7);
	}
}

.cp-mg-site {
	margin-bottom: 16px;
}

.cp-mg-url {
	font-family: var(--cp-mg-latin);
	font-size: 0.84rem;
	letter-spacing: 2px;
	color: rgba(255, 245, 250, 0.9);
	margin: 0 0 8px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.cp-mg-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 60%;
	max-width: 220px;
	margin: 0 auto;
}

.cp-mg-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 100%);
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.cp-mg-line-r {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.75) 0%, transparent 100%);
}

.cp-mg-diamond {
	font-size: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
	line-height: 1;
}

.cp-mg-wisdom {
	font-family: var(--cp-mg-body);
	font-size: 0.8rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.9);
	letter-spacing: 1.2px;
	margin: 0 0 10px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.cp-mg-copy {
	font-family: var(--cp-mg-display), var(--cp-mg-latin);
	font-size: 0.74rem;
	color: var(--cp-mg-ink-mute);
	letter-spacing: 1.5px;
	margin: 0;
}

@media (max-width: 720px) {
	html.cp-member-gate-html body.cp-member-gate {
		align-items: center;
		justify-content: center;
		padding-top: max(16px, env(safe-area-inset-top, 0px));
		padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
	}

	.cp-mg-glass {
		width: 96%;
		max-width: 96%;
		border-radius: 22px;
		transform: scale(1.02);
		padding: clamp(16px, 2.6vw, 24px) clamp(14px, 2.4vw, 22px) clamp(14px, 2.2vw, 22px);
	}

	.cp-mg-title-cn,
	.cp-mg-badge-title {
		letter-spacing: 0.14em;
	}

	.cp-mg-desc {
		font-size: 0.78rem;
	}

	.cp-mg-btn {
		padding: 8px 28px;
		font-size: 0.86rem;
	}

	.cp-mg-wisdom {
		font-size: 0.76rem;
		letter-spacing: 0.8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-mg-btn {
		animation: none;
	}

	.cp-mg-glass,
	.cp-mg-bg,
	.cp-mg-stardust,
	body.cp-member-gate::before {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* Popup login markup still prints in wp_footer; hide it on this canvas page. */
body.cp-member-gate .cp-login-modal,
body.cp-member-gate #cp-login-modal,
body.cp-member-gate #cp-register-modal,
body.cp-member-gate #cp-account-modal {
	display: none !important;
}

@media (max-width: 720px) {
	.cp-mg-desc { line-height: 1.35; }
}

@media (max-width: 720px) { .cp-mg-btn { display: flex; width: fit-content; margin: 0 auto 18px; } }

/* Requested +1px for the membership description and wisdom text. */
.cp-mg-desc { font-size: calc(0.82rem + 1px); }
.cp-mg-desc .cp-mg-en { font-size: calc(0.78rem + 1px); }
.cp-mg-wisdom { font-size: calc(0.8rem + 1px); }
@media (max-width: 720px) {
	.cp-mg-desc { font-size: calc(0.78rem + 1px); }
	.cp-mg-wisdom { font-size: calc(0.76rem + 1px); }
}