/* ============================================================
 * 奇航电子官网 · 首页「展会细带」（v13 方案）
 * 仅在首页通过 _expo.php partial 加载，全部选择器带 .expo-sec 前缀，不影响其他页面。
 *
 * 结构：96px 细带，三区横排 [logo] │ [两行文字] [状态胶囊 + 官网]
 * 文字层级：元信息（参展/日期/地点展位）在上，展会名称在下 —— 用户先筛「何时何地」，再看「是什么」
 * 入场：滚到视口才播「点亮」（底缘扫光 + logo 亮起 + 文字错峰上浮 + 胶囊回弹）
 *
 * 与 demo v13 的唯一差异（Tang 要求）：
 *   底缘那根 hover 描线加粗加强 —— 1px/50% → 2px/58%，常驻发丝线也略加深。
 * ============================================================ */

.expo-sec {
	position: relative;
	width: 100%;
	height: 96px;
	overflow: hidden;
	background: #fff;
	border-top: 1px solid #edf1f5;
}

/* 常驻发丝线（下缘） */
.expo-sec::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #e3e9ef;
	z-index: 2;
}

/* hover 描线：2px 品牌蓝，从左向右拉开 */
.expo-sec::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: rgba(0, 92, 158, .58);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .9s cubic-bezier(.22, .61, .36, 1);
	z-index: 3;
}

.expo-sec:hover::after {
	transform: scaleX(1);
}

/* 入场扫线：滚到视口时从左扫过，扫完淡出，不留常态 */
.expo-sec .expo-sweep {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	z-index: 4;
	background: linear-gradient(90deg, rgba(0, 92, 158, 0) 0%, #005c9e 35%, #2b8ac9 55%, rgba(0, 92, 158, 0) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	opacity: 0;
	pointer-events: none;
}

.expo-sec.run .expo-sweep {
	animation: expoSweep 1.25s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes expoSweep {
	0%   { transform: scaleX(0); opacity: 0; }
	8%   { opacity: 1; }
	62%  { transform: scaleX(1); opacity: 1; }
	100% { transform: scaleX(1); opacity: 0; }
}

/* ===== 轮播容器 ===== */
.expo-sec .expo-slides {
	position: absolute;
	inset: 0;
}

.expo-sec .expo-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

.expo-sec .expo-slide.on {
	opacity: 1;
	pointer-events: auto;
}

.expo-sec .expo-item {
	width: 88%;
	max-width: 1400px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 0 4px;
	text-decoration: none;
	color: inherit;
}

/* ===== logo 区：点亮 + 光晕呼吸 ===== */
.expo-sec .expo-logo-wrap {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	width: 59px;
	height: 52px;
}

/* 展台灯光晕：logo 后方，周期呼吸（尺寸控制在细带内，避免被 overflow 裁切） */
.expo-sec .expo-logo-wrap::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 92px;
	height: 66px;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center, rgba(0, 92, 158, .34) 0%, rgba(0, 92, 158, .13) 45%, rgba(0, 92, 158, 0) 72%);
	border-radius: 50%;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

.expo-sec .expo-logo {
	position: relative;
	z-index: 1;
	height: 52px;
	width: auto;
	display: block;
}

/* 未进入视口：暗置 */
.expo-sec .expo-logo {
	opacity: .28;
	transform: scale(.9);
	filter: grayscale(.35);
}

.expo-sec.run .expo-logo {
	animation: expoLogoLight .95s cubic-bezier(.2, .7, .3, 1) .12s both;
}

@keyframes expoLogoLight {
	0%   { opacity: .28; transform: scale(.9);   filter: grayscale(.35) brightness(.95); }
	48%  { opacity: 1;   transform: scale(1.055); filter: grayscale(0) brightness(1.06); }
	100% { opacity: 1;   transform: scale(1);    filter: grayscale(0) brightness(1); }
}

/* 光晕：点亮瞬间扩散一次，随后慢呼吸 */
.expo-sec.run .expo-logo-wrap::before {
	animation: expoGlow 4.6s ease-in-out .3s infinite;
}

@keyframes expoGlow {
	0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.55); }
	14%  { opacity: .85; transform: translate(-50%, -50%) scale(1.12); }
	26%  { opacity: .42; transform: translate(-50%, -50%) scale(1); }
	58%  { opacity: .22; transform: translate(-50%, -50%) scale(1.03); }
	100% { opacity: .5;  transform: translate(-50%, -50%) scale(1.05); }
}

