/**
 * Viora Countdown widget.
 *
 * A launch dateline, not four boxes. The digits sit in windows over a 0-9
 * strip so a change rolls; the units are divided by hairlines; and a rule
 * underneath shows real progress between the day work started and the day it
 * opens, with the percentage riding the marker.
 */

.viora-countdown {
	--viora-countdown-digit: clamp(3.25rem, 10vw, 9rem);
	--viora-countdown-title: clamp(2.5rem, 7.6vw, 6.5rem);
	--viora-countdown-accent: var(--viora-color-accent);

	position: relative;
	padding-block: clamp(4rem, 8.33vw, 7.5rem);
	overflow: hidden;
}

/*
 * Opening a page: hold the first screen, less the header sitting above it, so
 * the clock and the headline are never split by the fold. `dvh` so a mobile
 * browser's collapsing toolbar does not crop the bottom. The script measures
 * the real header and writes --viora-header-height; the fallback here only
 * covers the moment before it runs.
 */
.viora-countdown--tall {
	/* Opening a page, the type is set a step smaller and the padding pulled in,
	   so masthead, clock and rule land inside one laptop screen rather than
	   spilling a fragment of themselves below the fold. */
	--viora-countdown-title: clamp(2.25rem, 5.4vw, 4.5rem);
	--viora-countdown-digit: clamp(2.75rem, 7.2vw, 6.5rem);

	display: flex;
	align-items: center;
	min-height: calc(100dvh - var(--viora-header-height, 5.5rem));
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.viora-countdown--tall .viora-countdown__lead + .viora-countdown__clock,
.viora-countdown--tall .viora-countdown__title + .viora-countdown__clock {
	margin-top: clamp(2rem, 3.5vw, 3rem);
}

.viora-countdown__inner {
	width: min(1082px, 100% - 2 * var(--viora-layout-container-pad));
	margin-inline: auto;
}

/* The inner keeps its measure as a flex item; the auto margins centre it. */
.viora-countdown--tall .viora-countdown__inner {
	flex: 0 1 auto;
}

/* -------------------------------------------------- *
 * Masthead
 * -------------------------------------------------- */

.viora-countdown__title {
	max-width: 18ch;
	margin: clamp(1rem, 2vw, 1.75rem) 0 0;
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: var(--viora-countdown-title);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -0.04em;
}

.viora-countdown--center .viora-countdown__title {
	max-width: none;
}

.viora-countdown__title em {
	font-style: italic;
	color: var(--viora-countdown-accent);
}

.viora-countdown__lead {
	max-width: 46ch;
	margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: clamp(0.9375rem, 1.11vw, 1rem);
	line-height: 1.7;
}

.viora-countdown--center .viora-countdown__lead {
	margin-inline: auto;
}

.viora-countdown--center .viora-countdown__inner {
	text-align: center;
}

.viora-countdown__label {
	display: block;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
}

/* -------------------------------------------------- *
 * Clock
 * -------------------------------------------------- */

.viora-countdown__clock {
	display: flex;
	align-items: flex-start;
	margin-top: clamp(1.25rem, 2.4vw, 2rem);
}

/* Under a masthead the clock needs air, or it reads as part of the sentence. */
.viora-countdown__title + .viora-countdown__clock,
.viora-countdown__lead + .viora-countdown__clock {
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.viora-countdown--center .viora-countdown__clock {
	justify-content: center;
}

.viora-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-inline: clamp(1rem, 3vw, 2.75rem);
	/* A hairline between units instead of a colon: the clock reads as a
	   printed table rather than as a digital display. */
	border-left: 1px solid var(--viora-hairline, rgba(17, 17, 17, 0.14));
}

.viora-countdown__unit:first-child {
	padding-left: 0;
	border-left: 0;
}

.viora-countdown__unit:last-child {
	padding-right: 0;
}

.viora-countdown--center .viora-countdown__unit {
	align-items: center;
}

/* -------------------------------------------------- *
 * Odometer digits
 * -------------------------------------------------- */

.viora-countdown__digits {
	display: flex;
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: var(--viora-countdown-digit);
	font-weight: 400;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/*
 * The window: one digit tall, and fixed at roughly the average numeral advance
 * of the display face (Butler runs 0.385em for "1" up to 0.609em for "0").
 * The width must not depend on the strip's contents — shrink-wrapping opens
 * every window to the widest numeral and a "1" then floats in a puddle — and
 * it must not depend on the digit currently showing either, or the clock
 * reflows on every tick.
 *
 * clip-path rather than overflow, so the strip is cut vertically while the
 * roundest numerals may still bleed a hair past the box, exactly as
 * proportional figures do when they are simply set as text.
 */
.viora-countdown__digit {
	display: block;
	width: 0.52em;
	height: 1em;
	clip-path: inset(0 -0.5em);
}

.viora-countdown__strip {
	display: block;
	/* --viora-countdown-n is the digit currently showing; each step is one
	   line-height, so the strip lands squarely on the next numeral. */
	transform: translateY(calc(var(--viora-countdown-n, 0) * -1em));
	transition: transform 0.55s var(--viora-motion-easing);
}

.viora-countdown__num {
	display: block;
	height: 1em;
	line-height: 1;
	text-align: center;
}

.viora-countdown__caption {
	margin-top: clamp(0.5rem, 1vw, 0.85rem);
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--viora-weight-medium);
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

/* -------------------------------------------------- *
 * After launch
 * -------------------------------------------------- */

.viora-countdown__done {
	display: none;
	align-items: baseline;
	gap: clamp(1rem, 2.5vw, 2rem);
	flex-wrap: wrap;
	margin-top: clamp(1.25rem, 2.4vw, 2rem);
}

.viora-countdown--center .viora-countdown__done {
	justify-content: center;
}

/* The clock and the open sign are the same slot; only one is ever filled. */
.viora-countdown.is-done .viora-countdown__clock {
	display: none;
}

.viora-countdown.is-done .viora-countdown__done {
	display: flex;
}

.viora-countdown__done-title {
	margin: 0;
	color: var(--viora-ink, var(--viora-color-heading));
	font-family: var(--viora-font-display);
	font-size: clamp(2rem, 5.5vw, 4.5rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.04em;
}

.viora-countdown__done-link {
	font-size: 0.6875rem;
}

/* -------------------------------------------------- *
 * Progress rule
 * -------------------------------------------------- */

.viora-countdown__progress {
	margin-top: clamp(2.5rem, 5vw, 4.25rem);
}

.viora-countdown__rule {
	position: relative;
	height: 1px;
	background-color: var(--viora-hairline, rgba(17, 17, 17, 0.14));
}

.viora-countdown__rule-fill {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transform: scaleX(var(--viora-countdown-progress, 0));
	background-color: var(--viora-countdown-accent);
}

/* The marker rides the fill and carries the percentage above it. */
.viora-countdown__marker {
	position: absolute;
	top: 50%;
	left: calc(var(--viora-countdown-progress, 0) * 100%);
	width: 0.5rem;
	height: 0.5rem;
	margin-left: -0.25rem;
	border-radius: 50%;
	transform: translateY(-50%);
	background-color: var(--viora-countdown-accent);
}

.viora-countdown__marker-value {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 50%;
	transform: translateX(-50%);
	color: var(--viora-countdown-accent);
	font-family: var(--viora-font-ui);
	font-size: 0.6875rem;
	font-weight: var(--viora-weight-medium);
	letter-spacing: 0.16em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.viora-countdown__rule-captions {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.85rem;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.625rem;
	font-weight: var(--viora-weight-medium);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

/* -------------------------------------------------- *
 * Dateline
 * -------------------------------------------------- */

.viora-countdown__dateline {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	color: var(--viora-ink-soft, var(--viora-color-heading-soft));
	font-family: var(--viora-font-ui);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.viora-countdown--center .viora-countdown__dateline {
	justify-content: center;
}

.viora-countdown__dateline-rule {
	display: block;
	width: clamp(2rem, 5vw, 4rem);
	height: 1px;
	background-color: var(--viora-countdown-accent);
}

/* -------------------------------------------------- *
 * Reveal
 * -------------------------------------------------- */

.viora-countdown.is-animated .viora-countdown__item {
	opacity: 0;
	transform: translateY(22px);
}

.viora-countdown.is-animated.is-in .viora-countdown__item {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.9s var(--viora-motion-easing),
		transform 0.9s var(--viora-motion-easing);
	transition-delay: var(--viora-countdown-delay, 0ms);
}

/* -------------------------------------------------- *
 * Responsive
 * -------------------------------------------------- */

@media (max-width: 767px) {
	.viora-countdown {
		--viora-countdown-digit: clamp(2.25rem, 13vw, 4rem);
	}

	.viora-countdown__clock {
		flex-wrap: wrap;
		gap: clamp(1.25rem, 4vw, 2rem) 0;
	}

	/* Two units per line, each keeping its dividing hairline except at the
	   start of a row. */
	.viora-countdown__unit {
		flex: 0 0 50%;
		padding-inline: clamp(0.75rem, 4vw, 1.5rem);
	}

	.viora-countdown__unit:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}

	.viora-countdown__caption {
		letter-spacing: 0.2em;
	}

	.viora-countdown__rule-captions {
		font-size: 0.5625rem;
		letter-spacing: 0.18em;
	}
}

/*
 * Short viewports — a 768px-tall laptop, a small phone in portrait. The opener
 * has a fixed amount to say, so on a screen this shallow the type steps down
 * again rather than pushing the dateline under the fold. Must come after the
 * width queries above, which also set the digit size.
 */
@media (max-height: 820px) {
	.viora-countdown--tall {
		--viora-countdown-title: clamp(1.75rem, 4.2vw, 3.5rem);
		--viora-countdown-digit: clamp(2.25rem, 5.6vw, 5rem);

		padding-block: clamp(1.75rem, 3vw, 2.5rem);
	}

	.viora-countdown--tall .viora-countdown__lead {
		font-size: 0.875rem;
	}

	.viora-countdown--tall .viora-countdown__lead + .viora-countdown__clock,
	.viora-countdown--tall .viora-countdown__title + .viora-countdown__clock {
		margin-top: clamp(1.5rem, 2.5vw, 2rem);
	}

	.viora-countdown--tall .viora-countdown__progress {
		margin-top: clamp(1.75rem, 3vw, 2.5rem);
	}

	.viora-countdown--tall .viora-countdown__dateline {
		margin-top: clamp(1.5rem, 2.5vw, 2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.viora-countdown.is-animated .viora-countdown__item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.viora-countdown__strip {
		transition: none;
	}
}