/* Coming soon screen: full-height dark hero with the brand art. */

body.is-coming-soon { background: var(--ink); --tabbar-h: 0px; }

.soon {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	color: #F2F5F0;
	background: #121614;
}

.soon__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
/* Darken the text side (start = right in RTL) so copy stays readable over the art. */
.soon::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to left, rgba(11, 13, 12, 0.92) 0%, rgba(11, 13, 12, 0.7) 50%, rgba(11, 13, 12, 0.25) 100%);
}
[dir="ltr"] .soon::before { transform: scaleX(-1); }

.soon__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding: 48px var(--gutter) 120px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.soon__brand { display: flex; align-items: center; gap: 16px; }
.soon__mark { width: 88px; height: 88px; animation: soon-bounce 2.4s ease-in-out infinite; }
.soon__name { direction: ltr; font: 700 40px/1 'Fredoka', var(--font-body); white-space: nowrap; }

.soon__eyebrow {
	align-self: flex-start;
	background: var(--accent);
	color: var(--ink);
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 1px;
	padding: 8px 16px;
}

.soon__title { margin: 0; font: 700 clamp(84px, 14vw, 220px)/0.82 var(--font-display); letter-spacing: -1px; }
.soon__accent { color: var(--accent); }
.soon__text { margin: 0; max-width: 560px; font-size: 20px; line-height: 1.6; color: #C3CAC5; }

.soon__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.soon__actions .btn { min-height: 56px; }

.soon__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.soon__social a { color: #F2F5F0; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* Tilted benefits strip along the bottom edge */
.soon__strip {
	position: absolute;
	inset-inline: -5%;
	inset-block-end: 44px;
	z-index: 2;
	transform: rotate(-2deg);
	background: var(--accent);
	color: var(--ink);
	padding-block: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	font: 700 30px/1 var(--font-display);
	letter-spacing: 1px;
}

.soon__staff {
	position: absolute;
	inset-block-end: 8px;
	inset-inline-end: var(--gutter);
	z-index: 3;
	color: var(--muted-dark);
	font-size: 13px;
}

@keyframes soon-bounce {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-6px) rotate(-4deg); }
}

@media (max-width: 860px) {
	.soon__inner { padding-block: 32px 110px; gap: 18px; }
	.soon__mark { width: 64px; height: 64px; }
	.soon__name { font-size: 28px; }
	.soon__title { font-size: 84px; }
	.soon__text { font-size: 17px; }
	.soon__actions .btn { width: 100%; }
	.soon__strip { font-size: 22px; inset-block-end: 40px; }
}

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