/* Stránka ČOSKORO (režim pred otvorením). Farby a písma z theme.json / style.css. */

body.banger-coskoro { margin: 0; background: var(--cream); }

.cs {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
/* kruhy na okrajoch (manuál) */
.cs::before,
.cs::after {
	content: "";
	position: absolute;
	width: 340px;
	height: 340px;
	pointer-events: none;
	background:
		radial-gradient(circle, var(--teal) 0 24px, transparent 25px) 0 0 / 104px 104px,
		radial-gradient(circle, var(--sun) 0 11px, transparent 12px) 52px 52px / 104px 104px;
	opacity: .55;
}
.cs::before { top: -40px; left: -40px; -webkit-mask-image: radial-gradient(circle at 0 0, #000 30%, transparent 70%); mask-image: radial-gradient(circle at 0 0, #000 30%, transparent 70%); }
.cs::after { bottom: 40px; right: -40px; -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 30%, transparent 70%); mask-image: radial-gradient(circle at 100% 100%, #000 30%, transparent 70%); }

.cs__wrap {
	flex: 1;
	width: min(1180px, 100% - 2rem);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: clamp(1rem, 4vw, 4rem);
	padding: clamp(1.5rem, 5vw, 4rem) 0;
	position: relative;
	z-index: 1;
}

/* Bomba + výbuch */
.cs__visual { position: relative; width: 100%; max-width: 580px; aspect-ratio: 580 / 480; margin-inline: auto; }
.cs-bomb, .cs-boom { position: absolute; inset: 0; }
.cs-bomb__svg { width: 100%; height: 100%; overflow: visible; display: block; }
.cs-spark__inner { transform-box: fill-box; transform-origin: center; animation: cs-flicker .16s ease-in-out infinite alternate; }
@keyframes cs-flicker {
	from { transform: scale(.82) rotate(-10deg); }
	to { transform: scale(1.12) rotate(9deg); }
}
.cs-boom { visibility: hidden; display: grid; place-items: center; }
.cs-boom .banger-boom { cursor: default; }
.cs.is-done .cs-bomb { visibility: hidden; }
.cs.is-done .cs-boom { visibility: visible; }

/* Text */
.cs__logo { display: block; width: clamp(180px, 22vw, 260px); height: auto; margin-bottom: 1rem; }
.cs__title {
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	font-size: clamp(3.4rem, 9vw, 7rem);
	line-height: .95;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 .25em;
}
.cs__lead { font-size: var(--wp--preset--font-size--large); line-height: 1.5; max-width: 30ch; margin: 0 0 1.5rem; }

.cs-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; max-width: 30rem; }
.cs-count__box {
	background: var(--white);
	border: var(--line);
	border-radius: var(--radius);
	padding: .7rem .4rem .6rem;
	text-align: center;
}
.cs-count__num {
	display: block;
	font-family: var(--font-head);
	font-weight: var(--head-weight);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.cs-count__lab { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 700; margin-top: .25rem; }
.cs__date { font-weight: 800; margin: 1rem 0 0; }
.cs.is-done .cs-count, .cs.is-done .cs__date, .cs.is-done .cs__logo { display: none; }

/* Kontakty dole */
.cs__contacts {
	position: relative;
	z-index: 1;
	background: var(--teal);
	border-top: var(--line);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .5rem 2rem;
	padding: 1rem;
	font-weight: 700;
}
.cs__contacts a { color: var(--ink); }
.cs__contacts .banger-social { margin: 0; }
.cs__contacts .banger-social a { border-color: var(--ink); color: var(--ink); }

@media (max-width: 860px) {
	.cs::before { display: none; }
	.cs__wrap { grid-template-columns: 1fr; text-align: center; }
	.cs__text { order: -1; }
	.cs__logo, .cs__lead, .cs-count { margin-left: auto; margin-right: auto; }
	.cs__visual { max-width: 420px; }
}
@media (max-width: 420px) {
	.cs-count { gap: .4rem; }
	.cs-count__box { padding: .55rem .2rem .5rem; border-radius: 16px; }
	.cs-count__lab { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
	.cs-spark__inner { animation: none; }
}