/* Timeline Miraki - Frontend styles. --primary and --primary-dark set inline by plugin. */
.timeline-miraki {
	--bg: #f4f7f9;
	--text: #3a4350;
	--muted: #7f8a97;
	--line-width: 5px;
	--node-size: 60px;
	--row-height: 160px;
	--flow-duration: 14s;
}

.timeline-shell {
	width: min(100%, 1280px);
	margin: 0 auto;
}

.timeline-board {
	position: relative;
	width: 100%;
	min-height: 720px;
	border-radius: 32px;
	overflow: hidden;
}

.timeline-path {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.timeline-path path {
	fill: none;
	stroke-width: var(--line-width);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.timeline-path .path-base {
	stroke: var(--primary);
	stroke-opacity: 0.22;
}

.timeline-path .path-progress {
	stroke: var(--primary);
	filter: drop-shadow(0 0 10px rgba(0, 54, 144, 0.28));
	stroke-dasharray: var(--path-length, 0);
	stroke-dashoffset: var(--path-length, 0);
	/* Flow animation is driven by JS for sync with node highlight */
}

.timeline-miraki.no-animation .path-progress {
	stroke-dashoffset: 0;
}

.timeline-rows {
	position: absolute;
	inset: 0;
	padding: 40px 72px;
	display: grid;
	grid-template-rows: repeat(4, 1fr);
	z-index: 2;
}

.timeline-ending-note {
	position: absolute;
	max-width: 360px;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	color: var(--primary);
	opacity: 0;
	transition: opacity 0.6s ease;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere;
	pointer-events: none;
	z-index: 3;
}

.timeline-ending-note.is-visible {
	opacity: 1;
}

.timeline-ending-note.is-typing::after {
	content: "|";
	margin-left: 2px;
	animation: timeline-caret 0.85s step-end infinite;
}

.timeline-spacer {
	min-height: var(--row-height);
}

.timeline-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: center;
}

.timeline-point {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: var(--row-height);
	transform: translateX(var(--shift, 0px));
}

.timeline-copy {
	position: absolute;
	left: 50%;
	width: min(165px, 92%);
	text-align: center;
	transform: translateX(-50%);
	padding: 0 6px;
}

.timeline-point.above .timeline-copy {
	bottom: calc(50% + 30px);
}

.timeline-point.below .timeline-copy {
	top: calc(50% + 30px);
}

.timeline-copy h3 {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--text);
}

.timeline-node {
	width: var(--node-size);
	height: var(--node-size);
	position: relative;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: #fff;
	display: grid;
	place-items: center;
	text-align: center;
	font-weight: 700;
	font-size: 0.76rem;
	line-height: 1;
	letter-spacing: 0;
	box-shadow: 0 14px 26px color-mix(in srgb, var(--primary) 25%, transparent);
	flex: 0 0 auto;
	z-index: 1;
	border: 5px solid var(--bg);
	white-space: nowrap;
	transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.timeline-node::before,
.mobile-year::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.timeline-node::after,
.mobile-year::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 2px solid rgba(0, 54, 144, 0.18);
	opacity: 0;
	transform: scale(0.92);
	pointer-events: none;
}

.timeline-point:hover .timeline-node {
	transform: translateY(-4px) scale(1.08);
	filter: brightness(1.08);
	box-shadow: 0 20px 34px color-mix(in srgb, var(--primary) 34%, transparent), 0 0 0 10px color-mix(in srgb, var(--primary) 8%, transparent);
}

.timeline-point:hover .timeline-node::after,
.mobile-item:hover .mobile-year::after {
	opacity: 1;
	animation: timeline-hover-ring 1.2s ease-in-out infinite;
}

.timeline-point:hover .timeline-copy h3,
.mobile-item:hover .mobile-card h3 {
	color: var(--primary);
}

.timeline-point.is-active .timeline-node {
	animation: timeline-pass-node 0.9s ease-out;
	box-shadow: 0 22px 38px rgba(0, 54, 144, 0.36), 0 0 0 12px rgba(0, 54, 144, 0.1);
}

.timeline-point.is-active .timeline-node::after,
.mobile-item.is-active .mobile-year::after {
	opacity: 1;
	animation: timeline-pass-ring 0.9s ease-out;
}

.timeline-point.is-active .timeline-copy h3,
.mobile-item.is-active .mobile-card h3 {
	color: var(--primary);
}

.timeline-mobile {
	display: none;
}

@media (max-width: 991px) {
	.timeline-board {
		display: none;
	}

	.timeline-ending-note {
		display: none;
	}

	.timeline-mobile {
		display: block;
		position: relative;
		padding-left: 72px;
	}

	.timeline-mobile::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc((var(--node-size) / 2) - (var(--line-width) / 2));
		width: var(--line-width);
		border-radius: 999px;
		background: var(--primary);
	}

	.mobile-item {
		position: relative;
		margin-bottom: 22px;
		min-height: 58px;
	}

	.mobile-item:last-child {
		margin-bottom: 0;
	}

	.mobile-year {
		position: absolute;
		left: -72px;
		top: 50%;
		transform: translateY(-50%);
		width: var(--node-size);
		height: var(--node-size);
		border-radius: 50%;
		background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
		color: #fff;
		display: grid;
		place-items: center;
		font-weight: 700;
		font-size: 0.76rem;
		line-height: 1;
		letter-spacing: 0;
		box-shadow: 0 14px 26px rgba(0, 54, 144, 0.25);
		border: 5px solid var(--bg);
		z-index: 1;
		white-space: nowrap;
		transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
	}

	.mobile-item:hover .mobile-year {
		transform: translateY(-50%) scale(1.08);
		filter: brightness(1.08);
		box-shadow: 0 20px 34px rgba(0, 54, 144, 0.34), 0 0 0 10px rgba(0, 54, 144, 0.08);
	}

	.mobile-card {
		padding: 0 0 0 20px;
	}

	.mobile-card h3 {
		margin: 0;
		font-size: 1rem;
		line-height: 1.4;
	}
}

@media (max-width: 575px) {
	.timeline-mobile {
		padding-left: 66px;
	}

	.timeline-mobile::before {
		left: calc((var(--node-size) / 2) - (var(--line-width) / 2));
	}

	.mobile-card {
		padding-left: 16px;
	}
}

@keyframes timeline-flow-path {
	0% {
		stroke-dashoffset: var(--path-length, 0);
	}
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes timeline-hover-ring {
	0%, 100% {
		opacity: 0.35;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.12);
	}
}

@keyframes timeline-pass-node {
	0% {
		transform: scale(1);
		filter: brightness(1);
	}
	35% {
		transform: scale(1.16);
		filter: brightness(1.14);
	}
	100% {
		transform: scale(1);
		filter: brightness(1);
	}
}

@keyframes timeline-pass-ring {
	0% {
		opacity: 0.75;
		transform: scale(0.9);
	}
	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}

@keyframes timeline-caret {
	0%, 49% {
		opacity: 1;
	}
	50%, 100% {
		opacity: 0;
	}
}