/**
 * FYFX Timeline Widget Styles
 *
 * @package fyfx-elementor-core
 * @since   1.0.0
 */

/* ── Outer container ──────────────────────────────────────────────────────── */

/*
 * Clips overflow, border-radius, and pseudo-element overlays.
 * CSS variables used by both modes:
 *   --fyfx-timeline-bg   : background colour (set by Elementor BG control)
 *   --fyfx-edge-opacity  : 0 = gradients hidden, 1 = visible (slider mode)
 *   --fyfx-edge-top      : top gradient colour
 *   --fyfx-edge-bottom   : bottom gradient colour
 *   --fyfx-scroll-duration: slider animation cycle length
 */
.fyfx-timeline-outer {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	--fyfx-timeline-bg:      #0d1117;
	--fyfx-edge-opacity:     0;
	--fyfx-edge-top:         #0d1117;
	--fyfx-edge-bottom:      #0d1117;
	--fyfx-scroll-duration:  20s;
}

/* ── Scroll mode — bottom fade ────────────────────────────────────────────── */

.fyfx-timeline-outer.fyfx-mode-scroll::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 80px;
	background: linear-gradient( to bottom, transparent, var(--fyfx-timeline-bg) );
	pointer-events: none;
	z-index: 10;
}

/* ── Slider mode — top & bottom gradient edges ────────────────────────────── */

.fyfx-timeline-outer.fyfx-mode-slider::before,
.fyfx-timeline-outer.fyfx-mode-slider::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 100px;
	pointer-events: none;
	z-index: 10;
	opacity: var(--fyfx-edge-opacity, 0);
	transition: opacity 0.3s;
}

