/* A.D. entry page — animated build.
   Same palette as the shop theme, but the surfaces move: drifting colour pools,
   a pointer-tracked highlight on each card, and a staggered entrance. Every
   animation is transform/opacity only, so nothing here forces layout.

   back #252525 · back2 #4d4d4d · text #f0ede6 · second #bdbab5
   accent #b58352 · complementary #5252b5 · green #51b551 · not-active #8d8d8d */

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

:root {
	--accent: #b58352;
	--club: #5252b5;
	--green: #51b551;
	--text: #f0ede6;
	--text-2: #bdbab5;
	--muted: #8d8d8d;
	--surface: rgba(77, 77, 77, .22);
	--stroke: rgba(240, 237, 230, .1);
}

html,
body {
	height: 100%;
}

body {
	background: #1c1c1c;
	color: var(--text);
	font-family: "Golos Text", Arial, Helvetica, sans-serif;
	margin: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

/* ── Background ─────────────────────────────────────────────────────────── */

.bg {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

/* Three slow pools of brand colour. Sized in vmax so the composition holds from
   a phone to a desktop without a second set of values. */
.bg__blob {
	border-radius: 50%;
	filter: blur(60px);
	display: block;
	opacity: .5;
	position: absolute;
	will-change: transform;
}

.bg__blob--club {
	animation: drift-a 26s ease-in-out infinite alternate;
	background: radial-gradient(circle, rgba(82, 82, 181, .55) 0%, rgba(82, 82, 181, 0) 70%);
	height: 70vmax;
	left: -20vmax;
	top: -25vmax;
	width: 70vmax;
}

.bg__blob--shop {
	animation: drift-b 32s ease-in-out infinite alternate;
	background: radial-gradient(circle, rgba(181, 131, 82, .5) 0%, rgba(181, 131, 82, 0) 70%);
	bottom: -30vmax;
	height: 75vmax;
	right: -25vmax;
	width: 75vmax;
}

.bg__blob--third {
	animation: drift-c 38s ease-in-out infinite alternate;
	background: radial-gradient(circle, rgba(81, 181, 81, .16) 0%, rgba(81, 181, 81, 0) 70%);
	height: 42vmax;
	left: 38%;
	top: 62%;
	width: 42vmax;
}

/* Faint engineering grid — gives the colour pools something to sit on so the
   background reads as a surface rather than a blur. */
.bg__grid {
	background-image:
		linear-gradient(rgba(240, 237, 230, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(240, 237, 230, .035) 1px, transparent 1px);
	background-size: 64px 64px;
	display: block;
	inset: 0;
	mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 100%);
	position: absolute;
}

/* Film grain kills the banding that big blurred gradients produce on dark
   screens. Inline SVG turbulence: no extra request. */
.bg__noise {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
	display: block;
	inset: 0;
	mix-blend-mode: overlay;
	opacity: .2;
	position: absolute;
}

@keyframes drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(6vmax, 8vmax, 0) scale(1.12); }
}

@keyframes drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.08); }
	to   { transform: translate3d(-8vmax, -6vmax, 0) scale(1); }
}

@keyframes drift-c {
	from { transform: translate3d(-4vmax, 0, 0) scale(.9); }
	to   { transform: translate3d(4vmax, -6vmax, 0) scale(1.15); }
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	max-width: 1060px;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 40px 24px calc(24px + env(safe-area-inset-bottom));
	position: relative;
	z-index: 1;
}

.head {
	text-align: center;
}

.head__logo img {
	height: auto;
	width: 88px;
	/* The mark is a flat PNG inside an SVG; a drop-shadow in the accent colour is
	   what ties it to the animated background behind it. */
	filter: drop-shadow(0 0 18px rgba(181, 131, 82, .35));
}

.status {
	align-items: center;
	background: rgba(240, 237, 230, .06);
	border: 1px solid var(--stroke);
	border-radius: 999px;
	color: var(--text-2);
	display: inline-flex;
	font-size: 12px;
	gap: 8px;
	margin-top: 20px;
	padding: 6px 14px;
}

.status__dot {
	background: var(--green);
	border-radius: 50%;
	height: 7px;
	position: relative;
	width: 7px;
}

/* The halo, not the dot, animates — a pulsing dot on a pill reads as a glitch,
   a pulsing halo reads as "live". */
.status__dot::after {
	animation: ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
	background: var(--green);
	border-radius: 50%;
	content: "";
	inset: 0;
	position: absolute;
}

