/**
 * Camposol Hub Launch Countdown — Solari / split-flap board styling.
 *
 * Brand palette taken from the Camposol hub logo: deep navy ("hub"), warm
 * sunrise orange (the Subscribe button / sun) and forest green ("Campo").
 * Designed to sit on a white page between the logo and the signup form.
 */

.camposol-hub-lc {
	--lc-navy: #163e63;
	--lc-navy-top: #1d4d78;
	--lc-navy-bottom: #0f2d49;
	--lc-orange: #f0a73f;
	--lc-green: #2c7a44;
	--lc-digit: #fbf7ee;
	--lc-muted: #7c8a99;
	--lc-shadow: rgba(15, 45, 73, 0.22);
	--lc-flip-speed: 320ms;
	--lc-flap-h: clamp(3.2rem, 10vw, 5.6rem);

	position: relative;
	box-sizing: border-box;
	padding: clamp(1rem, 3vw, 2rem) 1rem clamp(1rem, 2.5vw, 1.75rem);
	text-align: center;
	color: var(--lc-navy);
	background: #f4f5f6;
	border-radius: 16px;
	font-family: "Helvetica Neue", Arial, sans-serif;
}

.camposol-hub-lc *,
.camposol-hub-lc *::before,
.camposol-hub-lc *::after {
	box-sizing: border-box;
}

/* Soft sunrise glow behind the board — a nod to the logo's sun. */
.camposol-hub-lc__glow {
	position: absolute;
	left: 50%;
	top: 38%;
	width: min(620px, 90%);
	height: 60%;
	transform: translate(-50%, -50%);
	background: radial-gradient(closest-side, rgba(240, 167, 63, 0.22), transparent 72%);
	filter: blur(18px);
	opacity: 0.8;
	animation: camposol-hub-lc-pulse 5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes camposol-hub-lc-pulse {
	0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
	50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.06); }
}

.camposol-hub-lc__eyebrow {
	position: relative;
	margin: 0 0 0.4rem;
	font-size: clamp(0.62rem, 1.4vw, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--lc-orange);
}

.camposol-hub-lc__title {
	position: relative;
	margin: 0 0 1.5rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

/* "CamposolHub.com" — the dominant first line. */
.camposol-hub-lc__brand {
	display: block;
	font-size: clamp(1.5rem, 4.8vw, 2.7rem);
	font-weight: 800;
	color: var(--lc-green);
	white-space: nowrap;
}

/* "launches in" — quieter second line. */
.camposol-hub-lc__sub {
	display: block;
	margin-top: 0.15rem;
	font-size: clamp(0.85rem, 2.2vw, 1.15rem);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lc-navy);
}

/* Small orange rule under the title to echo the logo's underline. */
.camposol-hub-lc__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 0.7rem auto 0;
	border-radius: 2px;
	background: var(--lc-orange);
}

.camposol-hub-lc__board {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(0.5rem, 2.5vw, 1.5rem);
}

.camposol-hub-lc__group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
}

.camposol-hub-lc__digits {
	display: flex;
	gap: 0.3rem;
}

.camposol-hub-lc__label {
	font-size: clamp(0.55rem, 1.3vw, 0.78rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lc-muted);
}

/* ---- A single split-flap card ---- */
.camposol-hub-lc__flap {
	position: relative;
	width: clamp(2.3rem, 7.5vw, 4.1rem);
	height: var(--lc-flap-h);
	perspective: 320px;
	border-radius: 9px;
	box-shadow: 0 8px 18px var(--lc-shadow);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: clamp(2rem, 6.5vw, 3.8rem);
	line-height: 1;
}