.fyfx-timeline-outer.fyfx-mode-slider::before {
	top: 0;
	background: linear-gradient( to bottom, var(--fyfx-edge-top, #0d1117), transparent );
}

.fyfx-timeline-outer.fyfx-mode-slider::after {
	bottom: 0;
	background: linear-gradient( to top, var(--fyfx-edge-bottom, #0d1117), transparent );
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.fyfx-timeline-wrapper {
	background-color: #0d1117;
	padding: 40px 32px;
	/* Updated by node_size Elementor control — drives year/content alignment */
	--fyfx-timeline-node-size: 60px;
}

/* ── Scroll mode wrapper ──────────────────────────────────────────────────── */

.fyfx-mode-scroll .fyfx-timeline-wrapper {
	/* max-height + overflow-y:auto set by Elementor max_height control */
}

/* ── Slider mode wrapper ──────────────────────────────────────────────────── */

.fyfx-mode-slider .fyfx-timeline-wrapper {
	overflow: hidden;
	/* max-height set by Elementor slider_max_height control */
}

/* ── Styled scrollbar (scroll mode only) ─────────────────────────────────── */

.fyfx-mode-scroll .fyfx-timeline-wrapper {
	scrollbar-width: thin;
	scrollbar-color: rgba(59, 130, 246, 0.45) transparent;
}

.fyfx-mode-scroll .fyfx-timeline-wrapper::-webkit-scrollbar {
	width: 4px;
}

.fyfx-mode-scroll .fyfx-timeline-wrapper::-webkit-scrollbar-track {
	background: transparent;
}

.fyfx-mode-scroll .fyfx-timeline-wrapper::-webkit-scrollbar-thumb {
	background: rgba(59, 130, 246, 0.45);
	border-radius: 4px;
}

.fyfx-mode-scroll .fyfx-timeline-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(59, 130, 246, 0.8);
}

/* ── Track (infinite slider) ──────────────────────────────────────────────── */

/*
 * JS clones .fyfx-timeline-track-inner and appends it inside .fyfx-timeline-track,
 * giving 2× content height. Animating translateY(0 → -50%) scrolls exactly
 * one copy, creating a seamless loop.
 */
.fyfx-timeline-track {
	display: block;
}

.fyfx-mode-slider .fyfx-timeline-track {
	animation: fyfx-marquee var(--fyfx-scroll-duration, 20s) linear infinite;
	will-change: transform;
}

/* Pause on hover */
.fyfx-mode-slider .fyfx-timeline-track:hover {
	animation-play-state: paused;
}

/* Scroll down — reverse the animation direction */
.fyfx-mode-slider.fyfx-dir-down .fyfx-timeline-track {
	animation-direction: reverse;
}

@keyframes fyfx-marquee {
	from { transform: translateY(0); }
	/*
	 * --fyfx-marquee-end is set by JS to the exact measured pixel height of
	 * .fyfx-timeline-track-inner, avoiding any sub-pixel rounding that could
	 * cause a visible gap at the loop point. Falls back to -50% if JS is slow.
	 */
	to   { transform: translateY(var(--fyfx-marquee-end, -50%)); }
}

/* ── Item Row ─────────────────────────────────────────────────────────────── */

/*
 * align-items: stretch keeps the connector column as tall as the content
 * so the dashed line fills all the way down through the inter-item gap.
 */
.fyfx-timeline-item {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	position: relative;
}

/*
 * padding-bottom on the year col and content col (not the item itself).
 * With align-items:stretch the connector column stretches to match the tallest
 * sibling, so the dashed line fills continuously through the gap.
 */
.fyfx-timeline-item:not(:last-child) .fyfx-timeline-year-col,
.fyfx-timeline-item:not(:last-child) .fyfx-timeline-content {
	padding-bottom: 48px;
}

/* ── Year Column ──────────────────────────────────────────────────────────── */

.fyfx-timeline-year-col {
	width: 80px;
	flex-shrink: 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding-top: calc(var(--fyfx-timeline-node-size) / 2 - 0.65em);
}

.fyfx-timeline-year {
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.3;
}

/* ── Connector Column ─────────────────────────────────────────────────────── */

.fyfx-timeline-connector {
	width: 80px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ── Node ─────────────────────────────────────────────────────────────────── */

.fyfx-timeline-node {
	width: var(--fyfx-timeline-node-size);
	height: var(--fyfx-timeline-node-size);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	background: linear-gradient(160deg, #5c86f0 0%, #3f68db 40%, #2151f2 80%, #1a42d4 100%);
	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.25),
		0 0 0 3px  rgba(255, 255, 255, 0.12),
		0 0 0 10px rgba(18,  46,  140, 0.50),
		0 0 18px 4px  rgba(76,  117, 225, 0.65),
		0 0 40px 14px rgba(33,  81,  242, 0.22);
}

.fyfx-timeline-node::before {
	content: '';
	position: absolute;
	width: 30%;
	height: 30%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #c5d3f8;
}

/* ── Connector Line ───────────────────────────────────────────────────────── */

.fyfx-timeline-line {
	flex: 1;
	border-left: 2px dashed #2d3748;
}

.fyfx-timeline-item:last-child .fyfx-timeline-line {
	display: none;
}

/* In slider mode clones exist, so never hide the line on the last real item */
.fyfx-mode-slider .fyfx-timeline-item:last-child .fyfx-timeline-line {
	display: block;
}

/* ── Content Column ───────────────────────────────────────────────────────── */

.fyfx-timeline-content {
	flex: 1;
	padding-left: 20px;
	min-width: 0;
	padding-top: calc(var(--fyfx-timeline-node-size) / 2 - 0.65em);
}

/* ── Future Item Dimming ──────────────────────────────────────────────────── */

.fyfx-timeline-item[data-status="future"] {
	opacity: 0.35;
}

/* ── Item Title ───────────────────────────────────────────────────────────── */

.fyfx-timeline-item-title {
	font-weight: 700;
	color: #ffffff;
	margin: 0 0 6px 0;
	line-height: 1.3;
}

/* ── Subtitle ─────────────────────────────────────────────────────────────── */

.fyfx-timeline-item-subtitle {
	color: #9ca3af;
	margin: 0 0 10px 0;
	line-height: 1.5;
}

/* ── Bullet List ──────────────────────────────────────────────────────────── */

.fyfx-timeline-bullets {
	margin: 0;
	padding-inline-start: 16px;
	list-style-type: disc;
}

.fyfx-timeline-bullets li {
	color: #d1d5db;
	line-height: 1.6;
}

.fyfx-timeline-bullets li + li {
	margin-top: 6px;
}

.fyfx-timeline-item[data-status="active"] .fyfx-timeline-bullets li::marker {
	color: #3b82f6;
}

/* ── Drag Scroll (slider mode) ────────────────────────────────────────────── */

/* Grab cursor on the slider wrapper when drag-scroll is enabled */
.fyfx-mode-slider[data-drag-scroll="yes"] .fyfx-timeline-wrapper {
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

/* Grabbing cursor + stop hover-pause while actively dragging */
.fyfx-mode-slider.fyfx-drag-active .fyfx-timeline-wrapper {
	cursor: grabbing;
}

.fyfx-mode-slider.fyfx-drag-active .fyfx-timeline-track {
	animation-play-state: running !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.fyfx-timeline-wrapper {
		padding: 24px 16px;
		--fyfx-timeline-node-size: 48px;
	}

	.fyfx-timeline-year-col {
		width: 48px;
	}

	.fyfx-timeline-connector {
		width: 64px;
	}

	.fyfx-timeline-content {
		padding-left: 12px;
	}
}