/* =========================================
   Triangle Timeline Shortcode
   ========================================= */

.tt-wrap {
	--tt-blue: #FF491A;
	--tt-blue-soft: #4361ff;
	--tt-text: #000000;
	--tt-line: #d8dbe5;

	max-width: 720px;
	margin: 0 auto;
	padding: 24px 16px;
	font-family: inherit;
	box-sizing: border-box;
}

/* ---- Triangle stage ---- */

.tt-triangle-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.92;
    max-width: 400px;
}
.tt-triangle {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.8s ease, transform 0.8s ease;
	pointer-events: none;
}

.tt-triangle.is-active {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.tt-triangle-shape {
	position: relative;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 14%;
}

.tt-triangle-title {
	position: relative;
	color: #fff;
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 600;
	letter-spacing: 0.5px;
	z-index: 2;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}

/* ---- Timeline ---- */

.tt-timeline {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 18px;
	padding: 50px 0 8px;
}

.tt-line {
	position: relative;
	width: 2px;
	margin: 12px auto 0;
	border-radius: 2px;
	min-height: 100%;
}

.tt-line-fill {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: linear-gradient(180deg, rgba(255, 73, 26, 0) 0%, #FF491A 100%);;
	border-radius: 2px;
	transition: height 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.tt-dot {
	position: absolute;
	top: 0;
	left: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tt-blue);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 4px rgba(30, 58, 255, 0.15);
	transition: top 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.tt-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.tt-item {
	opacity: 1;
	transition: color 0.5s ease;
}

.tt-stat {
	font-size: clamp(28px, 4.5vw, 45px);
	font-weight: 400;
	line-height: 1.1;
	color: var(--tt-text);
	margin-bottom: 6px;
	transition: color 0.5s ease;
	font-family: 'Inter';
}

.tt-text {
    font-size: clamp(14px, 2vw, 24px);
    line-height: 1.4;
    color: var(--tt-text);
    max-width: 270px;
    transition: color 0.5s ease;
    font-weight: 300;
    font-family: 'Inter';
}
.tt-item.is-active .tt-stat,
.tt-item.is-active .tt-text {
	color: var(--tt-blue);
}

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

@media (max-width: 540px) {
	.tt-wrap {
		padding: 16px 12px;
	}

	.tt-timeline {
		grid-template-columns: 22px 1fr;
		gap: 14px;
	}

	.tt-items {
		gap: 22px;
	}
}