/* Static halves that show the "settled" digit. */
.camposol-hub-lc__card,
.camposol-hub-lc__leaf {
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	overflow: hidden;
	background: linear-gradient(180deg, var(--lc-navy-top), var(--lc-navy));
	color: var(--lc-digit);
	display: flex;
	justify-content: center;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.camposol-hub-lc__card--top,
.camposol-hub-lc__leaf--front {
	top: 0;
	align-items: flex-start;
	border-radius: 9px 9px 0 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
}

.camposol-hub-lc__card--bottom,
.camposol-hub-lc__leaf--back {
	bottom: 0;
	align-items: flex-start;
	border-radius: 0 0 9px 9px;
	background: linear-gradient(180deg, var(--lc-navy), var(--lc-navy-bottom));
}

/*
 * The glyph box is a full flap tall so the character is centred on the divider
 * line; each half then clips to show the top or bottom of that one character.
 */
.camposol-hub-lc__char {
	display: block;
	height: var(--lc-flap-h);
	line-height: var(--lc-flap-h);
}

.camposol-hub-lc__card--top .camposol-hub-lc__char,
.camposol-hub-lc__leaf--front .camposol-hub-lc__char {
	transform: translateY(0);
}

.camposol-hub-lc__card--bottom .camposol-hub-lc__char,
.camposol-hub-lc__leaf--back .camposol-hub-lc__char {
	transform: translateY(-50%);
}

/* The animating leaves sit above the static cards. */
.camposol-hub-lc__leaf {
	z-index: 2;
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

.camposol-hub-lc__leaf--front {
	transform-origin: bottom;
	transform: rotateX(0deg);
}

.camposol-hub-lc__leaf--back {
	transform-origin: top;
	transform: rotateX(90deg);
}

/* During a flip we add .is-flipping; JS sets the chars on each surface. */
.camposol-hub-lc__flap.is-flipping .camposol-hub-lc__leaf--front {
	animation: camposol-hub-lc-fold-down var(--lc-flip-speed) ease-in forwards;
}

.camposol-hub-lc__flap.is-flipping .camposol-hub-lc__leaf--back {
	animation: camposol-hub-lc-fold-up var(--lc-flip-speed) ease-out forwards;
	animation-delay: var(--lc-flip-speed);
}

@keyframes camposol-hub-lc-fold-down {
	0%   { transform: rotateX(0deg); }
	100% { transform: rotateX(-90deg); }
}

@keyframes camposol-hub-lc-fold-up {
	0%   { transform: rotateX(90deg); }
	100% { transform: rotateX(0deg); }
}

/* Subtle settle bounce on the whole card when a flip lands. */
.camposol-hub-lc__flap.just-flipped {
	animation: camposol-hub-lc-settle 220ms ease-out;
}

@keyframes camposol-hub-lc-settle {
	0%   { transform: translateY(-2px) scale(1.012); }
	100% { transform: translateY(0) scale(1); }
}

.camposol-hub-lc__footnote {
	position: relative;
	margin: 1.4rem 0 0;
	font-size: clamp(0.7rem, 1.5vw, 0.85rem);
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--lc-muted);
}

/* ---- Launched state ---- */
.camposol-hub-lc.is-done .camposol-hub-lc__board,
.camposol-hub-lc.is-done .camposol-hub-lc__footnote {
	display: none;
}

.camposol-hub-lc__done {
	position: relative;
	margin: 0.5rem 0 0;
	font-size: clamp(1.8rem, 6vw, 3.4rem);
	font-weight: 800;
	color: var(--lc-orange);
	animation: camposol-hub-lc-celebrate 1.2s ease-in-out infinite alternate;
}

@keyframes camposol-hub-lc-celebrate {
	from { transform: scale(1);    }
	to   { transform: scale(1.05); }
}

/* Respect reduced-motion: keep digits readable, drop the theatrics. */
@media (prefers-reduced-motion: reduce) {
	.camposol-hub-lc__glow,
	.camposol-hub-lc__done {
		animation: none;
	}
	.camposol-hub-lc__flap.is-flipping .camposol-hub-lc__leaf--front,
	.camposol-hub-lc__flap.is-flipping .camposol-hub-lc__leaf--back,
	.camposol-hub-lc__flap.just-flipped {
		animation-duration: 1ms;
	}
}