.expo-sec .expo-item:hover .expo-logo {
	transform: scale(1.04);
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}

/* 占位（无 logo 的展会）：等尺寸，保证轮播高度不跳 */
.expo-sec .expo-ph {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 9px;
	background: #f6f9fc;
	border: 1px solid #e6eef5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.expo-sec .expo-ph svg {
	width: 22px;
	height: 22px;
	stroke: #a8b6c3;
	stroke-width: 1.4;
	fill: none;
	stroke-linecap: round;
}

/* 竖分隔线 */
.expo-sec .expo-divider {
	flex: none;
	width: 1px;
	height: 44px;
	background: #e6ecf2;
	transition: background .3s;
	opacity: .5;
}

.expo-sec.run .expo-divider {
	animation: expoFadeGrow .7s ease .35s both;
}

@keyframes expoFadeGrow {
	0%   { opacity: 0; transform: scaleY(.4); }
	100% { opacity: 1; transform: scaleY(1); }
}

.expo-sec .expo-item:hover .expo-divider {
	background: #d3dde7;
}

/* ===== 文字区：两行 ===== */
.expo-sec .expo-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.expo-sec .expo-row1 {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.expo-sec .expo-tag {
	font-size: 10px;
	letter-spacing: .18em;
	color: #5a6672;
	border: 1px solid #dde4ea;
	border-radius: 3px;
	padding: 3px 7px 3px 9px;
	flex: none;
	line-height: 1;
	font-weight: 500;
	transition: border-color .3s, color .3s;
}

.expo-sec .expo-item:hover .expo-tag {
	border-color: #b9c9d6;
	color: #3d4956;
}

.expo-sec .expo-date {
	font-size: 13.5px;
	letter-spacing: .045em;
	color: #33404d;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	flex: none;
	white-space: nowrap;
}

.expo-sec .expo-dot-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #ccd5de;
	flex: none;
}

/* 地点 · 展位。颜色用 #647079 而非 demo 的 #8e99a4：
   后者 12.5px 下 WCAG 仅 3.0 不合格；#647079 是 5.08。 */
.expo-sec .expo-meta {
	font-size: 12.5px;
	color: #647079;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.expo-sec .expo-meta .booth {
	color: #3d4956;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: .08em;
}

/* 展会名称：这一块的主体 */
.expo-sec .expo-name {
	font-size: 17px;
	font-weight: 600;
	color: #0f1820;
	letter-spacing: .012em;
	line-height: 1.35;
	transition: color .25s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.expo-sec .expo-item:hover .expo-name {
	color: #000;
}

/* 文字错峰入场（滚到视口才跑） */
.expo-sec .expo-row1,
.expo-sec .expo-name {
	opacity: 0;
}

.expo-sec.run .expo-row1 {
	animation: expoRiseIn .62s cubic-bezier(.2, .7, .3, 1) .42s both;
}

.expo-sec.run .expo-name {
	animation: expoRiseIn .62s cubic-bezier(.2, .7, .3, 1) .54s both;
}

@keyframes expoRiseIn {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ===== 右侧：状态胶囊 + 官网 ===== */
.expo-sec .expo-right {
	flex: none;
	display: flex;
	align-items: center;
	gap: 16px;
}

.expo-sec .expo-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 500;
	color: #0b4f7d;
	background: #f1f7fc;
	border: 1px solid #dbe9f5;
	border-radius: 999px;
	padding: 7px 14px;
	letter-spacing: .02em;
	white-space: nowrap;
	opacity: 0;
	position: relative;
}

.expo-sec.run .expo-status {
	animation: expoPillPop .7s cubic-bezier(.34, 1.42, .52, 1) .78s both;
}

@keyframes expoPillPop {
	0%   { opacity: 0; transform: scale(.84) translateY(5px); }
	58%  { opacity: 1; transform: scale(1.06) translateY(0); }
	100% { opacity: 1; transform: scale(1); }
}

.expo-sec .expo-status .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #005c9e;
	flex: none;
	position: relative;
}

