/*
 * Countdown to the store opening ([noctshop_countdown], or the countdown="" attribute of
 * [noctshop_showcase], where it takes the title's place). Markup: noctshop_countdown_html().
 * Digits: Pirata One (SIL OFL, ../noctshop-fonts/PirataOne-OFL.txt). Labels: Asal Viral, like the
 * site's other headings.
 */

@font-face {
	font-family: 'Pirata One';
	src: url('../noctshop-fonts/PirataOne-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.nscd {
	--nscd-fg: #fff;
	/* The link-hover red (Blocksy palette colour 5, same as --ns-red in showcase.css). */
	--nscd-red: var(--theme-palette-color-5, #a50000);
	--nscd-size: clamp(3rem, 9vw, 6.5rem); /* digit size */
	margin: 0 0 clamp(1rem, 3vh, 2rem);
	padding-inline: 16px;
	color: var(--nscd-fg);
	text-align: center;
}
/* In the mosaic: same 50px gap under the slider as the title had (the digits' tops sit ~.085 of their size below the line box). */
.nsc--mosaic .nscd {
	margin-top: calc(var(--nscd-size) * -.085);
}

.nscd__heading {
	margin: 0;
	font: inherit;
	color: inherit;
}

.nscd__units {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(.9rem, 4vw, 3.5rem);
}

.nscd__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nscd__num {
	/* Fixed width so the row doesn't shift as the seconds change (the font's digits differ in width). */
	min-width: 1.35em;
	font-family: 'Pirata One', var(--theme-font-family);
	font-size: var(--nscd-size);
	font-weight: 400; /* one weight only; heavier would be faux-bold */
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* White at the top of the digits blending to red at the bottom. drop-shadow (not text-shadow, which
   would show through the see-through text) adds a red glow behind them. */
.nscd__num,
.nscd__label,
.nscd.is-done .nscd__done {
	background: linear-gradient(to bottom, var(--nscd-fg) 12%, var(--nscd-red) 88%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 0 14px color-mix(in srgb, var(--nscd-red) 55%, transparent));
}

.nscd__label {
	margin-top: .6em;
	padding-left: .25em; /* balances the trailing letter-spacing so the word stays centred */
	font-family: 'Asal Viral', var(--theme-font-family); /* loaded by the "Noctshop Custom Fonts" snippet */
	font-size: clamp(.85rem, 1.9vw, 1.35rem);
	font-weight: 400;
	letter-spacing: .25em;
	text-transform: uppercase;
}

/* After the opening time: one line of text instead of the numbers. */
.nscd__done,
.nscd.is-done .nscd__units {
	display: none;
}
.nscd.is-done .nscd__done {
	display: block;
	font-family: 'Pirata One', var(--theme-font-family);
	font-size: clamp(2.25rem, 6vw, 4.5rem);
	font-weight: 400;
	line-height: 1.1;
}