@keyframes ping {
	0%   { opacity: .7; transform: scale(1); }
	70%  { opacity: 0; transform: scale(3); }
	100% { opacity: 0; transform: scale(3); }
}

.head__title {
	font-size: 34px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 16px 0 0;
}

.head__subtitle {
	color: var(--text-2);
	font-size: 15px;
	line-height: 1.5;
	margin: 10px auto 0;
	max-width: 460px;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.cards {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	margin-top: 36px;
}

.card {
	--card-accent: var(--accent);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	background:
		linear-gradient(180deg, rgba(240, 237, 230, .06) 0%, rgba(240, 237, 230, 0) 45%),
		rgba(37, 37, 37, .55);
	border: 1px solid var(--stroke);
	border-radius: 20px;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 10px;
	isolation: isolate;
	overflow: hidden;
	padding: 22px;
	position: relative;
	text-decoration: none;
	transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, background .28s ease;
	-webkit-tap-highlight-color: transparent;
}

/* Each card carries its accent as four ready-made values instead of deriving
   them with color-mix(): the function is unsupported in older in-app browsers,
   and there it takes the whole declaration down with it. */
.card--club {
	--card-accent: var(--club);
	--card-soft: rgba(82, 82, 181, .14);
	--card-line: rgba(82, 82, 181, .35);
	--card-line-strong: rgba(82, 82, 181, .6);
	--card-glow: rgba(82, 82, 181, .45);
}

.card--shop {
	--card-accent: var(--accent);
	--card-soft: rgba(181, 131, 82, .14);
	--card-line: rgba(181, 131, 82, .35);
	--card-line-strong: rgba(181, 131, 82, .6);
	--card-glow: rgba(181, 131, 82, .45);
}

.card--account {
	--card-accent: var(--muted);
	--card-soft: rgba(141, 141, 141, .12);
	--card-line: rgba(141, 141, 141, .3);
	--card-line-strong: rgba(141, 141, 141, .45);
	--card-glow: rgba(141, 141, 141, .3);
}

/* Pointer-tracked highlight. --mx/--my are written by app.js; without JS the
   defaults park it in the middle and it simply never moves. */
.card__glow {
	background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), var(--card-glow) 0%, transparent 65%);
	inset: -1px;
	opacity: 0;
	position: absolute;
	transition: opacity .3s ease;
	z-index: -1;
}

a.card:hover .card__glow,
a.card:focus-visible .card__glow {
	opacity: .55;
}

a.card:hover,
a.card:focus-visible {
	border-color: var(--card-line-strong);
	transform: translateY(-4px);
}

a.card:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

a.card:active {
	transform: translateY(-1px) scale(.99);
}

/* Hairline along the top edge — the detail that makes a translucent panel read
   as glass rather than as a flat tinted box. */
.card::before {
	background: linear-gradient(90deg, transparent, rgba(240, 237, 230, .25), transparent);
	content: "";
	height: 1px;
	left: 12%;
	position: absolute;
	right: 12%;
	top: 0;
}

.card__top {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}

.card__icon {
	align-items: center;
	background: var(--card-soft);
	border: 1px solid var(--card-line);
	border-radius: 14px;
	color: var(--card-accent);
	display: inline-flex;
	height: 48px;
	justify-content: center;
	position: relative;
	width: 48px;
}

.card__icon svg {
	height: 24px;
	position: relative;
	width: 24px;
	z-index: 1;
}

/* Expanding ring behind the icon: the same "live" idea as the status dot, tuned
   slow enough that three of them on screen never read as busy. */
.card__ring {
	animation: ring 3.6s ease-out infinite;
	border: 1px solid var(--card-accent);
	border-radius: 14px;
	inset: -1px;
	opacity: 0;
	position: absolute;
}

.card--shop .card__ring { animation-delay: 1.2s; }

@keyframes ring {
	0%   { opacity: .5; transform: scale(1); }
	70%  { opacity: 0; transform: scale(1.35); }
	100% { opacity: 0; transform: scale(1.35); }
}

/* Per-icon motion — each one animates the part that means something: the shield
   ticks, the cart rolls, the padlock stays shut. */
.card__icon-check {
	animation: check 4s ease-in-out infinite;
	stroke-dasharray: 12;
	stroke-dashoffset: 0;
}

@keyframes check {
	0%, 55%  { stroke-dashoffset: 12; opacity: 0; }
	65%, 92% { stroke-dashoffset: 0; opacity: 1; }
	100%     { stroke-dashoffset: 0; opacity: 0; }
}

