/**
 * Component — Countdown
 *
 * Expected HTML:
 *   <div class="ec-countdown" data-ec-component="countdown"
 *        data-closes-at="2026-08-20T18:00:00Z" data-material="water">
 *     <span class="ec-countdown__segment" data-ec-countdown-segment="days">
 *       <span class="ec-countdown__value">00</span>
 *       <span class="ec-countdown__label">Days</span>
 *     </span>
 *     <span class="ec-countdown__segment" data-ec-countdown-segment="hours">
 *       <span class="ec-countdown__value">00</span>
 *       <span class="ec-countdown__label">Hours</span>
 *     </span>
 *     <span class="ec-countdown__segment" data-ec-countdown-segment="minutes">
 *       <span class="ec-countdown__value">00</span>
 *       <span class="ec-countdown__label">Minutes</span>
 *     </span>
 *     <span class="ec-countdown__segment" data-ec-countdown-segment="seconds">
 *       <span class="ec-countdown__value">00</span>
 *       <span class="ec-countdown__label">Seconds</span>
 *     </span>
 *   </div>
 *
 * Two moods (EC-DESIGN-SYSTEM.md): data-material="water" for an
 * ordinary closing timer, data-material="fire" for draw-reveal
 * anticipation. Never fetches anything itself — see countdown.js.
 * The glow on completion matches EC-DESIGN.md's own Fire example
 * ("countdown completion").
 *
 * Tiles are frosted glass, not a flat tinted fill (second material
 * enrichment pass, post-Competition-Page review) — --ec-glass-surface/
 * -blur/-border resolve per the active material (glass.css), so this
 * file never references Water or Fire directly, the same discipline
 * as everywhere else in this system.
 *
 * Fourth pass: backdrop-filter only reads as "frosted glass" when
 * there's something visually busy behind it to blur — against this
 * component's actual, mostly-flat backdrops it was rendering as
 * essentially nothing, which is why these tiles read as "pale blue
 * boxes" rather than glass. Kept as a harmless bonus, but the
 * crystalline read now comes primarily from a diagonal facet gradient
 * baked into the tile itself (a corner "shine", the classic cut-glass
 * cue).
 *
 * Fifth pass: the fourth pass also put the material glow on at rest,
 * which is exactly what read as "glowing blue" — a coloured halo is a
 * light-source cue, not a glass cue. Dropped back to elevation only;
 * the crystal read now comes entirely from translucency (glass.css)
 * and the facet shine below, dialled down to match, not from glow.
 *
 * Sixth pass: the facet shine below is a Water cue specifically — a
 * crisp, hard-edged streak is "light catching a cut glass edge," which
 * is exactly wrong for Fire ("energy beneath a translucent surface,"
 * not a reflective one). Fire's tiles now override ::before with a
 * genuinely blurred (filter, not gradient) warm core instead of the
 * shine, the same crisp-vs-blurred distinction used in button.css and
 * for the same reason: it survives colour and motion being removed,
 * where a recoloured copy of the same shine wouldn't.
 */

.ec-countdown {
	display: inline-flex;
	gap: var(--ec-space-4);
	font-family: var(--ec-font-family-base);
}

.ec-countdown__segment {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ec-space-1);
	min-width: 2.5rem;
	padding: var(--ec-space-2) var(--ec-space-3);
	border-radius: var(--ec-radius-md);
	background-color: var(--ec-glass-surface);
	background-image: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.35) 0%,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0) 70%,
		rgba(255, 255, 255, 0.15) 100%
	);
	backdrop-filter: blur(var(--ec-glass-blur));
	-webkit-backdrop-filter: blur(var(--ec-glass-blur));
	border: 1px solid var(--ec-glass-border);
	box-shadow: var(--ec-material-elevation);
	overflow: hidden;
	transition:
		background-color var(--ec-material-duration) var(--ec-material-ease),
		box-shadow var(--ec-material-duration) var(--ec-material-ease);
}

.ec-countdown__segment::before {
	content: '';
	position: absolute;
	top: -60%;
	left: -30%;
	width: 55%;
	height: 220%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: rotate(20deg);
	pointer-events: none;
}

.ec-countdown[data-material='fire'] .ec-countdown__segment::before {
	top: 15%;
	left: 10%;
	width: 80%;
	height: 70%;
	background: radial-gradient(circle, rgba(255, 226, 190, 0.85), transparent 65%);
	transform: none;
	filter: blur(6px);
}

.ec-countdown__value {
	font-weight: var(--ec-font-weight-bold);
	font-size: var(--ec-font-size-h3);
	color: var(--ec-material-color);
	font-variant-numeric: tabular-nums;
}

.ec-countdown__label {
	font-size: var(--ec-font-size-caption);
	color: var(--ec-color-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.ec-countdown--complete .ec-countdown__segment {
	filter: brightness(1.12);
}

.ec-countdown--complete .ec-countdown__value {
	color: var(--ec-color-text-secondary);
}

/* Variant: deep-teal glass (2026-10-02) — the customer site's countdown
   skin, first designed on the Competition Card and shared with the
   Competition Page: a teal-tinted gradient body, a hairline teal edge, a
   lit top rim and a soft glow pooling from below; numbers brightest,
   labels muted. Skin only — each surface sizes the tiles itself. */
.ec-countdown--teal .ec-countdown__segment {
	border-color: rgba(44, 213, 227, 0.22);
	background-color: rgba(9, 30, 42, 0.9);
	background-image:
		radial-gradient(ellipse 90% 70% at 50% 120%, rgba(44, 213, 227, 0.22), rgba(44, 213, 227, 0) 70%),
		linear-gradient(180deg, rgba(20, 70, 84, 0.55) 0%, rgba(8, 22, 34, 0.2) 100%);
	box-shadow:
		inset 0 1px 0 rgba(166, 242, 248, 0.16),
		inset 0 -1px 0 rgba(0, 0, 0, 0.3),
		0 0 10px rgba(44, 213, 227, 0.06);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.ec-countdown--teal .ec-countdown__segment::before {
	display: none;
}

.ec-countdown--teal .ec-countdown__value {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: #f3fdff;
	text-shadow: 0 0 10px rgba(103, 230, 240, 0.35);
}

.ec-countdown--teal .ec-countdown__label {
	font-weight: var(--ec-font-weight-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(122, 200, 212, 0.75);
}