/* ==========================================================================
   Fancy Divider (.sentio-fd)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.
   ========================================================================== */

/* ─── Base ─── */
.sentio-fd {
	display: inline-flex;
	align-items: center;
	width: 100%;
	vertical-align: top;
}

/* ─── Side (line container) ─── */
.sentio-fd__side {
	display: flex;
	align-items: center;
	flex: 1 1 0%;
	min-width: 0;
}

/* ─── Line Segment ─── */
.sentio-fd__seg {
	display: block;
	flex: 1 1 0%;
	min-width: 0;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #ccc;
	color: #ccc;
	transition-property: border-color, border-top-width, color, filter;
	transition-timing-function: ease;
}

/* SVG line segments override border */
.sentio-fd__seg--svg {
	border: 0 !important;
	line-height: 0;
	overflow: hidden;
}

.sentio-fd__seg--svg svg {
	display: block;
	width: 100%;
	height: 10px;
	color: inherit;
	transition-property: color, height, filter;
	transition-timing-function: ease;
}

/* ─── Gradient Line (Diff #3) ─── */
.sentio-fd--gradient .sentio-fd__seg:not(.sentio-fd__seg--svg) {
	border-color: transparent !important;
	background: linear-gradient(to right, var(--sentio-fd-c1, #ccc), var(--sentio-fd-c2, #999));
	background-size: 100% 2px;
	background-repeat: no-repeat;
	background-position: center;
}

.sentio-fd--gradient .sentio-fd__seg--svg svg {
	color: var(--sentio-fd-c1, #ccc);
}

/* ─── Endpoints (Diff #6) ─── */
.sentio-fd__cap {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.sentio-fd__cap svg {
	display: block;
	width: 8px;
	height: 8px;
	fill: currentColor;
	transition-property: fill;
	transition-timing-function: ease;
}

.sentio-fd__cap--start {
	margin-inline-end: 4px;
}

.sentio-fd__cap--end {
	margin-inline-start: 4px;
}

/* ─── Center Element (Diff #2) ─── */
.sentio-fd__el {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
	transition-property: color, background-color, border-color;
	transition-timing-function: ease;
}

.sentio-fd__el-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sentio-fd__el img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ─── Element Animations (Diff #7) ─── */
@keyframes sentio-fd-spin {
	to { transform: rotate(360deg); }
}
@keyframes sentio-fd-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.25); }
}
@keyframes sentio-fd-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@keyframes sentio-fd-float {
	0% { transform: translateY(0); }
	25% { transform: translateY(-4px); }
	75% { transform: translateY(4px); }
	100% { transform: translateY(0); }
}

.sentio-fd__el--spin {
	animation: sentio-fd-spin 2s linear infinite;
}
.sentio-fd__el--pulse {
	animation: sentio-fd-pulse 2s ease-in-out infinite;
}
.sentio-fd__el--bounce {
	animation: sentio-fd-bounce 2s ease-in-out infinite;
}
.sentio-fd__el--float {
	animation: sentio-fd-float 3s ease-in-out infinite;
}

/* ─── Scroll Entrance Animations (Diff #4) ─── */

/* Draw from left */
.sentio-fd--anim-draw-left .sentio-fd__side {
	clip-path: inset(0 100% 0 0);
	transition: clip-path var(--sentio-fd-anim-dur, 800ms) ease var(--sentio-fd-anim-delay, 0ms);
}
.sentio-fd--anim-draw-left.sentio-fd--visible .sentio-fd__side {
	clip-path: inset(0 0 0 0);
}

/* Draw from right */
.sentio-fd--anim-draw-right .sentio-fd__side {
	clip-path: inset(0 0 0 100%);
	transition: clip-path var(--sentio-fd-anim-dur, 800ms) ease var(--sentio-fd-anim-delay, 0ms);
}
.sentio-fd--anim-draw-right.sentio-fd--visible .sentio-fd__side {
	clip-path: inset(0 0 0 0);
}

/* Draw from center */
.sentio-fd--anim-draw-center .sentio-fd__side {
	clip-path: inset(0 50% 0 50%);
	transition: clip-path var(--sentio-fd-anim-dur, 800ms) ease var(--sentio-fd-anim-delay, 0ms);
}
.sentio-fd--anim-draw-center.sentio-fd--visible .sentio-fd__side {
	clip-path: inset(0 0 0 0);
}

/* Fade in */
.sentio-fd--anim-fade-in {
	opacity: 0;
	transition: opacity var(--sentio-fd-anim-dur, 800ms) ease var(--sentio-fd-anim-delay, 0ms);
}
.sentio-fd--anim-fade-in.sentio-fd--visible {
	opacity: 1;
}

/* Scale in */
.sentio-fd--anim-scale-in {
	transform: scaleX(0);
	transition: transform var(--sentio-fd-anim-dur, 800ms) ease var(--sentio-fd-anim-delay, 0ms);
}
.sentio-fd--anim-scale-in.sentio-fd--visible {
	transform: scaleX(1);
}

/* Element entrance delay */
.sentio-fd--anim-draw-left .sentio-fd__el,
.sentio-fd--anim-draw-right .sentio-fd__el,
.sentio-fd--anim-draw-center .sentio-fd__el {
	opacity: 0;
	transition: opacity 0.3s ease;
	transition-delay: var(--sentio-fd-anim-dur, 800ms);
}
.sentio-fd--anim-draw-left.sentio-fd--visible .sentio-fd__el,
.sentio-fd--anim-draw-right.sentio-fd--visible .sentio-fd__el,
.sentio-fd--anim-draw-center.sentio-fd--visible .sentio-fd__el {
	opacity: 1;
}

/* ─── Edge Fading (Diff #8) ─── */
/* Applied via inline selector from control; base mask support */
.sentio-fd__side {
	-webkit-mask-image: none;
	mask-image: none;
}