/* 圆点涟漪：常驻慢速，提示「这里有活的信息」 */
.expo-sec .expo-status .dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0, 92, 158, .45);
	transform: translate(-50%, -50%);
	opacity: 0;
}

.expo-sec.run .expo-status .dot::after {
	animation: expoRipple 2.9s ease-out 1.4s infinite;
}

@keyframes expoRipple {
	0%   { width: 5px;  height: 5px;  opacity: .55; }
	70%  { width: 19px; height: 19px; opacity: 0; }
	100% { width: 19px; height: 19px; opacity: 0; }
}

.expo-sec .expo-status.live {
	color: #0a7f4f;
	background: #f0faf5;
	border-color: #d3eddf;
}

.expo-sec .expo-status.live .dot {
	background: #0a8a56;
}

.expo-sec .expo-status.live .dot::after {
	background: rgba(10, 138, 86, .45);
}

.expo-sec .expo-official {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: #647079;
	flex: none;
	transition: color .3s;
	white-space: nowrap;
	opacity: 0;
}

.expo-sec.run .expo-official {
	animation: expoRiseIn .5s ease .9s both;
}

.expo-sec .expo-official svg {
	width: 10px;
	height: 10px;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
	transition: transform .25s ease;
}

.expo-sec .expo-item:hover .expo-official {
	color: #005c9e;
}

.expo-sec .expo-item:hover .expo-official svg {
	transform: translate(1.5px, -1.5px);
}

/* ===== 轮播点 ===== */
.expo-sec .expo-dots {
	position: absolute;
	right: 6%;
	bottom: 8px;
	display: none;
	gap: 6px;
	z-index: 5;
}

.expo-sec .expo-dots.many {
	display: flex;
}

.expo-sec .expo-dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d3dae1;
	cursor: pointer;
	transition: .25s;
}

.expo-sec .expo-dots i.on {
	background: #33404d;
}

/* ===== 移动端 ===== */
@media (max-width: 900px) {
	.expo-sec {
		height: 78px;
	}

	.expo-sec .expo-item {
		width: 92%;
		gap: 12px;
	}

	.expo-sec .expo-logo-wrap {
		width: 43px;
		height: 38px;
	}

	.expo-sec .expo-logo {
		height: 38px;
	}

	.expo-sec .expo-logo-wrap::before {
		width: 80px;
		height: 64px;
	}

	.expo-sec .expo-ph {
		width: 38px;
		height: 38px;
	}

	.expo-sec .expo-ph svg {
		width: 16px;
		height: 16px;
	}

	.expo-sec .expo-divider {
		height: 34px;
	}

	.expo-sec .expo-body {
		gap: 5px;
	}

	.expo-sec .expo-name {
		font-size: 14px;
	}

	/* 窄屏元信息一行放不下：地点让位，只留标签+日期 */
	.expo-sec .expo-meta,
	.expo-sec .expo-dot-sep {
		display: none;
	}

	.expo-sec .expo-date {
		font-size: 12px;
	}

	.expo-sec .expo-status {
		font-size: 11.5px;
		padding: 5px 10px;
		gap: 6px;
	}

	.expo-sec .expo-status .dot {
		width: 4px;
		height: 4px;
	}

	.expo-sec .expo-official span {
		display: none;
	}

	.expo-sec .expo-tag {
		display: none;
	}

	.expo-sec .expo-dots {
		right: 4%;
	}
}

/* 系统「减弱动效」偏好 */
@media (prefers-reduced-motion: reduce) {
	.expo-sec.run .expo-logo-wrap::before,
	.expo-sec.run .expo-status .dot::after,
	.expo-sec.run .expo-sweep {
		animation: none !important;
	}

	.expo-sec .expo-row1,
	.expo-sec .expo-name,
	.expo-sec .expo-status,
	.expo-sec .expo-official,
	.expo-sec .expo-logo {
		opacity: 1;
		transform: none;
		filter: none;
		animation: none !important;
	}

	.expo-sec::after {
		transition: none;
	}
}