/* ================================================================
   Usage Timeline – shared by flyer.css and product.css
   ================================================================ */

/* ── Mobile: simple text row, no dots/lines ──────────────────── */

.usageline_container {
	margin: 0 20px;
}
.uline-track {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.uline-seg { display: none; }
.usageline_item {
	font-family: 'Roboto',sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1em;
	opacity: 0.5;
	color: #fff;
	text-decoration: none;
}
.usageline_item::before,
.usageline_item::after { display: none; }
.uline-label {
	font-size: inherit;
}
.usageline_item-check {
	opacity: 1;
	color: var(--color-white);
}
.usageline_item-check:hover {
	color: var(--color-grade-yellow);
}
.usageline_item-selected, .usageline_item-selected:hover {
	color: var(--color-grade-yellow);
	opacity: 1;
}

/* ── Tablet ──────────────────────────────────────────────────── */
@media only screen and (min-width: 768px) {
	.usageline_container {
		margin: 0 35px;
	}
}

/* ── Desktop: segmented dot + line layout ────────────────────── */
@media only screen and (min-width: 1040px) {
	.details-usageline {
		height: 70px;
	}
	.usageline_container {
		position: relative;
		height: 100%;
		margin: 0 40px;
	}
	.uline-track {
		display: flex;
		align-items: flex-start;
		flex-wrap: nowrap;
		gap: 0;
		padding-bottom: 24px;
	}
	/* Line segments */
	.uline-seg {
		display: block;
		flex: 1;
		height: 4px;
		margin-top: 12px;
		background-color: rgba(255,255,255,0.3);
	}
	.uline-seg-outer {
		flex: 0.5;
	}
	.uline-seg-outer:first-child {
		background: linear-gradient(to right, transparent, rgba(255,255,255,0.3));
	}
	.uline-seg-outer:last-child {
		background: linear-gradient(to right, rgba(255,255,255,0.3), transparent);
	}
	.usageline_item-check + .uline-seg:has(+ .usageline_item-check) {
		background-color: rgba(255,255,255,0.7);
	}
	/* Node (circle + label) */
	.uline-node {
		position: relative;
		flex-shrink: 0;
		width: 22px;
		height: 22px;
		text-decoration: none;
		cursor: default;
		overflow: visible;
	}
	/* Outer ring */
	.uline-node::before {
		content: '';
		display: block;
		position: absolute;
		top: 3px;
		left: 0;
		width: 22px;
		height: 22px;
		border: 3px solid rgba(255,255,255,1.0);
		border-radius: 50%;
		background-color: transparent;
		transition: border-color 0.3s ease;
	}
	/* Inner dot */
	.uline-node::after {
		content: '';
		display: block;
		position: absolute;
		top: 10px;
		left: 7px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: rgba(255,255,255,0.0);
		transition: transform 0.3s ease, background-color 0.3s ease;
	}
	/* Text label below circle */
	.uline-label {
		position: absolute;
		top: 28px;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		font-family: 'Roboto', sans-serif;
		font-size: 14px;
		font-weight: bold;
		text-transform: uppercase;
		color: inherit;
	}
	/* Active (check) states */
	.uline-node.usageline_item-check::before {
		border-color: rgba(255,255,255,0.85);
	}
	.uline-node.usageline_item-check::after {
		background-color: #fff;
	}
	.uline-node.usageline_item-check:hover::after {
		transform: scale(1.5);
	}

	.uline-node.usageline_item-selected::after {
		transform: scale(1.5);
		background-color: var(--color-grade-yellow);
	}
	/* Highlight state (link button hover) */

	.uline-node.usageline_item-highlight::after {
		background-color: var(--color-grade-yellow);
	}
	/* Onload flash: staggered in, hold, then uniform fade out */
	@keyframes uline-dot-flash-in {
		0%   { background-color: #fff; }
		100% { background-color: var(--color-grade-yellow); }
	}
	@keyframes uline-dot-flash-out {
		0%   { background-color: var(--color-grade-yellow); }
		100% { background-color: #fff; }
	}
	/* Phase 1: staggered flash in (inner dot only) */
	.uline-node.usageline_item-check.uline-intro::after {
		animation: uline-dot-flash-in 0.3s ease forwards;
	}
	.uline-node.uline-intro:nth-child(2)  { --uline-delay: 0s; }
	.uline-node.uline-intro:nth-child(4)  { --uline-delay: 0.25s; }
	.uline-node.uline-intro:nth-child(6)  { --uline-delay: 0.5s; }
	.uline-node.uline-intro:nth-child(8)  { --uline-delay: 0.75s; }
	.uline-node.uline-intro:nth-child(10) { --uline-delay: 1.0s; }
	.uline-node.uline-intro::after {
		animation-delay: var(--uline-delay, 0s) !important;
	}
	/* Phase 2: uniform fade out (inner dot only, all together) */
	.uline-node.usageline_item-check.uline-outro::after {
		animation: uline-dot-flash-out 0.5s ease forwards;
	}
}