.card__icon-wheel {
	animation: wheel 3.2s ease-in-out infinite;
	transform-origin: center;
}

.card__icon-wheel--late {
	animation-delay: .12s;
}

@keyframes wheel {
	0%, 70%, 100% { transform: translateX(0); }
	80%           { transform: translateX(2px); }
	90%           { transform: translateX(-1px); }
}

.card--account .card__icon-shackle {
	animation: shackle 5s ease-in-out infinite;
	transform-origin: 12px 10px;
}

@keyframes shackle {
	0%, 88%, 100% { transform: translateY(0); }
	92%           { transform: translateY(-1.5px); }
	96%           { transform: translateY(0); }
}

.pill {
	background: rgba(240, 237, 230, .07);
	border: 1px solid var(--stroke);
	border-radius: 999px;
	color: var(--text-2);
	font-family: "Rubik", "Golos Text", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: -.01em;
	padding: 5px 10px;
	white-space: nowrap;
}

.pill--live {
	align-items: center;
	color: var(--green);
	display: inline-flex;
	gap: 6px;
}

.pill__dot {
	background: var(--green);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--green);
	height: 6px;
	width: 6px;
}

.pill--soon {
	border-style: dashed;
	color: var(--muted);
}

.card__label {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.card__text {
	color: var(--text-2);
	flex: 1 1 auto;
	font-size: 13.5px;
	line-height: 1.5;
}

.card__cta {
	align-items: center;
	color: var(--card-accent);
	display: inline-flex;
	font-family: "Rubik", "Golos Text", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	gap: 8px;
	letter-spacing: -.01em;
	margin-top: 6px;
}

.card__cta svg {
	height: 17px;
	transition: transform .28s cubic-bezier(.22, 1, .36, 1);
	width: 17px;
}

a.card:hover .card__cta svg,
a.card:focus-visible .card__cta svg {
	transform: translateX(4px);
}

.card.is-locked {
	background: rgba(77, 77, 77, .12);
	border-style: dashed;
	cursor: not-allowed;
}

.card.is-locked .card__label,
.card.is-locked .card__text {
	color: var(--muted);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.foot {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.foot__bar {
	align-items: center;
	background: rgba(240, 237, 230, .05);
	border: 1px solid var(--stroke);
	border-radius: 999px;
	color: var(--muted);
	display: inline-flex;
	font-size: 12px;
	gap: 12px;
	padding: 8px 18px;
}

.foot__item.is-active {
	color: var(--text-2);
}

.foot__sep {
	background: var(--stroke);
	height: 12px;
	width: 1px;
}

/* ── Entrance ───────────────────────────────────────────────────────────── */

.head__logo,
.status,
.head__title,
.head__subtitle,
.card,
.foot {
	animation: rise .7s cubic-bezier(.22, 1, .36, 1) backwards;
}

.status         { animation-delay: .06s; }
.head__title    { animation-delay: .12s; }
.head__subtitle { animation-delay: .18s; }
.card:nth-child(1) { animation-delay: .26s; }
.card:nth-child(2) { animation-delay: .34s; }
.card:nth-child(3) { animation-delay: .42s; }
.foot           { animation-delay: .5s; }

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

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.screen {
		justify-content: flex-start;
		padding: 32px 16px calc(20px + env(safe-area-inset-bottom));
	}

	.head__logo img {
		width: 72px;
	}

	.head__title {
		font-size: 26px;
	}

	.head__subtitle {
		font-size: 14px;
	}

	.cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
		margin-top: 26px;
	}

	.card {
		padding: 18px;
	}

	.card__icon {
		height: 42px;
		width: 42px;
	}

	.card__label {
		font-size: 19px;
	}

	.foot {
		margin-top: 24px;
	}
}

/* A hover highlight that follows a finger is meaningless — on touch the card
   only reacts to the press itself. */
@media (hover: none) {
	.card__glow {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg__blob,
	.status__dot::after,
	.card__ring,
	.card__icon-check,
	.card__icon-wheel,
	.card--account .card__icon-shackle,
	.head__logo,
	.status,
	.head__title,
	.head__subtitle,
	.card,
	.foot {
		animation: none;
	}

	.card__icon-check {
		stroke-dashoffset: 0;
		opacity: 1;
	}

	.card,
	.card__cta svg,
	.card__glow {
		transition: none;
	}

	a.card:hover,
	a.card:focus-visible,
	a.card:active {
		transform: none;
	}
}